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

package/package.json

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

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-card/PaymentFormCard.js

@@ -198,7 +198,7 @@ const PaymentFormCard = ({
         )}
         {showWalletCheckbox && (
           <Checkbox
-            name="bank checkbox"
+            name="credit card checkbox"
             dataQa="Save credit card to wallet"
             customAriaLabel="Save credit card to wallet (optional)."
             title={

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

@@ -0,0 +1,166 @@
+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} />
+};