@thecb/components 6.3.0-beta.2 → 6.3.1-beta.3

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -3,23 +3,18 @@ import React, { Fragment } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowSize from "../../withWindowSize";
 
-import { Box, Stack, Cover } from "../layouts";
+import { Cover } from "../layouts";
 import BoxWithShadow from "../box-with-shadow";
 import { fallbackValues } from "./Card.theme";
 
-const CardVariantSwitcher = ({ variant, children }) => {
-  return variant === "vertical" ? (
-    <Fragment>{children}</Fragment>
-  ) : (
-    <Box padding="0" extraStyles={`width: 100%`}>
-      <Stack childGap="0" maxWidth="100%" fullHeight>
-        {children}
-      </Stack>
-    </Box>
-  );
-};
-
-const Card = ({ themeValues, variant, children, extraStyles, ...props }) => {
+const Card = ({
+  themeValues,
+  variant,
+  children,
+  extraStyles,
+  width = "276px",
+  ...props
+}) => {
   return (
     <BoxWithShadow
       variant="baseStandard"
@@ -27,15 +22,11 @@ const Card = ({ themeValues, variant, children, extraStyles, ...props }) => {
       borderRadius="4px"
       padding="0"
       margin="0"
-      maxWidth={variant !== "vertical" ? "100%" : "276px"}
-      minHeight="100%"
-      minWidth={variant !== "vertical" && "276px"}
+      minWidth={width}
       extraStyles={extraStyles}
       {...props}
     >
-      <Cover singleChild fillCenter>
-        <CardVariantSwitcher variant={variant}>{children}</CardVariantSwitcher>
-      </Cover>
+      <Cover>{children}</Cover>
     </BoxWithShadow>
   );
 };

package/src/components/atoms/card/index.d.ts

@@ -3,6 +3,7 @@ import Expand from "../../../util/expand";
 
 export interface CardProps {
   variant?: string;
+  width?: string;
   extraStyles?: string;
 }
 

package/src/components/atoms/display-card/DisplayCard.js

@@ -6,7 +6,8 @@ import Paragraph from "../paragraph";
 import Cluster from "../layouts/Cluster";
 import ButtonWithAction from "../button-with-action";
 import ButtonWithLink from "../button-with-link";
-import { WHITE, CHARADE_GREY } from "../../../constants/colors";
+import { WHITE, CHARADE_GREY, STORM_GREY } from "../../../constants/colors";
+import Popover from "../../molecules/popover";
 
 const DisplayCard = ({
   title,
@@ -14,18 +15,34 @@ const DisplayCard = ({
   buttonText,
   buttonAction,
   url,
-  link = false
+  link = false,
+  helpText,
+  hasPopover = false,
+  popoverTriggerText = "",
+  popoverContent = "",
+  popoverExtraStyles,
+  popoverTextExtraStyles
 }) => (
   <Box padding="0 0 16px">
     <Stack childGap="0rem">
       <Box padding="0 0 8px 0">
-        <Paragraph
-          variant="pL"
-          color={CHARADE_GREY}
-          extraStyles={`letter-spacing: 0.29px`}
-        >
-          {title}
-        </Paragraph>
+        <Cluster justify="space-between" align="center" overflow>
+          <Paragraph
+            variant="pL"
+            color={CHARADE_GREY}
+            extraStyles={`letter-spacing: 0.29px`}
+          >
+            {title}
+          </Paragraph>
+          {hasPopover && (
+            <Popover
+              triggerText={popoverTriggerText}
+              content={popoverContent}
+              popoverExtraStyles={popoverExtraStyles}
+              popoverTextExtraStyles={popoverTextExtraStyles}
+            />
+          )}
+        </Cluster>
       </Box>
       <Box padding="0">
         <Box
@@ -37,9 +54,7 @@ const DisplayCard = ({
             0px 3px 8px 0px rgb(202, 206, 216)"
         >
           <Cluster justify="space-between" align="center">
-            <Text variant="p" color={CHARADE_GREY}>
-              {item}
-            </Text>
+            <Text color={CHARADE_GREY}>{item}</Text>
             {link ? (
               <ButtonWithLink
                 text={buttonText}
@@ -56,6 +71,10 @@ const DisplayCard = ({
                 dataQa={buttonText}
                 extraStyles={`min-width: 0;`}
               />
+            ) : helpText ? (
+              <Text color={STORM_GREY} extraStyles={`font-style: italic;`}>
+                {helpText}
+              </Text>
             ) : (
               <Fragment />
             )}

package/src/components/atoms/layouts/Switcher.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface SwitcherProps {
+  breakpoint?: string;
+  childGap?: string;
+  largeChild?: string;
+  largeChildSize?: string;
+  maxChildren?: string;
+  maxChildrenOnly?: boolean;
+  padding?: string;
+  extraStyles?: string;
+  constrainMobile?: boolean;
+}
+
+export const Switcher: React.FC<Expand<SwitcherProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/layouts/index.d.ts

@@ -3,3 +3,4 @@ export * from "./Center";
 export * from "./Cluster";
 export * from "./Cover";
 export * from "./Stack";
+export * from "./Switcher";

package/src/components/atoms/text/Text.js

@@ -18,6 +18,7 @@ const Text = ({
   as,
   dataQa,
   children,
+  variant = "p",
   ...rest
 }) => (
   <TextSpan
@@ -32,6 +33,7 @@ const Text = ({
     onKeyPress={onKeyPress}
     data-qa={dataQa}
     $textWrap={textWrap}
+    $variant={variant}
     {...rest}
   >
     {safeChildren(children, <span />)}

package/src/components/molecules/index.d.ts

@@ -1,3 +1 @@
-export * from "./card-with-header";
 export * from "./footer-with-subfooter";
-export * from "./welcome-card";

package/src/components/molecules/index.js

@@ -1,5 +1,4 @@
 export { default as AddressForm } from "./address-form";
-export { default as CardWithHeader } from "./card-with-header";
 export { default as ChangePasswordForm } from "./change-password-form";
 export { default as CollapsibleSection } from "./collapsible-section";
 export { default as EditNameForm } from "./edit-name-form";
@@ -22,7 +21,9 @@ export { default as PaymentButtonBar } from "./payment-button-bar";
 export { default as PaymentDetails } from "./payment-details";
 export { default as PaymentFormACH } from "./payment-form-ach";
 export { default as PaymentFormCard } from "./payment-form-card";
+export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";
 export { default as PhoneForm } from "./phone-form";
+export { default as Popover } from "./popover";
 export { default as RadioSection } from "./radio-section";
 export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";
@@ -33,7 +34,5 @@ export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
 export { default as Timeout } from "./timeout";
-export { default as WelcomeCard } from "./welcome-card";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
-export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";

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

@@ -0,0 +1,124 @@
+import React, { useState, useContext } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import Text from "../../atoms/text";
+import Paragraph from "../../atoms/paragraph";
+import { Box } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { useOutsideClick } from "../../../util";
+import { noop } from "../../../util/general";
+import { fallbackValues } from "./Popover.theme";
+
+const Popover = ({
+  themeValues,
+  triggerText = "",
+  content = "",
+  hasIcon = false,
+  icon: Icon,
+  iconHelpText = "", // for screen-readers, required if using an icon for trigger
+  popoverID = 0,
+  popoverFocus = false,
+  extraStyles,
+  textExtraStyles,
+  minWidth = "250px",
+  maxWidth = "300px",
+  height = "auto",
+  position, // { top: string, right: string, bottom: string, left: string }
+  arrowPosition // { top: string, right: string, bottom: string, left: string }
+}) => {
+  const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
+  const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
+    position ?? {};
+  const {
+    arrowTop = "auto",
+    arrowRight = "10px",
+    arrowBottom = "-8px",
+    arrowLeft = "auto"
+  } = arrowPosition ?? {};
+
+  const [popoverOpen, togglePopover] = useState(false);
+
+  const handleTogglePopover = popoverState => {
+    if (popoverOpen !== popoverState) {
+      togglePopover(popoverState);
+    }
+  };
+
+  const triggerRef = useOutsideClickHook(() => handleTogglePopover(false));
+
+  return (
+    <Box padding="0" extraStyles={`position: relative; ${extraStyles}`}>
+      <ButtonWithAction
+        action={() => noop}
+        onFocus={() => {
+          handleTogglePopover(true);
+        }}
+        onBlur={() => {
+          handleTogglePopover(false);
+        }}
+        onKeyDown={e => {
+          if (e.keyCode === 27) {
+            handleTogglePopover(false);
+          }
+        }}
+        onTouchStart={() => handleTogglePopover(true)}
+        onTouchEnd={() => handleTogglePopover(false)}
+        onMouseEnter={() => handleTogglePopover(true)}
+        onMouseLeave={() => handleTogglePopover(false)}
+        contentOverride
+        variant="smallGhost"
+        tabIndex="0"
+        id={`btnPopover${popoverID}`}
+        aria-expanded={popoverOpen}
+        aria-labelledby={`btnPopover${popoverID}_info Disclosure${popoverID}`}
+        aria-describedby={`Disclosure${popoverID}`}
+        aria-controls={`Disclosed${popoverID}`}
+        ref={triggerRef}
+      >
+        {hasIcon && (
+          <>
+            <Icon />
+            <Box padding="0" srOnly>
+              <Text id={`btnPopover${popoverID}_info`}>{iconHelpText}</Text>
+            </Box>
+          </>
+        )}
+        {!hasIcon && (
+          <Text
+            color={popoverTriggerColor}
+            extraStyles={`&:active { color: ${activeColor}; } &:hover { color: ${hoverColor} }; ${textExtraStyles}`}
+          >
+            {triggerText}
+          </Text>
+        )}
+      </ButtonWithAction>
+      <Box
+        background="white"
+        borderRadius="4px"
+        boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+        id={`Disclosed${popoverID}`}
+        role={"region"}
+        aria-describedby={`Disclosure${popoverID}`}
+        tabIndex={popoverFocus && popoverOpen ? "0" : "-1"}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        extraStyles={`
+          display: ${popoverOpen ? "block" : "none"}; 
+          position: absolute; 
+          top: ${top}; 
+          right: ${right}; 
+          bottom: ${bottom}; 
+          left: ${left};
+          height: ${height}
+          `}
+      >
+        <Paragraph>{content}</Paragraph>
+        <Box
+          padding="0"
+          extraStyles={`position: absolute; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ${arrowBottom}; right: ${arrowRight}; top: ${arrowTop}; left: ${arrowLeft};`}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default themeComponent(Popover, "Popover", fallbackValues);

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

@@ -0,0 +1,9 @@
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const popoverTriggerColor = "#15749D";
+
+export const fallbackValues = {
+  hoverColor,
+  activeColor,
+  popoverTriggerColor
+};

package/src/components/molecules/popover/index.js

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

package/src/util/index.js

@@ -2,5 +2,6 @@ import * as formats from "./formats";
 import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
+import useOutsideClick from "./useOutsideClick";
 
-export { formats, general, theme, useFocusInvalidInput };
+export { formats, general, theme, useFocusInvalidInput, useOutsideClick };

package/src/util/useOutsideClick.js

@@ -0,0 +1,33 @@
+import { useRef, useEffect } from "react";
+
+/* 
+  Hook that assigns a click event listener to the main document element
+  Returns a ref to attach to another element (like an icon/button that triggers a popover)
+  If a click event gets captured by the document and the assigned element isn't the target
+  hook will run whatever handler is passed (eg a function that closes a popover)
+
+  See popover component for implementation
+
+*/
+
+const useOutsideClickHook = handler => {
+  const ref = useRef();
+
+  useEffect(() => {
+    const handleOutsideClick = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+
+      document.addEventListener("click", handleOutsideClick, true);
+
+      return () => {
+        document.removeEventListener("click", handleOutsideClick, true);
+      };
+    };
+  }, [ref]);
+
+  return ref;
+};
+
+export default useOutsideClickHook;

package/src/components/molecules/card-with-header/CardWithHeader.js

@@ -1,33 +0,0 @@
-import React from "react";
-
-import { fallbackValues } from "./CardWithHeader.theme";
-import { themeComponent } from "../../../util/themeUtils";
-
-import { Box, Card, Title } from "../../atoms";
-
-const CardWithHeader = ({
-  themeValues,
-  children,
-  header,
-  extraStyles,
-  ...props
-}) => {
-  return (
-    <Card extraStyles={extraStyles} {...props}>
-      <Box
-        padding="24px"
-        background={themeValues.headerBackgroundColor}
-        extraStyles={`
-        border-radius: 4px 4px 0 0;
-        `}
-      >
-        <Title variant="small" color={themeValues.headerTextColor}>
-          {header}
-        </Title>
-      </Box>
-      <Box padding="24px">{children}</Box>
-    </Card>
-  );
-};
-
-export default themeComponent(CardWithHeader, "CardWithHeader", fallbackValues);

package/src/components/molecules/card-with-header/CardWithHeader.theme.js

@@ -1,9 +0,0 @@
-import { STORM_GREY, WHITE } from "../../../constants/colors";
-
-const headerBackgroundColor = STORM_GREY;
-const headerTextColor = WHITE;
-
-export const fallbackValues = {
-  headerBackgroundColor,
-  headerTextColor
-};

package/src/components/molecules/card-with-header/index.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface CardWithHeaderProps {
-  header: string;
-  extraStyles?: string;
-}
-
-export const CardWithHeader: React.FC<Expand<CardWithHeaderProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/card-with-header/index.js

@@ -1,2 +0,0 @@
-import CardWithHeader from "./CardWithHeader";
-export default CardWithHeader;

package/src/components/molecules/welcome-card/WelcomeCard.js

@@ -1,63 +0,0 @@
-import React from "react";
-
-import { fallbackValues } from "./WelcomeCard.theme";
-import { themeComponent } from "../../../util/themeUtils";
-
-import {
-  Box,
-  ButtonWithLink,
-  Card,
-  Cover,
-  Paragraph,
-  Title
-} from "../../atoms";
-
-const WelcomeCard = ({
-  themeValues,
-  title,
-  text,
-  buttonText,
-  url,
-  imageSrc,
-  newTab
-}) => {
-  return (
-    <Card>
-      {imageSrc && (
-        <Cover>
-          <img
-            src={imageSrc}
-            style={{
-              background: `${themeValues.imageBackgroundColor}`,
-              objectFit: "none",
-              height: "150px"
-            }}
-          />
-        </Cover>
-      )}
-      <Box padding="24px">
-        <Title
-          variant="small"
-          color={themeValues.titleColor}
-          weight={themeValues.titleWeight}
-        >
-          {title}
-        </Title>
-        <Paragraph color={themeValues.textColor}>{text}</Paragraph>
-        {url && buttonText && (
-          <Box extraStyles="margin-top: 4rem; padding: 0">
-            <ButtonWithLink
-              extraStyles="margin: 0; width: 100%"
-              linkExtraStyles="text-decoration:none"
-              url={url}
-              text={buttonText}
-              newTab={newTab}
-            />
-          </Box>
-        )}
-      </Box>
-    </Card>
-  );
-};
-
-export default themeComponent(WelcomeCard, "WelcomeCard", fallbackValues);

package/src/components/molecules/welcome-card/WelcomeCard.theme.js

@@ -1,15 +0,0 @@
-import { BRIGHT_GREY, INFO_BLUE } from "../../../constants/colors";
-
-import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
-
-const titleColor = BRIGHT_GREY;
-const textColor = BRIGHT_GREY;
-const titleWeight = FONT_WEIGHT_BOLD;
-const imageBackgroundColor = INFO_BLUE;
-
-export const fallbackValues = {
-  textColor,
-  titleColor,
-  titleWeight,
-  imageBackgroundColor
-};

package/src/components/molecules/welcome-card/index.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface WelcomeCardProps {
-  title: string;
-  text: string;
-  url?: string;
-  buttonText?: string;
-  imageSrc?: string;
-  newTab?: boolean;
-}
-
-export const WelcomeCard: React.FC<Expand<WelcomeCardProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/welcome-card/index.js

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