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

package/src/components/atoms/title/Title.stories.js

@@ -0,0 +1,144 @@
+import Title from "./Title";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { Box } from "../layouts";
+
+const meta = {
+  title: "Atoms/Title",
+  component: Title,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    weight: FONT_WEIGHT_REGULAR,
+    color: FIREFLY_GREY,
+    margin: 0,
+    textAlign: undefined,
+    extraStyles: "",
+    className: undefined,
+    variant: "large",
+    as: "h1",
+    dataQa: undefined,
+    children: "Title Component!"
+  },
+  argTypes: {
+    weight: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: FONT_WEIGHT_REGULAR }
+      }
+    },
+    color: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: FIREFLY_GREY }
+      }
+    },
+    margin: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "number | string" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    textAlign: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    className: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    variant: {
+      description: "`large` `small`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "large" }
+      }
+    },
+    as: {
+      description: "`h1` `h2` `h3` `h4` `h5` `h6` `p`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h1" }
+      }
+    },
+    dataQa: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    children: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string | element | array" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {};
+
+export const CustomWeight = {
+  args: {
+    weight: "700"
+  }
+};
+
+export const CustomColor = {
+  args: {
+    color: "green"
+  }
+};
+
+export const CustomMargin = {
+  args: {
+    margin: "2rem"
+  },
+  render: args => (
+    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0">
+      <Title {...args} />
+    </Box>
+  )
+};
+
+export const TextAlign = {
+  args: {
+    textAlign: "right"
+  },
+  render: args => (
+    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0" minWidth="400px">
+      <Title {...args} />
+    </Box>
+  )
+};
+
+export const SmallVariant = {
+  args: {
+    variant: "small"
+  }
+};

package/src/components/atoms/title/Title.theme.js

@@ -1,16 +1,19 @@
 // Comments assume desktop base font size of 16px, mobile base font size of 14px
 
 const fontSize = {
+  hero: "3.5rem", // 56px
   large: "1.5rem", // 24px (at base font size of 16px)
   small: "1.25rem" // 20px
 };
 
 const fontFamily = {
+  hero: "Public Sans",
   large: "Public Sans",
   small: "Public Sans"
 };
 
 const mobileFontSize = {
+  hero: "3rem", // 48px
   large: "1.5rem", // 21px (at base font size of 14px)
   small: "1.2142rem" // 17px
 };

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

@@ -1,10 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import posed from "react-pose";
 import { fallbackValues } from "./ToggleSwitch.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import Heading from "../heading";
-import { Box, Center, Cover, Cluster } from "../layouts";
+import { Box, Center, Cover, Cluster, Motion } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
 import { ENTER } from "../../../constants/keyboard";
@@ -12,16 +10,16 @@ import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
   opacity: 0;
+  margin: 0;
   position: absolute;
   cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")};
-  height: 24px;
-  width: 50px;
-  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
+  height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
+  width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
 `;
 
-const VisibleSwitchComponent = styled.label`
-  width: 44px;
-  height: 24px;
+const VisibleSwitchComponent = styled(Motion)`
+  width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
+  height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
   border-radius: 12px;
   border: none;
   position: relative;
@@ -37,31 +35,35 @@ const VisibleSwitchComponent = styled.label`
   &:focus {
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
   }
-
-  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
 `;
 
-const ToggleSwitchRingComponent = styled.div`
+const ToggleSwitchRingComponent = styled(Motion)`
   position: absolute;
-  width: 16px;
-  height: 16px;
+  width: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
+  height: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
   border: none;
   border-radius: 50%;
   box-sizing: border-box;
 `;
 
 const ToggleSwitch = ({
+  ariaDescribedBy = "",
   isOn = false,
   onToggle = noop,
   disabled = false,
-  name = "",
+  name = "toggle",
   label = null,
   labelLeft = false,
+  labelStyles = "",
+  labelAs = "label",
   themeValues,
   isMobile,
-  dataQa
+  dataQa,
+  minWidth = "80px",
+  extraStyles = ""
 }) => {
-  const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
+  const nameId = name.replace(/ /g, "-");
+  const toggleSwitchRingVariants = {
     off: {
       backgroundColor: disabled
         ? themeValues.disabledBackground
@@ -84,19 +86,9 @@ const ToggleSwitch = ({
         ease: "backIn"
       }
     }
-  });
+  };
 
-  const VisibleSwitch = posed(VisibleSwitchComponent)({
-    focusable: true,
-    hoverable: true,
-    pressable: true,
-    focus: {
-      outline: "0px ridge rgba(170, 50, 220, 0)",
-      boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
-    },
-    hover: {
-      boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
-    },
+  const visibleSwitchVariants = {
     off: {
       border: "1px solid",
       backgroundColor: disabled
@@ -121,7 +113,7 @@ const ToggleSwitch = ({
         ease: "easeIn"
       }
     }
-  });
+  };
 
   const handleKeyDown = e => {
     if (e.keyCode === ENTER) {
@@ -131,13 +123,21 @@ const ToggleSwitch = ({
 
   return (
     <Box
-      padding="0"
-      extraStyles={
-        labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
-      }
+      padding="0.5rem"
+      extraStyles={`
+        margin: 0 0.5rem;
+        ${
+          labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
+        }${extraStyles}`}
     >
       <Center>
-        <Cluster justify="stretch" align="center" overflow="visible">
+        <Cluster
+          justify="space-between"
+          align="center"
+          overflow="visible"
+          childGap="0"
+          minWidth={minWidth ?? (isMobile ? "75px" : "84px")}
+        >
           <Cover minHeight="100%" singleChild>
             <Box
               minWidth="100%"
@@ -146,36 +146,54 @@ const ToggleSwitch = ({
               dataQa={dataQa}
             >
               <HiddenToggleSwitchBox
+                type="checkbox"
+                aria-checked={isOn}
                 aria-label={name}
+                aria-labelledby={label ? `${nameId}-label` : null}
+                aria-describedby={ariaDescribedBy ? ariaDescribedBy : null}
                 checked={isOn}
                 onChange={disabled ? noop : onToggle}
                 disabled={disabled}
-                id={`#toggle-${name}`}
+                id={`#${nameId}`}
                 isMobile={isMobile}
               />
-              <VisibleSwitch
-                name={name}
-                htmlFor={`#toggle-${name}`}
+              <VisibleSwitchComponent
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
-                pose={isOn ? "on" : "off"}
+                initial={isOn ? "on" : "off"}
+                animate={isOn ? "on" : "off"}
+                variants={visibleSwitchVariants}
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
+                useSpan
+                tabindex="0"
               >
-                <ToggleSwitchRing />
-              </VisibleSwitch>
+                <ToggleSwitchRingComponent
+                  variants={toggleSwitchRingVariants}
+                  isMobile={isMobile}
+                />
+              </VisibleSwitchComponent>
             </Box>
           </Cover>
           {label && (
-            <Heading
-              variant={"h4"}
-              weight={FONT_WEIGHT_SEMIBOLD}
-              extraStyles={`margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;`}
-              color={CHARADE_GREY}
+            <Box
+              as={labelAs}
+              aria-label={`${name}: ${label}`}
+              extraStyles={`
+                font-weight: ${FONT_WEIGHT_SEMIBOLD};
+                color: ${CHARADE_GREY};
+                margin: 0 0 0 0.25rem; 
+                position: relative; 
+                bottom: 1px; 
+                display: inline-block; 
+                ${labelStyles}`}
+              id={`${nameId}-label`}
+              htmlFor={labelAs === "label" ? nameId : null}
+              padding="0"
             >
               {label}
-            </Heading>
+            </Box>
           )}
         </Cluster>
       </Center>

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

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ToggleSwitchStories from './ToggleSwitch.stories.js';
+
+<Meta of={ToggleSwitchStories} />
+
+<Title />
+
+The ToggleSwitch is a small button with an on/off state. Use the ToggleSwitch for interactions with binary values, like whether a user's payment method is used as the default, or whether a particular account has automatic payments enabled.
+
+The ToggleSwitch is a dumb component and requires its parent component to provide both its curent state as well as the action that occurs when a user interacts with the switch. The Basic Toggle Switch story demonstrates manually providing the `isOn` value via the story controls, while the other stories feature use of the `useState` hook to setup basic state control.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import ToggleSwitch from "./ToggleSwitch";
+import { noop } from "../../../util/general";
+
+const meta = {
+  title: "Atoms/ToggleSwitch",
+  component: ToggleSwitch,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    isOn: false,
+    onToggle: noop,
+    disabled: false,
+    name: "switch",
+    label: "Autopay Enabled",
+    labelLeft: false,
+    dataQa: undefined
+  },
+  argTypes: {
+    isOn: {
+      description: "Whether the ToggleSwitch is in an on state",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    onToggle: {
+      description: "Function to execute when user interacts with switch",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    disabled: {
+      description: "Whether the ToggleSwitch is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    name: {
+      description: "Accessible name for ToggleSwitch element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    label: {
+      description: "Text to display next to ToggleSwitch",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    labelLeft: {
+      description: "Show the label on the left of the ToggleSwitch",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    dataQa: {
+      description: "data-qa value to use for E2E testing libraries",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const StatefulToggle = ({ useDynamicLabel, ...args }) => {
+  const [toggleOn, setToggleOn] = useState(false);
+  const dynamicLabel = toggleOn ? "Autopay Enabled" : "Autopay Disabled";
+  const label = useDynamicLabel ? dynamicLabel : args.label;
+
+  return (
+    <ToggleSwitch
+      {...args}
+      isOn={toggleOn}
+      onToggle={() => setToggleOn(!toggleOn)}
+      label={label}
+    />
+  );
+};
+
+export const BasicToggleSwitch = {};
+
+export const StatefulToggleSwitch = {
+  render: args => <StatefulToggle {...args} useDynamicLabel />
+};
+
+export const LeftLabelToggleSwitch = {
+  args: {
+    labelLeft: true,
+    label: "Set as Default"
+  },
+  render: args => <StatefulToggle {...args} />
+};
+
+export const DisabledToggleSwitch = {
+  args: {
+    label: "Receive SMS Alerts",
+    disabled: true
+  },
+  render: args => <StatefulToggle {...args} />
+};

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

@@ -17,13 +17,15 @@ const labelStyles = `
 `;
 
 const rightLabelStyles = `
-  ${labelStyles}
-  flex-direction: row;
+  > div {
+    flex-direction: row;
+  }
 `;
 
 const leftLabelStyles = `
-  ${labelStyles}
-  flex-direction: row-reverse;
+  > div {
+    flex-direction: row-reverse;
+  }
 `;
 
 export const fallbackValues = {
@@ -32,5 +34,6 @@ export const fallbackValues = {
   disabledBackgroundLight,
   white,
   rightLabelStyles,
-  leftLabelStyles
+  leftLabelStyles,
+  labelStyles
 };

package/src/components/atoms/typeahead-input/TypeaheadInput.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TypeaheadInputStories from './TypeaheadInput.stories.js';
+
+<Meta of={TypeaheadInputStories} />
+
+<Title />
+
+TypeaheadInput is a wrapper for an uncontrolled input element that includes a visually hidden label and search icon.
+
+<Story />
+
+<Controls />

package/src/components/atoms/typeahead-input/TypeaheadInput.stories.js

@@ -0,0 +1,63 @@
+import TypeaheadInput from "./TypeaheadInput";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Atoms/TypeaheadInput",
+  component: TypeaheadInput,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    handleChange: undefined,
+    placeholder: undefined,
+    id: undefined,
+    labelText: undefined
+  },
+  argTypes: {
+    id: {
+      description: "Used to link `labelText` to the input element",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    placeholder: {
+      description: "Placeholder text for the input element",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    labelText: {
+      description: "Visually hidden label for the input",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    handleChange: {
+      description: "Callback function called when input value changes",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    handleChange: fn(),
+    placeholder: "Name…",
+    id: "search-input",
+    labelText: "Search"
+  }
+};

package/src/components/atoms/wallet-name/WalletName.js

@@ -7,7 +7,6 @@ import { ThemeContext } from "styled-components";
 import Module from "../../molecules/module/Module";
 import Spinner from "../spinner/Spinner";
 import { CHARADE_GREY } from "../../../constants/colors";
-import { noop } from "../../../util/general";
 
 const WalletName = ({
   mainText, // left side text
@@ -16,7 +15,9 @@ const WalletName = ({
   actionText = null, // right side hyperlinked text
   disableAction = false,
   linkButtonExtraStyles = "", // hyperlinked text extraStyles
-  isLoading = false // shows a spinner on the left when true
+  isLoading = false, // shows a spinner on the left when true
+  dataQa = null,
+  actionTextPositionMobile = "outside" // whether action text is outside/below box or inside it
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -49,7 +50,7 @@ const WalletName = ({
               mainText && <Text>{mainText}</Text>
             )}
           </Box>
-          {!isMobile && (
+          {(actionTextPositionMobile === "inside" || !isMobile) && (
             <Box padding="0">
               {text && <Text variant="pXS">{text}</Text>}
               {(text || actionText) && <>&nbsp;</>}
@@ -57,6 +58,7 @@ const WalletName = ({
                 <ButtonWithAction
                   disabled={disableAction}
                   text={actionText}
+                  dataQa={dataQa}
                   action={action}
                   variant="smallGhost"
                   extraStyles={`
@@ -71,7 +73,7 @@ const WalletName = ({
           )}
         </Cluster>
       </Module>
-      {isMobile && (
+      {!!isMobile && actionTextPositionMobile === "outside" && (
         <Cluster
           align="center"
           justify={text || actionText ? "flex-end" : "flex-start"}

package/src/components/atoms/wallet-name/WalletName.oldstories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import WalletName from "./WalletName";
-import { text, object, boolean } from "@storybook/addon-knobs";
+import { text, object, boolean, select } from "@storybook/addon-knobs";
 import page from "../../../../.storybook/page";
 
 export const walletName = () => {
@@ -12,6 +12,31 @@ export const walletName = () => {
       text={text("text", "Not you?", "props")}
       disableAction={boolean("disableAction", false, "props")}
       isLoading={boolean("isLoading", false, "props")}
+      actionTextPositionMobile={select(
+        "actionTextPositionMobile",
+        { inside: "inside", outside: "outside" },
+        "outside",
+        "props"
+      )}
+    />
+  );
+};
+
+export const walletNameWithOverrides = () => {
+  return (
+    <WalletName
+      mainText={text("mainText", "Firstname Lastname", "props")}
+      action={object("action", () => window.alert("action fired!"), "props")}
+      actionText={text("actionText", "Check out as a guest", "props")}
+      text={text("text", "Not you?", "props")}
+      disableAction={boolean("disableAction", false, "props")}
+      isLoading={boolean("isLoading", false, "props")}
+      actionTextPositionMobile={select(
+        "actionTextPositionMobile",
+        { inside: "inside", outside: "outside" },
+        "outside",
+        "props"
+      )}
     />
   );
 };

package/src/components/atoms/wallet-name/index.d.ts

@@ -9,6 +9,8 @@ export interface WalletNameProps {
   text?: string | null;
   isLoading: boolean;
   buttonExtraStyles?: string;
+  dataQa?: string | null;
+  actionTextPositionMobile?: "inside" | "outside";
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &