@thecb/components 10.12.6 → 11.0.0

package/src/components/molecules/link-card/LinkCard.stories.js

@@ -1,87 +1,302 @@
-import page from "../../../../.storybook/page";
-import { boolean, text } from "@storybook/addon-knobs";
 import React from "react";
-import LinkCard from "./LinkCard";
-import Box from "../../atoms/layouts/Box";
-import Stack from "../../atoms/layouts/Stack";
-import Text from "../../atoms/text/Text";
-import Badge from "../../atoms/badge/Badge";
-import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
-import AutopayIcon from "../../atoms/icons/AutopayIcon";
 import {
-  CORNFLOWER_BLUE,
-  ROYAL_BLUE_VIVID,
-  LINK_WATER,
-  WHITE,
+  COOL_GREY_05,
   MANATEE_GREY,
-  GHOST_GREY,
-  TRANSPARENT
+  ROYAL_BLUE_VIVID,
+  SEA_GREEN
 } from "../../../constants/colors";
+import { Box } from "../../atoms/layouts";
+import LinkCard from "./LinkCard";
+import Badge from "../../atoms/badge/Badge";
+import { fn } from "@storybook/test";
+import AutopayIcon from "../../atoms/icons/AutopayIcon";
+import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
+import Text from "../../atoms/text";
 
-const theme = {
-  disabledBackgroundColor: TRANSPARENT,
-  disabledBorderColor: GHOST_GREY,
-  disabledColor: MANATEE_GREY,
-  activeBackgroundColor: CORNFLOWER_BLUE,
-  backgroundColor: WHITE,
-  borderColor: LINK_WATER,
-  color: ROYAL_BLUE_VIVID
+const meta = {
+  title: "Molecules/LinkCard",
+  component: LinkCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: "Test Workflow",
+    subtitle: "Link your benefit plan",
+    showLeft: undefined,
+    leftContent: undefined,
+    showRight: undefined,
+    rightContent: undefined,
+    onClick: fn(),
+    extraStyles: "",
+    extraActiveStyles: "",
+    extraHoverStyles: "",
+    titleVariant: "h3",
+    disabled: false
+  },
+  argTypes: {
+    title: {
+      description: "Text to display in the LinkCard's title area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Test Workflow" }
+      }
+    },
+    subtitle: {
+      description: "Text to display in the LinkCard's body area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Link your benefit plan" }
+      }
+    },
+    showLeft: {
+      description: "Whether to show the LinkCard's left content",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    leftContent: {
+      description: "Component to render on LinkCard's left side",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showRight: {
+      description: "Whether to show LinkCard's right content",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    rightContent: {
+      description: "Component to render on LinkCard's right side",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    onClick: {
+      description: "Function to execute on click of LinkCard",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles to apply to the LinkCard",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraActiveStyles: {
+      descripton:
+        "Extra styles to apply to the LinkCard when it is in an active state",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraHoverStyles: {
+      description:
+        "Extra styles to apply to the LinkCard when it is being hovered",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleVariant: {
+      description: "HTML element to use for title element, default is h3",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h3" }
+      }
+    },
+    disabled: {
+      description: "Whether the card is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
 };
 
-const groupId = "props";
-const disabled = false;
-const showLeft = true;
+export default meta;
 
-export const linkCard = () => {
-  return (
-    <LinkCard
-      disabled={boolean("disabled", disabled, groupId)}
-      title={text("title", "Link Card Title", groupId)}
-      subtitle={text("subtitle", "Link card description", groupId)}
-      path={text("path", "/service/animal-care-and-control", groupId)}
-      themeValues={theme}
-      showLeft={boolean("showLeft", true, groupId)}
-      onClick={() => window.alert("Click event!")}
-      leftContent={
-        <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
+export const BasicLinkCard = {
+  args: {
+    title: "Construction Permits",
+    subtitle: "Cityville Department of Building Inspection"
+  },
+  render: args => {
+    return (
+      <LinkCard
+        {...args}
+        key="link-card-basic"
+        extraStyles={`transition: all .2s ease-in-out;`}
+        extraHoverStyles={`.show-on-hover {opacity: 1}`}
+        showLeft={false}
+        leftContent={
           <Badge
             label="Autopay Available"
-            Icon={AutopayIcon}
-            variant={disabled ? "disabled" : "success"}
+            variant={"success"}
+            Icon={() =>
+              AutopayIcon({
+                fill: SEA_GREEN
+              })
+            }
           />
-        </Box>
-      }
-      showRight={boolean("showRight", true, groupId)}
-      rightContent={
-        <Stack direction="row" childGap="6px">
-          <Text
-            variant="pS"
-            className="show-on-hover"
-            color={ROYAL_BLUE_VIVID}
-            extraStyles={`text-align: right; color: transparent; ${
-              !showLeft ? "margin-left: auto;" : ""
-            }`}
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            data-qa={`find-or-pay`}
+            extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+            padding="0"
+            hoverStyles=".show-on-hover {opacity: 1;}"
           >
-            Find
-          </Text>
-          <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
-        </Stack>
-      }
-      extraHoverStyles={`
-      .show-on-hover {
-        color: ${ROYAL_BLUE_VIVID};
-      }
-    `}
-      extraActiveStyles={`
-      background-color: ${disabled ? TRANSPARENT : CORNFLOWER_BLUE};
-    `}
-    />
-  );
+            <Text
+              variant="pS"
+              className="show-on-hover"
+              color={ROYAL_BLUE_VIVID}
+              id={`workflow`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Pay"}
+            </Text>
+            <ArrowRightIcon labelledBy={`workflow`} color={ROYAL_BLUE_VIVID} />
+          </Box>
+        }
+      />
+    );
+  }
 };
 
-const story = page({
-  title: "Components|Molecules/LinkCard",
-  Component: LinkCard
-});
+export const CompleteLinkCard = {
+  args: {
+    title: "Water Bills - Autopay",
+    subittle: "Cityville Water Management"
+  },
+  render: args => {
+    return (
+      <LinkCard
+        {...args}
+        extraStyles={`transition: all .2s ease-in-out;`}
+        extraHoverStyles={`.show-on-hover {opacity: 1}`}
+        showLeft={true}
+        leftContent={
+          <Badge
+            label="Autopay Available"
+            variant={"success"}
+            Icon={() =>
+              AutopayIcon({
+                fill: SEA_GREEN
+              })
+            }
+          />
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+            padding="0"
+            hoverStyles=".show-on-hover {opacity: 1;}"
+          >
+            <Text
+              variant="pS"
+              className="show-on-hover"
+              color={ROYAL_BLUE_VIVID}
+              id={`workflow-two`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Find"}
+            </Text>
+            <PlusCircleIcon
+              labelledBy={`workflow-two`}
+              color={ROYAL_BLUE_VIVID}
+            />
+          </Box>
+        }
+      />
+    );
+  }
+};
 
-export default story;
+export const DisabledLinkCard = {
+  args: {
+    title: "Property Tax - Autopay",
+    subtitle: ""
+  },
+  render: args => {
+    return (
+      <LinkCard
+        {...args}
+        extraHoverStyles={`box-shadow: none; cursor: default; .show-on-hover {opacity: 0}`}
+        disabled={true}
+        showLeft={true}
+        leftContent={
+          <Badge
+            label="Autopay Available"
+            variant={"disabled"}
+            Icon={() =>
+              AutopayIcon({
+                fill: MANATEE_GREY
+              })
+            }
+          />
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            data-qa={`find-or-pay-disabled`}
+            extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+            padding="0"
+            hoverStyles=".show-on-hover {opacity: 1;}"
+          >
+            <Text
+              variant="pS"
+              className="show-on-hover"
+              color={COOL_GREY_05}
+              id={`workflow-disabled`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Find"}
+            </Text>
+            <PlusCircleIcon
+              labelledBy={`workflow-disabled`}
+              color={COOL_GREY_05}
+            />
+          </Box>
+        }
+      />
+    );
+  }
+};

package/src/components/molecules/login-form/LoginForm.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LoginFormStories from './LoginForm.stories.js';
+
+<Meta of={LoginFormStories} />
+
+<Title />
+
+Renders a form for users to login to the NFE User Profile. Built with [FormInput](?path=/docs/atoms-form-layouts-forminput--docs).
+
+The user is required to submit an email and password. Both inputs are validated as required inputs, while the email is also checked against the `isProbablyEmail` validator.
+
+<Controls />
+
+
+<Story />

package/src/components/molecules/login-form/LoginForm.stories.js

@@ -1,24 +1,120 @@
 import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-
 import LoginForm from "./LoginForm";
-import page from "../../../../.storybook/page";
-import * as LoginFormState from "./LoginForm.state";
-
-const story = page({
-  title: "Components|Molecules/LoginForm",
-  Component: LoginForm,
-  reducer: LoginFormState.reducer,
-  mapStateToProps: LoginFormState.mapStateToProps,
-  mapDispatchToProps: LoginFormState.mapDispatchToProps
-});
-export default story;
-
-const ConnectedForm = connect(
-  LoginFormState.mapStateToProps,
-  LoginFormState.mapDispatchToProps
-)(LoginForm);
-export const loginForm = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+import { Box } from "../../atoms/layouts";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import {
+  createFormState,
+  required,
+  hasLength,
+  isProbablyEmail
+} from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  password: {
+    validators: [required()]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => (
+  <Box minWidth="600px">
+    <LoginForm {...props} />
+  </Box>
 );
+
+const ConnectedLoginForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/LoginForm",
+  component: ConnectedLoginForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    clearOnDismount: undefined,
+    fields: undefined,
+    actions: undefined,
+    handleSubmit: noop,
+    showErrors: undefined
+  },
+  argTypes: {
+    actions: {
+      description:
+        "Field actions, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    fields: {
+      description:
+        "Field data, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    clearOnDismount: {
+      description:
+        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    handleSubmit: {
+      description:
+        "Function called when the `Enter` key is pressed on any of the text inputs (`onKeyDown`). The React event form the will be passed as a parameter.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedLoginForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedLoginForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedLoginForm {...args} />
+};

package/src/components/molecules/modal/Modal.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ModalStories from './Modal.stories.js';
+
+<Meta of={ModalStories} />
+
+<Title />
+
+The Modal component is used to display modal popups to users. It uses the react-aria-modal package under the hood to ensure proper accessibility.
+
+The modal comes in two versions: v1 and v2. Version 1 is currently the most used version of the modal across our applications. In 2024, a refactored and redesigned version of the modal was built. This version, in addition to changing the design of the modal, fixed some longstanding issues with focus trapping and modals without buttons. All new implementations of modals should use v2, and the plan is to eventually transition all existing implementations of v1 modals to v2 modals.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+  <Story />
+</div>