irisrad-ui/src/components/irisSideNav/IrisSideNav.stories.js

UI elements developered for IRIS R&D Group Inc

import React from "react";

import { IrisSideNav } from "./IrisSideNav"; // ui element

// export for StoryBook as a tab
export default {
  title: "Example/IrisSideNav", // could be represent on the url, example could be a root of the node
  component: IrisSideNav,
  parameters: {
    layout: "none", // centered | fullscreen | padded | none,
  },

  // custom arg types with storybook's add on here
  // https://storybook.js.org/docs/react/essentials/controls
  // argTypes: {
  //   backgroundColor: {control: "color"}
  // },
};

const navLinks = [
  {
    label: "HOME",
    // onClick: () => alert("HOME"),
    iconProps: {
      size: "medium",
      iconTitle: "local_fire_department",
      variant: "outlined",
    },
    onClick: () => {},
  },
  {
    label: "GIS MAP",
    // onClick: () => alert("GIS MAP"),
    iconProps: {
      size: "medium",
      iconTitle: "place",
      variant: "outlined",
    },
    onClick: () => {},
  },
  {
    label: "HEAT",
    // onClick: () => alert("HEAT MAP"),
    iconProps: {
      size: "medium",
      iconTitle: "thermostat",
      variant: "outlined",
    },
    onClick: () => {},
  },
];
const Template = (args) => (
  <div style={{ height: "100vh" }}>
    <IrisSideNav {...args} />
  </div>
);

// define a variant of the ui component
export const Primary = Template.bind({});
// assign arguement (props) to render the ui component
Primary.args = {
  links: navLinks,
  minWidth: 60,
  maxWidth: 300,
};