UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

121 lines (108 loc) 3.36 kB
import React from "react"; import { IrisModal } from "./IrisModal"; // ui element import { IrisGrid } from "../irisGrid"; import { IrisButton } from "../irisButton/IrisButton"; // export for StoryBook as a tab export default { title: "Example/IrisModal", // could be represent on the url, example could be a root of the node component: IrisModal, parameters: { layout: "center", }, // custom arg types with storybook's add on here // https://storybook.js.org/docs/react/essentials/controls argTypes: { backgroundColor: { control: "color" }, }, }; const BareBone = (args) => <IrisModal {...args} />; const HasChildren = (args) => ( <IrisModal {...args}> <div style={{ minWidth: "600px", maxHeight: "70vh", padding: "1em 2em", display: "flex", flexDirection: "column", justifyContent: "space-between", }} > {/* <h1>title</h1> <p style={{ flexGrow: 1 }}>content</p> <div style={{ marginLeft: "auto" }}> <button>confirm button</button> <button>dismiss button</button> </div> */} <div> <h1>Device summary</h1> <h1>device tag (London-4)</h1> <IrisGrid container> <IrisGrid container> <h1>overview</h1> </IrisGrid> <IrisGrid item sm={6} style={{ padding: "1em" }}> <h4>Date</h4> <h6># of defects</h6> </IrisGrid> <IrisGrid item sm={6} style={{ padding: "1em" }}> <h4>Device ID:</h4> <h6>12345</h6> </IrisGrid> <IrisGrid item sm={6} style={{ padding: "1em" }}> <h4 style={{ color: "red" }}>Colected Defects</h4> <h6>40</h6> </IrisGrid> {[ { defectTitle: "Crack", count: 38 }, { defectTitle: "Pothole Paved or Non-Paved", count: 1 }, { defectTitle: "Pothole paved surface", count: 1 }, ].map(({ defectTitle, count }, index) => ( <IrisGrid item sm={6} style={{ padding: "1em" }} key={index}> <h4>{defectTitle}</h4> <h6>{count}</h6> </IrisGrid> ))} <IrisGrid container> <h1>Flag details</h1> </IrisGrid> <IrisGrid item sm={6} style={{ padding: "1em" }}> <h4>Flag type</h4> <h6>N / A</h6> </IrisGrid> </IrisGrid> <IrisGrid container justifyContent="flex-end"> <IrisButton>Cancel</IrisButton> <IrisButton style={{ margin: "0 0.5rem" }} color="secondary"> Report </IrisButton> </IrisGrid> </div> </div> </IrisModal> ); // define a variant of the ui component export const BasicModal = BareBone.bind({}); BasicModal.args = { open: true, }; export const WithContent = HasChildren.bind({}); WithContent.args = { open: true, }; const Dual = (args) => ( <div> <IrisModal {...args}> <h1>demo</h1> </IrisModal> <IrisModal {...args} /> </div> ); export const DualModal = Dual.bind({}); DualModal.args = { open: false, }; // export const Secondary = Template.bind({}); // Secondary.args = { // label: "Button", // };