@uswds/uswds/packages/usa-header/src/usa-header.stories.js

Open source UI components and visual style guide for U.S. government websites

import Component from "./usa-header.twig";
import ComponentExtended from "./usa-header--extended/usa-header--extended.twig";
import DefaultContent from "./usa-header.json";
import MegamenuContent from "./usa-header~megamenu.json";
import ExtendedContent from "./usa-header--extended/usa-header--extended.json";
import ExtendedMegamenuContent from "./usa-header--extended/usa-header--extended-megamenu.json";
import navSecondaryContent from "../../usa-nav/src/usa-nav__secondary/usa-nav__secondary.json";
import { SmallContent as SmallSearchContent } from "../../usa-search/src/content";
import TitleContent from "../../usa-site-title/src/usa-site-title.json";
import navigation from "./index";
import accordion from "../../usa-accordion/src/index";

export default {
  title: "Components/Header",
  args: {
    // Default search settings - Alternatively override in `usa-header.json`
    search: {
      ...SmallSearchContent,
      search_js: true,
    },
    ...TitleContent,
  },
  decorators: [
    (Story) => {
      accordion.off?.();
      navigation.off?.();

      const story = Story();

      window.requestAnimationFrame(() => {
        accordion.on();
        navigation.on();
      });

      return story;
    },
  ],
};

const Template = (args) => Component(args);
const ExtendedTemplate = (args) => ComponentExtended(args);

export const Default = Template.bind({});
Default.args = DefaultContent;

export const Megamenu = Template.bind({});
Megamenu.args = {
  ...MegamenuContent,
};

export const Extended = ExtendedTemplate.bind({});
Extended.args = {
  ...ExtendedContent,
  navSecondaryContent: {
    ...navSecondaryContent,
    search: true,
  },
};

export const ExtendedMegamenu = ExtendedTemplate.bind({});
ExtendedMegamenu.args = {
  ...ExtendedMegamenuContent,
  navSecondaryContent: {
    ...navSecondaryContent,
    search: true,
  },
};