@thecb/components 3.1.4-beta.0 → 3.1.10

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;

package/src/components/atoms/layouts/Cluster.js

@@ -17,6 +17,7 @@ const Cluster = ({
   childGap,
   minHeight,
   minWidth,
+  nowrap,
   overflow = false,
   children,
   ...rest
@@ -28,6 +29,7 @@ const Cluster = ({
       childGap={childGap}
       minHeight={minHeight}
       minWidth={minWidth}
+      nowrap={nowrap}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

package/src/components/atoms/layouts/Cluster.styled.js

@@ -8,7 +8,7 @@ export const ClusterWrapper = styled.div`
 export const ClusterInnerWrapper = styled.div`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: ${({ nowrap }) => (nowrap ? "nowrap" : "wrap")};
   justify-content: ${({ justify }) => justify};
   align-items: ${({ align }) => align};
   margin: calc(${({ childGap }) => childGap} / 2 * -1);

package/src/components/atoms/layouts/examples/ResizingContainer.js

@@ -10,7 +10,8 @@ const ResizeContainer = ({
   animate = "pause",
   containerMax = "500px",
   containerMin = "100%",
-  padding = "0.5rem"
+  padding = "0.5rem",
+  height = "auto"
 }) => {
   const ref = useRef();
   const [width, setWidth] = useState(0);
@@ -39,6 +40,7 @@ const ResizeContainer = ({
         containerMax={containerMax}
         containerMin={containerMin}
         padding={padding}
+        height={height}
       >
         {safeChildren(children, <Fragment />)}
       </ResizeInnerContainer>

package/src/components/atoms/layouts/examples/ResizingContainer.styled.js

@@ -23,7 +23,7 @@ export const ResizeInnerContainer = styled.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
-  height: auto;
+  height: ${({ height }) => height};
   overflow-y: auto;
   display: flex;
   flex-direction: column;

package/src/components/atoms/layouts/examples/box-example/BoxExample.stories.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { text, radios, select } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Box from "../../Box";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const as = { default: "", button: "button" };
+const textAlign = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Box",
+  Component: Box
+});
+
+export const box = () => (
+  <Box
+    padding={text("padding", "16px", groupId)}
+    borderSize={text("borderSize", "0px", groupId)}
+    borderColor={text("borderColor", "transparent", groupId)}
+    borderRadius={text("borderRadius", "0px", groupId)}
+    boxShadow={text("boxShadow", "none", groupId)}
+    background={text("background", "", groupId)}
+    color={text("color", "", groupId)}
+    minHeight={text("minHeight", "", groupId)}
+    width={text("width", "", groupId)}
+    minWidth={text("minWidth", "", groupId)}
+    maxWidth={text("maxWidth", "", groupId)}
+    borderWidthOverride={text("borderWidthOverride", "", groupId)}
+    border={text("border", "", groupId)}
+    as={radios("as", as, "default", groupId)}
+    textAlign={select("textAlign", textAlign, "left", groupId)}
+    hoverStyles={text("hoverStyles", "", groupId)}
+    activeStyles={text("activeStyles", "", groupId)}
+    disabledStyles={text("disabledStyles", "", groupId)}
+    hiddenStyles={text("hiddenStyles", "", groupId)}
+    extraStyles={text("extraStyles", "", groupId)}
+    onClick={text("onClick", () => {}, groupId)}
+    onKeyDown={text("onKeyDown", () => {}, groupId)}
+    onMouseEnter={text("onMouseEnter", () => {}, groupId)}
+    onMouseLeave={text("onMouseLeave", () => {}, groupId)}
+    onFocus={text("onFocus", () => {}, groupId)}
+    onBlur={text("onBlur", () => {}, groupId)}
+    onTouchEnd={text("onTouchEnd", () => {}, groupId)}
+  >
+    Text Child
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child"
+    />
+  </Box>
+);