@thecb/components 9.3.0 → 9.3.1-beta.1

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -1,4 +1,4 @@
-import React, { useContext, forwardRef } from "react";
+import React, { useContext } from "react";
 import styled, { ThemeContext } from "styled-components";
 import posed from "react-pose";
 import { linear } from "@popmotion/easing";
@@ -60,36 +60,32 @@ const Spinner = ({ color, isMobile }) => (
   
 */
 
-const ButtonWithAction = forwardRef(
-  (
-    {
-      action = noop,
-      variant = "primary",
-      text,
-      textWrap = false,
-      isLoading = false,
-      loadingColor = "white",
-      dataQa = null,
-      textExtraStyles,
-      contentOverride = false,
-      extraStyles = "",
-      tabIndex,
-      children,
-      extraDisabledStyles,
-      ...rest
-    },
-    ref
-  ) => {
-    const themeContext = useContext(ThemeContext);
-    const themeValues = createThemeValues(
-      themeContext,
-      fallbackValues,
-      "Button",
-      variant
-    );
-    const { isMobile } = themeContext;
+const ButtonWithAction = ({
+  action = noop,
+  variant = "primary",
+  text,
+  textWrap = false,
+  isLoading = false,
+  loadingColor = "white",
+  dataQa = null,
+  textExtraStyles,
+  contentOverride = false,
+  extraStyles = "",
+  tabIndex,
+  children,
+  extraDisabledStyles,
+  ...rest
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Button",
+    variant
+  );
+  const { isMobile } = themeContext;
 
-    const hoverStyles = `
+  const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
@@ -99,7 +95,7 @@ const ButtonWithAction = forwardRef(
     };
     cursor: pointer;
   `;
-    const activeStyles = `
+  const activeStyles = `
     outline: none;
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
@@ -108,7 +104,7 @@ const ButtonWithAction = forwardRef(
       variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
     };
   `;
-    const disabledStyles = `
+  const disabledStyles = `
     background-color: #6D717E;
     border-color: #6D717E;
     color: #FFFFFF;
@@ -120,49 +116,47 @@ const ButtonWithAction = forwardRef(
     ${extraDisabledStyles}
   `;
 
-    return (
-      <Box
-        ref={ref}
-        variant={variant}
-        padding={themeValues.padding}
-        minHeight={themeValues.height}
-        minWidth={themeValues.minWidth}
-        background={themeValues.backgroundColor}
-        border={themeValues.border}
-        hoverStyles={hoverStyles}
-        activeStyles={activeStyles}
-        disabledStyles={disabledStyles}
-        as="button"
-        onClick={isLoading ? undefined : action}
-        borderRadius="2px"
-        theme={themeContext}
-        extraStyles={`margin: 0.5rem; ${extraStyles}`}
-        dataQa={dataQa}
-        tabIndex={tabIndex}
-        {...rest}
-      >
-        {contentOverride ? (
-          children
-        ) : (
-          <Center intrinsic>
-            {isLoading ? (
-              <Spinner color={loadingColor} isMobile={isMobile} />
-            ) : (
-              <Text
-                weight={themeValues.fontWeight}
-                variant={themeValues.fontSizeVariant}
-                color={themeValues.color}
-                textWrap={textWrap}
-                extraStyles={textExtraStyles}
-              >
-                {text}
-              </Text>
-            )}
-          </Center>
-        )}
-      </Box>
-    );
-  }
-);
+  return (
+    <Box
+      variant={variant}
+      padding={themeValues.padding}
+      minHeight={themeValues.height}
+      minWidth={themeValues.minWidth}
+      background={themeValues.backgroundColor}
+      border={themeValues.border}
+      hoverStyles={hoverStyles}
+      activeStyles={activeStyles}
+      disabledStyles={disabledStyles}
+      as="button"
+      onClick={isLoading ? undefined : action}
+      borderRadius="2px"
+      theme={themeContext}
+      extraStyles={`margin: 0.5rem; ${extraStyles}`}
+      dataQa={dataQa}
+      tabIndex={tabIndex}
+      {...rest}
+    >
+      {contentOverride ? (
+        children
+      ) : (
+        <Center intrinsic>
+          {isLoading ? (
+            <Spinner color={loadingColor} isMobile={isMobile} />
+          ) : (
+            <Text
+              weight={themeValues.fontWeight}
+              variant={themeValues.fontSizeVariant}
+              color={themeValues.color}
+              textWrap={textWrap}
+              extraStyles={textExtraStyles}
+            >
+              {text}
+            </Text>
+          )}
+        </Center>
+      )}
+    </Box>
+  );
+};
 
 export default ButtonWithAction;

package/src/components/atoms/icons/TrashIcon.js

@@ -2,48 +2,46 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const TrashIcon = ({ themeValues, iconFill }) => {
-  return (
-    <svg
-      width="20px"
-      height="20px"
-      viewBox="0 0 20 20"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
+const TrashIcon = ({ themeValues }) => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <path
+        d="M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z"
+        id="trash-path-1"
+      ></path>
+    </defs>
+    <g
+      id="trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
     >
-      <defs>
-        <path
-          d="M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z"
-          id="trash-path-1"
-        ></path>
-      </defs>
-      <g
-        id="trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px"
-        stroke="none"
-        strokeWidth="1"
-        fill="none"
-        fillRule="evenodd"
-      >
-        <mask id="trash-mask-2" fill="white">
-          <use xlinkHref="#trash-path-1"></use>
-        </mask>
-        <use
-          id="trash-Mask"
-          fill={iconFill ?? themeValues.singleIconColor}
-          fillRule="nonzero"
-          xlinkHref="#trash-path-1"
-        ></use>
-        <polygon
-          id="trash-Path"
-          fill={iconFill ?? themeValues.singleIconColor}
-          fillRule="nonzero"
-          mask="url(#trash-mask-2)"
-          points="0 0 20 0 20 20 0 20"
-        ></polygon>
-      </g>
-    </svg>
-  );
-};
+      <mask id="trash-mask-2" fill="white">
+        <use xlinkHref="#trash-path-1"></use>
+      </mask>
+      <use
+        id="trash-Mask"
+        fill={themeValues.singleIconColor}
+        fillRule="nonzero"
+        xlinkHref="#trash-path-1"
+      ></use>
+      <polygon
+        id="trash-Path"
+        fill={themeValues.singleIconColor}
+        fillRule="nonzero"
+        mask="url(#trash-mask-2)"
+        points="0 0 20 0 20 20 0 20"
+      ></polygon>
+    </g>
+  </svg>
+);
 
 export default themeComponent(TrashIcon, "Icons", fallbackValues, "primary");

package/src/components/atoms/icons/icons.stories.js

@@ -38,8 +38,7 @@ import {
   SuccessfulIcon,
   VoidedIcon,
   StatusUnknownIcon,
-  AutopayIcon,
-  KebabMenuIcon
+  AutopayIcon
 } from "./index";
 
 const story = page({
@@ -85,4 +84,3 @@ export const successfulIcon = () => <SuccessfulIcon />;
 export const voidedIcon = () => <VoidedIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
-export const kebabMenuIcon = () => <KebabMenuIcon />;

package/src/components/atoms/icons/index.d.ts

@@ -21,4 +21,3 @@ export * from "./SuccessfulIconMedium";
 export * from "./SuccessfulIconSmall";
 export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
-export * from "./KebabMenuIcon";

package/src/components/atoms/icons/index.js

@@ -86,7 +86,6 @@ import ArrowLeftCircleIconMedium from "./ArrowLeftCircleIconMedium";
 import ChargebackIconMedium from "./ChargebackIconMedium";
 import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
-import KebabMenuIcon from "./KebabMenuIcon";
 
 export {
   AccountsIcon,
@@ -176,6 +175,5 @@ export {
   ArrowLeftCircleIconMedium,
   ChargebackIconMedium,
   ChargebackReversalIconMedium,
-  PlusCircleIcon,
-  KebabMenuIcon
+  PlusCircleIcon
 };

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

@@ -48,7 +48,8 @@ const RadioSection = ({
   openHeight = "auto",
   containerStyles = "",
   ariaDescribedBy,
-  isSectionRequired = false
+  isSectionRequired = false,
+  legendText = ""
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -106,143 +107,151 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack
-        childGap="0"
-        aria-role="radiogroup"
-        aria-required={isSectionRequired}
-      >
-        {sections
-          .filter(section => !section.hidden)
-          .map(section => (
-            <Motion
-              tabIndex={
-                section.hideRadioButton || section.disabled ? "-1" : "0"
-              }
-              onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
-              onFocus={() => !section.disabled && setFocused(section.id)}
-              onBlur={() => !section.disabled && setFocused(null)}
-              hoverStyles={themeValues.focusStyles}
-              animate={openSection === section.id ? "open" : "closed"}
-              initial={initiallyOpen ? "open" : "closed"}
-              key={`item-${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}
-                >
-                  <Cluster
-                    justify="space-between"
-                    align="center"
-                    childGap="1px"
-                    nowrap
+      <Stack childGap="0">
+        <fieldset role="radiogroup" tabIndex="0" required={isSectionRequired}>
+          <legend>
+            <Box
+              width="0"
+              srOnly={true}
+              border="0"
+              padding="0"
+              margin="0"
+            ></Box>
+          </legend>
+          {sections
+            .filter(section => !section.hidden)
+            .map(section => (
+              <Motion
+                tabIndex={
+                  section.hideRadioButton || section.disabled ? "-1" : "0"
+                }
+                onKeyDown={e =>
+                  !section.disabled && handleKeyDown(section.id, e)
+                }
+                onFocus={() => !section.disabled && setFocused(section.id)}
+                onBlur={() => !section.disabled && setFocused(null)}
+                hoverStyles={themeValues.focusStyles}
+                animate={openSection === section.id ? "open" : "closed"}
+                initial={initiallyOpen ? "open" : "closed"}
+                key={`item-${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}
                   >
-                    <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)
+                              }
+                              isRequired={section?.required}
+                            />
+                          </Box>
+                        )}
+                        {section.titleIcon && (
+                          <Cluster align="center">{section.titleIcon}</Cluster>
+                        )}
+                        <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
+                          <Text
+                            as="label"
+                            htmlFor={`radio-input-${idString(section)}`}
+                            color={CHARADE_GREY}
+                          >
+                            {section.title}
+                          </Text>
                         </Box>
+                      </Cluster>
+                      {section.rightIcons && (
+                        <Cluster
+                          childGap="0.5rem"
+                          aria-label={section?.rightIconsLabel || null}
+                          role={section?.rightIconsRole || null}
+                        >
+                          {section.rightIcons.map(icon => (
+                            <RightIcon
+                              src={icon.img}
+                              key={icon.img}
+                              fade={!icon.enabled}
+                              isMobile={isMobile}
+                              alt={icon.altText}
+                              aria-disabled={!icon.enabled}
+                            />
+                          ))}
+                        </Cluster>
                       )}
-                      {section.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
-                        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.rightTitleContent && (
-                      <Fragment>{section.rightTitleContent}</Fragment>
+                        {section.content}
+                      </Motion>
                     )}
-                  </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>
-          ))}
+                  </AnimatePresence>
+                </Stack>
+              </Motion>
+            ))}
+        </fieldset>
       </Stack>
     </Box>
   );

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

@@ -60,6 +60,7 @@ export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
   return (
     <RadioSection
+      legendText="Storybook Story for RadioSection"
       isMobile={boolean("isMobile", false, "props")}
       supportsTouch={boolean("isMobile", false, "props")}
       toggleOpenSection={setOpenSection}

package/src/components/atoms/icons/KebabMenuIcon.d.ts

@@ -1 +0,0 @@
-export const KebabMenuIcon: JSX.Element;