@thecb/components 3.1.1 → 3.1.10

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import Placeholder from "./Placeholder";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  large: "large"
+};
+const defaultValue = "default";
+const groupId = "props";
+
+const icons = {
+  accounts: "accounts",
+  properties: "properties"
+};
+
+const iconLabel = "largeIcon";
+
+const defaultIcon = "accounts";
+
+export const placeholder = () => (
+  <Placeholder
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    isLink
+    destination={text("destination", "add-account", "props")}
+    text={text("text", "Add an Account", "props")}
+    largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+    key="placeholder"
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Placeholder",
+  Component: Placeholder
+});
+export default story;

package/src/components/atoms/processing-fee/ProcessingFee.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import ProcessingFee from "./ProcessingFee";
+import page from "../../../../.storybook/page";
+
+const feeTypes = {
+  flat: "FLAT",
+  percentage: "PERCENTAGE",
+  None: undefined
+};
+const defaultValue = "FLAT";
+const groupId = "props";
+
+export const processingFee = () => (
+  <ProcessingFee
+    feeValue={text("feeValue", "0", groupId)}
+    feeName={text("feeName", "Credit Card", groupId)}
+    feeType={select("feeTypes", feeTypes, defaultValue, groupId)}
+    feeMinimum={text("feeMinimum", "0", groupId)}
+    hide={boolean("hide", false, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/ProcessingFee",
+  Component: ProcessingFee
+});
+export default story;

package/src/components/atoms/radio-button/RadioButton.stories.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import RadioButton from "./RadioButton";
+import { Box, Cover, Center } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  RadioButton: {
+    activeColor: "#15749D",
+    inactiveColor: "#959CA8"
+  }
+};
+
+export default {
+  title: "Radio Button",
+  component: RadioButton,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>{storyFn()}</Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+export const radioButtonsDefault = () => {
+  const buttons = 3;
+
+  const [selected, setSelected] = useState(null);
+  const [focused, setFocused] = useState(null);
+
+  return [...Array(buttons).keys()].map(i => {
+    const name = `radio-button-${i}`;
+    return (
+      <Box
+        key={name}
+        onFocus={() => setFocused(name)}
+        onBlur={() => setFocused(null)}
+        extraStyles="outline: none;"
+        tabIndex="0"
+      >
+        <RadioButton
+          name={name}
+          radioOn={selected === name}
+          radioFocused={focused === name}
+          toggleRadio={() => setSelected(name)}
+          disabled={
+            radios(
+              "Disable Radio Buttons",
+              { Enabled: "enabled", Disabled: "disabled" },
+              "enabled",
+              "RADIO-GROUP-1"
+            ) === "disabled"
+          }
+        />
+      </Box>
+    );
+  });
+};

package/src/components/atoms/solid-divider/SolidDivider.stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+import SolidDivider from "./SolidDivider";
+import page from "../../../../.storybook/page";
+
+export const solidDivider = () => <SolidDivider />;
+
+const story = page({
+  title: "Components|Atoms/SolidDivider",
+  Component: SolidDivider
+});
+export default story;

package/src/components/atoms/spinner/Spinner.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import Spinner from "./Spinner";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+
+export const spinner = () => (
+  <Box>
+    <Spinner size={text("size", "100", "props")} />
+  </Box>
+);
+
+const story = page({
+  title: "Components|Atoms/Spinner",
+  Component: Spinner
+});
+export default story;

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { connect } from "react-redux";
+import { text, boolean } from "@storybook/addon-knobs";
+import { createFormState, required } from "redux-freeform";
+
+import StateProvinceDropDown from ".";
+import page from "../../../../.storybook/page";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  state: {
+    validators: [required()]
+  }
+});
+const errorMessages = {
+  [required.error]: "State is required"
+};
+
+const story = page({
+  title: "Components|Atoms/StateProvinceDropDown",
+  Component: StateProvinceDropDown,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+  height: "500px"
+});
+
+const FormWrapper = ({
+  fields,
+  actions,
+  countryCode,
+  labelTextWhenNoError,
+  showErrors
+}) => (
+  <StateProvinceDropDown
+    errorMessages={errorMessages}
+    field={fields.state}
+    fieldActions={actions.fields.state}
+    countryCode={countryCode}
+    labelTextWhenNoError={labelTextWhenNoError}
+    showErrors={showErrors}
+  />
+);
+
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const stateProvinceDropDown = () => (
+  <ConnectedForm
+    labelTextWhenNoError={text("State/Province", "", "props")}
+    countryCode={text("countryCode", "US", "props")}
+    showErrors={boolean("showErrors", false, "props")}
+  />
+);

package/src/components/atoms/text/Text.stories.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { text as storybookText, number, select } from "@storybook/addon-knobs";
+
+import Text from "./Text";
+import page from "../../../../.storybook/page";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../constants/style_constants";
+import * as colors from "../../../constants/colors";
+
+const fontWeights = {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+};
+export const text = () => (
+  <Text
+    extraStyles={storybookText("extraStyles", "text-align: center;", "props")}
+    margin={number("margin", 0, { min: 0, max: 99 }, "props")}
+    weight={select("weight", fontWeights, 400, "props")}
+    color={select("activeColor", colors, "black", "props")}
+    hoverStyles={storybookText("hoverStyles", "color: blue;", "props")}
+  >
+    {storybookText("children", "Lorem Ipsum", "props")}
+  </Text>
+);
+
+const story = page({
+  title: "Components|Atoms/Text",
+  Component: Text
+});
+export default story;

package/src/components/atoms/text/Text.theme.js

@@ -1,6 +1,10 @@
 const fontFamily = {
-  primary: "Public Sans",
-  secondary: "Open Sans"
+  p: "Public Sans",
+  pL: "Public Sans",
+  pS: "Public Sans",
+  pXS: "Public Sans",
+  pXXS: "Public Sans",
+  pXL: "Public Sans"
 };
 
 // Text uses the same variants as paragraph

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -7,6 +7,7 @@ import Heading from "../heading";
 import { Box, Center, Cover, Cluster } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
   opacity: 0;
@@ -159,7 +160,6 @@ const ToggleSwitch = ({
       extraStyles={
         labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
       }
-      hoverStyles={`outline: ${themeValues.onBackground} auto 5px`}
     >
       <Center>
         <Cluster justify="stretch" align="center">

package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js

@@ -0,0 +1,70 @@
+import React, { useState, Fragment } from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import ToggleSwitch from "./ToggleSwitch";
+import { Cover, Center, Stack } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  ToggleSwitch: {
+    onBackground: "#15749D",
+    disabledBackground: "#D5D8DC",
+    white: "white",
+    offBackground: "#959EA7",
+    rightLabelStyles: `display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;`,
+    leftLabelStyles: `display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row-reverse;`
+  }
+};
+
+export default {
+  title: "Toggle Switch",
+  component: ToggleSwitch,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>
+            <Stack>{storyFn()}</Stack>
+          </Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+export const toggleSwitchDefault = () => {
+  const [isOn, onToggle] = useState(false);
+
+  const disabled =
+    radios(
+      "Disable Toggle Switch",
+      { Enabled: "enabled", Disabled: "disabled" },
+      "enabled",
+      "RADIO-GROUP-1"
+    ) === "disabled";
+
+  return (
+    <Fragment>
+      <ToggleSwitch
+        name="toggle-switch"
+        label="Toggle Switch Label"
+        isOn={isOn}
+        onToggle={() => onToggle(!isOn)}
+        disabled={disabled}
+      />
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { connect } from "react-redux";
+
+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/change-password-form/ChangePasswordForm.stories.js

@@ -0,0 +1,22 @@
+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")} />
+);

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

@@ -15,6 +15,7 @@ const CollapsibleSection = ({
   isMobile,
   supportsTouch,
   title,
+  customPadding,
   initiallyOpen = true,
   openHeight = "auto",
   children,
@@ -69,7 +70,7 @@ const CollapsibleSection = ({
     >
       <Stack childGap={isOpen ? "0.5rem" : "0rem"}>
         <Box
-          padding="0"
+          padding={customPadding ? customPadding : "0"}
           background={themeValues.headingBackgroundColor}
           onClick={isMobile && supportsTouch ? noop : toggleSection}
           onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}

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

@@ -0,0 +1,68 @@
+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";
+
+const content = {
+  open: {
+    x: "0",
+    opacity: 1
+  },
+  closed: {
+    x: "-7.5%",
+    opacity: 0
+  }
+};
+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>
+  );
+};
+const story = page({
+  title: "Components|Molecules/CollapsibleSection",
+  Component: CollapsibleSection
+});
+
+export default story;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import EditNameForm from "./EditNameForm";
+import page from "../../../../.storybook/page";
+import * as EditNameFormState from "./EditNameForm.state";
+
+const story = page({
+  title: "Components|Molecules/EditNameForm",
+  Component: EditNameForm,
+  reducer: EditNameFormState.reducer,
+  mapStateToProps: EditNameFormState.mapStateToProps,
+  mapDispatchToProps: EditNameFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  EditNameFormState.mapStateToProps,
+  EditNameFormState.mapDispatchToProps
+)(EditNameForm);
+export const editNameForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import EmailForm from "./EmailForm";
+import page from "../../../../.storybook/page";
+import * as EmailFormState from "./EmailForm.state";
+
+const story = page({
+  title: "Components|Molecules/EmailForm",
+  Component: EmailForm,
+  reducer: EmailFormState.reducer,
+  mapStateToProps: EmailFormState.mapStateToProps,
+  mapDispatchToProps: EmailFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  EmailFormState.mapStateToProps,
+  EmailFormState.mapDispatchToProps
+)(EmailForm);
+export const emailForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import ForgotPasswordForm from "./ForgotPasswordForm";
+import page from "../../../../.storybook/page";
+import * as ForgotPasswordFormState from "./ForgotPasswordForm.state";
+
+const story = page({
+  title: "Components|Molecules/ForgotPasswordForm",
+  Component: ForgotPasswordForm,
+  reducer: ForgotPasswordFormState.reducer,
+  mapStateToProps: ForgotPasswordFormState.mapStateToProps,
+  mapDispatchToProps: ForgotPasswordFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  ForgotPasswordFormState.mapStateToProps,
+  ForgotPasswordFormState.mapDispatchToProps
+)(ForgotPasswordForm);
+export const forgotPasswordForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -1,10 +1,13 @@
-import React from "react";
-
+import React, { memo } from "react";
 import { repeat } from "ramda";
+
+import { fallbackValues } from "./HighlightTabRow.theme";
+import { themeComponent } from "../../../util/themeUtils";
 import { Reel, Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
+// this component needs some fix'n
 const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
   const itemsAfterIndex = tabs.slice(highlightIndex).length - 1;
   const itemsBeforeIndex = tabs.slice(0, highlightIndex).length;
@@ -59,4 +62,6 @@ const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
   );
 };
 
-export default HighlightTabRow;
+export default memo(
+  themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues)
+);

package/src/components/molecules/highlight-tab-row/HighlightTabRow.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { text, boolean, object } from "@storybook/addon-knobs";
+import HighlightTabRow from "./HighlightTabRow";
+import page from "../../../../.storybook/page";
+
+const groupId = "props";
+
+export const highlightTabRow = () => (
+  <HighlightTabRow
+    tabs={object(
+      "tabs",
+      [
+        "Payment Amount",
+        "Payment Method",
+        "Customer Information",
+        "Payment Confirmation"
+      ],
+      groupId
+    )}
+    highlightIndex={text("highlightIndex", "0", groupId)}
+    isMobile={boolean("isMobile", false, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/HighlightTabRow",
+  Component: HighlightTabRow,
+  containerMax: "80rem"
+});
+export default story;

package/src/components/molecules/highlight-tab-row/index.js

@@ -1,8 +1,3 @@
-import { memo } from "react";
 import HighlightTabRow from "./HighlightTabRow";
-import { themeComponent } from "../../../util/themeUtils";
-import { fallbackValues } from "./HighlightTabRow.theme";
 
-export default memo(
-  themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues)
-);
+export default HighlightTabRow;

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

@@ -0,0 +1,24 @@
+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")} />
+);