@thecb/components 9.5.2-beta.0 → 9.5.2

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

@@ -0,0 +1,210 @@
+import React, { Fragment } from "react";
+import styled from "styled-components";
+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";
+import { MANATEE_GREY } from "../../../constants/colors";
+
+const idString = section =>
+  typeof section.title === "string"
+    ? createIdFromString(section.title)
+    : section.id;
+
+const InnerRadioSection = ({
+  themeValues,
+  isMobile,
+  supportsTouch,
+  section,
+  sectionIndex,
+  openSection = "",
+  toggleOpenSection,
+  staggeredAnimation = false,
+  initiallyOpen = true,
+  openHeight = "auto",
+  ariaDescribedBy,
+  focused,
+  setFocused,
+  sectionRefs,
+  ariaLabelledBy,
+  isLastGroupedItemInSection,
+  onKeyDown = noop
+}) => {
+  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: ${
+      isLastGroupedItemInSection ? MANATEE_GREY : 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 (
+    <Motion
+      tabIndex={section.hideRadioButton || section.disabled ? "-1" : "0"}
+      ref={sectionRefs.current[sectionIndex]}
+      onBlur={() => !section.disabled && setFocused(null)}
+      onFocus={() => !section.disabled && setFocused(section.id)}
+      onKeyDown={onKeyDown}
+      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={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      onClick={
+        (isMobile && supportsTouch) || section.disabled
+          ? noop
+          : () => toggleOpenSection(section.id)
+      }
+      onTouchEnd={
+        isMobile && supportsTouch && !section.disabled
+          ? () => toggleOpenSection(section.id)
+          : noop
+      }
+      id={`inner-radio-section-${sectionIndex}`}
+      data-qa={
+        section.dataQa
+          ? section.dataQa
+          : section.id || `inner-radio-section-${sectionIndex}`
+      }
+    >
+      <Stack childGap="0">
+        <Box
+          padding={section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"}
+          background={
+            section.disabled
+              ? themeValues.headingDisabledColor
+              : themeValues.headingBackgroundColor
+          }
+          key={`header-${section.id}`}
+          borderSize="0px"
+          borderColor={themeValues.borderColor}
+          borderWidthOverride={
+            openSection === section.id && !!section.content
+              ? `0px 0px 1px 0px`
+              : ``
+          }
+          extraStyles={!section.disabled ? "cursor: pointer;" : ""}
+        >
+          <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>
+            )}
+          </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; border-top: 0;`}
+            >
+              {section.content}
+            </Motion>
+          )}
+        </AnimatePresence>
+      </Stack>
+    </Motion>
+  );
+};
+
+export default InnerRadioSection;

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

@@ -1,13 +1,9 @@
 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, wrapIndex } from "../../../util/general";
-import Text from "../../atoms/text";
-import { CHARADE_GREY } from "../../../constants/colors";
+import SolidDivider from "../../atoms/solid-divider/SolidDivider";
+import { Box, Stack } from "../../atoms/layouts";
+import { createIdFromString, wrapIndex } from "../../../util/general";
 import {
   ARROW_DOWN,
   ARROW_LEFT,
@@ -16,27 +12,31 @@ import {
   ENTER,
   SPACEBAR
 } from "../../../constants/keyboard";
-/*
-  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 InnerRadioSection from "./InnerRadioSection";
+import { MANATEE_GREY } from "../../../constants/colors";
 
+/**
+- 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,9 +57,11 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
+  groupedSections,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
+
   const sectionRefs = useRef(
     [...Array(sections.length)].map(() => createRef())
   );
@@ -93,198 +95,73 @@ 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"
-        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)
+      <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)
                   }
-                  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>
+                  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}
+                      />
                     )}
-                  </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,106 @@ 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",
-    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>
+        </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}
+      />
+    </>
   );
 };