spreadLayout.stories.js 993 B

12345678910111213141516171819202122232425262728293031323334
  1. import React from 'react';
  2. import {withInfo} from '@storybook/addon-info';
  3. import SpreadLayout from 'app/components/spreadLayout';
  4. export default {
  5. title: 'Deprecated/ComponentLayouts/SpreadLayout',
  6. };
  7. export const Default = withInfo(
  8. 'Children elements get spread out (flexbox space-between)'
  9. )(() => (
  10. <SpreadLayout style={{backgroundColor: '#fff'}}>
  11. <div style={{padding: 6, backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>Spread</div>
  12. <div style={{padding: 12, backgroundColor: 'rgba(0, 0, 0, 0.1)'}}>Layout</div>
  13. </SpreadLayout>
  14. ));
  15. Default.story = {
  16. name: 'default',
  17. };
  18. export const NoCenter = withInfo(
  19. 'Children elements get spread out (flexbox space-between)'
  20. )(() => (
  21. <SpreadLayout center={false} style={{backgroundColor: '#fff'}}>
  22. <div style={{padding: 6, backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>Spread</div>
  23. <div style={{padding: 12, backgroundColor: 'rgba(0, 0, 0, 0.1)'}}>Layout</div>
  24. </SpreadLayout>
  25. ));
  26. NoCenter.story = {
  27. name: 'no center',
  28. };