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

package/src/components/molecules/index.js

@@ -1,10 +1,12 @@
 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";
@@ -20,9 +22,7 @@ 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,5 +33,7 @@ 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/welcome-card/WelcomeCard.js

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/components/templates/default-page-template/DefaultPageTemplate.js

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

package/src/components/templates/default-page-template/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface DefaultPageTemplateProps {
+  content: JSX.Element;
+  header?: JSX.Element;
+  subHeader?: JSX.Element;
+  footer?: JSX.Element;
+  hideMobileSubHeader?: boolean;
+  maxWidth?: string;
+  gutters?: string;
+  fillPageVertical?: Boolean;
+}
+
+export const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1 @@
+export * from "./default-page-template";

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/src/util/expand.d.ts

@@ -0,0 +1,3 @@
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+
+export default Expand;

package/src/util/index.js

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

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

@@ -1,119 +0,0 @@
-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 { useOutsideClickHook } from "../../../util";
-import { noop } from "../../../util/general";
-import { fallbackValues } from "./Popover.theme";
-
-const Popover = ({
-  themeValues,
-  triggerText = "",
-  content = "",
-  useIcon = 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 }
-}) => {
-  const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
-  const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
-    position ?? {};
-
-  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={() => {
-          console.log("on focus") || handleTogglePopover(true);
-        }}
-        onBlur={() => {
-          console.log("on blur") || handleTogglePopover(false);
-        }}
-        onKeyDown={e => {
-          if (e.keyCode === 27) {
-            console.log("on key down") || handleTogglePopover(false);
-          }
-        }}
-        onTouchStart={() =>
-          console.log("on touch start") || handleTogglePopover(true)
-        }
-        onTouchEnd={() =>
-          console.log("on touch end") || 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}
-      >
-        {useIcon && <Icon />}
-        {useIcon && (
-          <Box padding="0" srOnly>
-            <Text id={`btnPopover${popoverID}_info`}>{iconHelpText}</Text>
-          </Box>
-        )}
-        {!useIcon && (
-          <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: -8px; right: 10px;`}
-        />
-      </Box>
-    </Box>
-  );
-};
-
-export default themeComponent(Popover, "Popover", fallbackValues);

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

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

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

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

package/src/util/useOutsideClickHook.js

@@ -1,36 +0,0 @@
-import { useRef, useEffect } from "react";
-
-/* 
-  Hook that assigns an onPointerUp 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 pointerup 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 tooltip component for implementation
-
-*/
-
-const useOutsideClickHook = handler => {
-  const ref = useRef();
-
-  useEffect(() => {
-    const handleOutsideClick = e => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        console.log("in outside click handler");
-        console.log("ref", ref);
-        console.log("target", e.target);
-        handler();
-      }
-
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
-    };
-  }, [ref]);
-
-  return ref;
-};
-
-export default useOutsideClickHook;