@thecb/components 12.1.0-beta.0 → 12.1.0-beta.1

package/package.json

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

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

@@ -122,41 +122,47 @@ const Checkbox = forwardRef(
       }
     };
 
-    const normalizedName = name ? name.replace(/\s+/g, "-") : name;
-    const checkboxId = `checkbox-${normalizedName}`;
-    const titleId = title ? `checkboxlabel-${normalizedName}` : undefined;
-    // aria-label fallback when no visible title or external labelledById is provided
-    const ariaLabel = !labelledById && !title ? name : undefined;
+    const titleId = title ? `checkboxlabel-${name}` : undefined;
+    const ariaLabelledById = labelledById ?? titleId;
+    const ariaLabel = ariaLabelledById ? undefined : name;
 
     return (
       <Box
         ref={ref}
         padding="0"
+        tabIndex="0"
+        role="checkbox"
+        aria-checked={checked}
+        aria-required={isRequired || undefined}
+        aria-invalid={error}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledById}
+        aria-describedby={error ? `${name}-error-message` : undefined}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        onKeyDown={e => handleClick(e, onChange)}
         hiddenStyles={hidden}
         background={themeValues.backgroundColor}
         extraStyles={`
+          :focus {
+            outline: 0;
+          }
           ${extraStyles}; 
           margin: ${checkboxMargin};
         `}
         {...rest}
       >
-        <CheckboxLabelContainer htmlFor={checkboxId} data-qa={dataQa}>
+        <CheckboxLabelContainer data-qa={dataQa}>
           <CheckboxContainer data-qa="Checkbox">
             <HiddenCheckbox
-              id={checkboxId}
+              id={`checkbox-${name}`}
               disabled={disabled}
               name={name}
               checked={checked}
               onChange={onChange}
-              tabIndex="0"
+              tabIndex="-1"
               required={isRequired}
-              aria-invalid={error}
-              aria-label={ariaLabel}
-              aria-labelledby={labelledById}
-              aria-describedby={error ? `${name}-error-message` : undefined}
-              onKeyDown={e => handleClick(e, onChange)}
-              onFocus={() => setFocused(true)}
-              onBlur={() => setFocused(false)}
+              aria-hidden="true"
             />
             <StyledCheckbox
               aria-hidden="true"

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

@@ -95,15 +95,9 @@ const RequiredCheckbox = props => {
         onChange={onChange}
         checked={checked}
         error={!checked}
-        extraStyles="display: inline-block;"
       />
       {!checked && (
-        <div
-          id={`${props.name}-error-message`}
-          style={{ display: "inline-block" }}
-        >
-          This box is required.
-        </div>
+        <div id={`${props.name}-error-message`}>You must check this!</div>
       )}
     </div>
   );

package/src/components/molecules/partial-amount-form/PartialAmountField.js

@@ -39,7 +39,7 @@ const PartialAmountField = ({
               variant={themeValues.detailVariant}
               weight="400"
             >
-              {lineItem.subDescription}
+              {lineItem.subDescription} payment amount
             </Detail>
           </Box>
         </Stack>
@@ -53,6 +53,7 @@ const PartialAmountField = ({
       placeholder="$0.00"
       formatter={moneyFormat}
       isNum
+      isRequired
       decorator={
         <Text variant="p">
           Amount owed:{"  "}

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

@@ -178,7 +178,7 @@ const PaymentFormACH = ({
               <Checkbox
                 name="bank checkbox"
                 dataQa="Save checking account to wallet"
-                title="Save checking account to wallet (optional)."
+                title="Save checking account to wallet."
                 checked={walletCheckboxMarked}
                 onChange={saveToWallet}
               />

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

@@ -202,7 +202,7 @@ const PaymentFormCard = ({
               <Checkbox
                 name="credit card checkbox"
                 dataQa="Save credit card to wallet"
-                title="Save credit card to wallet (optional)."
+                title="Save credit card to wallet."
                 checked={walletCheckboxMarked}
                 onChange={saveToWallet}
               />

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

@@ -1,121 +0,0 @@
-import React, { useState } from "react";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import PaymentFormACH from "./PaymentFormACH";
-import * as PaymentFormACHState from "./PaymentFormACH.state";
-import { noop } from "../../../util/general";
-import { fn } from "@storybook/test";
-
-const store = createStore(
-  PaymentFormACHState.reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const FormWrapper = props => {
-  const [walletChecked, setWalletChecked] = useState(
-    props.walletCheckboxMarked ?? false
-  );
-  return (
-    <PaymentFormACH
-      {...props}
-      walletCheckboxMarked={walletChecked}
-      saveToWallet={() => setWalletChecked(!walletChecked)}
-    />
-  );
-};
-
-const ConnectedForm = connect(
-  PaymentFormACHState.mapStateToProps,
-  PaymentFormACHState.mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Molecules/PaymentFormACH",
-  component: ConnectedForm,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    showErrors: false,
-    hideDefaultPayment: true,
-    allowBankAccountType: false,
-    showWalletCheckbox: false,
-    handleSubmit: noop
-  },
-  argTypes: {
-    showErrors: {
-      description: "Displays validation error messages on each field.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    hideDefaultPayment: {
-      description:
-        "Hides the 'Save as Default Payment Method' checkbox. Defaults to `true`.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    allowBankAccountType: {
-      description: "Shows the account type dropdown (Checking / Savings).",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    showWalletCheckbox: {
-      description:
-        'Shows the "Save checking account to wallet (optional)." checkbox.',
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    handleSubmit: {
-      description: "Function called when Enter is pressed on any text input.",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedForm {...args} />;
-
-export const WithWalletCheckbox = {
-  args: {
-    showWalletCheckbox: true
-  },
-  render: args => <ConnectedForm {...args} />
-};
-
-export const ShowErrors = {
-  args: {
-    showErrors: true
-  },
-  render: args => <ConnectedForm {...args} />
-};
-
-export const WithAccountType = {
-  args: {
-    allowBankAccountType: true
-  },
-  render: args => <ConnectedForm {...args} />
-};

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

@@ -1,120 +0,0 @@
-import React, { useState } from "react";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import PaymentFormCard from "./PaymentFormCard";
-import * as PaymentFormCardState from "./PaymentFormCard.state";
-import { noop } from "../../../util/general";
-import { fn } from "@storybook/test";
-
-const store = createStore(
-  PaymentFormCardState.reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const FormWrapper = props => {
-  const [walletChecked, setWalletChecked] = useState(
-    props.walletCheckboxMarked ?? false
-  );
-  return (
-    <PaymentFormCard
-      {...props}
-      walletCheckboxMarked={walletChecked}
-      saveToWallet={() => setWalletChecked(!walletChecked)}
-    />
-  );
-};
-
-const ConnectedForm = connect(
-  PaymentFormCardState.mapStateToProps,
-  PaymentFormCardState.mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Molecules/PaymentFormCard",
-  component: ConnectedForm,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    showErrors: false,
-    hideZipCode: false,
-    showWalletCheckbox: false,
-    deniedCards: undefined,
-    handleSubmit: noop
-  },
-  argTypes: {
-    showErrors: {
-      description: "Displays validation error messages on each field.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    hideZipCode: {
-      description: "Hides the country dropdown and zip code field.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    showWalletCheckbox: {
-      description:
-        'Shows the "Save credit card to wallet (optional)." checkbox.',
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    deniedCards: {
-      description: 'Array of card brand strings to deny (e.g. `["AMEX"]`).',
-      control: { type: "object" },
-      table: {
-        type: { summary: "string[]" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    handleSubmit: {
-      description: "Function called when Enter is pressed on any text input.",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedForm {...args} />;
-
-export const WithWalletCheckbox = {
-  args: {
-    showWalletCheckbox: true
-  },
-  render: args => <ConnectedForm {...args} />
-};
-
-export const ShowErrors = {
-  args: {
-    showErrors: true
-  },
-  render: args => <ConnectedForm {...args} />
-};
-
-export const WithDeniedCards = {
-  args: {
-    deniedCards: ["AMEX"]
-  },
-  render: args => <ConnectedForm {...args} />
-};