@thecb/components 6.3.0-beta.1 → 6.3.1-beta.0

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@thecb/components",
-  "version": "6.3.0-beta.1",
+  "version": "6.3.1-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
-  "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
   "source": "src/index.js",
   "scripts": {
@@ -58,15 +57,12 @@
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.1.0",
-    "rollup-plugin-ts": "^3.0.2",
     "rollup-plugin-visualizer": "^4.0.4",
     "storybook": "^6.4.22",
     "styled-components": "^5.3.5",
-    "styled-theming": "^2.2.0",
-    "typescript": "^4.8.2"
+    "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",

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";
 
 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/index.js

@@ -5,7 +5,7 @@ export { default as BoxWithShadow } from "./box-with-shadow";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";
 export { default as ButtonWithLink } from "./button-with-link";
-export { default as cardRegistry } from "./card-registry";
+export { default as cardRegistry } from "./welcome-card";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
 export { default as CountryDropdown } from "./country-dropdown";
@@ -41,5 +41,3 @@ export { default as Text } from "./text";
 export { default as Title } from "./title";
 export { default as ToggleSwitch } from "./toggle-switch";
 export { default as TypeaheadInput } from "./typeahead-input";
-export { default as Card } from "./card";
-export { default as NavTabs } from "./nav-tabs";

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/atoms/toggle-switch/ToggleSwitch.js

@@ -103,10 +103,10 @@ const ToggleSwitch = ({
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "2px",
+      right: "1px",
       top: "2px",
       bottom: "2px",
-      left: "24px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
@@ -162,7 +162,7 @@ const ToggleSwitch = ({
       }
     >
       <Center>
-        <Cluster justify="stretch" align="center">
+        <Cluster justify="stretch" align="center" overflow="visible">
           <Cover minHeight="100%" singleChild>
             <Box
               minWidth="100%"

package/src/components/atoms/{card-registry/CardRegistryCard.js → welcome-card/Card.js}

@@ -5,7 +5,7 @@ import { Box, Stack, Cover } from "../layouts";
 import Text from "../text";
 import Paragraph from "../paragraph";
 import ButtonWithAction from "../button-with-action";
-import { fallbackValues } from "./CardRegistry.theme";
+import { fallbackValues } from "./Card.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import {
   AccountsAddIcon,
@@ -26,7 +26,7 @@ const CardVariantSwitcher = ({ variant, children }) => {
   );
 };
 
-const CardRegistryCard = ({
+const Card = ({
   themeValues,
   icon,
   heading,
@@ -123,8 +123,4 @@ const CardRegistryCard = ({
   );
 };
 
-export default themeComponent(
-  withWindowSize(CardRegistryCard),
-  "CardRegistryCard",
-  fallbackValues
-);
+export default themeComponent(withWindowSize(Card), "Card", fallbackValues);

package/src/components/atoms/{card-registry → welcome-card}/index.js

@@ -1,9 +1,9 @@
 import React from "react";
-import CardRegistryCard from "./CardRegistryCard";
+import Card from "./Card";
 
 export const cardRegistry = {
   accounts: props => (
-    <CardRegistryCard
+    <Card
       icon="accounts"
       heading="Find Your Account"
       buttonText="Find Account"
@@ -13,7 +13,7 @@ export const cardRegistry = {
     />
   ),
   properties: props => (
-    <CardRegistryCard
+    <Card
       icon="properties"
       heading="Find Your Property"
       buttonText="Find Property"
@@ -23,7 +23,7 @@ export const cardRegistry = {
     />
   ),
   payment: props => (
-    <CardRegistryCard
+    <Card
       icon="payment"
       heading="Manage Your Wallet"
       buttonText="Go to Wallet"

package/src/components/molecules/index.js

@@ -1,12 +1,10 @@
 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";
 export { default as EditableList } from "./editable-list";
 export * from "./editable-table";
 export { default as EmailForm } from "./email-form";
-export { default as FooterWithSubfooter } from "./footer-with-subfooter";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
@@ -22,7 +20,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 +33,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 = useOutsideClick(() => 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/components/templates/default-page-template/DefaultPageTemplate.js

@@ -14,8 +14,7 @@ const CenterSingle = ({
   content,
   themeValues,
   maxWidth = "75rem",
-  gutters = "2rem",
-  fillPageVertical = false
+  gutters = "2rem"
 }) => {
   const themeContext = useContext(ThemeContext);
   const { isMobile } = themeContext;
@@ -27,11 +26,7 @@ const CenterSingle = ({
       background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
-      <Cover
-        childGap="0"
-        fillCenter
-        style={{ minHeight: fillPageVertical ? "100vh" : "initial" }}
-      >
+      <Cover childGap="0" fillCenter>
         {header ? header : <Box padding="0" />}
         <Box
           padding="0"

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/dist/.storybook/page.d.ts

@@ -1,13 +0,0 @@
-declare function _default({ title, Component, height, reducer, containerMax, containerMin }: {
-    title: any;
-    Component: any;
-    height: any;
-    reducer?: (() => void) | undefined;
-    containerMax?: string | undefined;
-    containerMin?: string | undefined;
-}): {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};
-export default _default;

package/dist/.storybook/page.js

@@ -1,41 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "styled-components";
-import { select, radios, text } from "@storybook/addon-knobs";
-import { Provider } from 'react-redux';
-import { createStore } from "redux";
-import { BrowserRouter as Router } from "react-router-dom";
-import { createBrowserHistory } from "history";
-import ResizingContainer from "../src/components/atoms/layouts/examples/ResizingContainer";
-import { SFTheme, APCTheme } from "./themes";
-var themesLabel = "Theme";
-var themes = {
-    SF: SFTheme,
-    APC: APCTheme,
-    None: {},
-};
-var defaultValue = SFTheme;
-var groupId = "Theme";
-var animateLabel = "Animate";
-var animateOptions = {
-    play: "play",
-    pause: "pause"
-};
-var animateDefaultValue = "pause";
-var animateGroupID = "Container";
-var themeDecorator = function (storyFn) { return (React.createElement(ThemeProvider, { theme: select(themesLabel, themes, defaultValue, groupId) }, storyFn())); };
-export default (function (_a) {
-    var title = _a.title, Component = _a.Component, height = _a.height, _b = _a.reducer, reducer = _b === void 0 ? function () { } : _b, _c = _a.containerMax, containerMax = _c === void 0 ? "40rem" : _c, _d = _a.containerMin, containerMin = _d === void 0 ? "20rem" : _d;
-    var history = createBrowserHistory();
-    var store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
-    return {
-        title: title,
-        component: Component,
-        decorators: [
-            themeDecorator,
-            function (storyFn) { return (React.createElement(Router, { history: history },
-                React.createElement(Provider, { store: store },
-                    React.createElement("div", { style: { height: "max-content", display: "flex", justifyContent: "center", flexDirection: "column" } },
-                        React.createElement(ResizingContainer, { height: height, animate: radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID), containerMax: text("Container Max", containerMax, animateGroupID), containerMin: text("Container Min", containerMin, animateGroupID) }, storyFn()))))); }
-        ]
-    };
-});

package/dist/.storybook/themes/apc.theme.d.ts

@@ -1,79 +0,0 @@
-export namespace APCTheme {
-    namespace values {
-        namespace Button {
-            namespace active {
-                const primary: string;
-                const secondary: string;
-                const smallPrimary: string;
-                const smallSecondary: string;
-            }
-            namespace backgroundColor {
-                const primary_1: string;
-                export { primary_1 as primary };
-                const secondary_1: string;
-                export { secondary_1 as secondary };
-                const smallPrimary_1: string;
-                export { smallPrimary_1 as smallPrimary };
-                const smallSecondary_1: string;
-                export { smallSecondary_1 as smallSecondary };
-            }
-            namespace border {
-                const primary_2: string;
-                export { primary_2 as primary };
-                const secondary_2: string;
-                export { secondary_2 as secondary };
-                const smallPrimary_2: string;
-                export { smallPrimary_2 as smallPrimary };
-                const smallSecondary_2: string;
-                export { smallSecondary_2 as smallSecondary };
-            }
-            namespace color {
-                const primary_3: string;
-                export { primary_3 as primary };
-                const secondary_3: string;
-                export { secondary_3 as secondary };
-                const smallPrimary_3: string;
-                export { smallPrimary_3 as smallPrimary };
-                const smallSecondary_3: string;
-                export { smallSecondary_3 as smallSecondary };
-            }
-            namespace focus {
-                const primary_4: string;
-                export { primary_4 as primary };
-                const secondary_4: string;
-                export { secondary_4 as secondary };
-                const smallPrimary_4: string;
-                export { smallPrimary_4 as smallPrimary };
-                const smallSecondary_4: string;
-                export { smallSecondary_4 as smallSecondary };
-            }
-            namespace hover {
-                const primary_5: string;
-                export { primary_5 as primary };
-                const secondary_5: string;
-                export { secondary_5 as secondary };
-                const smallPrimary_5: string;
-                export { smallPrimary_5 as smallPrimary };
-                const smallSecondary_5: string;
-                export { smallSecondary_5 as smallSecondary };
-            }
-        }
-        namespace Footer {
-            const backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
-        }
-        namespace Header {
-            const backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-        }
-        namespace HighlightTabRow {
-            const backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
-        }
-        const linkColor: string;
-        const logo: string;
-        const primaryColor: string;
-        const secondaryColor: string;
-        const textColor: string;
-    }
-}

package/dist/.storybook/themes/apc.theme.js

@@ -1 +0,0 @@
-export var APCTheme = { values: { "Button": { "active": { "primary": "background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100;", "secondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000", "smallPrimary": "background-color: #C8171E; border: 2px solid #C8171E;  box-shadow: 0 0 10px #E30100", "smallSecondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000" }, "backgroundColor": { "primary": "#EC1C24", "secondary": "#F6F6F9", "smallPrimary": "#EC1C24", "smallSecondary": "#F6F6F9" }, "border": { "primary": "2px solid #EC1C24;", "secondary": "2px solid #EC1C24;", "smallPrimary": "2px solid %#EC1C24;", "smallSecondary": "2px solid #EC1C24;" }, "color": { "primary": "#F6F6F9", "secondary": "#EC1C24", "smallPrimary": "#F6F6F9", "smallSecondary": "#EC1C24" }, "focus": { "primary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "secondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;", "smallPrimary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "smallSecondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;" }, "hover": { "primary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "secondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;", "smallPrimary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "smallSecondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;" } }, "Footer": { "backgroundColor": "#56575B" }, "Header": { "backgroundColor": "#FFFFFF" }, "HighlightTabRow": { "backgroundColor": "#215B9E" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/.storybook/themes/index.d.ts

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/index.js

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";