@thecb/components 9.3.1-beta.8 → 9.3.1

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

@@ -1,14 +1,21 @@
-import React, { Fragment, useState } from "react";
+import React, { createRef, Fragment, useRef, useState } from "react";
 import styled from "styled-components";
 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 { createIdFromString, noop, wrapIndex } from "../../../util/general";
 import Text from "../../atoms/text";
 import { CHARADE_GREY } from "../../../constants/colors";
-import SolidDivider from "../../atoms/solid-divider/SolidDivider";
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  ENTER,
+  SPACEBAR
+} from "../../../constants/keyboard";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -49,13 +56,41 @@ const RadioSection = ({
   openHeight = "auto",
   containerStyles = "",
   ariaDescribedBy,
-  isSectionRequired = false
+  isSectionRequired = false,
+  ...rest
 }) => {
-  const areSectionsGrouped = typeof sections?.[0]?.[0] !== "undefined";
-  const handleKeyDown = (id, e) => {
-    if (e?.keyCode === 13 || e?.keyCode === 32) {
+  const [focused, setFocused] = useState(null);
+  const sectionRefs = useRef(
+    [...Array(sections.length)].map(() => createRef())
+  );
+
+  const handleKeyDown = (id, e, i) => {
+    if (e.currentTarget !== e.target) {
+      return;
+    }
+
+    // Allow Enter and Space to select a section
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+      e.preventDefault();
       toggleOpenSection(id);
     }
+
+    // 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);
+
+      sectionRefs?.current[nextIndex]?.current?.focus();
+      setFocused(sections[nextIndex]?.id);
+      toggleOpenSection(sections[nextIndex]?.id);
+    }
   };
 
   const wrapper = {
@@ -99,8 +134,6 @@ const RadioSection = ({
     transition: opacity 0.3s ease;
   `;
 
-  const [focused, setFocused] = useState(null);
-
   return (
     <Box
       padding="1px"
@@ -108,290 +141,150 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup" aria-required={isSectionRequired}>
-        {!areSectionsGrouped &&
-          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-${sections.indexOf(section)}`}
-                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"
-                    }
-                    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}
+      <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)
+                  }
+                  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="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>
+                    <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>
-                      </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>
+                      {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>
-                  </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>
-            ))}
-        {areSectionsGrouped &&
-          sections.map(sectionGroup =>
-            sectionGroup
-              .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-${sections.indexOf(
-                    sectionGroup
-                  )}-${sectionGroup.indexOf(section)}`}
-                  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"
-                      }
-                      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}
-                    >
+                    {section.rightIcons && (
                       <Cluster
-                        justify="space-between"
-                        align="center"
-                        childGap="1px"
-                        nowrap
+                        id={`right-icons-${idString(section)}`}
+                        childGap="0.5rem"
+                        aria-label={section.rightIconsLabel || null}
+                        role={section.rightIconsRole || null}
                       >
-                        <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>
-                        )}
+                        {section.rightIcons.map(icon => (
+                          <RightIcon
+                            src={icon.img}
+                            key={icon.img}
+                            fade={!icon.enabled}
+                            isMobile={isMobile}
+                            alt={icon.altText}
+                            aria-disabled={!icon.enabled}
+                          />
+                        ))}
                       </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>
-                  {sectionGroup.indexOf(section) ===
-                    sectionGroup.length - 1 && (
-                    <SolidDivider
-                      borderSize="2px"
-                      borderColor={themeValues.borderColor}
-                    />
+                    )}
+                    {section.rightTitleContent && (
+                      <Fragment>{section.rightTitleContent}</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>
                   )}
-                </Motion>
-              ))
-          )}
+                </AnimatePresence>
+              </Stack>
+            </Motion>
+          ))}
       </Stack>
     </Box>
   );

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

@@ -1,8 +1,7 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import { text, boolean } from "@storybook/addon-knobs";
-import SolidDivider from "../../atoms/solid-divider/SolidDivider";
+
 import RadioSection from "./RadioSection";
-import { Box } from "../../atoms/layouts";
 import page from "../../../../.storybook/page";
 
 const story = page({
@@ -57,47 +56,17 @@ const sections = [
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 
-const groupedSections = [
-  [
-    {
-      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: "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 [openSectionGrouped, setOpenSectionGrouped] = useState(null);
   return (
-    <Fragment>
-      <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 />
-      <RadioSection
-        isMobile={boolean("isMobile", false, "props")}
-        supportsTouch={boolean("isMobile", false, "props")}
-        toggleOpenSection={setOpenSectionGrouped}
-        openSection={openSectionGrouped}
-        staggeredAnimation={boolean("staggeredAnimation", false, "props")}
-        sections={groupedSections}
-        isSectionRequired={true}
-      />
-    </Fragment>
+    <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/radio-button/RadioButton.js

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

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;
+  }
+};