import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import StoryRouter from 'storybook-vue-router';
import { boolean } from '@storybook/addon-knobs';
import { action } from "@storybook/addon-actions";
import ChecVerticalNavigation from '../../components/ChecVerticalNavigation.vue';
import ChecVerticalNavItem from '../../components/ChecVerticalNavItem.vue';

<Meta title="Components/Vertical navigation" component={ChecVerticalNavigation} />

# Vertical navigation

The Vertical navigation component uses the Vue router router-link component to render as native link tags. To implement
the ChecNavigation and ChecVerticalNavItem components, define a set of routes and wrap the child nav item components
in the parent navigation component.

<Props of={ChecVerticalNavigation} />

<Preview>
  <Story name="Default" decorators={[ StoryRouter({}) ]}>
    {{
      components: {
        ChecVerticalNavigation,
        ChecVerticalNavItem,
      },
      props: {
        showInline: {
          default: boolean('Show Inline Version', false),
        },
      },
      template: `
      <div class="py-16 flex bg-gray-200 justify-center">
        <ChecVerticalNavigation
          class="w-56"
          :inline="showInline"
        >
          <ChecVerticalNavItem to="#first">Hi I'm first</ChecVerticalNavItem>
          <ChecVerticalNavItem to="#second">Hi I'm second</ChecVerticalNavItem>
          <ChecVerticalNavItem to="#third">Hi I'm third</ChecVerticalNavItem>
          <ChecVerticalNavItem to="#forth">Hi I'm forth</ChecVerticalNavItem>
          <ChecVerticalNavItem to="#fifth">Hi I'm fifth</ChecVerticalNavItem>
        </ChecVerticalNavigation>
      </div>`
    }}
  </Story>
</Preview>