@thecb/components 6.3.0 → 6.3.1-beta.4

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

@@ -0,0 +1,14 @@
+import { INFO_BLUE, STORM_GREY, WHITE } from "../../../constants/colors";
+
+const backgroundColor = WHITE;
+const imageBackgroundColor = INFO_BLUE;
+
+const headerBackgroundColor = STORM_GREY;
+const headerColor = WHITE;
+
+export const fallbackValues = {
+  backgroundColor,
+  imageBackgroundColor,
+  headerBackgroundColor,
+  headerColor
+};

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

@@ -0,0 +1,27 @@
+import React from "react";
+
+import Box from "../layouts/Box";
+import Title from "../title";
+
+export const CardHeader = ({
+  headerText,
+  headerColor,
+  headerVariant,
+  backgroundColor,
+  padding,
+  borderRadius
+}) => {
+  return (
+    <Box
+      padding={padding}
+      background={backgroundColor}
+      borderRadius={`${borderRadius} ${borderRadius} 0 0`}
+    >
+      <Title variant={headerVariant} color={headerColor}>
+        {headerText}
+      </Title>
+    </Box>
+  );
+};
+
+export default CardHeader;

package/src/components/atoms/card/CardImage.styled.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const CardImage = styled.img`
+  background: ${({ backgroundColor }) => backgroundColor};
+  object-fit: ${({ objectFit }) => objectFit};
+  height: ${({ height }) => height};
+`;
+
+export default CardImage;

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

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowSize from "../../withWindowSize";
+
+import { fallbackValues } from "./CardText.theme";
+
+import Cover from "../layouts/Cover";
+import Paragraph from "../paragraph";
+import Stack from "../layouts/Stack";
+import Title from "../title";
+
+export const CardText = ({
+  text,
+  titleText,
+  titleVariant = "small",
+  themeValues
+}) => {
+  return (
+    <Cover>
+      <Stack>
+        {titleText && (
+          <Title
+            variant={titleVariant}
+            color={themeValues.titleColor}
+            weight={themeValues?.titleWeight}
+          >
+            {titleText}
+          </Title>
+        )}
+        <Paragraph color={themeValues.textColor}>{text}</Paragraph>
+      </Stack>
+    </Cover>
+  );
+};
+
+export default themeComponent(
+  withWindowSize(CardText),
+  "CardText",
+  fallbackValues
+);

package/src/components/atoms/card/CardText.theme.js

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

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

@@ -0,0 +1,30 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CardProps {
+  text?: string;
+  titleText?: string;
+  titleVariant?: string;
+  extraStyles?: string;
+  imgSrc?: string;
+  imgHeight?: string;
+  imgObjectFit?:
+    | "contain"
+    | "cover"
+    | "fill"
+    | "none"
+    | "scale-down"
+    | "inherit"
+    | "initial"
+    | "revert"
+    | "revert-layer"
+    | "unset";
+  headerText?: string;
+  headerVariant?: string;
+  borderRadius?: string;
+  width?: string;
+  padding?: string;
+}
+
+export const Card: React.FC<Expand<CardProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

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

package/src/components/atoms/{welcome-card/Card.js → card-registry/CardRegistryCard.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 "./Card.theme";
+import { fallbackValues } from "./CardRegistry.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import {
   AccountsAddIcon,
@@ -26,7 +26,7 @@ const CardVariantSwitcher = ({ variant, children }) => {
   );
 };
 
-const Card = ({
+const CardRegistryCard = ({
   themeValues,
   icon,
   heading,
@@ -123,4 +123,8 @@ const Card = ({
   );
 };
 
-export default themeComponent(withWindowSize(Card), "Card", fallbackValues);
+export default themeComponent(
+  withWindowSize(CardRegistryCard),
+  "CardRegistryCard",
+  fallbackValues
+);

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

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

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

@@ -7,7 +7,7 @@ import Cluster from "../layouts/Cluster";
 import ButtonWithAction from "../button-with-action";
 import ButtonWithLink from "../button-with-link";
 import { WHITE, CHARADE_GREY, STORM_GREY } from "../../../constants/colors";
-import { Popover } from "../../molecules";
+import Popover from "../../molecules/popover";
 
 const DisplayCard = ({
   title,

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

@@ -0,0 +1,11 @@
+export * from "./card";
+export * from "./button-with-action";
+export * from "./button-with-link";
+export * from "./layouts";
+export * from "./link";
+export * from "./nav-footer";
+export * from "./nav-header";
+export * from "./nav-tabs";
+export * from "./paragraph";
+export * from "./text";
+export * from "./title";

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 "./welcome-card";
+export { default as cardRegistry } from "./card-registry";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
 export { default as CountryDropdown } from "./country-dropdown";
@@ -41,3 +41,5 @@ 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/layouts/Box.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface BoxProps {
+  padding?: string;
+  borderSize?: string;
+  borderColor?: string;
+  borderRadius?: string;
+  boxShadow?: string;
+  background?: string;
+  color?: string;
+  minHeight?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  borderWidthOverride?: string;
+  border?: string;
+  textAlign?: string;
+  hoverStyles?: string;
+  activeStyles?: string;
+  disabledStyles?: string;
+  variant?: string;
+  as?: string;
+  theme?: string;
+  hiddenStyles?: string;
+  extraStyles?: string;
+  srOnly?: boolean;
+  dataQa?: string;
+}
+
+export const Box: React.FC<Expand<BoxProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CenterProps {
+  maxWidth?: string;
+  gutters?: string;
+  intrinsic?: boolean;
+}
+
+export const Center: React.FC<Expand<CenterProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ClusterProps {
+  childGap?: string;
+  extraStyles?: string;
+  align?: string;
+  justify?: string;
+  minHeight?: string;
+  minWidth?: string;
+  nowrap?: boolean;
+  overflow?: boolean;
+  justifySelf?: string;
+  alignSelf?: string;
+  flexGrow?: string;
+}
+
+export const Cluster: React.FC<Expand<ClusterProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CoverProps {
+  minHeight?: string;
+  childGap?: string;
+  padding?: string;
+  fillCenter?: boolean;
+  singleChild?: boolean;
+  centerOverride?: boolean;
+}
+
+export const Cover: React.FC<Expand<CoverProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface StackProps {
+  childGap?: string;
+  bottomItem?: number;
+  fullHeight?: boolean;
+  direction?:
+    | "row"
+    | "row-reverse"
+    | "column"
+    | "column-reverse"
+    | "initial"
+    | "inherit";
+  justify?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "initial"
+    | "inherit";
+}
+
+export const Stack: React.FC<Expand<StackProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,6 @@
+export * from "./Box";
+export * from "./Center";
+export * from "./Cluster";
+export * from "./Cover";
+export * from "./Stack";
+export * from "./Switcher";

package/src/components/atoms/link/ExternalLink.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ExternalLinkProps {
+  href: string;
+  newTab?: boolean;
+  size?: string;
+  lineHeight?: string;
+  weight?: string;
+  extraStyles?: string;
+  variant?: string;
+  tabIndex?: string;
+  dataQa?: string;
+  ariaLabel?: string;
+}
+
+export const ExternalLink: React.FC<Expand<ExternalLinkProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/link/InternalLink.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface InternalLinkProps {
+  to: string;
+  color?: string;
+  active?: boolean;
+  fontSize?: string;
+  lineheight?: string;
+  fontWeight?: string;
+  variant?: string;
+  margin?: string;
+  tabIndex?: string;
+  dataQa?: string;
+  extraStyles?: string;
+}
+
+export const InternalLink: React.FC<Expand<InternalLinkProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./ExternalLink";
+export * from "./InternalLink";

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

@@ -0,0 +1,17 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface NavFooterProps {
+  leftContent?: JSX.Element;
+  rightContent?: JSX.Element;
+  footerMinHeight?: string;
+  backgroundColor?: string;
+  largeSide?: "left" | "right";
+  largeSideSize?: string;
+  footerPadding?: string;
+  isMobile?: boolean;
+  footerWidth?: string;
+}
+
+export const NavFooter: React.FC<Expand<NavFooterProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface NavHeaderProps {
+  headerHeight?: string;
+  headerWith?: string;
+  backgroundColor?: string;
+  leftContent?: JSX.Element;
+  rightContent?: JSX.Element;
+  margin?: string;
+  extraStyles?: string;
+  isMobile?: boolean;
+}
+
+export const NavHeader: React.FC<Expand<NavHeaderProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,47 @@
+import React, { useContext, useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { ThemeContext } from "styled-components";
+
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./NavTab.theme";
+
+import InternalLink from "../link/InternalLink";
+import Box from "../layouts/Box";
+
+const NavTab = ({ path, label, themeValues }) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  const [isActive, setIsActive] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    setIsActive(location.pathname.includes(path));
+  }, [location.pathname]);
+
+  const border = `border-bottom: 3px solid ${themeValues.activeColor}`;
+
+  return (
+    <Box padding={0}>
+      <InternalLink
+        color={isActive ? themeValues.activeColor : themeValues.linkColor}
+        to={path}
+        extraStyles={`
+          border-bottom: 3px solid transparent;
+          font-family: ${themeValues.fontFamily};
+          text-decoration: none;
+          ${isActive && !isMobile ? border : "none"};
+          &:hover {
+            text-decoration: none;
+            color: ${themeValues.activeColor};
+            ${isMobile ? "" : `${border}`}
+          };
+          padding: 1.25rem 0.1rem;
+        `}
+      >
+        {label}
+      </InternalLink>
+    </Box>
+  );
+};
+
+export default themeComponent(NavTab, "NavTab", fallbackValues);

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 1rem"
+        aria-label="subfooter"
+        leftContent={leftSubfooterContent}
+        rightContent={rightSubfooterContent}
+      ></NavFooter>
+    </>
+  );
+};
+
+export default themeComponent(
+  FooterWithSubfooter,
+  "FooterWithSubfooter",
+  fallbackValues
+);