glide-design-system/src/stories/breadcrumbs/Breadcrumbs.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 { Breadcrumbs } from "../../lib/components/breadcrumbs/Breadcrumbs";
import { BrowserRouter as Router } from "react-router-dom";

export default {
  title: "Components/Breadcrumbs",
  component: Breadcrumbs,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Breadcrumbs component is used to display a breadcrumb navigation. It accepts a `links` prop which is an array of link objects. Each link object should contain `text` for the display text and `href` for the link URL.",
      },
    },
  },
  argTypes: {
    separator: {
      control: "text",
      description: "The separator which separates the breadcrumbs.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the breadcrumbs component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the breadcrumbs component for custom styling.",
    },
    labelStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the label of the breadcrumbs component for custom styling.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the breadcrumbs component for custom styling.",
    },
    iconStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the icon for custom styling.",
    },
    children: { table: { disable: true } }, // Hide the 'children' property control
  },
};

const Template = (args) => {
  return (
    <Router>
      <Breadcrumbs {...args}>
        <a href="">Home</a>
        <a href="">Profile</a>
      </Breadcrumbs>
    </Router>
  );
};

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

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

export const CustomSeparator = Template.bind({});
CustomSeparator.args = {
  separator: ">>",
};

CustomSeparator.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Breadcrumbs with custom separator.",
    },
  },
};

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

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

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

CustomLabelStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Breadcrumbs with custom label style.",
    },
  },
};

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

CustomContainerStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Breadcrumbs with custom container style.",
    },
  },
};

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

CustomIconStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Breadcrumbs with custom icon style.",
    },
  },
};