import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import BreakdownLegend from '.';

storiesOf('BreakdownLegend')
  .addDecorator(checkA11y)
  .add('should show search terms used for filtering', () => (
    <div
      style={{
        width: '100%',
      }}
    >
      <BreakdownLegend
        posts="4"
        searchTerms={['#CreativeDrive', 'work for people']}
        selectedMetric={{
          label: 'Impressions',
          key: 'impressions',
        }}
      />
    </div>
  ))
  .add('for long tag lists it should fade the overflowing content', () => (
    <div
      style={{
        width: '100%',
      }}
    >
      <BreakdownLegend
        posts="4"
        searchTerms={['#CreativeDrive', '#EasterWeekend', 'work for people', 'more tags that do not fit in here anyway']}
        selectedMetric={{
          label: 'Impressions',
          key: 'impressions',
        }}
      />
    </div>
  ))
  .add('if there are no filters it displays "X posts in total"', () => (
    <div
      style={{
        width: '100%',
      }}
    >
      <BreakdownLegend
        posts="4"
        selectedMetric={{
          label: 'Impressions',
          key: 'impressions',
        }}
      />
    </div>
  ))
  ;