Sha256: 67bb74ba2172de5e94631e69e50b08e1e6b4eac845fed8bd6c957e6d73e754e3

Contents?: true

Size: 1.56 KB

Versions: 36

Compression:

Stored size: 1.56 KB

Contents

import React from 'react'
import classnames from 'classnames'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'

type TitleProps = {
  aria?: {[key: string]: string},
  bold?: boolean,
  children?: React.ReactChild[] | React.ReactChild,
  className?: string,
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
  data?: {[key: string]: string},
  id?: string,
  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
  text?: string,
  variant?: null | "link",
} & GlobalProps

const Title = (props: TitleProps): React.ReactElement => {
  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
  const {
    aria = {},
    children,
    className,
    color,
    data = {},
    id,
    size = 3,
    bold = size === 3 ? false : true,
    tag = 'h3',
    text,
    variant = null,
  } = props

  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
  const dataProps: {[key: string]: string | number} = buildDataProps(data)

  const getBold = bold ? '' : 'thin'
  const classes = classnames(
    buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
    globalProps(props),
    className
  )
  const Tag: React.ReactElement | any = `${tag}`

  return (
    <Tag
        {...ariaProps}
        {...dataProps}
        className={classes}
        id={id}
    >
      {text || children}
    </Tag>
  )
}

export default Title

Version data entries

36 entries across 36 versions & 1 rubygems

Version Path
playbook_ui-12.26.1.pre.alpha.railsmultilevelimprovements842 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.1.pre.alpha.railsmultilevelimprovements837 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.1.pre.alpha.railsmultilevelimprovements835 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.1.pre.alpha.play716popoverkitcloseonclickissue833 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.multiselectfixes825 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown822 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.multiselectfixes821 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown818 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown817 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown815 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown813 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.alphafix812 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.alphafix810 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.railsmultilevelimprovements805 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.multiselectfixes798 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.multiselectfixes797 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-12.26.0.pre.alpha.multiselectfixes796 app/pb_kits/playbook/pb_title/_title.tsx