@thecb/components 12.1.0-beta.13 → 12.1.0-beta.15

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -27,7 +27,10 @@ const Alert = ({
   contentFullHeight = false,
   ariaRole = null,
   ariaAtomic = true,
-  ariaLive = "polite"
+  ariaLive = "polite",
+  ariaLabelledBy = null,
+  headingAs = null,
+  headingId = null
 }) => {
   const Icon = AlertIcons[variant];
   let contentPadding = maxContentWidth
@@ -60,6 +63,8 @@ const Alert = ({
                     variant={enableSmallText ? "pS" : "p"}
                     color={themeValues.text}
                     weight="600"
+                    {...(headingAs ? { as: headingAs } : {})}
+                    {...(headingId ? { id: headingId } : {})}
                   >
                     {heading}
                   </Text>
@@ -107,6 +112,9 @@ const Alert = ({
       aria-live={ariaLive}
       {...(ariaAtomic !== null ? { "aria-atomic": ariaAtomic } : {})}
       {...(ariaRole !== null ? { role: ariaRole } : {})}
+      {...(ariaLabelledBy !== null
+        ? { "aria-labelledby": ariaLabelledBy }
+        : {})}
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

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

@@ -19,6 +19,12 @@ export interface AlertProps {
   innerContentPadding?: string;
   iconPadding?: string;
   contentFullHeight?: boolean;
+  ariaRole?: string;
+  ariaAtomic?: boolean;
+  ariaLive?: string;
+  ariaLabelledBy?: string;
+  headingAs?: string;
+  headingId?: string;
 }
 
 export const Alert: React.FC<Expand<AlertProps> &

package/src/components/atoms/checkbox/Checkbox.js

@@ -110,7 +110,6 @@ const Checkbox = forwardRef(
       checkboxExtraStyles,
       hasIconOverride = false,
       icon: Icon,
-      customAriaLabel,
       ...rest
     },
     ref
@@ -123,16 +122,9 @@ const Checkbox = forwardRef(
       }
     };
 
-    const normalizeName = name ? name.replace(/\s+/g, "-") : "";
-    const checkboxId = `checkbox-${normalizeName}`;
-    const titleId = title ? `checkboxlabel-${normalizeName}` : undefined;
-    const ariaLabelledById = customAriaLabel
-      ? undefined
-      : labelledById ?? titleId;
-    const ariaLabel = ariaLabelledById ? undefined : customAriaLabel ?? name;
-    const errorMessageNormalized = error
-      ? `${normalizeName}-error-message`
-      : undefined;
+    const titleId = title ? `checkboxlabel-${name}` : undefined;
+    const ariaLabelledById = labelledById ?? titleId;
+    const ariaLabel = ariaLabelledById ? undefined : name;
 
     return (
       <Box
@@ -145,7 +137,7 @@ const Checkbox = forwardRef(
         aria-invalid={error}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledById}
-        aria-describedby={errorMessageNormalized}
+        aria-describedby={error ? `${name}-error-message` : undefined}
         onFocus={() => setFocused(true)}
         onBlur={() => setFocused(false)}
         onKeyDown={e => handleClick(e, onChange)}
@@ -163,7 +155,7 @@ const Checkbox = forwardRef(
         <CheckboxLabelContainer data-qa={dataQa}>
           <CheckboxContainer data-qa="Checkbox">
             <HiddenCheckbox
-              id={checkboxId}
+              id={`checkbox-${name}`}
               disabled={disabled}
               name={name}
               checked={checked}

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -21,7 +21,6 @@ const meta = {
     extraStyles: undefined,
     textExtraStyles: undefined,
     labelledById: undefined,
-    customAriaLabel: undefined,
     dataQa: null
   },
   argTypes: {
@@ -53,13 +52,6 @@ const meta = {
         type: { summary: "string" }
       }
     },
-    customAriaLabel: {
-      table: {
-        description:
-          "Overrides the default aria-label derived from `name` or `labelledById`",
-        type: { summary: "string" }
-      }
-    },
     extraStyles: {
       table: {
         type: { summary: "string" }
@@ -155,20 +147,3 @@ export const Hidden = {
   },
   render: args => <CheckboxWithHooks {...args} />
 };
-
-export const CustomAriaLabel = {
-  args: {
-    title: "Save to wallet (optional).",
-    customAriaLabel: "Save to wallet (optional).",
-    name: "save to wallet"
-  },
-  render: args => <CheckboxWithHooks {...args} />
-};
-
-export const SpacesInName = {
-  args: {
-    title: "Accept terms and conditions",
-    name: "accept terms and conditions"
-  },
-  render: args => <RequiredCheckbox {...args} />
-};

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -14,6 +14,7 @@ import {
 } from "../../atoms/form-layouts";
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
+import { Cluster, Cover } from "../../atoms/layouts";
 import TermsAndConditions from "../terms-and-conditions";
 
 const PaymentFormACH = ({
@@ -171,42 +172,29 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="bank checkbox"
-            dataQa="Save checking account to wallet"
-            customAriaLabel="Save checking account to wallet (optional)."
-            title={
-              <>
-                Save checking account to wallet (optional).{" "}
-                {showTerms && (
-                  <span
-                    onClick={e => e.stopPropagation()}
-                    style={{ display: "inline" }}
-                  >
-                    <TermsAndConditions
-                      version="v2"
-                      showCheckbox={false}
-                      description="View "
-                      terms={termsContent}
-                      initialFocusSelector={".modal-close-button"}
-                    />
-                  </span>
-                )}
-              </>
-            }
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
-        )}
-        {!showWalletCheckbox && showTerms && (
-          <TermsAndConditions
-            version="v2"
-            showCheckbox={false}
-            description="View "
-            terms={termsContent}
-            initialFocusSelector=".modal-close-button"
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"} align="center">
+            {showWalletCheckbox && (
+              <Checkbox
+                name="bank checkbox"
+                dataQa="Save checking account to wallet"
+                title="Save checking account to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <TermsAndConditions
+                  version="v2"
+                  showCheckbox={false}
+                  description="View"
+                  terms={termsContent}
+                  initialFocusSelector={".modal-close-button"}
+                />
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -196,42 +196,29 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="credit card checkbox"
-            dataQa="Save credit card to wallet"
-            customAriaLabel="Save credit card to wallet (optional)."
-            title={
-              <>
-                Save credit card to wallet (optional).{" "}
-                {showTerms && (
-                  <span
-                    onClick={e => e.stopPropagation()}
-                    style={{ display: "inline" }}
-                  >
-                    <TermsAndConditions
-                      version="v2"
-                      showCheckbox={false}
-                      description="View "
-                      terms={termsContent}
-                      initialFocusSelector={".modal-close-button"}
-                    />
-                  </span>
-                )}
-              </>
-            }
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
-        )}
-        {!showWalletCheckbox && showTerms && (
-          <TermsAndConditions
-            version="v2"
-            showCheckbox={false}
-            description="View "
-            terms={termsContent}
-            initialFocusSelector=".modal-close-button"
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"} align="center">
+            {showWalletCheckbox && (
+              <Checkbox
+                name="credit card checkbox"
+                dataQa="Save credit card to wallet"
+                title="Save credit card to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <TermsAndConditions
+                  version="v2"
+                  showCheckbox={false}
+                  description="View"
+                  terms={termsContent}
+                  initialFocusSelector={".modal-close-button"}
+                />
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import styled from "styled-components";
 import Checkbox from "../../atoms/checkbox";
 import { Box, Stack, Cluster } from "../../atoms/layouts";
 import Text from "../../atoms/text";
@@ -13,15 +12,6 @@ import { generateShadows } from "../../../util/generateShadows";
 import { useScrollTo } from "../../../hooks";
 
 const TermsAndConditionsTitleDivId = "terms-and-conditions-title";
-const InlineTermsWrapper = styled.span`
-  display: inline;
-  > div {
-    display: inline;
-  }
-  .modal-trigger {
-    display: inline !important;
-  }
-`;
 
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,
@@ -52,25 +42,6 @@ const TermsAndConditionsControlV2 = ({
     }
   };
 
-  if (!showCheckbox && displayInline) {
-    return (
-      <InlineTermsWrapper id={TermsAndConditionsTitleDivId}>
-        {description && <Text color={CHARADE_GREY}>{description}</Text>}
-        {terms && (
-          <TermsAndConditionsModal
-            link={linkText}
-            terms={terms}
-            isOpen={showTerms}
-            toggleOpen={toggleTerms}
-            linkVariant={modalVariant}
-            title={modalTitle}
-            initialFocusSelector={initialFocusSelector}
-          />
-        )}
-      </InlineTermsWrapper>
-    );
-  }
-
   return (
     <Box
       padding={displayInline ? "0" : "1.5rem"}

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.stories.js

@@ -1,166 +0,0 @@
-import TermsAndConditionsControlV2 from "./TermsAndConditionsControlV2";
-import React, { useState } from "react";
-
-const sampleTerms =
-  "By using this service, you agree to the terms and conditions set forth by the provider. All payments are subject to review.";
-
-const meta = {
-  title: "Molecules/TermsAndConditionsControlV2",
-  component: TermsAndConditionsControlV2,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    showCheckbox: true,
-    isChecked: false,
-    hasError: false,
-    errorMessage: "Please accept Terms and Conditions",
-    description: "I agree to the",
-    linkText: "Terms and Conditions",
-    terms: sampleTerms,
-    id: "terms-and-conditions",
-    displayInline: true,
-    modalVariant: "default",
-    checkboxMargin: "4px 8px 4px 4px",
-    modalTitle: "Terms and Conditions",
-    initialFocusSelector: ".modal-close-button",
-    isRequired: false
-  },
-  argTypes: {
-    showCheckbox: {
-      description: "Whether to show the checkbox",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    isChecked: {
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    hasError: {
-      description: "Whether the checkbox is in an error state",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    errorMessage: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Please accept Terms and Conditions" }
-      }
-    },
-    description: {
-      description: "Text displayed before the terms link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: '""' }
-      }
-    },
-    linkText: {
-      description: "Text for the modal trigger link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Terms and Conditions" }
-      }
-    },
-    terms: {
-      description: "Terms content displayed inside the modal",
-      table: {
-        type: { summary: "string" }
-      }
-    },
-    displayInline: {
-      description:
-        "When true with showCheckbox=false, renders inline terms using InlineTermsWrapper",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    modalVariant: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "default" }
-      }
-    },
-    id: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "terms-and-conditions" }
-      }
-    },
-    checkboxMargin: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "4px 8px 4px 4px" }
-      }
-    },
-    modalTitle: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Terms and Conditions" }
-      }
-    },
-    initialFocusSelector: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: '""' }
-      }
-    },
-    isRequired: {
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  }
-};
-
-const TermsWithCheckbox = props => {
-  const [isChecked, setIsChecked] = useState(false);
-
-  return (
-    <TermsAndConditionsControlV2
-      {...props}
-      isChecked={isChecked}
-      onCheck={() => setIsChecked(!isChecked)}
-    />
-  );
-};
-
-export default meta;
-
-export const Default = {
-  render: args => <TermsWithCheckbox {...args} />
-};
-
-export const InlineWithoutCheckbox = {
-  args: {
-    showCheckbox: false,
-    displayInline: true,
-    description: "View "
-  },
-  render: args => <TermsAndConditionsControlV2 {...args} />
-};
-
-export const NonInlineWithoutCheckbox = {
-  args: {
-    showCheckbox: false,
-    displayInline: false,
-    description: "View "
-  },
-  render: args => <TermsAndConditionsControlV2 {...args} />
-};
-
-export const WithError = {
-  args: {
-    hasError: true,
-    isRequired: true
-  },
-  render: args => <TermsWithCheckbox {...args} hasError={!args.isChecked} />
-};