@thecb/components 9.6.0-beta.2 → 10.0.0

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

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
 
 import RadioSection from "./RadioSection";
 import page from "../../../../.storybook/page";
+import { Box } from "../../atoms/layouts";
 
 const story = page({
   title: "Components|Molecules/RadioSection",
@@ -43,30 +44,106 @@ const cardIconsLabel = `Accepting ${cardIcons
       ? ` and ${cardIcon.altText}.`
       : ` ` + cardIcon.altText
   )}`;
+const groupedSections = [
+  [
+    {
+      id: "new-card-section",
+      title: "Group 1: New Card",
+      content: <p>The form to add a credit card would go here.</p>,
+      rightIconsLabel: cardIconsLabel,
+      rightIcons: cardIcons,
+      required: true,
+      dataQa: "New Card"
+    },
+    {
+      id: "new-bank-section",
+      title: "Group 1: New Bank Account",
+      content: <p>The form to add a credit card would go here.</p>,
+      required: true
+    },
+
+    {
+      id: "bar4",
+      title: "Group 1: Another One",
+      content: <div>Content for another section</div>,
+      required: true
+    }
+  ],
+  [
+    {
+      id: "bar",
+      title: "Group 2: Bar",
+      content: <div>Content 1</div>,
+      required: true
+    }
+  ],
+  [
+    {
+      id: "bar2",
+      title: "Group 3: Bar",
+      content: <div>Content 1</div>,
+      required: true
+    },
+    {
+      id: "baz",
+      title: "Group 3: Baz",
+      content: <div>Content 1</div>,
+      required: true
+    }
+  ]
+];
 const sections = [
   {
-    id: "new-card-section",
-    title: "New Card",
-    content: <p>The form to add a credit card would go here.</p>,
+    id: "new-card-section-2",
+    title: "Section 1: New Card",
+    content: <Box>The form to add a credit card would go here.</Box>,
     rightIconsLabel: cardIconsLabel,
     rightIcons: cardIcons,
     required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
-  { id: "baz", title: "Baz", content: <div>Content 2</div> }
+  {
+    id: "bar3",
+    title: "Section 1: Bar",
+    content: <div>Content 1</div>,
+    required: true
+  },
+  { id: "baz2", title: "Section 1: Baz", content: <div>Content 2</div> }
 ];
 
 export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
+  const [openGroupedSection, setOpenGroupedSection] = useState("");
   return (
-    <RadioSection
-      isMobile={boolean("isMobile", false, "props")}
-      supportsTouch={boolean("isMobile", false, "props")}
-      toggleOpenSection={setOpenSection}
-      openSection={openSection}
-      staggeredAnimation={boolean("staggeredAnimation", false, "props")}
-      sections={sections}
-      isSectionRequired={true}
-    />
+    <>
+      <Box padding="0 1rem" extraStyles="text-align: center;">
+        <p>
+          Using <b>sections</b>
+        </p>
+      </Box>
+      <RadioSection
+        isMobile={boolean("isMobile", false, "props")}
+        supportsTouch={boolean("isMobile", false, "props")}
+        toggleOpenSection={setOpenSection}
+        openSection={openSection}
+        staggeredAnimation={boolean("staggeredAnimation", false, "props")}
+        sections={sections}
+        isSectionRequired={true}
+      />
+      <Box />
+      <Box padding="0 1rem" extraStyles="text-align: center;">
+        <p>
+          Using <b>groupedSections</b>
+        </p>
+      </Box>
+      <RadioSection
+        isMobile={boolean("isMobile", false, "props")}
+        supportsTouch={boolean("isMobile", false, "props")}
+        toggleOpenSection={setOpenGroupedSection}
+        openSection={openGroupedSection}
+        staggeredAnimation={boolean("staggeredAnimation", false, "props")}
+        groupedSections={groupedSections}
+        isSectionRequired={true}
+      />
+    </>
   );
 };

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

@@ -1,9 +1,9 @@
-import { WHITE, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
+import { WHITE, GHOST_GREY, ATHENS_GREY } from "../../../constants/colors";
 
 const headingBackgroundColor = `${WHITE}`;
 const headingDisabledColor = `${ATHENS_GREY}`;
 const bodyBackgroundColor = "#eeeeee";
-const borderColor = `${GREY_CHATEAU}`;
+const borderColor = `${GHOST_GREY}`;
 const focusStyles = `outline: none;`;
 
 export const fallbackValues = {