[#453] Storybook update

IntersectMBO · Mar 12, 2024 · 3cfb87a · 3cfb87a
1 parent dbe8c22
commit 3cfb87a
Show file tree

Hide file tree

Showing 13 changed files with 325 additions and 88 deletions.
diff --git a/govtool/frontend/.storybook/preview.tsx b/govtool/frontend/.storybook/preview.tsx
@@ -1,8 +1,12 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { ThemeProvider } from "@emotion/react";
 import { theme } from "../src/theme";
 import { MemoryRouter, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { I18nextProvider } from "react-i18next";
+import i18n from "../src/i18n";
+import { ModalProvider } from "../src/context/modal";
 
 const queryClient = new QueryClient();
 
@@ -19,26 +23,30 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <MemoryRouter>
-            <Routes>
-              <Route
-                path="/*"
-                element={
-                  <div
-                    style={{
-                      margin: "0px",
-                      padding: "0px",
-                      position: "relative",
-                    }}
-                  >
-                    <Story />
-                  </div>
-                }
-              />
-            </Routes>
-          </MemoryRouter>
-        </ThemeProvider>
+        <ModalProvider>
+          <I18nextProvider i18n={i18n}>
+            <ThemeProvider theme={theme}>
+              <MemoryRouter>
+                <Routes>
+                  <Route
+                    path="/*"
+                    element={
+                      <div
+                        style={{
+                          margin: "0px",
+                          padding: "0px",
+                          position: "relative",
+                        }}
+                      >
+                        <Story />
+                      </div>
+                    }
+                  />
+                </Routes>
+              </MemoryRouter>
+            </ThemeProvider>
+          </I18nextProvider>
+        </ModalProvider>
       </QueryClientProvider>
     ),
   ],

diff --git a/govtool/frontend/src/stories/DashboardCard.stories.ts b/govtool/frontend/src/stories/DashboardCard.stories.ts
@@ -21,9 +21,7 @@ export const DashboardCardComponent: Story = {
   args: {
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     firstButtonLabel: "first button",
-    imageHeight: 80,
     imageURL: IMAGES.govActionDelegateImage,
-    imageWidth: 115,
     secondButtonLabel: "second button",
     title: "Action card",
   },
@@ -38,13 +36,22 @@ export const DashboardCardComponent: Story = {
   },
 };
 
+export const WithDRepIdDashboardCardComponent: Story = {
+  args: {
+    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
+    firstButtonLabel: "first button",
+    imageURL: IMAGES.govActionDelegateImage,
+    secondButtonLabel: "second button",
+    title: "Action card",
+    cardId: "drep1gwsw9ckkhuwscj9savt5f7u9xsrudw209hne7pggcktzuw5sv32",
+  },
+};
+
 export const isLoadingDashboardCard: Story = {
   args: {
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     firstButtonLabel: "first button",
-    imageHeight: 80,
     imageURL: IMAGES.govActionDelegateImage,
-    imageWidth: 115,
     secondButtonLabel: "second button",
     title: "Action card",
     isLoading: true,
@@ -62,9 +69,7 @@ export const isProgressDashboardCard: Story = {
   args: {
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     firstButtonLabel: "first button",
-    imageHeight: 80,
     imageURL: IMAGES.govActionDelegateImage,
-    imageWidth: 115,
     secondButtonLabel: "second button",
     title: "Action card",
     inProgress: true,

diff --git a/govtool/frontend/src/stories/DashboardTopNav.stories.ts b/govtool/frontend/src/stories/DashboardTopNav.stories.ts
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { DashboardTopNav } from "@organisms";
-import { IMAGES } from "@/consts";
 import { within, userEvent, waitFor, screen } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 
@@ -15,7 +14,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const DashboardTopNavComponent: Story = {
-  args: { title: "Example title", isDrawer: true },
+  args: { title: "Example title" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText("Example title")).toBeInTheDocument();
@@ -31,16 +30,3 @@ export const DashboardTopNavComponent: Story = {
     });
   },
 };
-
-export const DashboardTopNavWithIcon: Story = {
-  args: {
-    title: "Example title",
-    isDrawer: true,
-    imageSRC: IMAGES.appLogoWithoutText,
-    imageHeight: 24,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByRole("img")).toBeInTheDocument();
-  },
-};
diff --git a/govtool/frontend/src/stories/DelegateActionRadio.stories.ts b/govtool/frontend/src/stories/DelegateActionRadio.stories.ts
@@ -68,3 +68,19 @@ export const ActionRadioActive: Story = {
     );
   },
 };
+
+export const ActionRadioOnlyTitle: Story = {
+  args: {
+    title: "Title",
+    value: "",
+    isChecked: false,
+  },
+};
+
+export const ActionRadioOnlyTitleChecked: Story = {
+  args: {
+    title: "Title",
+    value: "",
+    isChecked: true,
+  },
+};
diff --git a/govtool/frontend/src/stories/Input.stories.tsx b/govtool/frontend/src/stories/Input.stories.tsx
@@ -60,3 +60,8 @@ ErrorAndLabel.play = async ({ canvasElement }) => {
   expect(canvas.getByText("Label")).toBeInTheDocument();
   expect(canvas.getByTestId("error-message-error")).toBeInTheDocument();
 };
+
+export const WithHelpfulText = Template.bind({});
+WithHelpfulText.args = {
+  helpfulText: "Helpful text",
+};
diff --git a/govtool/frontend/src/stories/LinkWithIcon.stories.tsx b/govtool/frontend/src/stories/LinkWithIcon.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkWithIcon } from "@molecules";
+import { ICONS } from "@consts";
+
+const meta: Meta<typeof LinkWithIcon> = {
+  title: "Example/LinkWithIcon",
+  component: LinkWithIcon,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof LinkWithIcon> = {
+  args: {
+    label: "Default Link",
+  },
+};
+
+export const WithCustomIcon: StoryObj<typeof LinkWithIcon> = {
+  args: {
+    label: "Custom Icon Link",
+    icon: <img src={ICONS.link} />,
+  },
+};
diff --git a/govtool/frontend/src/stories/LoadingButton.stories.tsx b/govtool/frontend/src/stories/LoadingButton.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LoadingButton } from "@atoms";
+
+const meta = {
+  title: "Example/LoadingButton",
+  component: LoadingButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof LoadingButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    isLoading: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Button",
+    variant: "contained",
+    isLoading: true,
+  },
+};
diff --git a/govtool/frontend/src/stories/Step.stories.tsx b/govtool/frontend/src/stories/Step.stories.tsx
@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@atoms";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+
+import { Field, Step } from "@molecules";
+
+const meta: Meta<typeof Step> = {
+  title: "Example/Step",
+  component: Step,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const WithButton: StoryObj<typeof Step> = {
+  args: {
+    label: "Download this file",
+    stepNumber: 1,
+    component: (
+      <Button size="extraLarge" sx={{ width: "fit-content" }}>
+        Info.jsonld
+      </Button>
+    ),
+  },
+};
+
+export const WithIconButton: StoryObj<typeof Step> = {
+  args: {
+    label:
+      "Save this file in a location that provides a public URL (ex. github)",
+    stepNumber: 2,
+    component: (
+      <Button
+        endIcon={
+          <OpenInNewIcon
+            sx={{
+              color: "primary",
+              height: 17,
+              width: 17,
+            }}
+          />
+        }
+        size="extraLarge"
+        sx={{ width: "fit-content" }}
+        variant="text"
+      >
+        Read full guide
+      </Button>
+    ),
+  },
+};
+
+export const WithInput: StoryObj<typeof Step> = {
+  args: {
+    label:
+      "Save this file in a location that provides a public URL (ex. github)",
+    stepNumber: 2,
+    component: <Field.Input name="storingURL" placeholder={"URL"} />,
+  },
+};
diff --git a/govtool/frontend/src/stories/TextArea.stories.tsx b/govtool/frontend/src/stories/TextArea.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { Field } from "@molecules";
+import { ComponentProps } from "react";
+
+const meta: Meta<typeof Field.TextArea> = {
+  title: "Example/TextArea",
+  component: Field.TextArea,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+const Template: StoryFn<ComponentProps<typeof Field.TextArea>> = (args) => {
+  return <Field.TextArea {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Label",
+};
+
+export const WithHelpfulText = Template.bind({});
+WithHelpfulText.args = {
+  helpfulText: "Helpful text here",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  errorMessage: "Error message",
+};
+
+export const ErrorAndLabel = Template.bind({});
+ErrorAndLabel.args = {
+  errorMessage: "Error message",
+  label: "Label",
+};
diff --git a/govtool/frontend/src/stories/modals/ExternalLinkModal.stories.tsx b/govtool/frontend/src/stories/modals/ExternalLinkModal.stories.tsx
@@ -1,28 +1,22 @@
-import { ComponentProps, useEffect } from "react";
-import { Story, Meta, StoryFn } from "@storybook/react";
+import { useEffect } from "react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Modal } from "@atoms";
 import { ExternalLinkModal, ExternalLinkModalState } from "@organisms";
-import { ModalProvider, useModal } from "../../context/modal";
+import { useModal } from "../../context/modal";
 import { userEvent, within, screen, waitFor } from "@storybook/testing-library";
 import { expect, jest } from "@storybook/jest";
+import { callAll } from "@/utils";
 
 const meta = {
   title: "Example/Modals/ExternalLinkModal",
   component: ExternalLinkModal,
-  decorators: [
-    (Story) => (
-      <ModalProvider>
-        <Story />
-      </ModalProvider>
-    ),
-  ],
 } satisfies Meta<typeof ExternalLinkModal>;
 
 export default meta;
 
 const Template: StoryFn<ExternalLinkModalState> = (args) => {
-  const { openModal, modal, closeModal } = useModal();
+  const { openModal, modal, modals } = useModal();
 
   const open = () => {
     openModal({
@@ -40,12 +34,18 @@ const Template: StoryFn<ExternalLinkModalState> = (args) => {
       <button onClick={open} style={{ cursor: "pointer" }}>
         Open Modal
       </button>
-      {modal?.component && (
+      {modals[modal.type]?.component && (
         <Modal
-          open={Boolean(modal.component)}
-          handleClose={!modal.preventDismiss ? closeModal : undefined}
+          open={Boolean(modals[modal.type].component)}
+          handleClose={
+            !modals[modal.type].preventDismiss
+              ? callAll(modals[modal.type]?.onClose, () =>
+                  openModal({ type: "none", state: null })
+                )
+              : undefined
+          }
         >
-          {modal.component}
+          {modals[modal.type]?.component ?? <></>}
         </Modal>
       )}
     </>