src/components/organisms/navbar/navbar.stories.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import type { Meta, StoryObj } from '@storybook/react';
import { Navbar } from './navbar';
import { NavbarItem } from './navbar-item';

const meta = {
  component: Navbar,
  title: 'Organisms/Navbar',
} satisfies Meta<typeof Navbar>;

export default meta;

type Story = StoryObj<typeof meta>;

export const OneItem: Story = {
  args: {
    children: (
      <NavbarItem icon="hamburger" id="main-nav" label="Nav">
        The main nav contents
      </NavbarItem>
    ),
  },
};

export const TwoItems: Story = {
  args: {
    children: (
      <>
        <NavbarItem icon="hamburger" id="main-nav" label="Nav">
          The main nav contents
        </NavbarItem>
        <NavbarItem icon="magnifying-glass" id="search" label="Search">
          A search form
        </NavbarItem>
      </>
    ),
  },
};

export const ThreeItems: Story = {
  args: {
    children: (
      <>
        <NavbarItem icon="hamburger" id="main-nav" label="Nav">
          The main nav contents
        </NavbarItem>
        <NavbarItem icon="magnifying-glass" id="search" label="Search">
          A search form
        </NavbarItem>
        <NavbarItem icon="cog" id="settings" label="Settings">
          A settings form
        </NavbarItem>
      </>
    ),
  },
};