@thecb/components 9.3.0-beta.1 → 9.3.0

package/src/components/molecules/popup-menu/index.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+import Expand from "../../../util/expand";
+
+export interface PopupMenuProps {
+  menuId?: string;
+  children?: ReactNode;
+  triggerText?: string | JSX.Element;
+  hasIcon?: boolean;
+  iconHelpText?: string; // for screen-readers, required if using an icon for trigger
+  menuFocus?: boolean;
+  containerExtraStyles?: string;
+  textExtraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  position?: { top: string; right: string; bottom: string; left: string };
+  transform?: string;
+  disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popupExtraStyles?: string;
+}
+
+export const PopupMenu: React.FC<Expand<PopupMenuProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/popup-menu/index.js

@@ -0,0 +1,3 @@
+import PopupMenu from "./PopupMenu";
+
+export default PopupMenu;

package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { themeComponent } from "../../../../util/themeUtils";
+import { Box, Text } from "../../../atoms";
+import { fallbackValues } from "./PopupMenuItem.theme";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+import { PopupMenuItemContainer } from "./PopupMenuItem.styled";
+
+const PopupMenuItem = ({
+  id,
+  closeMenuCallback,
+  action,
+  themeValues,
+  text,
+  hasIcon = false,
+  isDeleteAction = false,
+  icon: Icon,
+  textExtraStyles,
+  hoverStyles,
+  activeStyles,
+  extraStyles,
+  ...rest
+}) => {
+  return (
+    <PopupMenuItemContainer
+      id={id}
+      role="menuItem"
+      text={text}
+      action={() => {
+        action();
+        closeMenuCallback();
+      }}
+      variant="smallGhost"
+      isDeleteAction={isDeleteAction}
+      theme={themeValues}
+      contentOverride
+      textExtraStyles={textExtraStyles}
+      hoverStyles={hoverStyles}
+      extraStyles={extraStyles}
+      activeStyles={`outline: none; ${activeStyles}`}
+      {...rest}
+    >
+      <Box
+        extraStyles={`
+            display: flex;
+            gap: 8px;
+            justify-content: center;
+            padding: 0;
+        `}
+      >
+        {hasIcon && (
+          <Icon
+            iconFill={
+              isDeleteAction
+                ? themeValues.menuItemColorDelete
+                : themeValues.menuItemColor
+            }
+          />
+        )}
+        {text && (
+          <Text
+            variant="pS"
+            weight={FONT_WEIGHT_SEMIBOLD}
+            fontFamily="Public Sans, sans-serif"
+            color={
+              isDeleteAction
+                ? themeValues.menuItemColorDelete
+                : themeValues.menuItemColor
+            }
+            extraStyles={textExtraStyles}
+          >
+            {text}
+          </Text>
+        )}
+      </Box>
+    </PopupMenuItemContainer>
+  );
+};
+
+export default themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues);

package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.styled.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+
+export const PopupMenuItemContainer = styled(ButtonWithAction)`
+  width: 100%;
+  margin: 0;
+  padding: 17px 11px;
+  margin-bottom: 5px;
+  border: 0;
+  cursor: pointer;
+  text-decoration: none;
+  ${({ theme, isDeleteAction }) => `
+    background-color: ${theme.menuItemBackgroundColor};
+    color: ${isDeleteAction ? theme.menuItemColorDelete : theme.menuItemColor};
+  `}
+  &:hover,
+  &:active {
+    text-decoration: none;
+    ${({ theme, isDeleteAction }) => `
+    background-color: ${
+      isDeleteAction
+        ? theme.menuItemHoverBackgroundColorDelete
+        : theme.menuItemHoverBackgroundColor
+    };
+  `}
+  }
+`;

package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.theme.js

@@ -0,0 +1,23 @@
+import {
+  ROYAL_BLUE_VIVID,
+  CORNFLOWER_BLUE,
+  RAZZMATAZZ_RED,
+  BLUSH_RED,
+  WHITE
+} from "../../../../constants/colors";
+
+const menuItemBackgroundColor = WHITE;
+const menuItemColor = ROYAL_BLUE_VIVID;
+const menuItemColorDelete = RAZZMATAZZ_RED;
+const menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
+const menuItemHoverBackgroundColorDelete = BLUSH_RED;
+const menuItemHoverColor = ROYAL_BLUE_VIVID;
+
+export const fallbackValues = {
+  menuItemBackgroundColor,
+  menuItemColor,
+  menuItemColorDelete,
+  menuItemHoverBackgroundColor,
+  menuItemHoverBackgroundColorDelete,
+  menuItemHoverColor
+};

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

@@ -47,7 +47,8 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy
+  ariaDescribedBy,
+  isSectionRequired = false
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -105,7 +106,11 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup">
+      <Stack
+        childGap="0"
+        aria-role="radiogroup"
+        aria-required={isSectionRequired}
+      >
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -124,6 +129,7 @@ const RadioSection = ({
               role="radio"
               aria-checked={openSection === section.id}
               aria-disabled={section.disabled}
+              aria-required={section?.required}
             >
               <Stack childGap="0">
                 <Box
@@ -177,6 +183,7 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
+                            isRequired={section?.required}
                           />
                         </Box>
                       )}

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

@@ -49,9 +49,10 @@ const sections = [
     title: "New Card",
     content: <p>The form to add a credit card would go here.</p>,
     rightIconsLabel: cardIconsLabel,
-    rightIcons: cardIcons
+    rightIcons: cardIcons,
+    required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div> },
+  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 
@@ -65,6 +66,7 @@ export const radioSection = () => {
       openSection={openSection}
       staggeredAnimation={boolean("staggeredAnimation", false, "props")}
       sections={sections}
+      isSectionRequired={true}
     />
   );
 };

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -19,7 +19,8 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null
+  ariaLabel = null,
+  isRequired = false
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -93,6 +94,7 @@ const RadioButton = ({
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
+        required={isRequired}
         {...extraProps}
       />
       <Motion

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import { text, boolean, select } from "@storybook/addon-knobs";
 
 import TermsAndConditions from "./TermsAndConditions";
 import page from "../../../../.storybook/page";
@@ -9,11 +9,13 @@ const groupId = "props";
 
 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)}
     error={boolean("error", false, groupId)}
+    description={text("description", "I definitely agree to the", groupId)}
   />
 );
 

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

@@ -22,7 +22,6 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
-          isRequired={true}
         />
         <Box padding="0 0 0 58px">
           <Stack>

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

@@ -9,7 +9,9 @@ import {
   ERROR_COLOR
 } from "../../../constants/colors";
 import { generateShadows } from "../../../util/generateShadows";
-import useScrollTo from "../../../util/useScrollTo";
+import { useScrollTo } from "../../../hooks";
+
+const TermsAndConditionsTitleDivId = "terms-and-conditions-title";
 
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,
@@ -57,7 +59,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
-              isRequired={true}
+              labelledById={TermsAndConditionsTitleDivId}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>
@@ -66,6 +68,7 @@ const TermsAndConditionsControlV2 = ({
               align="center"
               nowrap
               extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; };`}
+              id={TermsAndConditionsTitleDivId}
             >
               {description && <Text color={CHARADE_GREY}>{description}</Text>}
               {terms && (

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { Box, Cluster } from "../../atoms/layouts";
+import { Paragraph } from "../../atoms";
+import {
+  SuccessfulIconMedium,
+  ErroredIcon,
+  IconQuitLarge
+} from "../../atoms/icons";
+import {
+  ERROR_BACKGROUND_COLOR,
+  HINT_GREEN,
+  WHITE
+} from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { generateShadows } from "../../../util/generateShadows";
+
+const VARIANTS = {
+  SUCCESS: "success",
+  ERROR: "error"
+};
+
+const ToastNotification = ({
+  variant = VARIANTS.SUCCESS,
+  message = "",
+  toastOpen,
+  closeToastNotification,
+  extraStyles,
+  minWidth = "112px",
+  maxWidth = "350px",
+  height = "56px",
+  childGap = "1rem",
+  backgroundColor
+}) => (
+  <Box
+    onClick={closeToastNotification}
+    background={
+      backgroundColor
+        ? backgroundColor
+        : variant === VARIANTS.SUCCESS
+        ? HINT_GREEN
+        : variant === VARIANTS.ERROR
+        ? ERROR_BACKGROUND_COLOR
+        : WHITE
+    }
+    minWidth={minWidth}
+    minHeight={height && parseInt(height) < 100 ? height : "100px"}
+    height={height ? height : "auto"}
+    tabIndex={toastOpen ? "-1" : "0"}
+    padding="0rem 1rem"
+    borderRadius="4px"
+    boxShadow={generateShadows().standard.base}
+    extraStyles={`
+      display: ${toastOpen ? "block" : "none"};
+      position: fixed; bottom: 4rem; left: 4rem;
+      ${extraStyles};
+      cursor: pointer;
+    `}
+  >
+    <Cluster align="center" childGap={childGap}>
+      {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+      {variant === VARIANTS.ERROR && <ErroredIcon />}
+      <Box padding="1rem 0" maxWidth={maxWidth}>
+        <Paragraph
+          weight={FONT_WEIGHT_SEMIBOLD}
+          extraStyles={"word-break: break-word;"}
+        >
+          {message}
+        </Paragraph>
+      </Box>
+      <IconQuitLarge />
+    </Cluster>
+  </Box>
+);
+
+export default ToastNotification;

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import ToastNotification from "./ToastNotification";
+import page from "../../../../.storybook/page";
+import { useToastNotification } from "../../../hooks";
+import { ToastVariants } from "../../../types/common";
+
+export const toastNotificationSuccess = () => {
+  const {
+    isToastOpen,
+    toastVariant,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification();
+
+  useEffect(() => {
+    showToast({
+      message: "Success!",
+      variant: ToastVariants.SUCCESS
+    });
+  }, []);
+
+  return (
+    <ToastNotification
+      variant={toastVariant}
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
+    />
+  );
+};
+
+toastNotificationSuccess.storyName = "Success Toast";
+
+export const toastNotificationError = () => {
+  const {
+    isToastOpen,
+    toastVariant,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification();
+
+  useEffect(() => {
+    showToast({
+      message: "An error occurred",
+      variant: ToastVariants.ERROR
+    });
+  }, []);
+
+  return (
+    <ToastNotification
+      variant={toastVariant}
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
+    />
+  );
+};
+toastNotificationError.storyName = "Error Toast";
+
+const story = page({
+  title: "Components|Molecules/ToastNotification",
+  Component: ToastNotification
+});
+
+export default story;

package/src/components/molecules/toast-notification/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ToastNotificationProps {
+  variant?: string;
+  message: string;
+  toastOpen: boolean;
+  closeToastNotification: (event?: React.MouseEvent<HTMLElement>) => void;
+  extraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  childGap?: string;
+  backgroundColor?: string;
+}
+
+export const ToastNotification: React.FC<Expand<ToastNotificationProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/toast-notification/index.js

@@ -0,0 +1,3 @@
+import ToastNotification from "./ToastNotification";
+
+export default ToastNotification;

package/src/constants/colors.d.ts

@@ -97,6 +97,7 @@ export const COSMOS_RED: Color;
 export const BLUSH_RED: Color;
 
 export const ERROR_COLOR: Color;
+export const ERROR_BACKGROUND_COLOR: Color;
 
 export const ALERT_COLORS: {
   warn: ColorSet;

package/src/constants/colors.js

@@ -56,6 +56,7 @@ const INFO_BLUE = "#E4F4FD";
 const CORNFLOWER_BLUE = "#EBEFFB";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
+const MATISSE_BLUE_DARK = "#105C7D";
 const ROYAL_BLUE = "#3181E3";
 const ROYAL_BLUE_VIVID = "#3B5BDB";
 const ASTRAL_BLUE = "#3176AA";
@@ -90,6 +91,7 @@ const BLUSH_RED = "#FFF0F5";
 
 // Second level color constants
 const ERROR_COLOR = RAZZMATAZZ_RED;
+const ERROR_BACKGROUND_COLOR = "#FFF4F8";
 
 // These colors are sequestered so that the alert component can reference them // by type of alert
 const ALERT_COLORS = {
@@ -192,6 +194,7 @@ export {
   BOSTON_BLUE,
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
+  MATISSE_BLUE_DARK,
   ROYAL_BLUE,
   ROYAL_BLUE_VIVID,
   ASTRAL_BLUE,
@@ -221,5 +224,6 @@ export {
   RASPBERRY,
   ALERT_COLORS,
   PILL_COLORS,
-  ERROR_COLOR
+  ERROR_COLOR,
+  ERROR_BACKGROUND_COLOR
 };

package/src/hooks/index.js

@@ -0,0 +1,3 @@
+export { default as useOutsideClick } from "./use-outside-click";
+export { default as useScrollTo } from "./use-scroll-to";
+export { default as useToastNotification } from "./use-toast-notification";

package/src/hooks/use-toast-notification/index.d.ts

@@ -0,0 +1,23 @@
+import { ToastVariants } from "../../types/common";
+
+export interface UseToastOptions {
+  timeout?: number;
+}
+
+export interface UseToastResult {
+  isToastOpen: boolean;
+  toastVariant: string | ToastVariants;
+  toastMessage: string;
+  showToast: ({
+    message,
+    variant
+  }: {
+    message: string;
+    variant: string | ToastVariants;
+  }) => void;
+  hideToast: () => void;
+}
+
+export default function useToastNotification(
+  options?: UseToastOptions
+): UseToastResult;

package/src/hooks/use-toast-notification/index.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+const initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+
+const useToastNotification = ({ timeout = 5000 } = {}) => {
+  const [toastState, setToastState] = useState(initialToastState);
+
+  useEffect(() => {
+    if (toastState.isOpen) {
+      setTimeout(() => {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+
+  const showToast = ({ message, variant }) =>
+    setToastState({
+      isOpen: true,
+      variant,
+      message
+    });
+
+  const hideToast = () => setToastState(initialToastState);
+
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast,
+    hideToast
+  };
+};
+
+export default useToastNotification;

package/src/index.d.ts

@@ -1,4 +1,5 @@
 import * as constants from "./constants";
+import * as hooks from "./hooks";
 export * from "./components";
 export * from "./types/common";
-export { constants };
+export { constants, hooks };

package/src/index.js

@@ -1,4 +1,5 @@
 export * from "./components";
 import * as constants from "./constants";
 import * as util from "./util";
-export { constants, util };
+import * as hooks from "./hooks";
+export { constants, util, hooks };

package/src/types/common/ToastVariants.ts

@@ -0,0 +1,6 @@
+enum ToastVariants {
+  ERROR = "error",
+  SUCCESS = "success"
+}
+
+export default ToastVariants;

package/src/types/common/index.ts

@@ -4,4 +4,5 @@ export { default as FieldActions } from "./FieldActions";
 export { default as FormSelectOption } from "./FormSelectOption";
 export { default as SearchableSelectOption } from "./SearchableSelectOption";
 export { default as ErrorMessageDictionary } from "./ErrorMessageDictionary";
+export { default as ToastVariants } from "./ToastVariants";
 export * from "./FieldActions";

package/src/util/index.js

@@ -2,6 +2,14 @@ import * as formats from "./formats";
 import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
-import useOutsideClick from "./useOutsideClick";
+import useOutsideClick from "../hooks/use-outside-click";
+import useToastNotification from "../hooks/use-toast-notification";
 
-export { formats, general, theme, useFocusInvalidInput, useOutsideClick };
+export {
+  formats,
+  general,
+  theme,
+  useFocusInvalidInput,
+  useOutsideClick,
+  useToastNotification
+};