@thecb/components 9.3.3-beta.20 → 9.3.3

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

@@ -3,7 +3,6 @@ import { text, 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",
@@ -44,46 +43,6 @@ 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
-    },
-    {
-      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: "bar",
-      title: "Group 2: Bar",
-      content: <div>Content 1</div>,
-      required: true
-    }
-  ],
-  [
-    {
-      id: "bar",
-      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",
@@ -99,35 +58,15 @@ const sections = [
 
 export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
-  const [openGroupedSection, setOpenGroupedSection] = useState("");
   return (
-    <>
-      <p>
-        Using <code>sections</code>, a flat array of sections.
-      </p>
-      <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 />
-      <p>
-        Using <code>groupedSections</code>, a multidimensional array of
-        sections, instead of <code>sections</code> prop.
-      </p>
-      <RadioSection
-        isMobile={boolean("isMobile", false, "props")}
-        supportsTouch={boolean("isMobile", false, "props")}
-        toggleOpenSection={setOpenGroupedSection}
-        openSection={openGroupedSection}
-        staggeredAnimation={boolean("staggeredAnimation", false, "props")}
-        groupedSections={groupedSections}
-        isSectionRequired={true}
-      />
-    </>
+    <RadioSection
+      isMobile={boolean("isMobile", false, "props")}
+      supportsTouch={boolean("isMobile", false, "props")}
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      staggeredAnimation={boolean("staggeredAnimation", false, "props")}
+      sections={sections}
+      isSectionRequired={true}
+    />
   );
 };

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

@@ -7,14 +7,31 @@ import { noop } from "../../../util/general";
 
 const groupId = "props";
 
+const Terms = () => (
+  <p>
+    Modal Content: Elit voluptate cupidatat in pariatur anim in excepteur non.{" "}
+    <a href="#modal-bottom" id="focus-me">
+      Laboris elit laboris labore pariatur incididunt
+    </a>{" "}
+    proident occaecat laboris sit elit. Dolor irure enim adipisicing irure
+    consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et pariatur
+    nulla nostrud sit esse. Veniam est occaecat cupidatat est nulla dolor minim
+    nostrud anim ea voluptate. modal content. Elit voluptate cupidatat in
+    pariatur anim in excepteur non. Laboris elit laboris labore pariatur
+    incididunt proident occaecat laboris sit elit. Dolor irure enim adipisicing
+    irure consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et
+    pariatur nulla nostrud sit esse.
+  </p>
+);
+
 export const termsAndConditions = () => (
   <TermsAndConditions
     version={select("version", ["v1", "v2"], "v1", groupId)}
     onCheck={noop}
     isChecked={boolean("isChecked", false, groupId)}
-    html={text("html", "terms and conditions summary", groupId)}
-    terms={text("terms", "terms and conditions modal text", groupId)}
+    terms={<Terms />}
     error={boolean("error", false, groupId)}
+    initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
     description={text("description", "I definitely agree to the", groupId)}
   />
 );

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

@@ -10,7 +10,8 @@ const TermsAndConditionsControlV1 = ({
   html,
   terms,
   error = false,
-  linkVariant
+  linkVariant,
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -33,6 +34,7 @@ const TermsAndConditionsControlV1 = ({
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
                 linkVariant={linkVariant}
+                initialFocusSelector={initialFocusSelector}
               />
             )}
           </Stack>

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

@@ -28,7 +28,8 @@ const TermsAndConditionsControlV2 = ({
   modalVariant = "default",
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
-  modalTitle = "Terms and Conditions"
+  modalTitle = "Terms and Conditions",
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -79,6 +80,7 @@ const TermsAndConditionsControlV2 = ({
                   toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
+                  initialFocusSelector={initialFocusSelector}
                 />
               )}
             </Cluster>

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

@@ -15,7 +15,8 @@ const TermsAndConditionsModal = ({
   terms,
   variant,
   linkVariant = "p",
-  themeValues
+  themeValues,
+  initialFocusSelector = ""
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -42,6 +43,7 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
+    initialFocusSelector={initialFocusSelector}
   >
     <Text
       variant={linkVariant}
@@ -52,6 +54,8 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      role="button" // This should always be a "button" since it opens a modal
+      className="modal-trigger"
     >
       {link}
     </Text>

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

@@ -20,17 +20,22 @@ const linkVariants = {
   pXL: "PXL"
 };
 
+const Terms = () => (
+  <p>
+    Terms content with a <a href="#">link</a> that should NOT get initial focus.
+    Instead, the <code>Cancel</code> button below should.
+  </p>
+);
 export const termsAndConditionsModal = () => (
   <TermsAndConditionsModal
     link={text("text", "Show modal", groupId)}
     title={text("title", "Title", groupId)}
     isOpen={boolean("isOpen", false, groupId)}
-    // toggleOpen={setShowTerms}
-    // toggleAccepted={toggleTermsAccepted}
     acceptText={text("acceptText", "Accept", groupId)}
-    terms={text("terms", "terms and conditions", groupId)}
+    terms={<Terms />}
     variant={select("variants", variants, "default", groupId)}
     linkVariant={select("linkVariants", linkVariants, groupId)}
+    initialFocusSelector="[name='Cancel']"
   />
 );
 

package/src/constants/index.js

@@ -1,5 +1,4 @@
 import * as colors from "./colors";
 import * as fontWeights from "./style_constants";
-import * as keyboard from "./keyboard.js";
 
-export { colors, fontWeights, keyboard };
+export { colors, fontWeights };

package/src/constants/keyboard.js

@@ -1,6 +1,7 @@
-export const ARROW_DOWN = 40;
 export const ARROW_LEFT = 37;
-export const ARROW_RIGHT = 39;
 export const ARROW_UP = 38;
+export const ARROW_RIGHT = 39;
+export const ARROW_DOWN = 40;
 export const ENTER = 13;
+export const ESCAPE = 27;
 export const SPACEBAR = 32;