irisrad-ui/src/components/irisHeader/IrisHeader.stories.js

UI elements developered for IRIS R&D Group Inc

import React, { useState } from "react";
import logo from "../../assets/images/iris_logo.png";
import { IrisButton } from "../irisButton/IrisButton";
import { IrisIconButton } from "../irisIconButtons";
import IrisMenuToggle from "../irisIconButtons/IrisMenuToggle";
import { IrisMenu, IrisMenuItem } from "../irisMenu/IrisMenu";

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

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

const links = [
  {
    label: "home",
    node: (
      <a href="#" className="link">
        home
      </a>
    ),
  },
  {
    label: "About",
    node: (
      <a href="#" className="link">
        About
      </a>
    ),
  },
  {
    label: "Services",
    node: (
      <a href="#" className="link">
        Services
      </a>
    ),
  },
  {
    label: "Contact",
    node: (
      <a href="#" className="link">
        Contact
      </a>
    ),
  },
  {
    label: "Feedback",
    node: (
      <a href="#" className="link">
        Feedback
      </a>
    ),
  },
];

const logoComponent = (
  <a href="https://www.irisradgroup.com/" target="_blank">
    <img src={logo} alt="iris-logo" className="logo-img" height={50} />
  </a>
);

const hiddenLinks = [
  { label: "Profile", onClick: () => alert("profile") },
  { label: "My Account", onClick: () => alert("My Account") },
  { label: "Logout", onClick: () => alert("Logout") },
];

export const Primary = () => (
  <IrisHeader
    links={links}
    hiddenLinks={hiddenLinks}
    logoComponent={logoComponent}
  ></IrisHeader>
);

export const Secondary = () => (
  <IrisHeader
    logoComponent={logoComponent}
    headerTitle="Incident Portal"
    actionButtons={[
      <IrisButton
        active={window.location.pathname === "/"}
        iconProps={{
          iconTitle: "assessment",
        }}
        onClick={() => history.push("/")}
        // color="secondary"
      >
        Report
      </IrisButton>,
      <IrisButton
        active={window.location.pathname === "/report"}
        iconProps={{
          iconTitle: "summarize",
        }}
        color="secondary"
        onClick={() => history.push("/report")}
      >
        Summary
      </IrisButton>,
    ]}
    hiddenLinks={[
      { label: "Report", onClick: () => alert("Signing out") },
      { label: "Summary", onClick: () => alert("Signing out") },
      { label: "Logout", onClick: () => alert("Signing out") },
    ]}
    userName="Lucien"
  />
);