@thecb/components 10.12.6 → 11.0.0

package/src/components/molecules/change-password-form/ChangePasswordForm.stories.js

@@ -1,22 +1,206 @@
 import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-
 import ChangePasswordForm from "./ChangePasswordForm";
-import page from "../../../../.storybook/page";
-import * as ChangePasswordFormState from "./ChangePasswordForm.state";
-
-const story = page({
-  title: "Components|Molecules/ChangePasswordForm",
-  Component: ChangePasswordForm,
-  reducer: ChangePasswordFormState.reducer
-});
-export default story;
-
-const ConnectedForm = connect(
-  ChangePasswordFormState.mapStateToProps,
-  ChangePasswordFormState.mapDispatchToProps
-)(ChangePasswordForm);
-export const changePasswordForm = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import {
+  createFormState,
+  required,
+  hasLength,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter,
+  matchesField
+} from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  currentPassword: {
+    validators: [required()]
+  },
+  newPassword: {
+    validators: [
+      required(),
+      hasLength(8, 100),
+      hasNumber(),
+      hasLowercaseLetter(),
+      hasUppercaseLetter(),
+      hasSpecialCharacter()
+    ]
+  },
+  confirmNewPassword: {
+    validators: [required(), matchesField("newPassword")]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
 );
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <ChangePasswordForm {...props} />;
+
+const ConnectedChangePasswordForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/ChangePasswordForm",
+  component: ConnectedChangePasswordForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    clearOnDismount: undefined,
+    fields: undefined,
+    actions: undefined,
+    handleSubmit: noop,
+    showErrors: undefined,
+    isMobile: undefined,
+    revenueManagement: undefined,
+    closeForm: undefined,
+    firstName: undefined,
+    lastName: 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 }
+      }
+    },
+    isMobile: {
+      description:
+        "Reduces the padding of the `PasswordRequirements` component for mobile desvices (typically screen size <768px).",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showErrors: {
+      description:
+        "Passed to the [FormInput](?path=/docs/atoms-form-layouts-forminput--docs) fields.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    revenueManagement: {
+      description:
+        "Renders the user's name from the `firstName` and `lastName` props, and `Cancel` & `Save` buttons. The `Save` button uses the `handleSubmit` prop as it's action.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    closeForm: {
+      description:
+        "Action for the `Cancel` button for the `revenueManagement` version of the form",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    firstName: {
+      description:
+        "First name of the user, used only with `revenueManagement` set to `true.`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    lastName: {
+      description:
+        "Last name of the user, used only with `revenueManagement` set to `true.`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedChangePasswordForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};
+
+export const IsMobile = {
+  args: {
+    isMobile: true
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};
+
+export const RevenueManagement = {
+  args: {
+    revenueManagement: true,
+    firstName: "Cole",
+    lastName: "Slaw",
+    closeForm: fn(),
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};

package/src/components/molecules/collapsible-section/CollapsibleSection.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CollapsibleSectionStories from './CollapsibleSection.stories.js';
+
+<Meta of={CollapsibleSectionStories} />
+
+<Title />
+
+The CollapsibleSection component behaves like a typical accordion, expanding and collapsing respectively when triggered by user interaction. It also includes [accessibility attributes for accordions](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+  <Story />
+</div>

package/src/components/molecules/collapsible-section/CollapsibleSection.stories.js

@@ -1,68 +1,217 @@
 import React, { useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-import CollapsibleSection from "./CollapsibleSection";
-import DisplayCard from "../../atoms/display-card";
-import { Stack, Motion } from "../../atoms/layouts";
-import page from "../../../../.storybook/page";
+import CollapsibleSection from "./CollapsibleSection.js";
+import { fn } from "@storybook/test";
 
-const content = {
-  open: {
-    x: "0",
-    opacity: 1
+const meta = {
+  title: "Molecules/CollapsibleSection",
+  component: CollapsibleSection,
+  parameters: {
+    layout: "centered"
   },
-  closed: {
-    x: "-7.5%",
-    opacity: 0
+  tags: ["!autodocs"],
+  args: {
+    isOpen: true,
+    toggleSection: fn(),
+    themeValues: {},
+    isMobile: undefined,
+    supportsTouch: undefined,
+    title: "Example Title",
+    customPadding: undefined,
+    initiallyOpen: true,
+    openHeight: "auto",
+    children: <p>The children prop will populate this content.</p>,
+    customTitle: false,
+    stackTitle: false,
+    stackTitleContent: "StackTitleContent Prop Value",
+    sectionGap: "0.5rem",
+    name: "",
+    index: 1,
+    extraStyles: ""
+  },
+  argTypes: {
+    isOpen: {
+      description:
+        "Boolean indicating whether the section is expanded (true) or collapsed (false).",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    toggleSection: {
+      description:
+        "Function that toggles the expanded versus collapsed state for a given 'CollapsibleSection'",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    isMobile: {
+      description:
+        "Whether user is on a mobile device (typically screen size smaller than 768px)",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    supportsTouch: {
+      description: "Whether a device supports touch events",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    title: {
+      description:
+        "The title of the collapsible section, that, when clicked or tapped will toggle the component's expanded/collapsed state",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    customPadding: {
+      description:
+        "The amount of padding to apply to the title prop's containing `Box` element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    initiallyOpen: {
+      description: "Whether the component should render itself open by default",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    openHeight: {
+      description: "Sets the height of the component when it is expanded",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    children: {
+      description:
+        "Content that will show when the component is expanded and be hidden when the component is collapsed",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    customTitle: {
+      description:
+        "Renders a differently styled title element when true, and is also used to help compute an appropriate label for the wrapper",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    stackTitle: {
+      description:
+        "Whether or not to include an additional title (content provided by StackTitleContent prop) above the CollapsibleSection",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    stackTitleContent: {
+      description:
+        "When stackTitle prop is true, this content is used for a header located _above_ the CollapsibleSection",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    sectionGap: {
+      description:
+        "When the CollapsibleSection is open and not on a mobile screen, this prop determines the wrapping Stack component's 'childGap' prop value.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    name: {
+      description:
+        "When it's not empty, 'name' provides the label value for the Box instance with a role of 'heading.'",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    index: {
+      description:
+        "The index value of the current CollapsibleSection in a list of CollapsibleSections. It is used to create a unique ID string for each component.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 1 }
+      }
+    },
+    extraStyles: {
+      description:
+        "A string containing additional CSS to apply to the title's Box container (the one with role='button').",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `undefined` }
+      }
+    }
   }
 };
-export const collapsibleSection = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <CollapsibleSection
-      title={text("title", "Collapsible Section Storybook", "props")}
-      toggleSection={() => setOpen(!open)}
-      initiallyOpen={boolean("initiallyOpen", false, "props")}
-      isOpen={open}
-      key="security-section"
-    >
-      <Stack childGap="16px">
-        <Motion
-          padding="0"
-          variants={content}
-          transition={{ duration: 0.3 }}
-          positionTransition
-          extraStyles={`transform-origin: 100% 0;`}
-        >
-          <DisplayCard
-            title="Password"
-            item="•••••••••••••"
-            buttonText="Change Password"
-            link
-            url=""
-          />
-        </Motion>
-        <Motion
-          padding="0"
-          variants={content}
-          transition={{ duration: 0.3 }}
-          positionTransition
-          extraStyles={`transform-origin: 100% 0;`}
-        >
-          <DisplayCard
-            title="Name"
-            item="Hello Citybase"
-            buttonText="Edit Name"
-            link
-            url=""
-          />
-        </Motion>
-      </Stack>
-    </CollapsibleSection>
-  );
+
+export default meta;
+
+export const Basic = {
+  args: {
+    title: "Basic Title"
+  }
 };
-const story = page({
-  title: "Components|Molecules/CollapsibleSection",
-  Component: CollapsibleSection
-});
 
-export default story;
+export const ToggleSection = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(true);
+    return (
+      <CollapsibleSection
+        {...args}
+        title="ToggleSection Title"
+        isOpen={isOpen}
+        toggleSection={() => setIsOpen(!isOpen)}
+      />
+    );
+  }
+};
+
+export const Mobile = {
+  args: {
+    title: "Mobile Title",
+    isMobile: true
+  }
+};
+
+export const CustomTitle = {
+  args: {
+    title: "Custom Title",
+    customTitle: true
+  }
+};
+
+export const CustomPadding = {
+  args: {
+    title: "CustomPadding Title",
+    customPadding: "3rem"
+  }
+};
+
+export const StackTitleContentAndStackTitle = {
+  args: {
+    title: "StackTitleContentAndStackTitle Title",
+    stackTitle: true,
+    stackTitleContent: <h1>Stack Title Content</h1>
+  }
+};
+
+export const SectionGap = {
+  args: {
+    title: "SectionGap Title",
+    sectionGap: "100px"
+  }
+};

package/src/components/molecules/edit-name-form/EditNameForm.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as EditNameFormStories from './EditNameForm.stories.js';
+
+<Meta of={EditNameFormStories} />
+
+<Title />
+
+Renders input fields to collect a person's first name and last name.
+
+<Story />
+
+<Controls />

package/src/components/molecules/edit-name-form/EditNameForm.stories.js

@@ -0,0 +1,117 @@
+import React from "react";
+import EditNameForm from "./EditNameForm";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <EditNameForm {...props} />;
+
+const ConnectedEditNameForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/EditNameForm",
+  component: ConnectedEditNameForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    fields: undefined,
+    actions: undefined,
+    clearOnDismount: undefined,
+    showErrors: undefined,
+    handleSubmit: noop
+  },
+  argTypes: {
+    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 }
+      }
+    },
+    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 }
+      }
+    },
+    clearOnDismount: {
+      description:
+        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showErrors: {
+      description: "Show form field errors.",
+      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 (via `onKeyDown` prop passed to `FormInput` component).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: noop }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedEditNameForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedEditNameForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedEditNameForm {...args} />
+};