irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
116 lines (108 loc) • 2.76 kB
JavaScript
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"
/>
);