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