@navinc/base-react-components/src/progress-bar.story.js

Nav's Pattern Library

import styled from 'styled-components'
import { ProgressBar } from './progress-bar.js'
import readme from './progress-bar.readme.md'
import { StandardCard } from './standard-card.js'
import { Copy } from './copy.js'
import { theme } from './themes/nav-purple.js'

const StyledDiv = styled.div`
  padding: 24px;
`
export default {
  title: 'General/ProgressBar',
  component: ProgressBar,
  parameters: {
    readme: { content: readme },
  },
}

const Template = (args) => (
  <StyledDiv>
    <Copy>No Card</Copy>
    <ProgressBar {...args} />
    <br />
    <Copy>In Card</Copy>
    <StandardCard>
      <ProgressBar {...args} />
    </StandardCard>
  </StyledDiv>
)
export const Basic = Template.bind({})

Basic.argTypes = {
  bgColor: {
    control: {
      type: 'color',
    },
  },
}

Basic.args = {
  bgColor: theme.navPrimary,
  percent: 50,
}