Sha256: 00038ccc49d7f51639c202f8cc853663895d2b5ead46ac8cb6819c7b399479a4

Contents?: true

Size: 1.44 KB

Versions: 13

Compression:

Stored size: 1.44 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},
  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,
  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,
    tag = 'h3',
    text,
    variant = null,
  } = props

  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
  const dataProps: {[key: string]: string | number} = buildDataProps(data)
  const classes = classnames(
    buildCss('pb_title_kit', `size_${size}`, variant, color),
    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

13 entries across 13 versions & 1 rubygems

Version Path
playbook_ui-11.6.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.5.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.7.0.pre.alpha.pre.guagechart1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.6.0 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.5.0.pre.alpha.datepicker1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.6.0.pre.alpha.rubocopperf1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.6.1.pre.alpha.rubocop.pre.performance1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.5.0.pre.alpha.pre.rubocop app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.6.0.pre.alpha.momenttz1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.5.0 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.4.0.pre.alpha.rubytheme2 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.4.0.pre.alpha.rubytheme1 app/pb_kits/playbook/pb_title/_title.tsx
playbook_ui-11.4.0 app/pb_kits/playbook/pb_title/_title.tsx