@thecb/components 6.3.1-beta.6 → 6.4.0

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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/layouts/Box.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,42 +0,0 @@
-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
-);

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

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

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

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

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

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

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

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

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

package/src/index.d.ts

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

package/src/util/expand.d.ts

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