dropdownLink.stories.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import React from 'react';
  2. import {withInfo} from '@storybook/addon-info';
  3. import DropdownLink from 'app/components/dropdownLink';
  4. import MenuItem from 'app/components/menuItem';
  5. export default {
  6. title: 'UI/Dropdowns/DropdownLink',
  7. };
  8. export const AnchorLeftDefault = withInfo('Anchors to left side')(() => (
  9. <div className="clearfix">
  10. <DropdownLink title="Test">
  11. <MenuItem href="">Item</MenuItem>
  12. </DropdownLink>
  13. </div>
  14. ));
  15. AnchorLeftDefault.story = {
  16. name: 'anchor left (default)',
  17. };
  18. export const AnchorRight = withInfo('Anchors to right side')(() => (
  19. <div className="clearfix">
  20. <DropdownLink anchorRight title="Test">
  21. <MenuItem href="">Item</MenuItem>
  22. </DropdownLink>
  23. </div>
  24. ));
  25. AnchorRight.story = {
  26. name: 'anchor right',
  27. };
  28. export const NestedDropdown = withInfo('Nested dropdowns')(() => (
  29. <div className="clearfix">
  30. <DropdownLink title="Nested Menu">
  31. <li className="dropdown-submenu">
  32. <DropdownLink title="submenu" caret={false} isNestedDropdown alwaysRenderMenu>
  33. <MenuItem href="">Sub Item 1</MenuItem>
  34. <MenuItem href="">Sub Item 2</MenuItem>
  35. </DropdownLink>
  36. </li>
  37. <MenuItem href="">Item 2</MenuItem>
  38. </DropdownLink>
  39. </div>
  40. ));
  41. NestedDropdown.story = {
  42. name: 'nested dropdowns',
  43. };