Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'

import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'

import Highlight from '../pb_highlight/_highlight'

type BodyProps = {
  aria?: object,
  className?: string,
  children?: array<React.ReactChild>,
  color?: 'default' | 'light' | 'lighter' | 'link',
  dark?: boolean,
  data?: object,
  highlightedText?: array<string>,
  highlighting?: boolean,
  id?: string,
  status?: 'negative' | 'neutral' | 'positive',
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
  text?: string,
}

const Body = (props: BodyProps) => {
  const {
    aria = {},
    className,
    children,
    color = '',
    data = {},
    highlightedText = [],
    highlighting = false,
    id,
    status,
    tag = 'div',
    text,
  } = props

  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const classes = classnames(
    buildCss('pb_body_kit', color, status),
    globalProps(props),
    className
  )
  const Tag = `${tag}`

  return (
    <Tag
        {...ariaProps}
        {...dataProps}
        className={classes}
        id={id}
    >
      <If condition={highlighting}>
        <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
        <Else />
        { text || children }
      </If>
    </Tag>
  )
}

export default Body

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
playbook_ui-10.19.0	app/pb_kits/playbook/pb_body/_body.jsx
playbook_ui-10.19.0.pre.lightbox	app/pb_kits/playbook/pb_body/_body.jsx
playbook_ui-10.19.0.pre.popover.alpha1	app/pb_kits/playbook/pb_body/_body.jsx