@navinc/base-react-components/src/loading-dots.story.js

Nav's Pattern Library

import { LoadingDots, Dot as DotComponent, DotWrapper as DotWrapperComponent } from './loading-dots.js'
import readme from './loading-dots.readme.md'

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

export const Basic = (args) => <LoadingDots {...args} />

Basic.argTypes = {
  variation: {
    type: 'select',
    options: ['purple', 'green', 'inverted'],
  },
}
Basic.args = {
  variation: 'inverted',
}

export const Dot = (args) => <DotComponent {...args} />

export const DotWrapper = (args) => (
  <DotWrapperComponent {...args}>
    <DotComponent />
    <DotComponent />
    <DotComponent />
  </DotWrapperComponent>
)