list.stories.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import React from 'react';
  2. import List from 'app/components/list';
  3. import ListItem from 'app/components/list/listItem';
  4. import {IconBusiness, IconLightning, IconSiren, IconTelescope} from 'app/icons';
  5. export default {
  6. title: 'Core/List',
  7. };
  8. export const _List = () => (
  9. <React.Fragment>
  10. <div className="section">
  11. <h4>Without Symbol</h4>
  12. <List>
  13. <ListItem>Item 1</ListItem>
  14. <ListItem>Item 2</ListItem>
  15. <ListItem>Item 3</ListItem>
  16. </List>
  17. </div>
  18. <div className="section">
  19. <h4>Bullet Symbol</h4>
  20. <List symbol="bullet">
  21. <ListItem>Item 1</ListItem>
  22. <ListItem>Item 2</ListItem>
  23. <ListItem>Item 3</ListItem>
  24. </List>
  25. </div>
  26. <div className="section">
  27. <h4>Custom Symbol</h4>
  28. <List symbol={<IconBusiness />}>
  29. <ListItem>Item 1</ListItem>
  30. <ListItem>Item 2</ListItem>
  31. <ListItem>Item 3</ListItem>
  32. </List>
  33. </div>
  34. <div className="section">
  35. <h4>Multiple Custom Symbol</h4>
  36. <List>
  37. <ListItem symbol={<IconTelescope />}>Item 1</ListItem>
  38. <ListItem symbol={<IconLightning />}>Item 2</ListItem>
  39. <ListItem symbol={<IconSiren />}>Item 3</ListItem>
  40. </List>
  41. </div>
  42. <div className="section">
  43. <h3>Numeric Symbol</h3>
  44. <List symbol="numeric">
  45. <ListItem>Item 1</ListItem>
  46. <ListItem>Item 2</ListItem>
  47. <ListItem>Item 3</ListItem>
  48. </List>
  49. </div>
  50. <div className="section">
  51. <h4>Colored Numeric Symbol</h4>
  52. <List symbol="colored-numeric">
  53. <ListItem>Item 1</ListItem>
  54. <ListItem>Item 2</ListItem>
  55. <ListItem>Item 3</ListItem>
  56. </List>
  57. </div>
  58. </React.Fragment>
  59. );