Sha256: ab69dda4984d1ca0bbc7414eddc4309605eefab7210f7ca977fdab15b82c1549

Contents?: true

Size: 1.32 KB

Versions: 34

Compression:

Stored size: 1.32 KB

Contents

/* @flow */

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

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

import { Body, Title } from '../'
import { globalProps } from '../utilities/globalProps.js'

type TitleCountProps = {
  align: "center" | "left" | "right",
  aria?: object,
  className?: string,
  count?: Numeric,
  dark?: boolean,
  data?: object,
  id?: string,
  title?: string,
  size?: "lg" | "sm",
};

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

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

  const formatCount = count.toLocaleString()

  return (
    <div
        {...ariaProps}
        {...dataProps}
        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}
      >
        <If condition={count}>{formatCount}</If>
      </Body>

    </div>
  )
}

export default TitleCount

Version data entries

34 entries across 34 versions & 1 rubygems

Version Path
playbook_ui-7.3.0.pre.alpha2 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.7.0.pre.alpha1 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.7.0 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.6.1 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.0.pre.alpha10 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.6.0 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.5.2 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha12 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha11 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha10 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha9 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.5.1 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-6.5.0 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha8 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha7 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha6 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha5 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha4 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha3 app/pb_kits/playbook/pb_title_count/_title_count.jsx
playbook_ui-7.0.1.pre.alpha2 app/pb_kits/playbook/pb_title_count/_title_count.jsx