@navinc/base-react-components/src/aside.story.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import * as theme from './theme.js'
import { withAppContext } from '../tests/with-app-context.js'
import RawAside from './aside.js'
import readme from './aside.readme.md'

const Stage = styled.div`
  padding: 32px;
`

const Aside = withAppContext(RawAside)

export default {
  title: 'General/Aside',
  component: Aside,
  parameters: {
    info: { text: readme },
  },
}

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

Basic.args = {
  title: 'A Title',
  color: 'azure',
  children: 'Some aside content',
}

Basic.argTypes = {
  color: {
    options: Object.entries(theme)
      .filter(([key, val]) => typeof val === 'string')
      .map(([key]) => key),
    control: {
      type: 'select',
    },
  },
}