charts-optionselector.stories.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import React from 'react';
  2. import styled from '@emotion/styled';
  3. import {withInfo} from '@storybook/addon-info';
  4. import {action} from '@storybook/addon-actions';
  5. import {text} from '@storybook/addon-knobs';
  6. import OptionSelector from 'app/components/charts/optionSelector';
  7. import space from 'app/styles/space';
  8. const options = [
  9. {value: 'all', label: 'All things'},
  10. {value: 'none', label: 'No things'},
  11. {value: 'top5', label: 'Top 5 things that is a much longer title'},
  12. {value: 'nope', disabled: true, label: 'Disabled option'},
  13. {value: 'more', label: 'Additional option'},
  14. ];
  15. export default {
  16. title: 'Charts/OptionSelector',
  17. };
  18. export const Default = withInfo('Selector control for chart controls')(() => (
  19. <Container>
  20. <OptionSelector
  21. options={options}
  22. selected={text('selected', 'none')}
  23. title={text('title', 'Display')}
  24. menuWidth={text('menuWidth', '200px')}
  25. onChange={action('changed')}
  26. />
  27. </Container>
  28. ));
  29. Default.story = {
  30. name: 'default',
  31. };
  32. const Container = styled('div')`
  33. padding: ${space(2)} ${space(3)};
  34. `;