@thecb/components 9.3.2 → 9.3.3-beta.20

package/package.json

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

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -70,9 +70,19 @@ const AutopayModal = ({
       : navigateToSettings
   };
 
-  const hoverStyles = "text-decoration: underline;";
-  const activeStyles = "text-decoration: underline;";
+  const hoverStyles = `
+  &:hover {
+    .autopayIcon { fill: ${themeValues.hoverColor}; text-decoration: underline; cursor: pointer; }
+  }`;
 
+  const activeStyles = `
+   &:active {
+    .autopayIcon { fill: ${themeValues.activeColor}; text-decoration: underline; }
+    }`;
+
+  const defaultStyles = `
+    .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
+     `;
   const renderAutoPayControl = () => {
     switch (controlType) {
       case "secondary": {
@@ -116,7 +126,7 @@ const AutopayModal = ({
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
-            extraStyles={"cursor: pointer;"}
+            extraStyles={defaultStyles}
           >
             <Cluster
               justify={isMobile ? "flex-start" : "flex-end"}

package/src/components/molecules/popover/Popover.js

@@ -6,7 +6,6 @@ import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { useOutsideClick } from "../../../hooks";
 import { noop } from "../../../util/general";
-import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Popover.theme";
 
 const arrowBorder = (borderColor, direction, width = "8px") => {
@@ -77,7 +76,7 @@ const Popover = ({
           handleTogglePopover(false);
         }}
         onKeyDown={e => {
-          if (e.keyCode === ESCAPE) {
+          if (e.keyCode === 27) {
             handleTogglePopover(false);
           }
         }}

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

@@ -4,6 +4,7 @@ import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
 import { AnimatePresence } from "framer-motion";
 import RadioButton from "./radio-button/RadioButton";
+import SolidDivider from "../../atoms/solid-divider/SolidDivider";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { createIdFromString, noop, wrapIndex } from "../../../util/general";
 import Text from "../../atoms/text";
@@ -57,6 +58,7 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
+  groupedSections,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
@@ -147,144 +149,306 @@ const RadioSection = ({
         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
+        {!!sections &&
+          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="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}
-                          />
+                    <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.titleIcon && (
-                        <Cluster align="center">{section.titleIcon}</Cluster>
+                      {section.rightTitleContent && (
+                        <Fragment>{section.rightTitleContent}</Fragment>
                       )}
-                      <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}
+                  </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.rightIcons.map(icon => (
-                          <RightIcon
-                            src={icon.img}
-                            key={icon.img}
-                            fade={!icon.enabled}
-                            isMobile={isMobile}
-                            alt={icon.altText}
-                            aria-disabled={!icon.enabled}
-                          />
-                        ))}
-                      </Cluster>
+                        {section.content}
+                      </Motion>
                     )}
-                    {section.rightTitleContent && (
-                      <Fragment>{section.rightTitleContent}</Fragment>
+                  </AnimatePresence>
+                </Stack>
+              </Motion>
+            ))}
+        {!!groupedSections &&
+          groupedSections.map(sectionGroup =>
+            sectionGroup
+              .filter(unfilteredSection => !unfilteredSection.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}
+                  >
+                    <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}
+                        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)}`}
+                      >
+                        <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;`}
+                          >
+                            {section.content}
+                          </Motion>
+                        )}
+                      </AnimatePresence>
+                    </Stack>
+                  </Motion>
+                  {sectionGroup.indexOf(section) === sectionGroup.length - 1 &&
+                    groupedSections.indexOf(sectionGroup) !==
+                      groupedSections.length - 1 && (
+                      <SolidDivider
+                        borderSize="2px"
+                        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>
-          ))}
+                </>
+              ))
+          )}
       </Stack>
     </Box>
   );

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

@@ -3,6 +3,7 @@ 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",
@@ -43,6 +44,46 @@ 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: "bar",
+      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",
@@ -58,15 +99,35 @@ const sections = [
 
 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}
-    />
+    <>
+      <p>
+        Using <code>sections</code>, a flat array of sections.
+      </p>
+      <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 />
+      <p>
+        Using <code>groupedSections</code>, a multidimensional array of
+        sections, instead of <code>sections</code> prop.
+      </p>
+      <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/constants/index.js

@@ -1,4 +1,5 @@
 import * as colors from "./colors";
 import * as fontWeights from "./style_constants";
+import * as keyboard from "./keyboard.js";
 
-export { colors, fontWeights };
+export { colors, fontWeights, keyboard };

package/src/constants/keyboard.js

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