@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-pi-menu/stzh-pi-menu.stories.js

@@ -0,0 +1,138 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-pi-menu';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-pi-menu></stzh-pi-menu>
+`;
+
+export default {
+  title: 'Components/PublizistischeInhalte/PiMenu',
+  component: COMPONENT_NAME,
+  parameters: {
+    stzh: {
+      activeTheme: 'stzh-theme-pi-lemongrass'
+    },
+    actions: {
+      handles: ['stzhOpen', 'stzhOpened', 'stzhClose', 'stzhClosed']
+    },
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('accordion-item'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+const menuItems = [
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#',
+        active: true
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#'
+  }
+];
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    heading: 'Menu',
+    subheading: 'Menu Subheading',
+    menuItems: menuItems
+  }
+};