Sha256: 91f0370a3aa8a06a2f6bcddd8d07fd497c8d35da7c7b06de513f2c0954a69ed8

Contents?: true

Size: 1.09 KB

Versions: 4

Compression:

Stored size: 1.09 KB

Contents

/* @flow */

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

import { Body, Caption, Title } from '../'
import { buildCss } from '../utilities/props'

type CurrencyProps = {
  align?: 'left' | 'center' | 'right',
  className: String,
  currencySymbol: String,
  label?: String,
  separator?: '.' | ',',
  size?: 'sm' | 'lg',
  value?: String,
  units?: String,
}

const symbolCSS = (currencySymbol) => {
  return classnames({
    'dollar_sign': currencySymbol === '$',
  })
}

const sizes = {
  lg: 1,
  sm: 2,
}

const Currency = ({
  align = 'left',
  currencySymbol = '$',
  label = '',
  separator = '.',
  size = 'sm',
  units = '00',
  value,
}: CurrencyProps) => (
  <div className={buildCss('pb_currency_kit', align)}>
    <Caption>{label}</Caption>
    <div className="pb_currency_wrapper">
      <Body className={symbolCSS(currencySymbol)}>{currencySymbol}</Body>
      <Title
          className="pb_currency_value"
          size={sizes[size]}
      >
        {`${value}${separator}`}
      </Title>
      <Body className="unit">{units}</Body>
    </div>
  </div>
)

export default Currency

Version data entries

4 entries across 4 versions & 1 rubygems

Version Path
playbook_ui-3.5.0 app/pb_kits/playbook/pb_currency/_currency.jsx
playbook_ui-3.4.0 app/pb_kits/playbook/pb_currency/_currency.jsx
playbook_ui-3.3.0 app/pb_kits/playbook/pb_currency/_currency.jsx
playbook_ui-3.2.0 app/pb_kits/playbook/pb_currency/_currency.jsx