@axeptio/design-system/src/Core/Menu/Desktop/menu.stories.jsx

Design System for Axeptio

import React from 'react';
import Menu from './index';

export default {
  title: 'Core/Menu/Desktop',
  component: Menu
};

const Template = args => {
  return <Menu {...args} />;
};

export const Default = Template.bind({});
Default.args = {
  id: 'menu_stories',
  menu: [
    {
      name: 'Features',
      icon: 'ArrowDown',
      noAnimatedIcon: false,
      noRoughAnimation: false,
      submenu: [
        {
          name: 'Cookies widget',
          colorName: '#ffce43',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
          colorDescription: '#212121',
          img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
          link: '#',
          icon: 'Mail'
        },
        {
          name: 'Consent Widget',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
          img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
          link: '#'
        }
      ]
    },
    {
      name: 'Ressources',
      noRoughAnimation: false,
      noAnimatedIcon: false,
      submenu: [
        {
          name: 'User documentation',
          link: '#'
        },
        {
          name: 'Developer documentation',
          link: '#'
        },
        {
          name: 'Use case',
          link: '#'
        },
        {
          name: 'Blog',
          link: '#'
        }
      ]
    },
    {
      name: 'Features',
      icon: 'Mail',
      noAnimatedIcon: true,
      noRoughAnimation: true,
      submenu: [
        {
          name: 'Cookies widget',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
          img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
          link: '#',
          icon: null
        },
        {
          name: 'Consent Widget',
          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
          img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
          link: '#'
        }
      ]
    },
    {
      name: 'Price',
      link: '#'
    }
  ]
};