@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/molecules/popover/Popover.stories.js

@@ -0,0 +1,220 @@
+import Popover from "./Popover";
+import AccountsAddIcon from "../../atoms/icons/AccountsAddIcon";
+import {
+  ATHENS_GREY,
+  CHARADE_GREY,
+  CURIOUS_BLUE,
+  ONAHAU_BLUE
+} from "../../../constants/colors";
+
+export default {
+  title: "Molecules/Popover",
+  component: Popover,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    triggerText: "",
+    content: "",
+    hasIcon: false,
+    icon: undefined,
+    iconHelpText: "",
+    popoverID: 0,
+    popoverFocus: false,
+    extraStyles: undefined,
+    textExtraStyles: undefined,
+    minWidth: "250px",
+    maxWidth: "300px",
+    height: "auto",
+    position: undefined,
+    arrowPosition: undefined,
+    arrowDirection: "down",
+    transform: "none",
+    buttonExtraStyles: undefined,
+    backgroundColor: "white",
+    borderColor: "rgba(255, 255, 255, 0.85)",
+    popoverExtraStyles: undefined
+  },
+  argTypes: {
+    triggerText: {
+      description:
+        "Text element that popover is anchored to. Only used if hasIcon is false.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    content: {
+      description: "Content of the popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    hasIcon: {
+      description:
+        "Whether an icon is the trigger for the popover, instead of text",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    icon: {
+      description:
+        "The icon component to display. Requires hasIcon to be true.",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    iconHelpText: {
+      description: "Accessible description of the icon",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    popoverID: {
+      description:
+        "ID value for popover. Use if displaying multiple popovers on the same page.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    popoverFocus: {
+      description: "Whether focus should transfer to popover when it opens",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    extraStyles: {
+      description:
+        "Extra CSS styles to apply to the wrapper component around the trigger and popover",
+      table: {
+        type: { summary: "CSS string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    textExtraStyles: {
+      description: "Extra styles to apply to the text trigger of the popover",
+      table: {
+        type: { summary: "CSS string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of the popover component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "250px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of the popover component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "300px" }
+      }
+    },
+    height: {
+      description: "Height of the popover component. Default sizes to content.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    position: {
+      description:
+        "Object containing values for top/right/bottom/left position of popover relative to trigger",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowPosition: {
+      description:
+        "Object containing values for arrowTop/arrowRight/arrowBottom/arrowLeft position of arrow on popover",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowDirection: {
+      description: "Direction the popover arrow points",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "down" }
+      }
+    },
+    transform: {
+      description: "CSS transform to apply to popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    buttonExtraStyles: {
+      description:
+        "Extra styles to apply to the button that wraps popover trigger",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    backgroundColor: {
+      description: "Background color of the popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "white" }
+      }
+    },
+    borderColor: {
+      description: "Color of the popover arrow",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
+      }
+    },
+    popoverExtraStyles: {
+      description: "Extra styles to apply to the popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export const BasicPopover = {
+  args: {
+    triggerText: "Help",
+    content:
+      "Contact support at 1-800-CTY-VILL for help with your account balance."
+  }
+};
+
+export const IconPopover = {
+  args: {
+    hasIcon: true,
+    icon: AccountsAddIcon,
+    content: "Search for and add a new account to your profile",
+    transform: "skew(15deg, 15deg);"
+  }
+};
+
+export const UnderneathPopover = {
+  args: {
+    triggerText: "What's this?",
+    content: "Popovers can be positioned anywhere around the trigger",
+    position: { top: "50px", right: "50%", left: "50%" },
+    arrowPosition: { arrowRight: "85%", arrowBottom: "100%" },
+    height: "75px",
+    arrowDirection: "up",
+    backgroundColor: `${ONAHAU_BLUE}`,
+    borderColor: `${CURIOUS_BLUE}`
+  }
+};

package/src/components/molecules/radio-group/RadioGroup.js

@@ -6,8 +6,8 @@ import styled from "styled-components";
 import { noop } from "../../../util/general";
 
 const DefaultHeading = styled.div`
-  font-size: 0.875rem;
-  color: ${colors.CHARADE_GREY}
+  ${({ fontSize }) => `font-size: ${fontSize};`}
+  color: ${colors.CHARADE_GREY};
   margin: 0;
   padding: 8px 0px;
 `;
@@ -19,8 +19,13 @@ const StyledFieldset = styled.fieldset`
 const RadioGroup = ({
   headingText,
   groupName,
+  headingFontSize = "0.875rem",
   heading: Heading = (
-    <DefaultHeading role="heading" id={`radio-group-${groupName}-heading`}>
+    <DefaultHeading
+      role="heading"
+      id={`radio-group-${groupName}-heading`}
+      fontSize={headingFontSize}
+    >
       {headingText}
     </DefaultHeading>
   ),

package/src/components/molecules/radio-group/index.d.ts

@@ -17,6 +17,7 @@ export interface RadioGroupProps {
   handleChange?: () => void;
   heading?: ReactNode;
   headingText: string;
+  headingFontSize?: string;
 }
 
 export const RadioGroup: React.FC<Expand<RadioGroupProps> &

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

@@ -69,8 +69,8 @@ const InnerRadioSection = ({
   `;
 
   const RightIcon = styled.img`
-    height: ${({ isMobile }) => (isMobile ? "14px" : "18px")};
-    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
+    height: ${({ isMobile }) => (isMobile ? "16px" : "24px")};
+    width: ${({ isMobile }) => (isMobile ? "24px" : "36px")};
     ${({ fade }) => fade && "opacity: 0.4;"}
     transition: opacity 0.3s ease;
   `;
@@ -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.js

@@ -57,7 +57,8 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
-  groupedSections,
+  groupedSections = [],
+  borderOverride,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
@@ -66,39 +67,66 @@ const RadioSection = ({
     [...Array(sections.length)].map(() => createRef())
   );
 
-  const handleKeyDown = (id, e, i) => {
-    if (e.currentTarget !== e.target) {
+  // Flatten the groupedSections while keeping track of indices
+  const flattenedGroupedSections = groupedSections.flatMap(
+    (group, groupIndex) =>
+      group.map((section, sectionIndex) => ({
+        ...section,
+        groupIndex,
+        sectionIndex
+      }))
+  );
+  const groupedSectionsRefs = useRef(
+    [...Array(flattenedGroupedSections.length)].map(() => createRef())
+  );
+
+  const getFlatGroupIndex = (groupIndex, sectionIndex) =>
+    flattenedGroupedSections.findIndex(
+      item =>
+        item.groupIndex === groupIndex && item.sectionIndex === sectionIndex
+    );
+
+  const handleKeyDown = (e, sectionID, sectionIndex, isGroup) => {
+    const { currentTarget, target, keyCode } = e;
+    if (currentTarget !== target) {
       return;
     }
+    const refs = isGroup ? groupedSectionsRefs : sectionRefs;
+    const currSection = isGroup ? flattenedGroupedSections : sections;
 
     // Allow Enter and Space to select a section
-    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+    if (keyCode === ENTER || keyCode === SPACEBAR) {
       e.preventDefault();
-      toggleOpenSection(id);
+      toggleOpenSection(sectionID);
     }
 
     // Allow Up and Down arrow navigation between sections
     if (
-      e.keyCode == ARROW_UP ||
-      e.keyCode == ARROW_DOWN ||
-      e.keyCode == ARROW_LEFT ||
-      e.keyCode == ARROW_RIGHT
+      keyCode == ARROW_UP ||
+      keyCode == ARROW_DOWN ||
+      keyCode == ARROW_LEFT ||
+      keyCode == ARROW_RIGHT
     ) {
       e.preventDefault();
       const indexIncrement =
-        e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
-      const nextIndex = wrapIndex(i + indexIncrement, sections.length);
-
-      sectionRefs?.current[nextIndex]?.current?.focus();
-      setFocused(sections[nextIndex]?.id);
-      toggleOpenSection(sections[nextIndex]?.id);
+        keyCode == ARROW_RIGHT || keyCode == ARROW_DOWN ? 1 : -1;
+      const nextIndex = wrapIndex(
+        sectionIndex + indexIncrement,
+        currSection.length
+      );
+      const nextRef = refs?.current[nextIndex]?.current;
+      if (nextRef) {
+        nextRef.focus();
+        const nextRadioID = currSection[nextIndex]?.id;
+        setFocused(nextRadioID);
+      }
     }
   };
 
   return (
     <Box
       padding="1px"
-      border={`1px solid ${themeValues.borderColor}`}
+      border={borderOverride || `1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
       role="radiogroup"
@@ -122,7 +150,7 @@ const RadioSection = ({
                   openSection={openSection}
                   toggleOpenSection={toggleOpenSection}
                   onKeyDown={e =>
-                    !section.disabled && handleKeyDown(section.id, e, i)
+                    !section.disabled && handleKeyDown(e, section.id, i)
                   }
                   ariaLabelledBy={section.id}
                   ariaDescribedBy={`right-icons-${idString(section)}`}
@@ -134,33 +162,48 @@ const RadioSection = ({
           groupedSections.map((sectionGroup, sectionGroupIndex) =>
             sectionGroup
               .filter(unfilteredSection => !unfilteredSection.hidden)
-              .map((section, sectionIndex) => (
-                <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
-                  <InnerRadioSection
-                    themeValues={themeValues}
-                    sectionIndex={`${sectionGroupIndex}-${sectionIndex}`}
-                    section={section}
-                    sectionRefs={sectionRefs}
-                    focused={focused}
-                    setFocused={setFocused}
-                    openHeight={openHeight}
-                    ariaLabelledBy={section.id}
-                    ariaDescribedBy={`right-icons-${idString(section)}`}
-                    openSection={openSection}
-                    toggleOpenSection={toggleOpenSection}
-                    isLastGroupedItemInSection={
-                      sectionIndex === sectionGroup.length - 1
-                    }
-                  />
-                  {sectionIndex === sectionGroup.length - 1 &&
-                    sectionGroupIndex !== groupedSections.length - 1 && (
-                      <SolidDivider
-                        borderSize="1px"
-                        borderColor={MANATEE_GREY}
-                      />
-                    )}
-                </Fragment>
-              ))
+              .map((section, sectionIndex) => {
+                const flatGroupSectionIndex = getFlatGroupIndex(
+                  sectionGroupIndex,
+                  sectionIndex
+                );
+                return (
+                  <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
+                    <InnerRadioSection
+                      themeValues={themeValues}
+                      sectionIndex={flatGroupSectionIndex}
+                      section={section}
+                      sectionRefs={groupedSectionsRefs}
+                      focused={focused}
+                      setFocused={setFocused}
+                      openHeight={openHeight}
+                      ariaLabelledBy={section.id}
+                      ariaDescribedBy={`right-icons-${idString(section)}`}
+                      openSection={openSection}
+                      toggleOpenSection={toggleOpenSection}
+                      onKeyDown={e =>
+                        !section.disabled &&
+                        handleKeyDown(
+                          e,
+                          section.id,
+                          flatGroupSectionIndex,
+                          true
+                        )
+                      }
+                      isLastGroupedItemInSection={
+                        sectionIndex === sectionGroup.length - 1
+                      }
+                    />
+                    {sectionIndex === sectionGroup.length - 1 &&
+                      sectionGroupIndex !== groupedSections.length - 1 && (
+                        <SolidDivider
+                          borderSize="1px"
+                          borderColor={MANATEE_GREY}
+                        />
+                      )}
+                  </Fragment>
+                );
+              })
           )}
       </Stack>
     </Box>

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/radio-section/radio-button/RadioButton.js

@@ -25,21 +25,25 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      outline: `3px solid ${themeValues.activeColor}`,
+      outlineWidth: "3px",
+      outlineColor: themeValues.activeColor,
       outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      outline: `3px solid ${themeValues.activeColor}`,
+      outlineWidth: "3px",
+      outlineColor: themeValues.activeColor,
       outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      outline: "0"
+      outlineWidth: "0px",
+      outlineColor: "rgba(0, 0, 0, 0)"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      outline: "0"
+      outlineWidth: "0px",
+      outlineColor: "rgba(0, 0, 0, 0)"
     }
   };
 
@@ -106,7 +110,7 @@ const RadioButton = ({
         width="24px"
         variants={buttonBorder}
         display="flex"
-        extraStyles={`justify-content: center; align-items: center;`}
+        extraStyles={`outline: 0px solid rgba(0, 0, 0, 0); justify-content: center; align-items: center;`}
       >
         <Motion variants={buttonCenter} borderRadius="8px" />
       </Motion>