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

package/src/components/molecules/address-form/AddressForm.stories.js

@@ -1,224 +1,21 @@
-import React, { useState } from "react";
-import AddressForm from "./AddressForm";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import {
-  createFormState,
-  required,
-  onlyIntegers,
-  hasLength,
-  validateWhen,
-  matchesRegex
-} from "redux-freeform";
-import { noop } from "../../../util/general";
-import { fn } from "@storybook/test";
-
-const formConfig = {
-  street1: {
-    validators: [required()]
-  },
-  street2: {
-    validators: []
-  },
-  city: {
-    validators: [required()]
-  },
-  stateProvince: {
-    validators: [required()]
-  },
-  country: {
-    defaultValue: "US",
-    validators: [required()]
-  },
-  zip: {
-    validators: [
-      required(),
-      validateWhen(
-        validateWhen(hasLength(5, 5), hasLength(0, 5)),
-        matchesRegex("US"),
-        "country"
-      ),
-      validateWhen(
-        validateWhen(hasLength(9, 9), hasLength(6, 9)),
-        matchesRegex("US"),
-        "country"
-      )
-    ],
-    constraints: [
-      validateWhen(onlyIntegers(), matchesRegex("US"), "country"),
-      validateWhen(hasLength(0, 9), matchesRegex("US"), "country")
-    ]
-  }
-};
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
-  formConfig
-);
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const FormWrapper = props => <AddressForm {...props} />;
-
-const ConnectedAddressForm = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Molecules/AddressForm",
-  component: ConnectedAddressForm,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    variant: "default",
-    fields: undefined,
-    actions: undefined,
-    clearOnDismount: undefined,
-    showErrors: undefined,
-    handleSubmit: noop,
-    showWalletCheckbox: undefined,
-    saveToWallet: undefined,
-    walletCheckboxMarked: undefined,
-    dataQa: null
-  },
-  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 }
-      }
-    },
-    showErrors: {
-      description:
-        "Show form field errors. Passed to the [FormInput](?path=/docs/atoms-form-layouts-forminput--docs), [CountryDropdown](?path=/docs/atoms-countrydropdown--docs), and [StateProvinceDropdown](?path=/docs/atoms-stateprovincedropdown--docs) fields.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        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 }
-      }
-    },
-    variant: {
-      description:
-        "Passed down to the `Box` component that wraps this component via the `FormContainer` component.",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "default" }
-      }
-    },
-    handleSubmit: {
-      description:
-        "Function called when the `Enter` key is pressed on any of the text inputs (`onKeyDown`), and the `StateProvinceDropdown` field. The React event form the will be passed as a parameter.",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    showWalletCheckbox: {
-      description: "Shows the `Save address to wallet` checkbox if `true`.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    saveToWallet: {
-      description:
-        "Callback function for the `onChange` event of the `Save address to wallet` checkbox.",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    walletCheckboxMarked: {
-      description:
-        "Sets the `Save address to wallet` checkbox to `checked` when true.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    dataQa: {
-      description:
-        "Value for the `data-qa` attribute on the `FormContainer` wrapping element.",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: null }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
+import React from "react";
+import { connect } from "react-redux";
 
-export const Basic = args => <ConnectedAddressForm {...args} />;
-
-export const ShowErrors = {
-  args: {
-    showErrors: true
-  },
-  render: args => <ConnectedAddressForm {...args} />
-};
-
-export const HandleSubmit = {
-  args: {
-    handleSubmit: fn()
-  },
-  render: args => <ConnectedAddressForm {...args} />
-};
-
-const AddressFormWithWalletState = props => {
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <ConnectedAddressForm
-      {...props}
-      showWalletCheckbox={props.showWalletCheckbox}
-      walletCheckboxMarked={checked}
-      saveToWallet={() => setChecked(!checked)}
-    />
-  );
-};
-
-export const WalletCheckbox = {
-  args: {
-    showWalletCheckbox: true
-  },
-  render: args => <AddressFormWithWalletState {...args} />
-};
+import AddressForm from "./AddressForm";
+import page from "../../../../.storybook/page";
+import * as AddressFormState from "./AddressForm.state";
+
+const story = page({
+  title: "Components|Molecules/AddressForm",
+  Component: AddressForm,
+  reducer: AddressFormState.reducer,
+  mapStateToProps: AddressFormState.mapStateToProps,
+  mapDispatchToProps: AddressFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  AddressFormState.mapStateToProps,
+  AddressFormState.mapDispatchToProps
+)(AddressForm);
+export const addressForm = () => <ConnectedForm />;

package/src/components/molecules/banner/Banner.stories.js

@@ -1,125 +1,29 @@
+import React, { useEffect, useState } from "react";
+import { text, boolean } from "@storybook/addon-knobs";
 import Banner from "./Banner";
 import { WalletBannerIcon } from "../../atoms/icons";
 
-const meta = {
-  title: "Molecules/Banner",
-  component: Banner,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    heading: "This is a banner heading!",
-    subHeading: "Sub heading!",
-    image: WalletBannerIcon,
-    padding: "0.5rem 1.5rem",
-    mobilePadding: "0.5rem 1rem",
-    minWidth: "100%",
-    minHeight: "auto",
-    contentSpacing: "3rem",
-    mobileContentSpacing: "0.5rem"
-  },
-  argTypes: {
-    heading: {
-      description: "Banner heading",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    subHeading: {
-      description: "Banner sub-heading",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    image: {
-      description: "Image displayed on the right side of the banner",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    padding: {
-      description: "Padding around the banner content (desktop)",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "0.5rem 1.5rem" }
-      }
-    },
-    mobilePadding: {
-      description: "Padding around the banner content (mobile)",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "0.5rem 1rem" }
-      }
-    },
-    minWidth: {
-      description:
-        "Minimum width of the banner, must be a valid value for the `min-width` property.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "100%" }
-      }
-    },
-    minHeight: {
-      description:
-        "Minimum height of the banner, must be a valid value for the `min-height` property.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "auto" }
-      }
-    },
-    contentSpacing: {
-      description:
-        "Space between the headers and image, must be a valid CSS measurement value with a unit",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "3rem" }
-      }
-    },
-    mobileContentSpacing: {
-      description:
-        "Space between the headers and image (mobile), must be a valid CSS measurement value with a unit",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "0.5rem" }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {};
-
-export const CustomPadding = {
-  args: {
-    padding: "2rem 4rem"
-  }
-};
-
-export const CustomSpacing = {
-  args: {
-    contentSpacing: "8rem"
-  }
-};
-
-export const MinWidth = {
-  args: {
-    minWidth: "1000px"
-  }
-};
-
-export const MinHeight = {
-  args: {
-    minHeight: "500px"
-  }
-};
-
-export const CustomImageComponent = {
-  args: {
-    image: () => "🎉"
-  }
-};
+import page from "../../../../.storybook/page";
+
+const groupId = "props";
+export const banner = () => (
+  <Banner
+    heading={text("bannerHeading", "Banner Heading Text", groupId)}
+    subHeading={text("bannerSubheading", "Banner Description", groupId)}
+    image={WalletBannerIcon}
+    padding={text("padding", null, groupId)}
+    mobilePadding={text("mobilePadding", null, groupId)}
+    minWidth={text("minWidth", null, groupId)}
+    minHeight={text("minHeight", null, groupId)}
+    contentSpacing={text("contentSpacing", null, groupId)}
+    mobileContentSpacing={text("mobileContentSpacing", null, groupId)}
+  />
+);
+
+banner.storyName = "Welcome to Wallet Banner";
+
+const story = page({
+  title: "Components|Molecules/Banner",
+  Component: Banner
+});
+export default story;

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

@@ -1,206 +1,22 @@
 import React from "react";
-import ChangePasswordForm from "./ChangePasswordForm";
-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
-);
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
 
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+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")} />
 );
-
-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} />
-};