glide-design-system/src/stories/navbarLayout/NavbarLayout.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import { NavbarLayout } from "../../lib/components/Navbar/NavbarLayout";

export default {
  title: "Components/NavbarLayout",
  component: NavbarLayout,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The NavbarLayout component is used to create a responsive and customizable navigation bar layout for an application. It typically contains navigation links, brand logos, and other interactive elements. The component supports various customization options, including styling, positioning, and layout adjustments.",
      },
    },
  },
  argTypes: {
    children: {
      control: "",
      description:
        "The content to be rendered inside the navbar, such as links, buttons, and logos.",
    },
    position: {
      control: "radio",
      description:
        "Specifies the position of the navbar, such as fixed, static, or absolute.",
      options: ["fixed", "static", "absolute"],
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the navbar component for custom styling.",
    },
    navbarContainerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the navbar component for custom styling.",
    },
    size: {
      control: "radio",
      description:
        "Defines the size of the navbar, which can be small, medium, or large.",
      options: ["small", "medium", "large"],
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the navbar component for custom styling.",
    },
  },
};

const Template = (args) => {
  return <NavbarLayout {...args}>Home</NavbarLayout>;
};

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

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the NavbarLayout component.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    backgroundColor: "#d7d7d7",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Icon Button with custom style.",
    },
  },
};

export const CustomNavbarContainerStyle = Template.bind({});
CustomNavbarContainerStyle.args = {
  navbarContainerStyle: {
    border: "1px solid red",
  },
};

CustomNavbarContainerStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Icon Button with custom navbar container style.",
    },
  },
};