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

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import ProgressBar from './progress-bar'
import readme from './progress-bar.readme.md'

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

const Template = (args) => (
  <StyledDiv>
    <ProgressBar {...args} />
  </StyledDiv>
)
export const Basic = Template.bind({})

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

Basic.args = {
  bgColor: '#53E5D0',
  percent: 50,
}