Sha256: 7885ffb7fdc03178078c4a1957b4c4f6edae0879aea726ea0129aab49bca9292

Contents?: true

Size: 1.14 KB

Versions: 1

Compression:

Stored size: 1.14 KB

Contents

/* @flow */

import React from 'react'

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

type CurrencyProps = {
  align?: 'left' | 'center' | 'right',
  amount: string,
  className?: string,
  label?: string,
  separator?: '.' | ',',
  size?: 'sm' | 'lg',
  symbol?: string,
}

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

const Currency = ({
  align = 'left',
  amount,
  className,
  label = '',
  separator = '.',
  size = 'sm',
  symbol = '$',
}: CurrencyProps) => {
  const [whole, decimal = '00'] = amount.split(separator)

  return (
    <div className={buildCss('pb_currency_kit', align, className)}>
      <Caption>{label}</Caption>

      <div className="pb_currency_wrapper">
        <Body
            className="dollar_sign"
            color="light"
        >
          {symbol}
        </Body>

        <Title
            className="pb_currency_value"
            size={sizes[size]}
        >
          {`${whole}${separator}`}
        </Title>

        <Body
            className="unit"
            color="light"
        >
          {decimal}
        </Body>
      </div>
    </div>
  )
}

export default Currency

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
playbook_ui-4.0.0 app/pb_kits/playbook/pb_currency/_currency.jsx