summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/links/nav-link.stories.tsx
blob: 7f7a334c55e0e5e987648dbf88feaf96d5cba918 (plain)
1
2
3
4
5
6
7
8
9
10
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted *
import { ComponentMeta, ComponentStory } from '@storybook/react';
import NavLinkComponent from './nav-link';

/**
 * NavLink - Storybook Meta
 */
export default {
  title: 'Atoms/Typography/Links',
  component: NavLinkComponent,
  argTypes: {
    href: {
      control: {
        type: 'text',
      },
      description: 'The link target.',
      type: {
        name: 'string',
        required: true,
      },
    },
    label: {
      control: {
        type: 'text',
      },
      description: 'The link label.',
      type: {
        name: 'string',
        required: true,
      },
    },
    logo: {
      control: {
        type: null,
      },
      description: 'The link logo.',
      type: {
        name: 'string',
        required: true,
      },
    },
  },
} as ComponentMeta<typeof NavLinkComponent>;

const Template: ComponentStory<typeof NavLinkComponent> = (args) => (
  <NavLinkComponent {...args} />
);

/**
 * Links Stories - Nav Link
 */
export const NavLink = Template.bind({});
NavLink.args = {
  href: '#',
  label: 'A nav link',
};
an> e, 'erb', /<%=?(?:[^\r\n]|[\r\n](?!=begin)|[\r\n]=begin\s(?:[^\r\n]|[\r\n](?!=end))*[\r\n]=end)+?%>/g ); }), n.hooks.add('after-tokenize', function (e) { n.languages['markup-templating'].tokenizePlaceholders(e, 'erb'); }); })(Prism);