@thecb/components 5.3.3 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.3.3",
+  "version": "5.5.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/Reel.js

@@ -9,20 +9,28 @@ const Reel = ({
   padding = "1rem",
   justifyContent = "flex-start",
   disableScroll = false,
+  useOrderedList = false,
+  useUnorderedList = false,
   children,
   ...rest
-}) => (
-  <ReelStyled
-    childGap={childGap}
-    height={height}
-    childWidth={childWidth}
-    padding={padding}
-    justifyContent={justifyContent}
-    disableScroll={disableScroll}
-    {...rest}
-  >
-    {safeChildren(children, <Fragment />)}
-  </ReelStyled>
-);
+}) => {
+  const elementType = useOrderedList ? "ol" : useUnorderedList ? "ul" : "div";
+  return (
+    <ReelStyled
+      childGap={childGap}
+      height={height}
+      childWidth={childWidth}
+      padding={padding}
+      justifyContent={justifyContent}
+      disableScroll={disableScroll}
+      as={elementType}
+      useOrderedList={useOrderedList}
+      useUnorderedList={useUnorderedList}
+      {...rest}
+    >
+      {safeChildren(children, <Fragment />)}
+    </ReelStyled>
+  );
+};
 
 export default Reel;

package/src/components/atoms/layouts/Reel.styled.js

@@ -14,4 +14,15 @@ export const ReelStyled = styled.div`
   > * {
     flex: 0 0 ${({ childWidth }) => childWidth};
   }
+
+  ${({ useOrderedList, useUnorderedList }) =>
+    useOrderedList || useUnorderedList
+      ? `
+      margin: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+      list-style-type: none;
+    `
+      : ``}
 `;

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { fallbackValues } from "./CollapsibleSection.theme";
 import { AnimatePresence } from "framer-motion";
 import { themeComponent } from "../../../util/themeUtils";
-import Heading from "../../atoms/heading";
+import Title from "../../atoms/title";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { ChevronIcon } from "../../atoms/icons";
@@ -22,7 +22,9 @@ const CollapsibleSection = ({
   customTitle = false,
   stackTitle = false,
   stackTitleContent,
-  sectionGap = "0.5rem"
+  sectionGap = "0.5rem",
+  name = "",
+  index = 1
 }) => {
   const handleKeyDown = e => {
     if (e.keyCode === 13) {
@@ -31,6 +33,9 @@ const CollapsibleSection = ({
   };
 
   const numChildren = typeof children === "Array" ? children.length : 1;
+  const label =
+    name !== "" ? name : !customTitle ? title : "collapsible section";
+  const id = `${label?.replaceAll(" ", "-")?.toLowerCase()}-${index}`;
 
   const wrapper = {
     open: {
@@ -71,39 +76,45 @@ const CollapsibleSection = ({
     >
       {stackTitle && <Fragment>{stackTitleContent}</Fragment>}
       <Stack childGap={isOpen && !isMobile ? sectionGap : "0rem"}>
-        <Box
-          padding={customPadding ? customPadding : "0"}
-          background={themeValues.headingBackgroundColor}
-          onClick={isMobile && supportsTouch ? noop : toggleSection}
-          onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
-          key="header"
-          hoverStyles={`cursor: pointer;`}
-          tabIndex="0"
-          onKeyDown={handleKeyDown}
-          extraStyles={`z-index: 25;`}
-        >
-          <Cluster justify="space-between" align="center">
-            {customTitle ? (
-              <Box width="calc(100% - 36px)" padding="0px">
-                {title}
-              </Box>
-            ) : (
-              <Heading
-                variant="h6"
-                weight={FONT_WEIGHT_SEMIBOLD}
-                color={themeValues.titleColor}
-                as="h6"
+        <Box padding="0" role="heading" aria-label={label} aria-level={3}>
+          <Box
+            padding={customPadding ? customPadding : "0"}
+            background={themeValues.headingBackgroundColor}
+            onClick={isMobile && supportsTouch ? noop : toggleSection}
+            onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
+            key="header"
+            hoverStyles={`cursor: pointer;`}
+            tabIndex="0"
+            onKeyDown={handleKeyDown}
+            extraStyles={`z-index: 25;`}
+            role="button"
+            aria-expanded={isOpen.toString()}
+            aria-controls={id}
+            id={`${id}-button`}
+          >
+            <Cluster justify="space-between" align="center">
+              {customTitle ? (
+                <Box width="calc(100% - 36px)" padding="0px">
+                  {title}
+                </Box>
+              ) : (
+                <Title
+                  weight={FONT_WEIGHT_SEMIBOLD}
+                  color={themeValues.titleColor}
+                  as="h6"
+                  variant="small"
+                >
+                  {title}
+                </Title>
+              )}
+              <Motion
+                variants={icon}
+                extraStyles={`display: flex; align-items: center;`}
               >
-                {title}
-              </Heading>
-            )}
-            <Motion
-              variants={icon}
-              extraStyles={`display: flex; align-items: center;`}
-            >
-              <ChevronIcon />
-            </Motion>
-          </Cluster>
+                <ChevronIcon />
+              </Motion>
+            </Cluster>
+          </Box>
         </Box>
         <AnimatePresence initial={false}>
           {isOpen && (
@@ -116,6 +127,9 @@ const CollapsibleSection = ({
               exit="closed"
               variants={wrapper}
               extraStyles={`transform-origin: 100% 0; overflow-y: hidden;`}
+              id={`${id}-content`}
+              role={"region"}
+              aria-labelledby={`${id}-button`}
             >
               {children}
             </Motion>

package/src/components/molecules/editable-list/EditableList.js

@@ -7,7 +7,7 @@ import { Box, Stack } from "../../atoms/layouts";
 import Placeholder from "../../atoms/placeholder";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Text from "../../atoms/text";
-import Paragraph from "../../atoms/paragraph";
+import Title from "../../atoms/title";
 import {
   STORM_GREY,
   BOSTON_BLUE,
@@ -35,115 +35,122 @@ const EditableList = ({
   modal: Modal,
   modalProps,
   autoPayMethods,
+  as = "p",
   qaPrefix
-}) => (
-  <Box padding="0rem 0rem 1.5rem 0rem">
-    <Stack childGap="0rem">
-      {title !== "" && (
-        <Box padding="0rem 0rem 0.5rem 0rem">
-          <Paragraph
-            variant="pL"
-            weight={titleWeight}
-            color={CHARADE_GREY}
-            extraStyles="letter-spacing: 0.29px;"
-          >
-            {title}
-          </Paragraph>
-        </Box>
-      )}
-      <Box
-        padding="0"
-        borderRadius="4px"
-        extraStyles={`box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),
-    0px 3px 8px 0px rgb(202, 206, 216);`}
-      >
-        {items.map(item => {
-          const [modalOpen, toggleModal] = useState(false);
-          const expiredItem = item?.expirationStatus ?? ACTIVE;
-          return (
-            <EditableListItem
-              listItemSize={
-                !!item.id &&
-                autoPayMethods?.some(methodID => methodID === item.id)
-                  ? "big"
-                  : listItemSize
-              }
-              key={item.id || item}
-              disabled={expiredItem === EXPIRED}
+}) => {
+  const addText = `Add a${
+    itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
+  } ${itemName}`;
+  return (
+    <Box padding="0rem 0rem 1.5rem 0rem" as="section" aria-labelledby={`li`}>
+      <Stack childGap="0rem">
+        {title !== "" && (
+          <Box padding="0rem 0rem 0.5rem 0rem">
+            <Title
+              as={as}
+              weight={titleWeight}
+              color={CHARADE_GREY}
+              extraStyles="letter-spacing: 0.29px; font-size: 1.125rem;"
             >
-              <Text variant="p" color={CHARADE_GREY}>
-                {renderItem(item)}
-              </Text>
-              <EditableListItemControls>
-                {item.isPrimary && (
-                  <Text
-                    variant="p"
-                    color={STORM_GREY}
-                    extraStyles={`font-style: italic;`}
-                    key={`Default ${itemName}`}
-                  >
-                    Default {itemName}
-                  </Text>
-                )}
-                {canRemove && (
-                  <Box
-                    padding="0 0.5rem"
-                    border="2px solid transparent"
-                    extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
-                    dataQa={qaPrefix + " Remove"}
-                    key={`Remove ${item.id}`}
-                  >
-                    {useModal ? (
-                      <Modal
-                        item={{ ...item }}
-                        {...modalProps}
-                        modalOpen={modalOpen}
-                        toggleModal={toggleModal}
-                      />
-                    ) : (
+              {title}
+            </Title>
+          </Box>
+        )}
+        <Box
+          padding="0"
+          borderRadius="4px"
+          extraStyles={`box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),
+    0px 3px 8px 0px rgb(202, 206, 216);`}
+        >
+          {items.map(item => {
+            const [modalOpen, toggleModal] = useState(false);
+            const expiredItem = item?.expirationStatus ?? ACTIVE;
+            return (
+              <EditableListItem
+                listItemSize={
+                  !!item.id &&
+                  autoPayMethods?.some(methodID => methodID === item.id)
+                    ? "big"
+                    : listItemSize
+                }
+                key={item.id || item}
+                disabled={expiredItem === EXPIRED}
+              >
+                <Text variant="p" color={CHARADE_GREY}>
+                  {renderItem(item)}
+                </Text>
+                <EditableListItemControls>
+                  {item.isPrimary && (
+                    <Text
+                      variant="p"
+                      color={STORM_GREY}
+                      extraStyles={`font-style: italic;`}
+                      key={`Default ${itemName}`}
+                    >
+                      Default {itemName}
+                    </Text>
+                  )}
+                  {canRemove && (
+                    <Box
+                      padding="0 0.5rem"
+                      border="2px solid transparent"
+                      extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
+                      dataQa={qaPrefix + " Remove"}
+                      key={`Remove ${item.id}`}
+                    >
+                      {useModal ? (
+                        <Modal
+                          item={{ ...item }}
+                          {...modalProps}
+                          modalOpen={modalOpen}
+                          toggleModal={toggleModal}
+                        />
+                      ) : (
+                        <ButtonWithAction
+                          variant="smallGhost"
+                          text="Remove"
+                          action={() => removeItem(item.id)}
+                          extraStyles={`min-width: 0;`}
+                          aria-label={`Remove ${itemName}`}
+                        />
+                      )}
+                    </Box>
+                  )}
+                  {canEdit && (
+                    <Box
+                      padding="0 0.5rem"
+                      border="2px solid transparent"
+                      extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
+                      dataQa={qaPrefix + " Edit"}
+                      key={`Edit ${item.id}`}
+                    >
                       <ButtonWithAction
                         variant="smallGhost"
-                        text="Remove"
-                        action={() => removeItem(item.id)}
+                        text="Edit"
+                        action={() => editItem(item.id)}
                         extraStyles={`min-width: 0;`}
+                        aria-label={`Edit ${itemName}`}
                       />
-                    )}
-                  </Box>
-                )}
-                {canEdit && (
-                  <Box
-                    padding="0 0.5rem"
-                    border="2px solid transparent"
-                    extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
-                    dataQa={qaPrefix + " Edit"}
-                    key={`Edit ${item.id}`}
-                  >
-                    <ButtonWithAction
-                      variant="smallGhost"
-                      text="Edit"
-                      action={() => editItem(item.id)}
-                      extraStyles={`min-width: 0;`}
-                    />
-                  </Box>
-                )}
-              </EditableListItemControls>
-            </EditableListItem>
-          );
-        })}
-      </Box>
-      {canAdd && (!maxItems || items.length < maxItems) && (
-        <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
-          <Placeholder
-            text={`Add a${
-              itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
-            } ${itemName}`}
-            action={addItem}
-            dataQa={"Add " + qaPrefix}
-          />
+                    </Box>
+                  )}
+                </EditableListItemControls>
+              </EditableListItem>
+            );
+          })}
         </Box>
-      )}
-    </Stack>
-  </Box>
-);
+        {canAdd && (!maxItems || items.length < maxItems) && (
+          <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
+            <Placeholder
+              text={addText}
+              action={addItem}
+              dataQa={"Add " + qaPrefix}
+              aria-label={addText}
+            />
+          </Box>
+        )}
+      </Stack>
+    </Box>
+  );
+};
 
 export default EditableList;

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -8,7 +8,14 @@ import Text from "../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 // this component needs some fix'n
-const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
+const HighlightTabRow = ({
+  tabs,
+  highlightIndex,
+  themeValues,
+  isMobile,
+  useOrderedList = true,
+  useUnorderedList = false
+}) => {
   const itemsAfterIndex = tabs.slice(highlightIndex).length - 1;
   const itemsBeforeIndex = tabs.slice(0, highlightIndex).length;
   const boxesBefore =
@@ -35,6 +42,8 @@ const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
           childWidth="11rem"
           justifyContent="space-evenly"
           disableScroll
+          useOrderedList={useOrderedList}
+          useUnorderedList={useUnorderedList}
         >
           {repeat(<Box />, boxesBefore)}
           {tabs.map((t, i) => (
@@ -46,6 +55,7 @@ const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
               }
               borderWidthOverride="0 0 3px 0"
               extraStyles="text-align: center;"
+              as="li"
             >
               <Text
                 variant="p"

package/src/components/molecules/module/Module.js

@@ -2,8 +2,20 @@ import React, { Fragment, memo } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Module.theme";
 import Heading from "../../atoms/heading";
+import Title from "../../atoms/title";
 import { Box } from "../../atoms/layouts";
 
+/*
+  New (01/22) - updated <Module /> to use <Title /> atom
+  Because <Title /> decouples size from element, also gave <Module />
+  two new props: "as" and "fontSize"
+
+  When present, <Module /> will use those values to dictate element type and font size.
+
+  For backwards compatability, <Module /> still computes a themed font size and element type based on old
+  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
+*/
+
 const Module = ({
   heading,
   spacing = "1rem",
@@ -11,34 +23,48 @@ const Module = ({
   spacingBottom = "2.5rem",
   themeValues,
   variant = "default",
+  fontSize,
+  as,
   children
-}) => (
-  <Fragment>
-    {heading && (
-      <Heading
-        variant={
-          variant === "small" ? "h6" : variant === "default" ? "h5" : "h2"
-        }
-        weight={themeValues.fontWeight}
-        color={themeValues.fontColor}
-        margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
-        textAlign={themeValues.textAlign}
-      >
-        {heading}
-      </Heading>
-    )}
-    <Box padding={`0 0 ${spacingBottom}`}>
-      <Box
-        padding={padding}
-        background={themeValues.backgroundColor}
-        borderRadius={themeValues.borderRadius}
-        boxShadow={themeValues.boxShadow}
-      >
-        {children}
+}) => {
+  const themedFontSize =
+    variant === "small"
+      ? "1.25rem"
+      : variant === "default"
+      ? "1.375rem"
+      : "2rem";
+  const computedFontSize = fontSize || themedFontSize;
+  const themedElemType =
+    variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
+  const computedElemType = as || themedElemType;
+
+  return (
+    <Fragment>
+      {heading && (
+        <Title
+          weight={themeValues.fontWeight}
+          color={themeValues.fontColor}
+          margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
+          textAlign={themeValues.textAlign}
+          as={computedElemType}
+          extraStyles={`font-size: ${computedFontSize};`}
+        >
+          {heading}
+        </Title>
+      )}
+      <Box padding={`0 0 ${spacingBottom}`}>
+        <Box
+          padding={padding}
+          background={themeValues.backgroundColor}
+          borderRadius={themeValues.borderRadius}
+          boxShadow={themeValues.boxShadow}
+        >
+          {children}
+        </Box>
       </Box>
-    </Box>
-  </Fragment>
-);
+    </Fragment>
+  );
+};
 
 export default memo(
   themeComponent(Module, "Module", fallbackValues, "default")

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -8,7 +8,7 @@ import CollapsibleSection from "../collapsible-section";
 
 import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
-import Heading from "../../atoms/heading";
+import Title from "../../atoms/title";
 import SolidDivider from "../../atoms/solid-divider";
 import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 
@@ -51,6 +51,7 @@ const Collapsible = ({ content, title, supportsTouch, isOpen, setIsOpen }) => (
     initiallyOpen={false}
     toggleSection={() => setIsOpen(!isOpen)}
     customTitle={true}
+    name="Collapsed Payment Details"
   >
     <Motion
       variants={{
@@ -130,18 +131,33 @@ const PaymentDetails = ({
   ) : isCollapsible ? (
     <Box width="100%" padding="none">
       <Cluster justify="space-between" align="center">
-        <Heading variant="h5" weight="700" as="h1">
+        <Title
+          weight={FONT_WEIGHT_BOLD}
+          as="h1"
+          extraStyles={`font-size: 1.375rem;`}
+          id="payment-details-title"
+        >
           {titleText}
-        </Heading>
-        <Heading variant="h5" weight="700" as="h1">
+        </Title>
+        <Title
+          weight={FONT_WEIGHT_BOLD}
+          as="p"
+          extraStyles={`font-size: 1.375rem;`}
+        >
           {displayCurrency(total)}
-        </Heading>
+        </Title>
       </Cluster>
     </Box>
   ) : (
-    <Heading as="h1" variant="h3" weight="700" margin="1rem 0 0 0">
+    <Title
+      as="h1"
+      weight={FONT_WEIGHT_BOLD}
+      margin="1rem 0 0 0"
+      extraStyles={`font-size: 1.75rem;`}
+      id="payment-details-title"
+    >
       {titleText}
-    </Heading>
+    </Title>
   );
   return isCollapsible ? (
     <Collapsible