@thecb/components 10.12.3-beta.0 → 10.12.3

package/src/components/atoms/nav-header/NavHeader.stories.js

@@ -1,130 +1,29 @@
-import NavHeader from "./NavHeader";
-import { Box, Cover } from "../layouts";
-import HamburgerButton from "../hamburger-button";
 import React from "react";
-import { fn } from "@storybook/test";
-import ImageBox from "../image-box/ImageBox";
-import {
-  CATSKILL_WHITE,
-  DUSTY_GREY,
-  ROYAL_BLUE_VIVID,
-  SEASHELL_WHITE
-} from "../../../constants/colors";
+import { text, number, select } from "@storybook/addon-knobs";
 
-const meta = {
-  title: "Atoms/NavHeader",
-  component: NavHeader,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    leftContent: undefined,
-    rightContent: undefined,
-    headerHeight: "105px",
-    isMobile: false,
-    backgroundColor: undefined,
-    headerWidth: undefined
-  },
-  argTypes: {
-    leftContent: {
-      description: "Content that appears on the left side of the header",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    rightContent: {
-      description: "Content that appears on the right side of the header",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    headerHeight: {
-      description: "Height of the header container in pixels",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "105px" }
-      }
-    },
-    isMobile: {
-      description:
-        "Whether the page is currently displaying on a mobile device",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    backgroundColor: {
-      description: "Background color of the header",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    headerWidth: {
-      description:
-        "Optional value for maximum width of inner container. Component uses 76.5rem or 1224px if not specified. If page is larger than max width, container will be centered within.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
+import NavHeader from "./NavHeader";
+import page from "../../../../.storybook/page";
+import * as colors from "../../../constants/colors";
 
-export default meta;
+const story = page({
+  title: "Components|Atoms/NavHeader",
+  Component: NavHeader
+});
+export default story;
 
-const logo = (
-  <ImageBox
-    maxWidth="150px"
-    minHeight="50px"
-    image={{
-      url:
-        "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/logo-blue.svg",
-      altText: "Cityville Payment Portal Logo"
-    }}
-  />
+const Left = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Left Content</div>
 );
 
-const hamburger = (
-  <Box padding="0">
-    <Cover singleChild fillCenter>
-      <HamburgerButton
-        isActive={false}
-        onClick={() => fn()}
-        activeColor={ROYAL_BLUE_VIVID}
-        inactiveColor={ROYAL_BLUE_VIVID}
-      />
-    </Cover>
-  </Box>
+const Right = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Right Content</div>
 );
 
-export const BasicHeader = {
-  render: args => (
-    <Box minWidth="1200px">
-      <NavHeader
-        {...args}
-        leftContent={logo}
-        rightContent={hamburger}
-        backgroundColor={SEASHELL_WHITE}
-      />
-    </Box>
-  )
-};
-
-export const HeaderSmallerThanPage = {
-  render: args => (
-    <Box minWidth="1200px" backgroundColor={DUSTY_GREY}>
-      <NavHeader
-        {...args}
-        leftContent={logo}
-        rightContent={hamburger}
-        backgroundColor={CATSKILL_WHITE}
-        headerWidth="800px"
-      />
-    </Box>
-  )
-};
+export const navHeader = () => (
+  <NavHeader
+    leftContent={<Left />}
+    rightContent={<Right />}
+    headerHeight={text("headerHeight", "105px", "props")}
+    backgroundColor={select("activeColor", colors, "white", "props")}
+  />
+);

package/src/components/atoms/password-requirements/PasswordRequirements.stories.js

@@ -1,9 +1,10 @@
 import React from "react";
-import { Box, Cluster } from "../layouts";
-import { FormInput, FormContainer, FormInputColumn } from "../form-layouts";
+import { boolean } from "@storybook/addon-knobs";
 import PasswordRequirements from "./PasswordRequirements";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
+import { FormInput } from "../form-layouts";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+import { connect } from "react-redux";
 import {
   createFormState,
   required,
@@ -11,11 +12,10 @@ import {
   hasNumber,
   hasLowercaseLetter,
   hasUppercaseLetter,
-  hasSpecialCharacter,
-  matchesField
+  hasSpecialCharacter
 } from "redux-freeform";
 
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+const formConfig = {
   password: {
     validators: [
       required(),
@@ -25,115 +25,51 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
       hasUppercaseLetter(),
       hasSpecialCharacter()
     ]
-  },
-  confirmPassword: {
-    validators: [required(), matchesField("password")]
   }
-});
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const passwordErrorMessages = {
-  [required.error]: "Password field is required.",
-  [hasLength.error]: "Your password must have at least 8 characters",
-  [hasNumber.error]: "Your password must contain at least one number",
-  [hasLowercaseLetter.error]:
-    "Your password must contain at least one lowercase letter",
-  [hasUppercaseLetter.error]:
-    "Your password must contain at least one uppercase letter",
-  [hasSpecialCharacter.error]:
-    "Your password must contain at least one special character (!@#$%^&*.?)"
-};
-const confirmPasswordErrorMessages = {
-  [matchesField.error]: "Confirm password must match your password"
 };
 
-const FormWrapper = props => (
-  <FormContainer
-    role="form"
-    aria-label="Change password"
-    extraStyles={`padding: 0;`}
-  >
-    <FormInputColumn>
+const passwordForm = createFormState(formConfig);
+
+const passwordRequirementsWrapper = ({ fields, actions, showErrors }) => {
+  const passwordErrorMessages = {
+    [required.error]: "Password is required",
+    [hasLength.error]: "Password must have at least 8 characters",
+    [hasNumber.error]: "Password must contain at least one number",
+    [hasLowercaseLetter.error]:
+      "Password must contain at least one lowercase letter",
+    [hasUppercaseLetter.error]:
+      "Password must contain at least one uppercase letter",
+    [hasSpecialCharacter.error]:
+      "Password must contain at least one special character (!@#$%^&*.?)"
+  };
+  return (
+    <Box>
       <FormInput
-        labelTextWhenNoError="Password"
+        labelTextWhenNoError="Type in password"
         errorMessages={passwordErrorMessages}
-        type="password"
-        field={props.fields.password}
-        fieldActions={props.actions.fields.password}
-      />
-      <FormInput
-        labelTextWhenNoError="Confirm Password"
-        errorMessages={confirmPasswordErrorMessages}
-        type="password"
-        field={props.fields.confirmPassword}
-        fieldActions={props.actions.fields.confirmPassword}
+        field={fields.password}
+        fieldActions={actions.fields.password}
+        showErrors={showErrors}
       />
-    </FormInputColumn>
-    <Box padding={props.isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
-      <Cluster justify="center" align="center">
-        <PasswordRequirements
-          isMobile={props.isMobile}
-          password={props.fields.password}
-        />
-      </Cluster>
+      <PasswordRequirements password={fields.password} />
     </Box>
-  </FormContainer>
-);
+  );
+};
 
-const ConnectedPasswordRequirements = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FormWrapper);
+const story = page({
+  title: "Components|Atoms/PasswordRequirements",
+  Component: PasswordRequirements,
+  reducer: passwordForm.reducer,
+  mapStateToProps: passwordForm.mapStateToProps,
+  mapDispatchToProps: passwordForm.mapDispatchToProps
+});
+export default story;
 
-export default {
-  title: "Atoms/PasswordRequirements",
-  component: ConnectedPasswordRequirements,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    password: undefined,
-    isMobile: false
-  },
-  argTypes: {
-    password: {
-      description: "A Redux Freeform field for a password",
-      table: {
-        type: { summary: "Redux Freeform field object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    isMobile: {
-      description:
-        "Whether user is on a mobile device (typically screen size <768px)",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
+const ConnectedForm = connect(
+  passwordForm.mapStateToProps,
+  passwordForm.mapDispatchToProps
+)(passwordRequirementsWrapper);
 
-export const BasicPasswordRequirements = args => (
-  <ConnectedPasswordRequirements {...args} />
+export const passwordRequirements = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
 );
-
-export const MobilePasswordRequirements = {
-  args: {
-    isMobile: true
-  },
-  render: args => <ConnectedPasswordRequirements {...args} />
-};

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -1,170 +1,42 @@
+import React from "react";
+import { boolean, text, select } from "@storybook/addon-knobs";
 import Placeholder from "./Placeholder";
-import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Atoms/Placeholder",
-  component: Placeholder,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    text: "Add an Account",
-    action: undefined,
-    visible: true,
-    isLink: false,
-    destination: "/",
-    variant: undefined,
-    largeIcon: undefined,
-    isDisabled: false
-  },
-  argTypes: {
-    text: {
-      description: "Text to be displayed inside the Placeholder",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    action: {
-      description:
-        "Function to execute when clicking on Placeholder. Only used if isLink is false.",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    visible: {
-      description: "Whether the Placeholder is visible",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    isLink: {
-      description:
-        "Whether the Placeholder links to a destination, instead of using an action",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    variant: {
-      description: "Variant of the Placeholder either `default` or `large`.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "default" }
-      }
-    },
-    largeIcon: {
-      description:
-        "Name of icon to use with 'large' Placeholder variant. One of 'accounts', 'properties', or 'payments'. If not provided and Placeholder variant is set to large, will default to 'accounts'."
-    },
-    table: {
-      type: { summary: "string" },
-      defaultValue: { summary: "accounts" }
-    },
-    destination: {
-      description:
-        "URL for Placeholder to navigate to if it is a link. Only used if isLink is true.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    isDisabled: {
-      description: "Whether the Placeholder is disabled",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  }
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  large: "large"
 };
+const defaultValue = "default";
+const groupId = "props";
 
-export default meta;
-
-export const DefaultPlaceholder = {
-  args: {
-    action: () => {},
-    variant: "default"
-  },
-  render: args => (
-    <Box minWidth="400px">
-      <Placeholder {...args} />
-    </Box>
-  )
-};
-
-export const LinkPlaceholder = {
-  args: {
-    text: "Add an Email Address",
-    variant: "default",
-    isLink: true,
-    destination: "/"
-  },
-  render: args => (
-    <Box minWidth="400px">
-      <Placeholder {...args} />
-    </Box>
-  )
-};
-
-export const LargePlaceholder = {
-  args: {
-    text: "Add or Edit Your Payment Methods",
-    variant: "large",
-    largeIcon: "payments",
-    action: () => {}
-  },
-  render: args => (
-    <Box minWidth="650px">
-      <Placeholder {...args} />
-    </Box>
-  )
+const icons = {
+  accounts: "accounts",
+  properties: "properties",
+  payments: "payments"
 };
 
-export const LargeLinkPlaceholder = {
-  args: {
-    text: "Add New Property",
-    variant: "large",
-    largeIcon: "properties",
-    isLink: true,
-    destination: "/"
-  },
-  render: args => (
-    <Box minWidth="650px">
-      <Placeholder {...args} />
-    </Box>
-  )
-};
-
-export const DisabledPlaceholder = {
-  args: {
-    text: "Edit Payment Information",
-    action: () => {},
-    variant: "default",
-    isDisabled: true,
-    destination: "/"
-  },
-  render: args => (
-    <Box minWidth="400px">
-      <Placeholder {...args} />
-    </Box>
-  )
-};
-
-export const DisabledLargePlaceholder = {
-  args: {
-    text: "Add More to Cart",
-    variant: "large",
-    isLink: true,
-    isDisabled: true,
-    destination: "/"
-  },
-  render: args => (
-    <Box minWidth="650px">
-      <Placeholder {...args} />
-    </Box>
-  )
-};
+const iconLabel = "largeIcon";
+
+const defaultIcon = "accounts";
+
+export const placeholder = () => (
+  <Placeholder
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    isLink={boolean("isLink", true, "props")}
+    destination={text("destination", "add-account", "props")}
+    text={text("text", "Add an Account", "props")}
+    largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+    key="placeholder"
+    isDisabled={boolean("isDisabled", false, "props")}
+    action={() => console.log("placeholder action")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Placeholder",
+  Component: Placeholder
+});
+
+export default story;