placeholder.stories.js 937 B

123456789101112131415161718192021222324252627282930
  1. import React from 'react';
  2. import {storiesOf} from '@storybook/react';
  3. import {withInfo} from '@storybook/addon-info';
  4. import {text, number} from '@storybook/addon-knobs';
  5. import Placeholder from 'app/components/placeholder';
  6. storiesOf('UI|Loaders/Placeholder', module).add(
  7. 'default',
  8. withInfo(
  9. 'When you want a rough sized placeholder for content that is loading asynchronously'
  10. )(() => (
  11. <div>
  12. <h4>Resizable square</h4>
  13. <Placeholder width={text('width', '200px')} height={text('height', '200px')} />
  14. <p>Content below the placeholder</p>
  15. <h4>Square with bottom gutter</h4>
  16. <Placeholder
  17. height={text('height', '200px')}
  18. bottomGutter={number('bottomGutter', 2)}
  19. />
  20. <p>Content below the placeholder</p>
  21. <h4>Round placeholder</h4>
  22. <Placeholder width="48px" height="48px" shape="circle" />
  23. <p>Content below the placeholder</p>
  24. </div>
  25. ))
  26. );