@appearhere/bloom/components/Indicators/IndicatorGroup.story.js

Appear Here's pattern library and styleguide

import React from 'react';
import { storiesOf } from '@storybook/react';
import IndicatorGroup from './IndicatorGroup';

import m from '../../globals/modifiers.css';

const simpleIndicators = [1, 2, 3, 4];

storiesOf('IndicatorGroup', module)
  .add('Default view', () => (
    <IndicatorGroup activeIndicator={ 2 }>
      { indicator => <div>{ simpleIndicators.map(i => indicator({ i, key: i })) }</div> }
    </IndicatorGroup>
  ))
  .add('Horizontal', () => (
    <IndicatorGroup activeIndicator={ 2 }>
      { indicator => (
        <div>
          { simpleIndicators.map(i => indicator({
            i,
            key: i,
            className: [m.dib, m.mt0, m.mrs].join(' '),
          })) }
        </div>
      ) }
    </IndicatorGroup>
  ));