@thecb/components 9.5.0-beta.9 → 9.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.5.0-beta.9",
+  "version": "9.6.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -144,7 +144,7 @@ const ButtonWithAction = forwardRef(
         {contentOverride ? (
           children
         ) : (
-          <Center intrinsic>
+          <Center intrinsic as="span">
             {isLoading ? (
               <Spinner color={loadingColor} isMobile={isMobile} />
             ) : (

package/src/components/molecules/editable-list/EditableList.js

@@ -39,7 +39,8 @@ const EditableList = ({
   as = "p",
   listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
-  ariaLabel
+  ariaLabel,
+  editItemAriaRole = ""
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -151,6 +152,7 @@ const EditableList = ({
                         action={() => editItem(item.id)}
                         extraStyles={`min-width: 0;`}
                         aria-label={`Edit ${ariaLabel || itemName}`}
+                        role={editItemAriaRole}
                       />
                     </Box>
                   )}

package/src/components/molecules/editable-list/EditableList.stories.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+
+import EditableList from "./EditableList";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Molecules/EditableList",
+  Component: EditableList
+});
+export default story;
+
+export const editableList = () => {
+  return (
+    <EditableList
+      as="h2"
+      canRemove={false}
+      title="Contact first name"
+      titleWeight="600"
+      editItem={() => console.log("edit click")}
+      editItemAriaRole="link"
+      itemName="Contact first name"
+      listPadding="0"
+      renderItem={contactFirstName => contactFirstName}
+      maxItems={1}
+      items={["Ronald"]}
+      qaPrefix="Contact first name"
+      ariaLabel="Contact first name"
+    />
+  );
+};

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -22,8 +22,7 @@ const PartialAmountForm = ({
   clearOnDismount,
   fields,
   actions,
-  showErrors = false,
-  dataQa
+  showErrors = false
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -55,12 +54,7 @@ const PartialAmountForm = ({
 
   const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return (
-    <FormContainer
-      variant={variant}
-      role="form"
-      aria-label="Other amount"
-      data-qa={dataQa}
-    >
+    <FormContainer variant={variant} role="form" aria-label="Other amount">
       <Text variant="p">
         Pay a different amount. The total balance will still be due on the same
         due date.

package/src/components/molecules/radio-section/RadioSection.js

@@ -1,9 +1,13 @@
 import React, { createRef, Fragment, useRef, useState } from "react";
+import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
-import SolidDivider from "../../atoms/solid-divider/SolidDivider";
-import { Box, Stack } from "../../atoms/layouts";
-import { createIdFromString, wrapIndex } from "../../../util/general";
+import { AnimatePresence } from "framer-motion";
+import RadioButton from "./radio-button/RadioButton";
+import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
+import { createIdFromString, noop, wrapIndex } from "../../../util/general";
+import Text from "../../atoms/text";
+import { CHARADE_GREY } from "../../../constants/colors";
 import {
   ARROW_DOWN,
   ARROW_LEFT,
@@ -12,31 +16,27 @@ import {
   ENTER,
   SPACEBAR
 } from "../../../constants/keyboard";
-import InnerRadioSection from "./InnerRadioSection";
-import { MANATEE_GREY } from "../../../constants/colors";
+/*
+  Takes an array of section objects, each object should look like:
+    {
+      title: <React Component(s)>,
+      id: <String> "identifier of section",
+      disabled: boolean, (displays section and grayed out radio but disables interaction)
+      hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
+      hidden: boolean, (hides section entirely)
+      dataQa: string,
+      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
+      rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
+    }
+  
+  Also takes an "openSection" which should equal the id of the section that should be open
+  And a toggleOpenSection. RadioSection will call this function with the id of the section
+  that it is in. It is up to the user to store the open section value in state up from the component
+  using a useState() hook, or reducer.
+
+  The section itself comes with some motion to open/close. To add more motion to the content,
+  wrap your content with a Motion layout primitive and provide appropriate props.
 
-/**
-- The RadioSection component takes either a flat array (via the 'sections' 
-  prop) of section objects or a multidimensional array (via the 'groupedSections' prop) of section objects. Note that if using a multidimensional array, the nesting cannot exceed 2 levels deep.
-- Each 'section' object should look like:
-  {
-    title: <React Component(s)>,
-    id: <String> "identifier of section",
-    disabled: boolean, (displays section and grayed out radio but disables interaction)
-    hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
-    hidden: boolean, (hides section entirely)
-    dataQa: string,
-    content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
-    rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
-  }
-- It also takes an "openSection" which should equal the id of the section that 
-  should be open, along with "toggleOpenSection" 
-- RadioSection will call "toggleOpenSection" with the id of the section
-  that it is in. 
-- It is up to the engineer to store the open section value in state up from the 
-  component using a useState() hook or a reducer.
-- The section itself comes with some motion to open/close. To add more motion 
-  to the content, wrap your content with a Motion layout primitive and provide appropriate props.
 */
 
 const idString = section =>
@@ -57,11 +57,9 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
-  groupedSections,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
-
   const sectionRefs = useRef(
     [...Array(sections.length)].map(() => createRef())
   );
@@ -95,73 +93,198 @@ const RadioSection = ({
     }
   };
 
+  const wrapper = {
+    open: {
+      height: openHeight,
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: staggeredAnimation ? 0.15 : 0
+      }
+    },
+    closed: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: staggeredAnimation ? 0.15 : 0,
+        staggerDirection: -1
+      }
+    }
+  };
+
+  const borderStyles = `
+    border-width: 0 0 1px 0;
+    border-color: ${themeValues.borderColor};
+    border-style: solid;
+    border-radius: 0px;
+    transform-origin: 100% 0;
+
+    &:last-child {
+      border-width: 0;
+    }
+  `;
+
+  const RightIcon = styled.img`
+    height: ${({ isMobile }) => (isMobile ? "14px" : "18px")};
+    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
+    ${({ fade }) => fade && "opacity: 0.4;"}
+    transition: opacity 0.3s ease;
+  `;
+
   return (
     <Box
       padding="1px"
       border={`1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
-      role="radiogroup"
-      aria-required={isSectionRequired}
-      {...rest}
     >
-      <Stack childGap="0">
-        {!!sections &&
-          sections
-            .filter(section => !section.hidden)
-            .map((section, i) => (
-              <Fragment key={`radio-section-${i}`}>
-                <InnerRadioSection
-                  themeValues={themeValues}
-                  sectionIndex={i}
-                  section={section}
-                  sectionRefs={sectionRefs}
-                  focused={focused}
-                  setFocused={setFocused}
-                  openHeight={openHeight}
-                  openSection={openSection}
-                  toggleOpenSection={toggleOpenSection}
-                  onKeyDown={e =>
-                    !section.disabled && handleKeyDown(section.id, e, i)
+      <Stack
+        childGap="0"
+        role="radiogroup"
+        aria-required={isSectionRequired}
+        {...rest}
+      >
+        {sections
+          .filter(section => !section.hidden)
+          .map((section, i) => (
+            <Motion
+              tabIndex={
+                section.hideRadioButton || section.disabled ? "-1" : "0"
+              }
+              ref={sectionRefs.current[i]}
+              onBlur={() => !section.disabled && setFocused(null)}
+              onFocus={() => !section.disabled && setFocused(section.id)}
+              onKeyDown={e =>
+                !section.disabled && handleKeyDown(section.id, e, i)
+              }
+              hoverStyles={themeValues.focusStyles}
+              animate={openSection === section.id ? "open" : "closed"}
+              initial={initiallyOpen ? "open" : "closed"}
+              key={`item-${section.id}`}
+              extraStyles={borderStyles}
+              role="radio"
+              aria-checked={openSection === section.id}
+              aria-disabled={section.disabled}
+              aria-required={section.required}
+              aria-labelledby={section.id}
+              aria-describedby={`right-icons-${idString(section)}`}
+            >
+              <Stack childGap="0">
+                <Box
+                  padding={
+                    section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
+                  }
+                  background={
+                    section.disabled
+                      ? themeValues.headingDisabledColor
+                      : themeValues.headingBackgroundColor
+                  }
+                  onClick={
+                    (isMobile && supportsTouch) || section.disabled
+                      ? noop
+                      : () => toggleOpenSection(section.id)
                   }
-                  ariaLabelledBy={section.id}
-                  ariaDescribedBy={`right-icons-${idString(section)}`}
-                  isLastGroupedItemInSection={false}
-                />
-              </Fragment>
-            ))}
-        {!!groupedSections &&
-          groupedSections.map((sectionGroup, sectionGroupIndex) =>
-            sectionGroup
-              .filter(unfilteredSection => !unfilteredSection.hidden)
-              .map((section, sectionIndex) => (
-                <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
-                  <InnerRadioSection
-                    themeValues={themeValues}
-                    sectionIndex={`${sectionGroupIndex}-${sectionIndex}`}
-                    section={section}
-                    sectionRefs={sectionRefs}
-                    focused={focused}
-                    setFocused={setFocused}
-                    openHeight={openHeight}
-                    ariaLabelledBy={section.id}
-                    ariaDescribedBy={`right-icons-${idString(section)}`}
-                    openSection={openSection}
-                    toggleOpenSection={toggleOpenSection}
-                    isLastGroupedItemInSection={
-                      sectionIndex === sectionGroup.length - 1
-                    }
-                  />
-                  {sectionIndex === sectionGroup.length - 1 &&
-                    sectionGroupIndex !== groupedSections.length - 1 && (
-                      <SolidDivider
-                        borderSize="1px"
-                        borderColor={MANATEE_GREY}
-                      />
+                  onTouchEnd={
+                    isMobile && supportsTouch && !section.disabled
+                      ? () => toggleOpenSection(section.id)
+                      : noop
+                  }
+                  key={`header-${section.id}`}
+                  borderSize="0px"
+                  borderColor={themeValues.borderColor}
+                  borderWidthOverride={
+                    openSection === section.id && !!section.content
+                      ? `0px 0px 1px 0px`
+                      : ``
+                  }
+                  extraStyles={!section.disabled ? "cursor: pointer;" : ""}
+                  dataQa={section.dataQa ? section.dataQa : section.id}
+                >
+                  <Cluster
+                    justify="space-between"
+                    align="center"
+                    childGap="1px"
+                    nowrap
+                  >
+                    <Cluster justify="flex-start" align="center" nowrap>
+                      {!section.hideRadioButton && (
+                        <Box padding="0">
+                          <RadioButton
+                            id={`radio-input-${idString(section)}`}
+                            name={idString(section)}
+                            ariaDescribedBy={ariaDescribedBy}
+                            radioOn={openSection === section.id}
+                            radioFocused={focused === section.id}
+                            toggleRadio={
+                              section.disabled
+                                ? noop
+                                : () => toggleOpenSection(section.id)
+                            }
+                            tabIndex="-1"
+                            isRequired={section.required}
+                          />
+                        </Box>
+                      )}
+                      {section.titleIcon && (
+                        <Cluster align="center">{section.titleIcon}</Cluster>
+                      )}
+                      <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
+                        <Text
+                          as="label"
+                          htmlFor={`radio-input-${idString(section)}`}
+                          color={CHARADE_GREY}
+                        >
+                          {section.title}
+                        </Text>
+                      </Box>
+                    </Cluster>
+                    {section.rightIcons && (
+                      <Cluster
+                        id={`right-icons-${idString(section)}`}
+                        childGap="0.5rem"
+                        aria-label={section.rightIconsLabel || null}
+                        role={section.rightIconsRole || null}
+                      >
+                        {section.rightIcons.map(icon => (
+                          <RightIcon
+                            src={icon.img}
+                            key={icon.img}
+                            fade={!icon.enabled}
+                            isMobile={isMobile}
+                            alt={icon.altText}
+                            aria-disabled={!icon.enabled}
+                          />
+                        ))}
+                      </Cluster>
+                    )}
+                    {section.rightTitleContent && (
+                      <Fragment>{section.rightTitleContent}</Fragment>
                     )}
-                </Fragment>
-              ))
-          )}
+                  </Cluster>
+                </Box>
+                <AnimatePresence initial={false}>
+                  {openSection === section.id && (
+                    <Motion
+                      key={`content-${section.id}`}
+                      padding="0"
+                      background={themeValues.bodyBackgroundColor}
+                      layoutTransition
+                      initial="closed"
+                      animate="open"
+                      exit="closed"
+                      variants={wrapper}
+                      extraStyles={`transform-origin: 100% 0;`}
+                    >
+                      {section.content}
+                    </Motion>
+                  )}
+                </AnimatePresence>
+              </Stack>
+            </Motion>
+          ))}
       </Stack>
     </Box>
   );

package/src/components/molecules/radio-section/RadioSection.stories.js

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
-import { boolean } from "@storybook/addon-knobs";
+import { text, boolean } from "@storybook/addon-knobs";
 
 import RadioSection from "./RadioSection";
 import page from "../../../../.storybook/page";
-import { Box } from "../../atoms/layouts";
 
 const story = page({
   title: "Components|Molecules/RadioSection",
@@ -44,106 +43,30 @@ const cardIconsLabel = `Accepting ${cardIcons
       ? ` and ${cardIcon.altText}.`
       : ` ` + cardIcon.altText
   )}`;
-const groupedSections = [
-  [
-    {
-      id: "new-card-section",
-      title: "Group 1: New Card",
-      content: <p>The form to add a credit card would go here.</p>,
-      rightIconsLabel: cardIconsLabel,
-      rightIcons: cardIcons,
-      required: true,
-      dataQa: "New Card"
-    },
-    {
-      id: "new-bank-section",
-      title: "Group 1: New Bank Account",
-      content: <p>The form to add a credit card would go here.</p>,
-      required: true
-    },
-
-    {
-      id: "bar4",
-      title: "Group 1: Another One",
-      content: <div>Content for another section</div>,
-      required: true
-    }
-  ],
-  [
-    {
-      id: "bar",
-      title: "Group 2: Bar",
-      content: <div>Content 1</div>,
-      required: true
-    }
-  ],
-  [
-    {
-      id: "bar2",
-      title: "Group 3: Bar",
-      content: <div>Content 1</div>,
-      required: true
-    },
-    {
-      id: "baz",
-      title: "Group 3: Baz",
-      content: <div>Content 1</div>,
-      required: true
-    }
-  ]
-];
 const sections = [
   {
-    id: "new-card-section-2",
-    title: "Section 1: New Card",
-    content: <Box>The form to add a credit card would go here.</Box>,
+    id: "new-card-section",
+    title: "New Card",
+    content: <p>The form to add a credit card would go here.</p>,
     rightIconsLabel: cardIconsLabel,
     rightIcons: cardIcons,
     required: true
   },
-  {
-    id: "bar3",
-    title: "Section 1: Bar",
-    content: <div>Content 1</div>,
-    required: true
-  },
-  { id: "baz2", title: "Section 1: Baz", content: <div>Content 2</div> }
+  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
+  { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 
 export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
-  const [openGroupedSection, setOpenGroupedSection] = useState("");
   return (
-    <>
-      <Box padding="0 1rem" extraStyles="text-align: center;">
-        <p>
-          Using <b>sections</b>
-        </p>
-      </Box>
-      <RadioSection
-        isMobile={boolean("isMobile", false, "props")}
-        supportsTouch={boolean("isMobile", false, "props")}
-        toggleOpenSection={setOpenSection}
-        openSection={openSection}
-        staggeredAnimation={boolean("staggeredAnimation", false, "props")}
-        sections={sections}
-        isSectionRequired={true}
-      />
-      <Box />
-      <Box padding="0 1rem" extraStyles="text-align: center;">
-        <p>
-          Using <b>groupedSections</b>
-        </p>
-      </Box>
-      <RadioSection
-        isMobile={boolean("isMobile", false, "props")}
-        supportsTouch={boolean("isMobile", false, "props")}
-        toggleOpenSection={setOpenGroupedSection}
-        openSection={openGroupedSection}
-        staggeredAnimation={boolean("staggeredAnimation", false, "props")}
-        groupedSections={groupedSections}
-        isSectionRequired={true}
-      />
-    </>
+    <RadioSection
+      isMobile={boolean("isMobile", false, "props")}
+      supportsTouch={boolean("isMobile", false, "props")}
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      staggeredAnimation={boolean("staggeredAnimation", false, "props")}
+      sections={sections}
+      isSectionRequired={true}
+    />
   );
 };

package/src/components/molecules/radio-section/RadioSection.theme.js

@@ -1,9 +1,9 @@
-import { WHITE, GHOST_GREY, ATHENS_GREY } from "../../../constants/colors";
+import { WHITE, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
 
 const headingBackgroundColor = `${WHITE}`;
 const headingDisabledColor = `${ATHENS_GREY}`;
 const bodyBackgroundColor = "#eeeeee";
-const borderColor = `${GHOST_GREY}`;
+const borderColor = `${GREY_CHATEAU}`;
 const focusStyles = `outline: none;`;
 
 export const fallbackValues = {