@navinc/base-react-components/src/comparison-scale-with-info.story.js

Nav's Pattern Library

import { ComparisonScaleWithInfo } from './comparison-scale.js'
export default {
  title: 'General/ComparisonScaleWithInfo',
  component: ComparisonScaleWithInfo,
}

export const Basic = (args) => {
  return (
    <>
      <ComparisonScaleWithInfo key={0} {...args[0]} />
      <ComparisonScaleWithInfo key={1} {...args[1]} />
      <ComparisonScaleWithInfo key={2} {...args[2]} />
      <ComparisonScaleWithInfo key={2} {...args[3]} />
    </>
  )
}

Basic.args = [
  {
    selected: 0,
    options: ['Low', 'Medium', 'High'],
    info: '$0',
  },
  {
    selected: 1,
    options: ['Low', 'Medium', 'High'],
    info: '3.3% - 6.6% monthly interest rate',
  },
  {
    selected: 2,
    options: ['Low', 'Medium', 'High'],
    info: '$0 introductory annual fee for the first year, then $99',
  },
  {
    selected: -1,
    options: ['Low', 'Medium', 'High'],
    info: 'bad data that registers as N/A',
  },
]