@navinc/base-react-components/src/label-over-value.story.js

Nav's Pattern Library

import React from 'react'
import { LabelOverValue, LabelOverValueContainer } from './label-over-value.js'
import readme from './label-over-value.readme.md'
import { theme } from './theme.js'

export default {
  title: 'General/LabelOverValue',
  component: LabelOverValue,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = (args) => <LabelOverValue {...args} />
Basic.args = {
  label: 'Balance',
  value: '$1000.40',
}

export const Composition = () => (
  <LabelOverValueContainer>
    <LabelOverValue label="Balance for that one person" value="$881,754" />
    <LabelOverValue label="Dollar amount" value="$1,754,234,234,234" />
    <LabelOverValueContainer borderColor={theme.sebastianRed200}>
      <LabelOverValue label="Judgments" value="4" />
      <LabelOverValue label="Amount" value="$81,754" />
    </LabelOverValueContainer>
  </LabelOverValueContainer>
)

Composition.parameters = {
  controls: { hideNoControlsWarning: true },
}