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

package/src/components/atoms/alert/Alert.oldstories.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
-import Alert from "./Alert";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  info: "info",
-  warn: "warn",
-  error: "error",
-  success: "success"
-};
-const defaultValue = "info";
-const groupId = "props";
-
-export const alert = () => (
-  <Alert
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    text={text("text", "Alert Bar", "props")}
-    showQuitLink={boolean("showQuitLink", true, "props")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Alert",
-  Component: Alert
-});
-export default story;

package/src/components/atoms/badge/Badge.oldstories.js

@@ -1,33 +0,0 @@
-import React from "react";
-import { text, select } from "@storybook/addon-knobs";
-import Badge from "./Badge";
-import page from "../../../../.storybook/page";
-import AutopayIcon from "../icons/AutopayIcon";
-
-const variantsLabel = "variants";
-const variants = {
-  info: "info",
-  warn: "warn",
-  primary: "primary",
-  success: "success",
-  disabled: "disabled"
-};
-
-const defaultValue = "success";
-const groupId = "props";
-const labelLabel = "label";
-const iconLabel = "Icon";
-
-export const badge = () => (
-  <Badge
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    label={text(labelLabel, "Autopay Available", groupId)}
-    Icon={text(iconLabel, AutopayIcon, groupId)}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Badge",
-  Component: Badge
-});
-export default story;

package/src/components/atoms/breadcrumb/Breadcrumb.oldstories.js

@@ -1,38 +0,0 @@
-import React from "react";
-import { object } from "@storybook/addon-knobs";
-import Breadcrumb from "./Breadcrumb";
-import page from "../../../../.storybook/page";
-
-const labelInactive = "Inactive Breadcrumb";
-const defaultInactiveValue = {
-  linkText: "Home",
-  linkDestination: location.pathname,
-  isActive: false
-};
-
-const labelActive = "Active Breadcrumb";
-const defaultActiveValue = {
-  linkText: "Page",
-  linkDestination: location.pathname,
-  isActive: true
-};
-const groupId = "props";
-
-export const breadcrumb = () => (
-  <Breadcrumb
-    breadcrumbsList={[
-      {
-        ...object(labelInactive, defaultInactiveValue, groupId)
-      },
-      {
-        ...object(labelActive, defaultActiveValue, groupId)
-      }
-    ]}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Breadcrumb",
-  Component: Breadcrumb
-});
-export default story;

package/src/components/atoms/button-with-action/ButtonWithAction.oldstories.js

@@ -1,56 +0,0 @@
-import React, { Fragment, useState } from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
-import { Box } from "../layouts";
-import ButtonWithAction from "./ButtonWithAction";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  primary: "primary",
-  secondary: "secondary",
-  back: "back",
-  smallPrimary: "smallPrimary",
-  smallSecondary: "smallSecondary",
-  ghost: "ghost",
-  smallGhost: "smallGhost",
-  tertiary: "tertiary",
-  danger: "danger",
-  dangerSecondary: "dangerSecondary",
-  whiteSecondary: "whiteSecondary",
-  whitePrimary: "whitePrimary",
-  None: undefined
-};
-const defaultValue = "primary";
-const groupId = "props";
-
-const buttonHandler = () => window.alert("Button click!");
-
-export const buttonWithAction = () => (
-  <Fragment>
-    {/* Uncomment to view buttons on a dark background */}
-    {/* <Box extraStyles="background-color: #000;">
-      <ButtonWithAction
-        variant={select(variantsLabel, variants, defaultValue, groupId)}
-        disabled={boolean("disabled", false, "props")}
-        text={text("text", "button", "props")}
-        isLoading={boolean("isLoading", false, "props")}
-        action={text("action", buttonHandler, "props")}
-      />
-    </Box> */}
-    <Box extraStyles="background-color: #fff;">
-      <ButtonWithAction
-        variant={select(variantsLabel, variants, defaultValue, groupId)}
-        disabled={boolean("disabled", false, "props")}
-        text={text("text", "button", "props")}
-        isLoading={boolean("isLoading", false, "props")}
-        action={text("action", buttonHandler, "props")}
-      />
-    </Box>
-  </Fragment>
-);
-
-const story = page({
-  title: "Components|Atoms/ButtonWithAction",
-  Component: ButtonWithAction
-});
-export default story;

package/src/components/atoms/button-with-link/ButtonWithLink.oldstories.js

@@ -1,32 +0,0 @@
-import React from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
-import ButtonWithLink from "./ButtonWithLink";
-import page from "../../../../.storybook/page";
-
-const variants = {
-  primary: "primary",
-  secondary: "secondary",
-  back: "back",
-  smallPrimary: "smallPrimary",
-  smallSecondary: "smallSecondary",
-  ghost: "ghost",
-  smallGhost: "smallGhost",
-  danger: "danger",
-  None: undefined
-};
-
-export const buttonWithLink = () => (
-  <ButtonWithLink
-    variant={select("variant", variants, "primary", "props")}
-    url={text("url", "/login", "props")}
-    disabled={boolean("disabled", false, "props")}
-    extraStyles={text("extraStyles", "", "props")}
-    text={text("text", "Lorem", "props")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/ButtonWithLink",
-  Component: ButtonWithLink
-});
-export default story;

package/src/components/atoms/country-dropdown/CountryDropdown.oldstories.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { createFormState, required } from "redux-freeform";
-import { Box } from "../../atoms/layouts";
-import CountryDropdown from "./CountryDropdown";
-import { options } from "./options";
-import page from "../../../../.storybook/page";
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  country: {
-    validators: [required()]
-  }
-});
-const errorMessages = {
-  [required.error]: "country is required"
-};
-
-const story = page({
-  title: "Components|Atoms/CountryDropdown",
-  Component: CountryDropdown,
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps
-});
-
-const CountryFormWrapper = ({ fields, actions }) => (
-  <Box minHeight="300px">
-    <CountryDropdown
-      errorMessages={errorMessages}
-      options={options}
-      field={fields.country}
-      fieldActions={actions.fields.country}
-    />
-  </Box>
-);
-
-export default story;
-const ConnectedForm = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CountryFormWrapper);
-export const countryDropdown = () => <ConnectedForm />;

package/src/components/atoms/display-box/DisplayBox.oldstories.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-import DisplayBox from "./DisplayBox";
-import FormattedAddress from "../formatted-address";
-import page from "../../../../.storybook/page";
-
-export const displayBox = () => (
-  <DisplayBox showError={boolean("showError", false, "props")}>
-    <FormattedAddress
-      qaPrefix="billing-info"
-      name="Citybase"
-      street1="30 North Lasalle"
-      city="Chicago"
-      country="USA"
-      stateProvince="Illinois"
-      zip="60606"
-    />
-  </DisplayBox>
-);
-
-const story = page({
-  title: "Components|Atoms/DisplayBox",
-  Component: DisplayBox
-});
-export default story;

package/src/components/atoms/display-card/DisplayCard.js

@@ -1,88 +0,0 @@
-import React, { Fragment } from "react";
-import Stack from "../layouts/Stack";
-import Box from "../layouts/Box";
-import Text from "../text";
-import Paragraph from "../paragraph";
-import Cluster from "../layouts/Cluster";
-import ButtonWithAction from "../button-with-action";
-import ButtonWithLink from "../button-with-link";
-import { WHITE, CHARADE_GREY, STORM_GREY } from "../../../constants/colors";
-import Popover from "../../molecules/popover";
-
-const DisplayCard = ({
-  title,
-  item,
-  buttonText,
-  buttonAction,
-  url,
-  link = false,
-  helpText,
-  hasPopover = false,
-  popoverTriggerText = "",
-  popoverContent = "",
-  popoverExtraStyles,
-  popoverTextExtraStyles
-}) => (
-  <Box padding="0 0 16px">
-    <Stack childGap="0rem">
-      <Box padding="0 0 8px 0">
-        <Cluster justify="space-between" align="center" overflow>
-          <Paragraph
-            variant="pL"
-            color={CHARADE_GREY}
-            extraStyles={`letter-spacing: 0.29px`}
-          >
-            {title}
-          </Paragraph>
-          {hasPopover && (
-            <Popover
-              triggerText={popoverTriggerText}
-              content={popoverContent}
-              popoverExtraStyles={popoverExtraStyles}
-              popoverTextExtraStyles={popoverTextExtraStyles}
-            />
-          )}
-        </Cluster>
-      </Box>
-      <Box padding="0">
-        <Box
-          padding="24px"
-          borderSize="1px"
-          borderRadius="4px"
-          background={WHITE}
-          boxShadow="0px 2px 14px 0px rgb(246, 246, 249),
-            0px 3px 8px 0px rgb(202, 206, 216)"
-        >
-          <Cluster justify="space-between" align="center">
-            <Text color={CHARADE_GREY}>{item}</Text>
-            {link ? (
-              <ButtonWithLink
-                text={buttonText}
-                url={url}
-                variant="smallGhost"
-                dataQa={buttonText}
-                extraStyles={`min-width: 0;`}
-              />
-            ) : buttonAction ? (
-              <ButtonWithAction
-                text={buttonText}
-                action={buttonAction}
-                variant="smallGhost"
-                dataQa={buttonText}
-                extraStyles={`min-width: 0;`}
-              />
-            ) : helpText ? (
-              <Text color={STORM_GREY} extraStyles={`font-style: italic;`}>
-                {helpText}
-              </Text>
-            ) : (
-              <Fragment />
-            )}
-          </Cluster>
-        </Box>
-      </Box>
-    </Stack>
-  </Box>
-);
-
-export default DisplayCard;

package/src/components/atoms/display-card/DisplayCard.oldstories.js

@@ -1,24 +0,0 @@
-import React from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-
-import DisplayCard from "./DisplayCard";
-import page from "../../../../.storybook/page";
-
-const story = page({
-  title: "Components|Atoms/DisplayCard",
-  Component: DisplayCard
-});
-export default story;
-
-export const displayCard = () => (
-  <DisplayCard
-    title={text("title", "Title", "props")}
-    buttonText={text("buttonText", "Lorem", "props")}
-    url={text("url", "http://google.com", "props")}
-    link={boolean("link", false, "props")}
-    buttonAction={text("buttonAction", () => {}, "props")}
-    item={text("item", "Foo", "props")}
-  >
-    {text("children", "Lorem Ipsum", "props")}
-  </DisplayCard>
-);

package/src/components/atoms/display-card/index.js

@@ -1,3 +0,0 @@
-import DisplayCard from "./DisplayCard";
-
-export default DisplayCard;

package/src/components/atoms/dropdown/Dropdown.oldstories.js

@@ -1,47 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Dropdown from "./Dropdown";
-import page from "../../../../.storybook/page";
-
-const options = [
-  { text: "Please select an option", value: "" },
-  { text: "OPTION_1", value: "OPTION_1" },
-  { text: "OPTION_2", value: "OPTION_2" },
-  { text: "DISABLED_OPTION", value: "DISABLED_OPTION" }
-];
-
-const disabledValues = ["DISABLED_OPTION"];
-
-export const dropdown = () => {
-  const [isOpen, setOpen] = useState(false);
-  const [value, setValue] = useState(null);
-  const [isError, setError] = useState(false);
-
-  useEffect(() => {
-    if (value === options[0].value) {
-      setError(true);
-    } else {
-      setError(false);
-    }
-  }, [value]);
-
-  return (
-    <Dropdown
-      placeholder={options[0].text}
-      options={options}
-      disabledValues={disabledValues}
-      value={value}
-      isOpen={isOpen}
-      isError={isError}
-      onSelect={setValue}
-      onClick={() => setOpen(!isOpen)}
-    />
-  );
-};
-
-const story = page({
-  title: "Components|Atoms/Dropdown",
-  Component: Dropdown,
-  height: "500px"
-});
-
-export default story;

package/src/components/atoms/form-select/FormSelect.oldstories.js

@@ -1,50 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { text } from "@storybook/addon-knobs";
-import { createFormState, required } from "redux-freeform";
-
-import FormSelect from "./FormSelect";
-import page from "../../../../.storybook/page";
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  thing: {
-    validators: [required()]
-  }
-});
-const errorMessages = {
-  [required.error]: "thing is required"
-};
-const options = [
-  { value: "", text: "choose name" },
-  { value: "foo", text: "foo" },
-  { value: "bar", text: "bar" },
-  { value: "baz", text: "baz" },
-  { value: "disabled", text: "disabled" }
-];
-
-const story = page({
-  title: "Components|Atoms/FormSelect",
-  Component: FormSelect,
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps,
-  height: "500px"
-});
-
-const FormWrapper = props => (
-  <FormSelect
-    autocompleteValue={props.autocompleteValue}
-    labelTextWhenNoError="Form Select"
-    errorMessages={errorMessages}
-    options={options}
-    field={props.fields.thing}
-    fieldActions={props.actions.fields.thing}
-    disabledValues={["disabled"]}
-  />
-);
-
-export default story;
-const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export const formSelect = () => (
-  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
-);

package/src/components/atoms/formatted-address/FormattedAddress.oldstories.js

@@ -1,32 +0,0 @@
-import React from "react";
-import { select, text } from "@storybook/addon-knobs";
-import FormattedAddress from "./FormattedAddress";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  default: "default",
-  radio: "radio",
-  None: undefined
-};
-const defaultValue = "default";
-const groupId = "props";
-
-export const formattedAddress = () => (
-  <FormattedAddress
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    street1={text("street1", "30 North Lasalle", groupId)}
-    city={text("city", "Chicago", groupId)}
-    stateProvince={text("stateProvince", "Illinois", groupId)}
-    country={text("country", "USA", groupId)}
-    zip={text("zip", "60606", groupId)}
-    street2={text("street2", "", groupId)}
-    name={text("name", "Citybase", groupId)}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/FormattedAddress",
-  Component: FormattedAddress
-});
-export default story;

package/src/components/atoms/icons/NoPaymentResultsIcon.js

@@ -1,54 +0,0 @@
-import React from "react";
-
-const NoPaymentResultsIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="366"
-      height="209"
-      viewBox="0 0 366 209"
-    >
-      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
-        <g transform="translate(-537 -466)">
-          <g transform="translate(132 332)">
-            <g transform="translate(405 134)">
-              <path
-                fill="#FFF"
-                d="M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
-              ></path>
-              <path
-                fill="#E4F4FD"
-                d="M220 47.5c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5S194.5 87.083 194.5 73c0-14.084 11.416-25.5 25.5-25.5zm-70 0c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5-14.083 0-25.5-11.417-25.5-25.5 0-14.084 11.417-25.5 25.5-25.5zM220.001 68c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.634 1.87l.062-.152.083-.214c.786-1.896 2.574-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C227.903 70.69 224.208 68 220 68zM150 68c-4.206 0-7.902 2.685-9.346 6.632a2.506 2.506 0 001.497 3.215 2.512 2.512 0 003.158-1.342l.061-.153.083-.212c.781-1.884 2.562-3.126 4.547-3.126 1.986 0 3.767 1.242 4.55 3.127l.082.212.062.153a2.512 2.512 0 003.158 1.34 2.506 2.506 0 001.496-3.215c-1.445-3.946-5.141-6.631-9.348-6.631z"
-              ></path>
-              <path
-                fill="#E8FFEF"
-                d="M237 197c0 6.627-23.281 12-52 12-28.718 0-52-5.373-52-12s23.282-12 52-12c28.719 0 52 5.373 52 12"
-              ></path>
-              <path
-                fill="#292A33"
-                fillRule="nonzero"
-                d="M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm179.832-42l.26.004c4.66.134 8.422 3.878 8.422 8.51a2.515 2.515 0 01-5.023.166l-.006-.166-.005-.183c-.096-1.763-1.573-3.2-3.446-3.297l-.202-.005h-23.664l-.196.005c-1.873.094-3.352 1.528-3.452 3.29l-.006.19-.005.166a2.515 2.515 0 01-5.023-.166c0-4.632 3.761-8.376 8.422-8.51l.26-.004h23.664zm23.169-72.5c16.845 0 30.499 13.654 30.499 30.5 0 16.845-13.655 30.5-30.5 30.5S189.5 89.845 189.5 73c0-.335.005-.668.016-1h-9.032l.012.499.004.5c0 16.846-13.655 30.501-30.5 30.501S119.5 89.845 119.5 73s13.655-30.5 30.5-30.5c10.22 0 19.266 5.026 24.8 12.742 3.73-1.495 7.226-2.242 10.491-2.242 3.304 0 6.593.765 9.87 2.296C200.69 47.55 209.755 42.5 220 42.5zm0 5C205.916 47.5 194.5 58.916 194.5 73c0 14.083 11.416 25.5 25.5 25.5s25.5-11.417 25.5-25.5c0-14.084-11.416-25.5-25.5-25.5zm-70 0C135.917 47.5 124.5 58.916 124.5 73c0 14.083 11.417 25.5 25.5 25.5 14.084 0 25.5-11.417 25.5-25.5 0-14.084-11.416-25.5-25.5-25.5zM185 59a3 3 0 100 6.002 3 3 0 000-6.002zM294.626 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
-              ></path>
-              <path
-                fill="#959CA8"
-                fillRule="nonzero"
-                d="M220.001 68c4.207 0 7.902 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152C223.916 74.343 222.07 73 220 73c-1.995 0-3.783 1.25-4.57 3.145l-.082.214a2.5 2.5 0 01-4.696-1.718C212.098 70.69 215.795 68 220 68zM150 68c4.207 0 7.903 2.685 9.348 6.631a2.506 2.506 0 01-1.496 3.216 2.512 2.512 0 01-3.158-1.34l-.062-.154c-.734-2.003-2.572-3.339-4.632-3.339-1.985 0-3.766 1.242-4.547 3.126l-.083.212a2.511 2.511 0 01-3.22 1.495 2.506 2.506 0 01-1.496-3.215C142.097 70.685 145.793 68 150 68z"
-              ></path>
-              <path
-                fill="#E4E6EB"
-                d="M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
-              ></path>
-              <path
-                fill="#317D4F"
-                fillRule="nonzero"
-                d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.604 3.628l-.001-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zm193.321-62.228a42.836 42.836 0 01.704 8.714l53.02 37.735a4 4 0 01.661 5.926l-.148.157L301 134.5V123l6.557-6.5-45.68-32.513a42.337 42.337 0 01-2.193 6.683 4 4 0 01-7.368-3.116 34.513 34.513 0 002.719-13.477c0-2.149-.195-4.27-.58-6.349a4 4 0 117.866-1.456z"
-              ></path>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-};
-
-export default NoPaymentResultsIcon;

package/src/components/atoms/icons/PointOfSaleImage.d.ts

@@ -1 +0,0 @@
-export const PointOfSaleImage: JSX.Element;