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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "12.1.0-beta.15",
+  "version": "12.1.0-beta.16",
   "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,10 +27,7 @@ const Alert = ({
   contentFullHeight = false,
   ariaRole = null,
   ariaAtomic = true,
-  ariaLive = "polite",
-  ariaLabelledBy = null,
-  headingAs = null,
-  headingId = null
+  ariaLive = "polite"
 }) => {
   const Icon = AlertIcons[variant];
   let contentPadding = maxContentWidth
@@ -63,8 +60,6 @@ const Alert = ({
                     variant={enableSmallText ? "pS" : "p"}
                     color={themeValues.text}
                     weight="600"
-                    {...(headingAs ? { as: headingAs } : {})}
-                    {...(headingId ? { id: headingId } : {})}
                   >
                     {heading}
                   </Text>
@@ -112,9 +107,6 @@ 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,12 +19,6 @@ 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

@@ -2,7 +2,7 @@ import React, { useState, forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { fallbackValues } from "./Checkbox.theme";
 import { noop } from "../../../util/general";
-import { ENTER } from "../../../constants/keyboard";
+import { SPACE_KEY } from "../../../constants/keyboard";
 import Box from "../layouts/Box";
 import Text from "../text";
 import { themeComponent } from "../../../util/themeUtils";
@@ -110,6 +110,7 @@ const Checkbox = forwardRef(
       checkboxExtraStyles,
       hasIconOverride = false,
       icon: Icon,
+      customAriaLabel,
       ...rest
     },
     ref
@@ -117,14 +118,22 @@ const Checkbox = forwardRef(
     const [focused, setFocused] = useState(false);
 
     const handleClick = (e, func) => {
-      if (e.keyCode === ENTER) {
+      if (e.key === SPACE_KEY) {
+        e.preventDefault();
         func();
       }
     };
 
-    const titleId = title ? `checkboxlabel-${name}` : undefined;
-    const ariaLabelledById = labelledById ?? titleId;
-    const ariaLabel = ariaLabelledById ? undefined : name;
+    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;
 
     return (
       <Box
@@ -137,7 +146,7 @@ const Checkbox = forwardRef(
         aria-invalid={error}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledById}
-        aria-describedby={error ? `${name}-error-message` : undefined}
+        aria-describedby={errorMessageNormalized}
         onFocus={() => setFocused(true)}
         onBlur={() => setFocused(false)}
         onKeyDown={e => handleClick(e, onChange)}
@@ -155,7 +164,7 @@ const Checkbox = forwardRef(
         <CheckboxLabelContainer data-qa={dataQa}>
           <CheckboxContainer data-qa="Checkbox">
             <HiddenCheckbox
-              id={`checkbox-${name}`}
+              id={checkboxId}
               disabled={disabled}
               name={name}
               checked={checked}

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

@@ -21,6 +21,7 @@ const meta = {
     extraStyles: undefined,
     textExtraStyles: undefined,
     labelledById: undefined,
+    customAriaLabel: undefined,
     dataQa: null
   },
   argTypes: {
@@ -52,6 +53,13 @@ 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" }
@@ -147,3 +155,20 @@ 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,7 +14,6 @@ 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 = ({
@@ -172,29 +171,42 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {(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>
+        {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"
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -196,29 +196,42 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {(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>
+        {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"
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -1,4 +1,5 @@
 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";
@@ -12,6 +13,15 @@ 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,
@@ -42,6 +52,25 @@ 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

@@ -0,0 +1,172 @@
+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 => (
+    <>
+      <span>Non-inline variants have a gray background by default.</span>
+      <TermsAndConditionsControlV2 {...args} />
+      <span>And they do not render inline with the surrounding text.</span>
+    </>
+  )
+};
+
+export const WithError = {
+  args: {
+    hasError: true,
+    isRequired: true
+  },
+  render: args => <TermsWithCheckbox {...args} hasError={!args.isChecked} />
+};

package/src/constants/keyboard.js

@@ -5,3 +5,4 @@ export const ARROW_DOWN = 40;
 export const ENTER = 13;
 export const ESCAPE = 27;
 export const SPACEBAR = 32;
+export const SPACE_KEY = " ";