@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -1,75 +0,0 @@
-import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-import PasswordRequirements from "./PasswordRequirements";
-import { FormInput } from "../form-layouts";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-import { connect } from "react-redux";
-import {
-  createFormState,
-  required,
-  hasLength,
-  hasNumber,
-  hasLowercaseLetter,
-  hasUppercaseLetter,
-  hasSpecialCharacter
-} from "redux-freeform";
-
-const formConfig = {
-  password: {
-    validators: [
-      required(),
-      hasLength(8, 100),
-      hasNumber(),
-      hasLowercaseLetter(),
-      hasUppercaseLetter(),
-      hasSpecialCharacter()
-    ]
-  }
-};
-
-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="Type in password"
-        errorMessages={passwordErrorMessages}
-        field={fields.password}
-        fieldActions={actions.fields.password}
-        showErrors={showErrors}
-      />
-      <PasswordRequirements password={fields.password} />
-    </Box>
-  );
-};
-
-const story = page({
-  title: "Components|Atoms/PasswordRequirements",
-  Component: PasswordRequirements,
-  reducer: passwordForm.reducer,
-  mapStateToProps: passwordForm.mapStateToProps,
-  mapDispatchToProps: passwordForm.mapDispatchToProps
-});
-export default story;
-
-const ConnectedForm = connect(
-  passwordForm.mapStateToProps,
-  passwordForm.mapDispatchToProps
-)(passwordRequirementsWrapper);
-
-export const passwordRequirements = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
-);

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

@@ -1,42 +0,0 @@
-import React from "react";
-import { boolean, 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",
-  payments: "payments"
-};
-
-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;

package/src/components/atoms/searchable-select/SearchableSelect.oldstories.js

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { connect } from "react-redux";
-import { text } from "@storybook/addon-knobs";
-import { createFormState } from "redux-freeform";
-
-import SearchableSelect, { SELECT_ALL } from "./SearchableSelect";
-import page from "../../../../.storybook/page";
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  searchTerm: {
-    validators: []
-  }
-});
-
-const items = [
-  { name: "Foo", value: "foo-value" },
-  { name: "Baz", value: "baz-value" },
-  { name: SELECT_ALL, value: SELECT_ALL },
-  { name: "Bar", value: "bar-value" }
-];
-
-const FormWrapper = props => {
-  const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
-  const selectValues = items => items.map(item => item.value);
-
-  const selectItem = selectedItem => {
-    if (selectValues(selectedItems).includes(selectedItem.value)) {
-      const fewerItems = selectedItems.filter(
-        item => item.value !== selectedItem.value
-      );
-      setSelectedItems(fewerItems);
-    } else {
-      const moreItems = selectedItems.concat(selectedItem);
-      setSelectedItems(moreItems);
-    }
-  };
-
-  return (
-    <SearchableSelect
-      autocompleteValue={props.autocompleteValue}
-      items={items}
-      fields={props.fields}
-      actions={props.actions}
-      selectedItems={selectedItems}
-      selectItem={item => selectItem(item)}
-    />
-  );
-};
-
-const story = page({
-  title: "Components|Atoms/SearchableSelect",
-  Component: SearchableSelect,
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps
-});
-
-export default story;
-const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export const searchableSelect = () => (
-  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
-);

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

@@ -1,53 +0,0 @@
-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 = ({
-  autocompleteValue,
-  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/toggle-switch/ToggleSwitch.oldstories.js

@@ -1,28 +0,0 @@
-import React, { useState, Fragment } from "react";
-import { boolean, text } from "@storybook/addon-knobs";
-import ToggleSwitch from "./ToggleSwitch";
-import page from "../../../../.storybook/page";
-
-export const toggleSwitchDefault = () => {
-  const [isOn, onToggle] = useState(false);
-
-  const disabled = boolean("disabled", false, "props");
-  return (
-    <Fragment>
-      <ToggleSwitch
-        name="toggle-switch"
-        label={text("label", "Toggle Switch Label", "props")}
-        isOn={isOn}
-        onToggle={() => onToggle(!isOn)}
-        disabled={disabled}
-      />
-    </Fragment>
-  );
-};
-
-const story = page({
-  title: "Components|Atoms/ToggleSwitch",
-  Component: ToggleSwitch
-});
-
-export default story;

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

@@ -1,21 +0,0 @@
-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/banner/Banner.oldstories.js

@@ -1,29 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-import Banner from "./Banner";
-import { WalletBannerIcon } from "../../atoms/icons";
-
-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.oldstories.js

@@ -1,22 +0,0 @@
-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.oldstories.js

@@ -1,68 +0,0 @@
-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.oldstories.js

@@ -1,24 +0,0 @@
-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/link-card/LinkCard.oldstories.js

@@ -1,87 +0,0 @@
-import page from "../../../../.storybook/page";
-import { boolean, text } from "@storybook/addon-knobs";
-import React from "react";
-import LinkCard from "./LinkCard";
-import Box from "../../atoms/layouts/Box";
-import Stack from "../../atoms/layouts/Stack";
-import Text from "../../atoms/text/Text";
-import Badge from "../../atoms/badge/Badge";
-import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
-import AutopayIcon from "../../atoms/icons/AutopayIcon";
-import {
-  CORNFLOWER_BLUE,
-  ROYAL_BLUE_VIVID,
-  LINK_WATER,
-  WHITE,
-  MANATEE_GREY,
-  GHOST_GREY,
-  TRANSPARENT
-} from "../../../constants/colors";
-
-const theme = {
-  disabledBackgroundColor: TRANSPARENT,
-  disabledBorderColor: GHOST_GREY,
-  disabledColor: MANATEE_GREY,
-  activeBackgroundColor: CORNFLOWER_BLUE,
-  backgroundColor: WHITE,
-  borderColor: LINK_WATER,
-  color: ROYAL_BLUE_VIVID
-};
-
-const groupId = "props";
-const disabled = false;
-const showLeft = true;
-
-export const linkCard = () => {
-  return (
-    <LinkCard
-      disabled={boolean("disabled", disabled, groupId)}
-      title={text("title", "Link Card Title", groupId)}
-      subtitle={text("subtitle", "Link card description", groupId)}
-      path={text("path", "/service/animal-care-and-control", groupId)}
-      themeValues={theme}
-      showLeft={boolean("showLeft", true, groupId)}
-      onClick={() => window.alert("Click event!")}
-      leftContent={
-        <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
-          <Badge
-            label="Autopay Available"
-            Icon={AutopayIcon}
-            variant={disabled ? "disabled" : "success"}
-          />
-        </Box>
-      }
-      showRight={boolean("showRight", true, groupId)}
-      rightContent={
-        <Stack direction="row" childGap="6px">
-          <Text
-            variant="pS"
-            className="show-on-hover"
-            color={ROYAL_BLUE_VIVID}
-            extraStyles={`text-align: right; color: transparent; ${
-              !showLeft ? "margin-left: auto;" : ""
-            }`}
-          >
-            Find
-          </Text>
-          <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
-        </Stack>
-      }
-      extraHoverStyles={`
-      .show-on-hover {
-        color: ${ROYAL_BLUE_VIVID};
-      }
-    `}
-      extraActiveStyles={`
-      background-color: ${disabled ? TRANSPARENT : CORNFLOWER_BLUE};
-    `}
-    />
-  );
-};
-
-const story = page({
-  title: "Components|Molecules/LinkCard",
-  Component: LinkCard
-});
-
-export default story;

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

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

package/src/components/molecules/modal/Modal.oldstories.js

@@ -1,139 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-import Modal from "./Modal";
-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 groupId = "props";
-
-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)}
-  />
-);
-
-modalV1.storyName = "Standard Modal (V1)";
-
-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)}
-  />
-);
-
-modalV2.storyName = "Standard Modal (V2)";
-
-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)}
-    />
-  );
-};
-
-modalWithoutButtons.storyName = "Modal (V1) Without Buttons";
-
-const story = page({
-  title: "Components|Molecules/Modal",
-  Component: Modal
-});
-
-export default story;