@thecb/components 6.4.0 → 7.0.0-beta.1

package/src/components/atoms/nav-tabs/NavTab.theme.js

@@ -0,0 +1,11 @@
+import { MATISSE_BLUE, CHARADE_GREY } from "../../../constants/colors";
+
+const fontFamily = "Public Sans, sans-serif";
+const activeColor = MATISSE_BLUE;
+const linkColor = CHARADE_GREY;
+
+export const fallbackValues = {
+  fontFamily,
+  activeColor,
+  linkColor
+};

package/src/components/atoms/nav-tabs/NavTabs.js

@@ -0,0 +1,24 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+
+import BoxWithShadow from "../box-with-shadow";
+import Center from "../layouts/Center";
+import Cluster from "../layouts/Cluster";
+import NavTab from "./NavTab";
+
+const NavTabs = ({ tabsConfig, tabGap }) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  const tabs = tabsConfig.map(tabConfig => {
+    return <NavTab key={tabConfig.path} {...tabConfig} />;
+  });
+  return (
+    <BoxWithShadow variant="insetStandard" extraStyles="padding: 0">
+      <Center intrinsic>
+        {isMobile ? tabs : <Cluster childGap={tabGap}>{tabs}</Cluster>}
+      </Center>
+    </BoxWithShadow>
+  );
+};
+
+export default NavTabs;

package/src/components/atoms/nav-tabs/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface NavTabsProps {
+  tabsConfig: Array<{ path: string; label: string }>;
+  tabGap?: string;
+}
+
+export const NavTabs: React.FC<Expand<NavTabsProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/nav-tabs/index.js

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

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

@@ -0,0 +1,15 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ParagraphProps {
+  color?: string;
+  themeValues?: string;
+  weight?: string;
+  margin?: string;
+  extraStyles?: string;
+  dataQa?: string;
+  as?: string;
+}
+
+export const Paragraph: React.FC<Expand<ParagraphProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface TextProps {
+  weight?: string;
+  color?: string;
+  textWrap?: boolean;
+  extraStyles?: string;
+  hoverStyles?: string;
+  as?: string;
+  dataQa?: string;
+  variant?: string;
+}
+
+export const Text: React.FC<Expand<TextProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface TitleProps {
+  variant?: string;
+  color?: string;
+  margin?: string;
+  extraStyles?: string;
+  weight?: string;
+  textAlign?: string;
+  className?: string;
+  as?: string;
+  dataQa?: string;
+}
+
+export const Title: React.FC<Expand<TitleProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./atoms";
+export * from "./molecules";
+export * from "./templates";

package/src/components/molecules/footer-with-subfooter/FooterWithSubfooter.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./FooterWithSubfooter.theme";
+import NavFooter from "../../atoms/nav-footer";
+
+const FooterWithSubfooter = ({
+  footerLargeSide = "right",
+  footerLargeSideSize = "2",
+  leftFooterContent,
+  rightFooterContent,
+  leftSubfooterContent,
+  rightSubfooterContent,
+  themeValues
+}) => {
+  return (
+    <>
+      <NavFooter
+        largeSide={footerLargeSide}
+        largeSideSize={footerLargeSideSize}
+        rightContent={rightFooterContent}
+        leftContent={leftFooterContent}
+        aria-label="footer"
+        backgroundColor={themeValues.footerBackgroundColor}
+      />
+      <NavFooter
+        backgroundColor={themeValues.subfooterBackgroundColor}
+        footerMinHeight="45px"
+        footerPadding="0 16px"
+        aria-label="subfooter"
+        leftContent={leftSubfooterContent}
+        rightContent={rightSubfooterContent}
+      ></NavFooter>
+    </>
+  );
+};
+
+export default themeComponent(
+  FooterWithSubfooter,
+  "FooterWithSubfooter",
+  fallbackValues
+);

package/src/components/molecules/footer-with-subfooter/FooterWithSubfooter.theme.js

@@ -0,0 +1,8 @@
+import { BRIGHT_GREY, STORM_GREY } from "../../../constants/colors";
+
+const footerBackgroundColor = BRIGHT_GREY;
+const subfooterBackgroundColor = STORM_GREY;
+export const fallbackValues = {
+  footerBackgroundColor,
+  subfooterBackgroundColor
+};

package/src/components/molecules/footer-with-subfooter/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface FooterWithSubfooterProps {
+  footerLargeSide?: "left" | "right";
+  footerLargeSideSize?: string;
+  leftFooterContent?: JSX.Element;
+  rightFooterContent?: JSX.Element;
+  leftSubfooterContent?: JSX.Element;
+  rightSubfooterContent?: JSX.Element;
+}
+
+export const FooterWithSubfooter: React.FC<Expand<FooterWithSubfooterProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/footer-with-subfooter/index.js

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

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

@@ -0,0 +1 @@
+export * from "./footer-with-subfooter";

package/src/components/molecules/index.js

@@ -5,6 +5,7 @@ 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";

package/src/components/molecules/modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext } from "react";
+import React, { Fragment, useContext, useRef } from "react";
 import { ThemeContext } from "styled-components";
 import AriaModal from "react-aria-modal";
 import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
@@ -47,10 +47,14 @@ const Modal = ({
   children
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const closeBtnRef = useRef(null);
+  const modalBodyTextRef = useRef(null);
   return (
     <Fragment>
       {modalOpen && (
         <AriaModal
+          initialFocus={closeBtnRef || modalBodyTextRef}
+          focusTrapOptions={{ delayInitialFocus: false, fallbackFocus: closeBtnRef || modalBodyTextRef }} // fallback to resolve unit test errors https://github.com/focus-trap/focus-trap-react/issues/91
           onExit={onExit}
           getApplicationNode={getApplicationNode}
           titleText={modalHeaderText}
@@ -80,6 +84,7 @@ const Modal = ({
             <Box background={modalBodyBg} padding="1.5rem">
               <Stack childGap="1.5rem">
                 <Box
+                  ref={modalBodyTextRef}
                   borderWidthOverride={noBorder && "0 0 2px 0"}
                   borderColor={!noBorder && SILVER_GREY}
                   padding={!noBorder && "0 0 1.5rem 0"}
@@ -169,6 +174,7 @@ const Modal = ({
                         ) : (
                           <Box padding="0.5rem">
                             <ButtonWithAction
+                              ref={closeBtnRef}
                               action={hideModal}
                               variant="primary"
                               text={closeButtonText}

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

@@ -43,7 +43,7 @@ const Popover = ({
     }
   };
 
-  const triggerRef = useOutsideClickHook(() => handleTogglePopover(false));
+  const triggerRef = useOutsideClick(() => handleTogglePopover(false));
 
   return (
     <Box padding="0" extraStyles={`position: relative; ${extraStyles}`}>

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;