@thecb/components 9.3.4-beta.0 → 9.3.4-beta.11

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

@@ -1,34 +1,40 @@
-import React, { Fragment, useState } from "react";
-import styled from "styled-components";
+import React, { createRef, Fragment, useRef, useState } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
-import { AnimatePresence } from "framer-motion";
-import RadioButton from "./radio-button/RadioButton";
-import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
-import { createIdFromString, noop } from "../../../util/general";
-import Text from "../../atoms/text";
-import { CHARADE_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.
-
+import SolidDivider from "../../atoms/solid-divider/SolidDivider";
+import { Box, Stack } from "../../atoms/layouts";
+import { createIdFromString, wrapIndex } from "../../../util/general";
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  ENTER,
+  SPACEBAR
+} from "../../../constants/keyboard";
+import InnerRadioSection from "./InnerRadioSection";
+/**
+- 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 =>
@@ -48,56 +54,44 @@ const RadioSection = ({
   openHeight = "auto",
   containerStyles = "",
   ariaDescribedBy,
-  isSectionRequired = false
+  isSectionRequired = false,
+  groupedSections,
+  ...rest
 }) => {
-  const handleKeyDown = (id, e) => {
-    if (e?.keyCode === 13 || e?.keyCode === 32) {
-      toggleOpenSection(id);
-    }
-  };
+  const [focused, setFocused] = useState(null);
 
-  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 sectionRefs = useRef(
+    [...Array(sections.length)].map(() => createRef())
+  );
 
-  const borderStyles = `
-    border-width: 0 0 1px 0;
-    border-color: ${themeValues.borderColor};
-    border-style: solid;
-    border-radius: 0px;
-    transform-origin: 100% 0;
+  const handleKeyDown = (id, e, i) => {
+    if (e.currentTarget !== e.target) {
+      return;
+    }
 
-    &:last-child {
-      border-width: 0;
+    // Allow Enter and Space to select a section
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+      e.preventDefault();
+      toggleOpenSection(id);
     }
-  `;
 
-  const RightIcon = styled.img`
-    height: ${({ isMobile }) => (isMobile ? "14px" : "18px")};
-    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
-    ${({ fade }) => fade && "opacity: 0.4;"}
-    transition: opacity 0.3s ease;
-  `;
+    // Allow Up and Down arrow navigation between sections
+    if (
+      e.keyCode == ARROW_UP ||
+      e.keyCode == ARROW_DOWN ||
+      e.keyCode == ARROW_LEFT ||
+      e.keyCode == ARROW_RIGHT
+    ) {
+      e.preventDefault();
+      const indexIncrement =
+        e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
+      const nextIndex = wrapIndex(i + indexIncrement, sections.length);
 
-  const [focused, setFocused] = useState(null);
+      sectionRefs?.current[nextIndex]?.current?.focus();
+      setFocused(sections[nextIndex]?.id);
+      toggleOpenSection(sections[nextIndex]?.id);
+    }
+  };
 
   return (
     <Box
@@ -108,141 +102,65 @@ const RadioSection = ({
     >
       <Stack
         childGap="0"
-        aria-role="radiogroup"
+        role="radiogroup"
         aria-required={isSectionRequired}
+        {...rest}
       >
-        {sections
-          .filter(section => !section.hidden)
-          .map(section => (
-            <Motion
-              tabIndex={
-                section.hideRadioButton || section.disabled ? "-1" : "0"
-              }
-              onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
-              onFocus={() => !section.disabled && setFocused(section.id)}
-              onBlur={() => !section.disabled && setFocused(null)}
-              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}
-            >
-              <Stack childGap="0">
-                <Box
-                  padding={
-                    section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
+        {!!sections &&
+          sections
+            .filter(section => !section.hidden)
+            .map((section, i) => (
+              <Fragment key={`radio-section-${sections.indexOf(section)}`}>
+                <InnerRadioSection
+                  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)
                   }
-                  background={
-                    section.disabled
-                      ? themeValues.headingDisabledColor
-                      : themeValues.headingBackgroundColor
-                  }
-                  onClick={
-                    (isMobile && supportsTouch) || section.disabled
-                      ? noop
-                      : () => toggleOpenSection(section.id)
-                  }
-                  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}
+                  ariaLabelledBy={section.id}
+                  ariaDescribedBy={`right-icons-${idString(section)}`}
+                />
+              </Fragment>
+            ))}
+        {!!groupedSections &&
+          groupedSections.map(sectionGroup =>
+            sectionGroup
+              .filter(unfilteredSection => !unfilteredSection.hidden)
+              .map((section, i) => (
+                <Fragment
+                  key={`radio-section-${groupedSections.indexOf(
+                    sectionGroup
+                  )}-${sectionGroup.indexOf(section)}}`}
                 >
-                  <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
-                        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>
+                  <InnerRadioSection
+                    sectionIndex={i}
+                    section={section}
+                    sectionRefs={sectionRefs}
+                    focused={focused}
+                    setFocused={setFocused}
+                    openHeight={openHeight}
+                    ariaLabelledBy={section.id}
+                    ariaDescribedBy={`right-icons-${idString(section)}`}
+                    openSection={openSection}
+                    toggleOpenSection={toggleOpenSection}
+                  />
+                  {sectionGroup.indexOf(section) === sectionGroup.length - 1 &&
+                    groupedSections.indexOf(sectionGroup) !==
+                      groupedSections.length - 1 && (
+                      <SolidDivider
+                        borderSize="1px" // Resulting line is 2px thick due to border from other element
+                        color={themeValues.borderColor}
+                      />
                     )}
-                  </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>
-          ))}
+                </Fragment>
+              ))
+          )}
       </Stack>
     </Box>
   );

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

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import { 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",
@@ -43,30 +44,99 @@ 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
+    },
+    {
+      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: "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",
-    title: "New Card",
-    content: <p>The form to add a credit card would go here.</p>,
+    id: "new-card-section-2",
+    title: "Section 1: New Card",
+    content: <Box>The form to add a credit card would go here.</Box>,
     rightIconsLabel: cardIconsLabel,
     rightIcons: cardIcons,
     required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
-  { id: "baz", title: "Baz", content: <div>Content 2</div> }
+  {
+    id: "bar3",
+    title: "Section 1: Bar",
+    content: <div>Content 1</div>,
+    required: true
+  },
+  { id: "baz2", title: "Section 1: Baz", content: <div>Content 2</div> }
 ];
 
 export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
+  const [openGroupedSection, setOpenGroupedSection] = useState("");
   return (
-    <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 padding="0 1rem" extraStyles="text-align: center;">
+        <p>
+          Using <b>sections</b>, a flat array of section objects.
+        </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>, a multidimensional array of sections,
+          instead of the <b>sections</b> prop.
+        </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}
+      />
+    </>
   );
 };

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

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

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -16,7 +16,7 @@ const RadioButton = ({
   toggleRadio,
   name,
   disabled = false,
-  ariaDescribedBy = "",
+  ariaDescribedBy,
   themeValues,
   ariaLabelledBy = "",
   ariaLabel = null,

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -7,14 +7,31 @@ import { noop } from "../../../util/general";
 
 const groupId = "props";
 
+const Terms = () => (
+  <p>
+    Modal Content: Elit voluptate cupidatat in pariatur anim in excepteur non.{" "}
+    <a href="#modal-bottom" id="focus-me">
+      Laboris elit laboris labore pariatur incididunt
+    </a>{" "}
+    proident occaecat laboris sit elit. Dolor irure enim adipisicing irure
+    consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et pariatur
+    nulla nostrud sit esse. Veniam est occaecat cupidatat est nulla dolor minim
+    nostrud anim ea voluptate. modal content. Elit voluptate cupidatat in
+    pariatur anim in excepteur non. Laboris elit laboris labore pariatur
+    incididunt proident occaecat laboris sit elit. Dolor irure enim adipisicing
+    irure consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et
+    pariatur nulla nostrud sit esse.
+  </p>
+);
+
 export const termsAndConditions = () => (
   <TermsAndConditions
     version={select("version", ["v1", "v2"], "v1", groupId)}
     onCheck={noop}
     isChecked={boolean("isChecked", false, groupId)}
-    html={text("html", "terms and conditions summary", groupId)}
-    terms={text("terms", "terms and conditions modal text", groupId)}
+    terms={<Terms />}
     error={boolean("error", false, groupId)}
+    initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
     description={text("description", "I definitely agree to the", groupId)}
   />
 );

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -10,7 +10,8 @@ const TermsAndConditionsControlV1 = ({
   html,
   terms,
   error = false,
-  linkVariant
+  linkVariant,
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -33,6 +34,7 @@ const TermsAndConditionsControlV1 = ({
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
                 linkVariant={linkVariant}
+                initialFocusSelector={initialFocusSelector}
               />
             )}
           </Stack>

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -28,7 +28,8 @@ const TermsAndConditionsControlV2 = ({
   modalVariant = "default",
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
-  modalTitle = "Terms and Conditions"
+  modalTitle = "Terms and Conditions",
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -79,6 +80,7 @@ const TermsAndConditionsControlV2 = ({
                   toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
+                  initialFocusSelector={initialFocusSelector}
                 />
               )}
             </Cluster>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -15,7 +15,8 @@ const TermsAndConditionsModal = ({
   terms,
   variant,
   linkVariant = "p",
-  themeValues
+  themeValues,
+  initialFocusSelector = ""
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -42,6 +43,7 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
+    initialFocusSelector={initialFocusSelector}
   >
     <Text
       variant={linkVariant}
@@ -52,6 +54,8 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      role="button" // This should always be a "button" since it opens a modal
+      className="modal-trigger"
     >
       {link}
     </Text>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -20,17 +20,22 @@ const linkVariants = {
   pXL: "PXL"
 };
 
+const Terms = () => (
+  <p>
+    Terms content with a <a href="#">link</a> that should NOT get initial focus.
+    Instead, the <code>Cancel</code> button below should.
+  </p>
+);
 export const termsAndConditionsModal = () => (
   <TermsAndConditionsModal
     link={text("text", "Show modal", groupId)}
     title={text("title", "Title", groupId)}
     isOpen={boolean("isOpen", false, groupId)}
-    // toggleOpen={setShowTerms}
-    // toggleAccepted={toggleTermsAccepted}
     acceptText={text("acceptText", "Accept", groupId)}
-    terms={text("terms", "terms and conditions", groupId)}
+    terms={<Terms />}
     variant={select("variants", variants, "default", groupId)}
     linkVariant={select("linkVariants", linkVariants, groupId)}
+    initialFocusSelector="[name='Cancel']"
   />
 );
 

package/src/constants/keyboard.js

@@ -0,0 +1,7 @@
+export const ARROW_LEFT = 37;
+export const ARROW_UP = 38;
+export const ARROW_RIGHT = 39;
+export const ARROW_DOWN = 40;
+export const ENTER = 13;
+export const ESCAPE = 27;
+export const SPACEBAR = 32;

package/src/util/general.js

@@ -163,3 +163,13 @@ export const titleCaseString = string => {
 export const kebabCaseString = string => {
   return string?.replaceAll(" ", "-").toLowerCase();
 };
+
+export const wrapIndex = (index, length) => {
+  if (index <= -1) {
+    return length - 1;
+  } else if (index >= length) {
+    return 0;
+  } else {
+    return index;
+  }
+};