irisrad-ui/src/components/irisModal/IrisModal.stories.js

UI elements developered for IRIS R&D Group Inc

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",
// };