Sha256: 370a50536d593ceee7b1e608ee579bf9c3a416a1d9a2c19b4c60be2a0fe27319

Contents?: true

Size: 1.61 KB

Versions: 164

Compression:

Stored size: 1.61 KB

Contents

/* @flow */

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

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

import Body from '../pb_body/_body'
import Title from '../pb_title/_title'

type TitleCountProps = {
  align: "center" | "left" | "right",
  aria?: { [key: string]: string },
  className?: string,
  count?: number,
  dark?: boolean,
  data?: { [key: string]: string },
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
  id?: string,
  title?: string,
  size?: "lg" | "sm",
};

const TitleCount = (props: TitleCountProps): React.ReactElement => {
  const {
    align = 'left',
    aria = {},
    className,
    dark = false,
    data = {},
    htmlOptions = {},
    count,
    id,
    title,
    size = 'sm' } = props
  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const htmlProps = buildHtmlProps(htmlOptions)

  const css = classnames(
    buildCss('pb_title_count_kit', align, size),
    globalProps(props),
    className
  )

  const formatCount = count.toLocaleString()

  return (
    <div
        {...ariaProps}
        {...dataProps}
        {...htmlProps}
        className={css}
        id={id}
    >
      <Title
          className={title !== undefined ? 'pb_title_count_text' : ''}
          dark={dark}
          size={size === 'lg' ? 3 : 4}
          text={title}
      />

      <Body
          color="light"
          dark={dark}
      >
        {count &&
          formatCount
        }
      </Body>

    </div>
  )
}

export default TitleCount

Version data entries

164 entries across 164 versions & 1 rubygems

Version Path
playbook_ui-13.32.0.pre.alpha.PLAY14103236 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.play1416movealiaslogic3232 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.PBNTR342navtabbing3231 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.PBNTR342navtabbing3230 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.32.0 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.powercentrainplaybookpt23212 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.PLAY10863204 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.PLAY10863202 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.play1262iconstyles3172 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0.pre.alpha.play1262iconstyles3171 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.31.0 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.30.0.pre.alpha.play1367contenttagnoninputkits3159 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.30.0.pre.alpha.20240515remotebuildkitconversion3150 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.30.0.pre.alpha.PBNTR353draggablev53136 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.30.0 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.29.0.pre.alpha.removeduplicatekitexampleclass3063 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.29.0.pre.alpha.PBNTR329draggablev33060 app/pb_kits/playbook/pb_title_count/_title_count.tsx
playbook_ui-13.29.0.pre.alpha.PBNTR329draggablev33059 app/pb_kits/playbook/pb_title_count/_title_count.tsx