@thecb/components 9.4.0-beta.0 → 9.5.0-beta.0

package/package.json

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

package/src/components/atoms/searchable-select/SearchableSelect.js

@@ -38,7 +38,6 @@ const SearchableSelect = ({
       selectItem(value);
     }
   };
-
   return (
     <Box
       padding="1rem"
@@ -61,25 +60,20 @@ const SearchableSelect = ({
         extraStyles={`overflow-y: scroll; max-height: 250px;`}
       >
         <Stack>
-          {itemList
-            .sort((a, b) =>
-              a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-            )
-            .map(value => (
-              <Checkbox
-                key={value.name}
-                title={value.name}
-                name={value.name}
-                checked={
-                  selectedItems?.find(item => item?.name === value?.name) ??
-                  false
-                }
-                onChange={() => handleSelect(value)}
-                textExtraStyles={`margin: 0;`}
-                disabled={disabled}
-                extraStyles={`margin: 0.5rem;`}
-              />
-            ))}
+          {itemList.map(value => (
+            <Checkbox
+              key={value.name}
+              title={value.name}
+              name={value.name}
+              checked={
+                selectedItems?.find(item => item?.name === value?.name) ?? false
+              }
+              onChange={() => handleSelect(value)}
+              textExtraStyles={`margin: 0;`}
+              disabled={disabled}
+              extraStyles={`margin: 0.5rem;`}
+            />
+          ))}
         </Stack>
       </Box>
     </Box>

package/src/components/atoms/searchable-select/SearchableSelect.stories.js

@@ -14,8 +14,8 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
 
 const items = [
   { name: "Foo", value: "foo-value" },
-  { name: "Baz", value: "baz-value" },
-  { name: "Bar", value: "bar-value" }
+  { name: "Bar", value: "bar-value" },
+  { name: "Baz", value: "baz-value" }
 ];
 
 const FormWrapper = props => {

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

@@ -0,0 +1,207 @@
+import React, { Fragment } from "react";
+import styled from "styled-components";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./InnerRadioSection.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";
+
+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,
+  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: ${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}
+    >
+      <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="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>
+  );
+};
+
+export default themeComponent(
+  InnerRadioSection,
+  "InnerRadioSection",
+  fallbackValues
+);

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

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

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

@@ -1,13 +1,10 @@
 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 { MANATEE_GREY } from "../../../constants/colors";
 import {
   ARROW_DOWN,
   ARROW_LEFT,
@@ -16,27 +13,29 @@ 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";
+/**
+- 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 +56,11 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
+  groupedSections,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
+
   const sectionRefs = useRef(
     [...Array(sections.length)].map(() => createRef())
   );
@@ -93,47 +94,6 @@ 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"
@@ -147,144 +107,58 @@ 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
+        {!!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)
                   }
-                  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
-                        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>
+                  <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="2px" color={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>
   );