irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
66 lines (60 loc) • 1.53 kB
JavaScript
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,
};