@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

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

@@ -1,120 +1,24 @@
 import React from "react";
-import LoginForm from "./LoginForm";
-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__()
-);
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
 
-const FormWrapper = props => (
-  <Box minWidth="600px">
-    <LoginForm {...props} />
-  </Box>
+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")} />
 );
-
-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.stories.js

@@ -1,353 +1,139 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { text, boolean } from "@storybook/addon-knobs";
 import Modal from "./Modal";
-import { fn } from "@storybook/test";
-import { Stack, Box, Center } from "../../atoms/layouts";
-import ButtonWithAction from "../../atoms/button-with-action/ButtonWithAction";
+import page from "../../../../.storybook/page";
+
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
 import Spinner from "../../atoms/spinner/Spinner";
+import { Center } from "../../atoms/layouts";
 
-const meta = {
-  title: "Molecules/Modal",
-  component: Modal,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    version: "v1",
-    hideModal: fn(),
-    continueAction: fn(),
-    isContinueActionDisabled: false,
-    modalOpen: false,
-    cancelButtonText: "Cancel",
-    continueButtonText: "Continue",
-    closeButtonText: "Close",
-    modalHeaderText: "Basic v1 Modal",
-    modalBodyText: "Modal body text",
-    modalHeaderBg: "white",
-    modalBodyBg: "#F6F6F9",
-    defaultWrapper: true,
-    noBorder: true,
-    noButtons: false,
-    maxHeight: undefined,
-    blurUnderlay: true,
-    onlyCloseButton: false,
-    onlyContinueButton: false,
-    useDangerButton: false,
-    continueURL: "",
-    showCloseIconButton: false,
-    underlayClickExits: true,
-    customWidth: undefined,
-    isLoading: false,
-    buttonExtraStyles: "",
-    cancelButtonVariant: "secondary",
-    continueButtonVariant: "primary"
-  },
-  argTypes: {
-    version: {
-      description:
-        "The version (v1/v2) of the Modal. V1 is the most used version in most applications, but all new implementations should use the redesigned v2 version.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `v1` }
-      }
-    },
-    hideModal: {
-      description: "Function that hides the modal",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    continueAction: {
-      description: "Function that fires when user clicks the continue button",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    modalOpen: {
-      description: "Whether the modal is open",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    cancelButtonText: {
-      description: "Text on the cancel button",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    continueButtonText: {
-      description: "Text on the continue button",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    modalHeaderText: {
-      description: "A basic v1 modal",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    modalBodyText: {
-      description: "Text in the modal body",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    modalHeaderBg: {
-      description: "Background color of the modal header",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    modalBodyBg: {
-      description: "Background color of the modal body",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "#F6F6F9" }
-      }
-    },
-    defaultWrapper: {
-      description:
-        "Whether to use a Paragraph component to wrap the body text, or a regular div",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    noBorder: {
-      description: "Whether the modal has a border",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    noButtons: {
-      description:
-        "Whether the modal has buttons. Use true for auto-closing modals.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    maxHeight: {
-      description: "Max height for the modal",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    blurUnderlay: {
-      description:
-        "Whether the underlay behind the modal should be blurred when the modal is open",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    onlyCloseButton: {
-      description: "Whether the modal should have only a close button",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    onlyContinueButton: {
-      description: "Whether the modal should have only a continue button",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    useDangerButton: {
-      description:
-        "Whether the modal should use the 'danger' button variant for the continue button",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    continueURL: {
-      description:
-        "URL destination to use if continue button is a ButtonWithLink (v2 only)",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    showCloseIconButton: {
-      description:
-        "Whether to show the close icon button in the modal (v2 only)",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    underlayClickExits: {
-      description:
-        "Whether clicking the underlay behind the modal closes the modal",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    customWidth: {
-      description: "Custom width value for the modal",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    isLoading: {
-      description: "Whether to show loading spinner on modal buttons",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    buttonExtraStyles: {
-      description:
-        "Extra styles to apply to modal buttons. Applies to all buttons.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    cancelButtonVariant: {
-      description: "Button variant for cancel button (v2 only)",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "secondary" }
-      }
-    },
-    continueButtonVariant: {
-      description: "Button variant for continue button (v2 only)",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "primary" }
-      }
-    }
-  }
-};
+const groupId = "props";
 
-export default meta;
+export const modalV1 = () => (
+  <Modal
+    version="v1"
+    ModalLink={() => (
+      <Text
+        onClick={noop}
+        color={"#347BB2"}
+        fontSize="18px"
+        lineHeight="2rem"
+        extraStyles={`cursor: pointer;`}
+      >
+        Modal Link
+      </Text>
+    )}
+    blurUnderlay={boolean("blurUnderlay", true, groupId)}
+    cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
+    continueAction={noop}
+    continueButtonText={text("continueButtonText", "Continue", groupId)}
+    defaultWrapper={boolean("defaultWrapper", true, groupId)}
+    hideModal={noop}
+    maxHeight={text("maxHeight", "", groupId)}
+    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
+    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
+    modalOpen={boolean("modalOpen", true, groupId)}
+    noBorder={boolean("noBorder", true, groupId)}
+    noButtons={boolean("noButtons", false, groupId)}
+    onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
+    onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
+    useDangerButton={boolean("useDangerButton", false, groupId)}
+  />
+);
 
-export const BasicV1Modal = {
-  args: {
-    version: "v1",
-    modalHeaderText: "Payment Method in Use",
-    modalBodyText:
-      "To remove this payment method, you must first turn off autopay payments scheduled with it. Go to your Account Details page to turn off autopay for these payments.",
-    continueButtonText: "Go to Account Details"
-  },
-  render: args => {
-    const [modalOpen, setModalOpen] = useState(false);
+modalV1.storyName = "Standard Modal (V1)";
 
-    return (
-      <Stack childGap="3rem">
-        <Box>
-          <ButtonWithAction
-            action={() => setModalOpen(true)}
-            text="Open Modal"
-          />
-        </Box>
-        <Modal
-          {...args}
-          modalOpen={modalOpen}
-          hideModal={() => setModalOpen(false)}
-          cancelAction={() => setModalOpen(false)}
-        />
-      </Stack>
-    );
-  }
-};
+export const modalV2 = () => (
+  <Modal
+    version="v2"
+    ModalLink={() => (
+      <Text
+        onClick={noop}
+        color={"#347BB2"}
+        fontSize="18px"
+        lineHeight="2rem"
+        extraStyles={`cursor: pointer;`}
+      >
+        Modal Link
+      </Text>
+    )}
+    blurUnderlay={boolean("blurUnderlay", true, groupId)}
+    cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
+    continueAction={noop}
+    continueButtonText={text("continueButtonText", "Continue", groupId)}
+    continueURL={text("continueURL", "", groupId)}
+    defaultWrapper={boolean("defaultWrapper", true, groupId)}
+    hideModal={noop}
+    maxHeight={text("maxHeight", "", groupId)}
+    modalBodyBg={text("modalBodyBg", "", groupId)}
+    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
+    modalHeaderBg={text("modalHeaderBg", "", groupId)}
+    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
+    modalOpen={boolean("modalOpen", true, groupId)}
+    noButtons={boolean("noButtons", false, groupId)}
+    onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
+    onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
+    showCloseIconButton={boolean("showCloseIconButton", true, groupId)}
+    useDangerButton={boolean("useDangerButton", false, groupId)}
+  />
+);
 
-export const BasicV2Modal = {
-  args: {
-    version: "v2",
-    showCloseIconButton: true,
-    modalHeaderText: "Total out of balance",
-    modalBodyText:
-      "Your total is out of balance. If you continue you will closeout out of balance. There is no undoing this action.",
-    cancelButtonText: "Edit totals",
-    continueButtonText: "Continue Closeout",
-    useDangerButton: true
-  },
-  render: args => {
-    const [modalOpen, setModalOpen] = useState(false);
+modalV2.storyName = "Standard Modal (V2)";
 
-    return (
-      <Stack childGap="3rem">
-        <Box>
-          <ButtonWithAction
-            action={() => setModalOpen(true)}
-            text="Open Modal"
-          />
-        </Box>
-        <Modal
-          {...args}
-          modalOpen={modalOpen}
-          hideModal={() => setModalOpen(false)}
-          cancelAction={() => setModalOpen(false)}
-        />
-      </Stack>
-    );
-  }
+export const modalWithoutButtons = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      // some async action or timer closes the modal instead
+      setIsModalOpen(false);
+    }, 3000);
+  }, []);
+  return (
+    <Modal
+      version="v1"
+      ModalLink={() => (
+        <Text
+          tabIndex={0}
+          onClick={noop}
+          color={"#347BB2"}
+          fontSize="18px"
+          lineHeight="2rem"
+          extraStyles={`cursor: pointer;`}
+        >
+          Modal Link
+        </Text>
+      )}
+      hideModal={noop}
+      continueAction={noop}
+      modalOpen={isModalOpen}
+      modalHeaderText={text(
+        "modalHeaderText",
+        "Modal Without Buttons",
+        groupId
+      )}
+      modalBodyText={
+        <Center tabIndex={0}>
+          <Spinner size="100" />
+        </Center>
+      }
+      modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+      modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+      defaultWrapper={boolean("defaultWrapper", true, groupId)}
+      noButtons={boolean("noButtons", true, groupId)}
+      maxHeight={text("maxHeight", "", groupId)}
+      blurUnderlay={boolean("blurUnderlay", false, groupId)}
+    />
+  );
 };
 
-export const ModalWithoutButtons = {
-  args: {
-    version: "v2",
-    noButtons: true,
-    blurUnderlay: false,
-    modalHeaderText: "Invoice #12375934 No Longer Valid",
-    modalBodyText:
-      "The invoice has expired. Please go back to check your balance."
-  },
-  render: args => {
-    const [isModalOpen, setIsModalOpen] = useState(true);
-    useEffect(() => {
-      setTimeout(() => {
-        // some async action or timer closes the modal instead
-        setIsModalOpen(false);
-      }, 3000);
-    }, []);
-    return <Modal {...args} modalOpen={isModalOpen} />;
-  }
-};
+modalWithoutButtons.storyName = "Modal (V1) Without Buttons";
 
-export const LoadingModal = {
-  args: {
-    version: "v2",
-    noButtons: true,
-    blurUnderlay: false,
-    modalHeaderText: "Retrieving Invoice #12375934"
-  },
-  render: args => {
-    const [isModalOpen, setIsModalOpen] = useState(true);
-    useEffect(() => {
-      setTimeout(() => {
-        // some async action or timer closes the modal instead
-        setIsModalOpen(false);
-      }, 10000);
-    }, []);
-    return (
-      <Modal
-        {...args}
-        modalOpen={isModalOpen}
-        modalBodyText={
-          <Center tabIndex={0}>
-            <Spinner size="100" />
-          </Center>
-        }
-      />
-    );
-  }
-};
+const story = page({
+  title: "Components|Molecules/Modal",
+  Component: Modal
+});
+
+export default story;