aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/toolbar/toolbar.test.tsx
blob: 23b13c17d6e2a96948adb910a4730f86644ed250 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '../../../../tests/utils';
import { Toolbar } from './toolbar';

const nav = [
  { id: 'home-link', href: '/', label: 'Home' },
  { id: 'blog-link', href: '/blog', label: 'Blog' },
  { id: 'cv-link', href: '/cv', label: 'CV' },
  { id: 'contact-link', href: '/contact', label: 'Contact' },
];

describe('Toolbar', () => {
  it('renders a navigation menu', () => {
    render(<Toolbar nav={nav} searchPage="#" />);
    expect(rtlScreen.getByRole('navigation')).toBeInTheDocument();
  });
});
0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
import { ComponentMeta, ComponentStory } from '@storybook/react';
import headingButtonStories from '../buttons/heading-button.stories';
import Widget from './widget';

/**
 * Widget - Storybook Meta
 */
export default {
  title: 'Molecules/Layout/Widget',
  component: Widget,
  args: {
    withBorders: false,
    withScroll: false,
  },
  argTypes: {
    children: {
      control: {
        type: 'text',
      },
      description: 'The widget body',
      type: {
        name: 'string',
        required: true,
      },
    },
    className: {
      control: {
        type: 'text',
      },
      description: 'Set additional classnames to the widget wrapper.',
      table: {
        category: 'Styles',
      },
      type: {
        name: 'string',
        required: false,
      },
    },
    expanded: {
      control: {
        type: 'boolean',
      },
      description: 'The widget state (expanded or collapsed)',
      table: {
        category: 'Options',
        defaultValue: { summary: true },
      },
      type: {
        name: 'boolean',
        required: false,
      },
    },
    level: headingButtonStories.argTypes?.level,
    title: {
      control: {
        type: 'text',
      },
      description: 'The widget title.',
      type: {
        name: 'string',
        required: true,
      },
    },
    withBorders: {
      control: {
        type: 'boolean',
      },
      description: 'Define if the content should have borders.',
      table: {
        category: 'Options',
        defaultValue: { summary: false },
      },
      type: {
        name: 'boolean',
        required: false,
      },
    },
    withScroll: {
      control: {
        type: 'boolean',
      },
      description: 'Define if the widget should be scrollable',
      table: {
        category: 'Options',
        defaultValue: { summary: false },
      },
      type: {
        name: 'boolean',
        required: false,
      },
    },
  },
} as ComponentMeta<typeof Widget>;

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

/**
 * Widget Stories - Expanded
 */
export const Expanded = Template.bind({});
Expanded.args = {
  children: 'Widget body',
  expanded: true,
  level: 2,
  title: 'Widget title',
};

/**
 * Widget Stories - Collapsed
 */
export const Collapsed = Template.bind({});
Collapsed.args = {
  children: 'Widget body',
  expanded: false,
  level: 2,
  title: 'Widget title',
};