@thecb/components 3.1.3 → 3.1.11

package/src/components/atoms/amount-callout/AmountCallout.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import AmountCallout from "./AmountCallout";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  None: undefined
+};
+const defaultValue = "large";
+
+const textAlignLabel = "textAlign";
+const textAlign = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const defaultTextAlignValue = "left";
+const groupId = "props";
+
+export const amountCallout = () => (
+  <AmountCallout
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    amount={text("text", "$1.23", "props")}
+    textAlign={select(
+      textAlignLabel,
+      textAlign,
+      defaultTextAlignValue,
+      groupId
+    )}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/AmountCallout",
+  Component: AmountCallout
+});
+export default story;

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,14 +1,14 @@
 const fontSize = {
-  large: "1.75rem",
-  medium: "1.5rem",
+  large: "1.5rem",
+  medium: "1.25rem",
   small: "1.094rem"
 };
 
 const color = "#15749D";
 
 const lineHeight = {
-  large: "2.25rem",
-  medium: "2rem",
+  large: "2rem",
+  medium: "1.875rem",
   small: "1.641rem"
 };
 

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

@@ -0,0 +1,38 @@
+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-link/ButtonWithLink.js

@@ -8,6 +8,7 @@ import ButtonWithAction from "../button-with-action";
 const ButtonWithLink = ({
   url = "/",
   disabled = false,
+  fileLink = false,
   extraStyles,
   newTab = false,
   ...otherProps
@@ -22,7 +23,7 @@ const ButtonWithLink = ({
     if (disabled) {
       return safeChildren(children, <span />);
     }
-    return R.test(URL_TEST, url) ? (
+    return R.test(URL_TEST, url) || fileLink ? (
       <ExternalLink
         href={url}
         tabIndex="-1"

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

@@ -0,0 +1,32 @@
+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/checkbox/Checkbox.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Checkbox from "./Checkbox";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default"
+};
+const defaultValue = "default";
+const groupId = "props";
+
+export const checkbox = () => (
+  <Checkbox
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    title={text("title", "Checkbox", "props")}
+    name={text("name", "Checkbox", "props")}
+    checked={boolean("checked", false, "props")}
+    error={boolean("error", false, "props")}
+    disabled={boolean("disabled", false, "props")}
+    focused={boolean("focused", false, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Checkbox",
+  Component: Checkbox
+});
+export default story;

package/src/components/atoms/checkbox-list/CheckboxList.stories.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { select } from "@storybook/addon-knobs";
+import CheckboxList from "./CheckboxList";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  disabled: "disabled"
+};
+const defaultValue = "default";
+const groupId = "props";
+const imageUrl = `https://picsum.photos/seed/picsum/200/300`;
+const items = [
+  {
+    text: "item 1",
+    name: "item 1 name",
+    imageUrl: imageUrl
+  },
+  {
+    text: "item 2",
+    name: "item 2 name",
+    imageUrl: imageUrl
+  },
+  {
+    text: "item 3",
+    name: "item 3 name",
+    imageUrl: imageUrl
+  }
+];
+export const checkboxList = () => {
+  const [selected, setSelected] = useState(false);
+  const setSelectedItem = (e, item) => {
+    setSelected(item.name);
+  };
+  return (
+    <CheckboxList
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      items={items}
+      selectedName={selected}
+      onSelect={setSelectedItem}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/CheckboxList",
+  Component: CheckboxList
+});
+export default story;

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

@@ -0,0 +1,42 @@
+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.stories.js

@@ -0,0 +1,25 @@
+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

@@ -46,6 +46,7 @@ const DisplayCard = ({
                 url={url}
                 variant="smallGhost"
                 dataQa={buttonText}
+                extraStyles={`min-width: 0;`}
               />
             ) : (
               <ButtonWithAction
@@ -53,6 +54,7 @@ const DisplayCard = ({
                 action={buttonAction}
                 variant="smallGhost"
                 dataQa={buttonText}
+                extraStyles={`min-width: 0;`}
               />
             )}
           </Cluster>

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

@@ -0,0 +1,24 @@
+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/form-layouts/FormLayouts.stories.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { select, text } from "@storybook/addon-knobs";
+import FormContainer from "./FormContainer";
+import FormInput from "./FormInput";
+import FormInputColumn from "./FormInputColumn";
+import FormInputRow from "./FormInputRow";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  disabled: "disabled",
+  checkout: "checkout",
+  collapsible: "collapsible"
+};
+const defaultValue = "primary";
+const groupId = "props";
+
+const data = {
+  test: {
+    rawValue: "Form Layouts"
+  }
+};
+export const formLayouts = () => {
+  return (
+    <FormContainer
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      role="form"
+      aria-label="Storybook Form"
+    >
+      <FormInputRow childGap={text("rowChildGap", "1rem", "props")}>
+        <FormInput
+          labelTextWhenNoError="Form Layouts"
+          errorMessages="Error"
+          field={data.test}
+        />
+      </FormInputRow>
+      <FormInputRow childGap={text("rowChildGap", "1rem", "props")}>
+        <FormInputColumn childGap={text("columnChildGap", "0.5rem", "props")}>
+          <FormInput
+            labelTextWhenNoError="Form Layouts"
+            errorMessages="Error"
+            field={data.test}
+          />
+          <FormInput
+            labelTextWhenNoError="Form Layouts"
+            errorMessages="Error"
+            field={data.test}
+          />
+        </FormInputColumn>
+        <FormInputColumn childGap={text("columnChildGap", "0.5rem", "props")}>
+          <FormInput
+            labelTextWhenNoError="Form Layouts"
+            errorMessages="Error"
+            field={data.test}
+          />
+          <FormInput
+            labelTextWhenNoError="Form Layouts"
+            errorMessages="Error"
+            field={data.test}
+          />
+        </FormInputColumn>
+      </FormInputRow>
+    </FormContainer>
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/FormContainer",
+  Component: FormContainer
+});
+export default story;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } 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" }
+];
+
+const story = page({
+  title: "Components|Atoms/FormSelect",
+  Component: FormSelect,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+  height: "500px"
+});
+
+const FormWrapper = ({ fields, actions }) => (
+  <FormSelect
+    errorMessages={errorMessages}
+    options={options}
+    field={fields.thing}
+    fieldActions={actions.fields.thing}
+  />
+);
+
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const formSelect = () => <ConnectedForm />;

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

@@ -5,7 +5,6 @@ import { fallbackValues } from "./FormattedAddress.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
 const FormattedAddress = ({
-  isActive,
   street1,
   city,
   stateProvince,
@@ -13,12 +12,11 @@ const FormattedAddress = ({
   zip,
   street2 = null,
   name = null,
-  isRadio,
   themeValues,
   qaPrefix = "address"
 }) => {
   return (
-    <Box padding={themeValues.padding} isActive={isActive} isRadio={isRadio}>
+    <Box padding={themeValues.padding}>
       {name && (
         <Text variant="p" color={themeValues.color} dataQa={`${qaPrefix}-name`}>
           {name}

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

@@ -0,0 +1,32 @@
+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/hamburger-button/HamburgerButton.js

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { noop } from "../../../util/general";
 
 const Hamburger = styled.button`
   padding: 8px;
@@ -92,7 +93,12 @@ const HamburgerInner = styled.span`
   }
 `;
 
-const HamburgerButton = ({ activeColor, inactiveColor, isActive, onClick }) => (
+const HamburgerButton = ({
+  activeColor,
+  inactiveColor,
+  isActive,
+  onClick = noop
+}) => (
   <Hamburger
     className={isActive === true ? "active" : ""}
     onClick={onClick}

package/src/components/atoms/hamburger-button/HamburgerButton.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { text, boolean, select } from "@storybook/addon-knobs";
+
+import HamburgerButton from "./HamburgerButton";
+import page from "../../../../.storybook/page";
+
+import * as colors from "../../../constants/colors";
+
+const story = page({
+  title: "Components|Atoms/HamburgerButton",
+  Component: HamburgerButton
+});
+export default story;
+
+export const hamburgerButton = () => (
+  <HamburgerButton
+    activeColor={select("activeColor", colors, "black", "props")}
+    inactiveColor={select("inactiveColor", colors, "black", "props")}
+    isActive={boolean("isActive", false, "props")}
+  />
+);

package/src/components/atoms/heading/Heading.stories.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+import Heading from "./Heading";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Atoms/Heading",
+  Component: Heading
+});
+export default story;
+
+export const heading = () => (
+  <Heading
+    textAlign={text("textAlign", "center", "props")}
+    extraStyles={text("extraStyles", "", "props")}
+  >
+    {text("children", "Foo", "props")}
+  </Heading>
+);

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+import page from "../../../../.storybook/page";
+import {
+  AccountsIcon,
+  AccountsAddIcon,
+  ForgotPasswordIcon,
+  GoToEmailIcon,
+  VerifiedEmailIcon,
+  PaymentMethodIcon,
+  AccountsIconSmall,
+  PaymentsIconSmall,
+  ProfileIconSmall,
+  SettingsIconSmall,
+  ChevronIcon,
+  PropertiesAddIcon,
+  PropertiesIconSmall,
+  AccountNumberImage,
+  RoutingNumberImage,
+  CheckmarkIcon,
+  BankIcon,
+  GenericCard,
+  PaymentIcon
+} from "./index";
+
+const story = page({
+  title: "Components|atoms/Icons",
+  Component: AccountsIcon
+});
+export default story;
+
+export const accountsIcon = () => <AccountsIcon />;
+export const accountsAddIcon = () => <AccountsAddIcon />;
+export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
+export const goToEmailIcon = () => <GoToEmailIcon />;
+export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
+export const paymentMethodIcon = () => <PaymentMethodIcon />;
+export const accountsIconSmall = () => <AccountsIconSmall />;
+export const paymentsIconSmall = () => <PaymentsIconSmall />;
+export const profileIconSmall = () => <ProfileIconSmall />;
+export const settingsIconSmall = () => <SettingsIconSmall />;
+export const chevronIcon = () => <ChevronIcon />;
+export const propertiesAddIcon = () => <PropertiesAddIcon />;
+export const propertiesIconSmall = () => <PropertiesIconSmall />;
+export const accountNumberImage = () => <AccountNumberImage />;
+export const routingNumberImage = () => <RoutingNumberImage />;
+export const checkmarkIcon = () => <CheckmarkIcon />;
+export const bankIcon = () => <BankIcon />;
+export const genericCard = () => <GenericCard />;
+export const paymentIco = () => <PaymentIcon />;

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -12,7 +12,7 @@ const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
       <LabeledAmountText
         variant={variant}
         weight={themeValues.fontWeight}
-        extraStyles="text-align: end; flex: 3;"
+        extraStyles="text-align: start; flex: 3;"
       >
         {label}:
       </LabeledAmountText>

package/src/components/atoms/labeled-amount/LabeledAmount.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import LabeledAmount from "./LabeledAmount";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  p: "p",
+  pL: "pL",
+  h6: "h6",
+  None: undefined
+};
+const defaultValue = "default";
+const groupId = "props";
+
+export const labeledAmount = () => (
+  <LabeledAmount
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    label={text("label", "Amount", groupId)}
+    amount={text("amount", "$1.23", groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/LabeledAmount",
+  Component: LabeledAmount
+});
+export default story;