@thecb/components 11.10.4 → 11.10.6

package/package.json

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

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

@@ -159,7 +159,7 @@ const InnerRadioSection = ({
               <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
                 <Text
                   as="label"
-                  htmlFor={`radio-input-${idString(section)}`}
+                  htmlFor={`radio-${idString(section)}`}
                   color={CHARADE_GREY}
                 >
                   {section.title}

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

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import RadioSection from "./RadioSection";
+import { Box } from "../../atoms/layouts";
+
+const PaymentMethodSections = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      isSectionRequired={true}
+      sections={[
+        {
+          id: "checking-1234",
+          title: "Checking Account ending in 1234",
+          content: (
+            <Box padding="1rem">
+              <p>Checking account payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Checking Account"
+        },
+        {
+          id: "savings-5678",
+          title: "Savings Account ending in 5678",
+          content: (
+            <Box padding="1rem">
+              <p>Savings account payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Savings Account"
+        },
+        {
+          id: "card-4321",
+          title: "Card ending in 4321",
+          content: (
+            <Box padding="1rem">
+              <p>Credit card payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Credit Card"
+        }
+      ]}
+    />
+  );
+};
+
+const BasicSections = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      sections={[
+        {
+          id: "section-a",
+          title: "Section A",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section A</p>
+            </Box>
+          )
+        },
+        {
+          id: "section-b",
+          title: "Section B",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section B</p>
+            </Box>
+          )
+        },
+        {
+          id: "section-c",
+          title: "Section C",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section C</p>
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+const WithDisabledSection = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      sections={[
+        {
+          id: "enabled-section",
+          title: "Enabled Option",
+          content: (
+            <Box padding="1rem">
+              <p>This option is selectable.</p>
+            </Box>
+          )
+        },
+        {
+          id: "disabled-section",
+          title: "Disabled Option",
+          disabled: true,
+          content: (
+            <Box padding="1rem">
+              <p>This option is disabled.</p>
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+const meta = {
+  title: "Molecules/RadioSection",
+  component: RadioSection,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"]
+};
+
+export default meta;
+
+export const PaymentMethods = {
+  render: () => <PaymentMethodSections />
+};
+
+export const Basic = {
+  render: () => <BasicSections />
+};
+
+export const Disabled = {
+  render: () => <WithDisabledSection />
+};

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -54,7 +54,7 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       textDecoration={themeValues.modalLinkTextDecoration}
-      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;`}
       role="button" // This should always be a "button" since it opens a modal
       className="modal-trigger"
     >

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

@@ -0,0 +1,110 @@
+import React from "react";
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+
+const TermsContent = () => (
+  <p>
+    By enrolling, you agree to the automatic payment terms. Payments will be
+    processed on the first of each month using your selected payment method. You
+    may cancel at any time by contacting support. See our{" "}
+    <a href="#">Privacy Policy</a> for more details.
+  </p>
+);
+
+const meta = {
+  title: "Molecules/TermsAndConditionsModal",
+  component: TermsAndConditionsModal,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    link: "Terms and Conditions",
+    title: "Terms and Conditions",
+    terms: <TermsContent />,
+    isOpen: false,
+    linkVariant: "p",
+    initialFocusSelector: "[name='Cancel']"
+  },
+  argTypes: {
+    link: {
+      description: "Text displayed for the modal trigger link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms and Conditions" }
+      }
+    },
+    title: {
+      description: "Title displayed in the modal header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms & Conditions" }
+      }
+    },
+    isOpen: {
+      description: "Whether the modal is currently open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    acceptText: {
+      description:
+        "Text for the accept button. If omitted, only a close button is shown.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    linkVariant: {
+      description: "Text size variant for the trigger link",
+      control: "select",
+      options: ["p", "pL", "pS", "pXS", "pXXS", "pXL"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    initialFocusSelector: {
+      description: "CSS selector for the element that receives initial focus",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Default = {};
+
+export const SmallVariant = {
+  args: {
+    linkVariant: "pS"
+  }
+};
+
+export const ExtraSmallVariant = {
+  args: {
+    linkVariant: "pXS"
+  }
+};
+
+export const LargeVariant = {
+  args: {
+    linkVariant: "pL"
+  }
+};
+
+export const WithAcceptButton = {
+  args: {
+    acceptText: "I Accept"
+  }
+};
+
+export const CustomLinkText = {
+  args: {
+    link: "Learn More",
+    linkVariant: "pS"
+  }
+};