@thecb/components 6.4.2 → 7.0.0-beta.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@thecb/components",
-  "version": "6.4.2",
+  "version": "7.0.0-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": {
@@ -57,12 +58,15 @@
     "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"
+    "styled-theming": "^2.2.0",
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "react": "^16.13.1",

package/src/components/atoms/button-with-action/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ButtonWithActionProps {
+  action?: React.SyntheticEvent;
+  variant?: string;
+  text?: string;
+  textWrap?: boolean;
+  isLoading?: boolean;
+  textExtraStyles?: string;
+  contentOverride?: boolean;
+  extraStyles?: string;
+  tabIndex?: string;
+}
+
+export const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/button-with-link/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import { ButtonWithActionProps } from "../button-with-action";
+
+export interface ButtonWithLinkProps extends ButtonWithActionProps {
+  linkExtraStyles?: string;
+  url: string;
+  disabled?: boolean;
+  fileLink?: boolean;
+  newTab?: boolean;
+}
+
+export const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,87 @@
+import React, { Fragment } from "react";
+
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowSize from "../../withWindowSize";
+
+import { fallbackValues } from "./Card.theme";
+
+import BoxWithShadow from "../box-with-shadow";
+import Cover from "../layouts/Cover";
+import Stack from "../layouts/Stack";
+
+import CardImage from "./CardImage.styled";
+import CardText from "./CardText";
+import CardHeader from "./CardHeader";
+
+const Card = ({
+  borderRadius = "4px",
+  extraStyles,
+  headerAs = "h2",
+  headerText,
+  headerVariant = "small",
+  imgSrc,
+  imgHeight = "150px",
+  imgObjectFit = "none",
+  imgAltText,
+  padding = "24px",
+  text,
+  titleText,
+  titleVariant = "small",
+  themeValues,
+  width = "276px",
+  children
+}) => {
+  const numberOfChildren =
+    (Array.isArray(children) ? children.length : 1) +
+    (text ? 1 : 0) +
+    (imgSrc ? 1 : 0) +
+    (headerText ? 1 : 0);
+
+  return (
+    <BoxWithShadow
+      variant="baseStandard"
+      background={themeValues.backgroundColor}
+      borderRadius={borderRadius}
+      padding="0"
+      margin="0"
+      minWidth={width}
+      extraStyles={extraStyles}
+    >
+      <Cover singleChild fillCenter>
+        <Stack fullHeight childGap="0" bottomItem={numberOfChildren}>
+          {headerText && (
+            <CardHeader
+              headerText={headerText}
+              headerColor={themeValues.headerColor}
+              headerVariant={headerVariant}
+              backgroundColor={themeValues.headerBackgroundColor}
+              borderRadius={borderRadius}
+              padding={padding}
+              as={headerAs}
+            ></CardHeader>
+          )}
+          {imgSrc && (
+            <CardImage
+              height={imgHeight}
+              objectFit={imgObjectFit}
+              backgroundColor={themeValues.imageBackgroundColor}
+              src={imgSrc}
+              alt={imgAltText}
+            />
+          )}
+          {text && (
+            <CardText
+              padding={padding}
+              titleText={titleText}
+              text={text}
+              titleVariant={titleVariant}
+            />
+          )}
+          {children}
+        </Stack>
+      </Cover>
+    </BoxWithShadow>
+  );
+};
+
+export default themeComponent(withWindowSize(Card), "Card", fallbackValues);

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,28 @@
+import React from "react";
+
+import Box from "../layouts/Box";
+import Title from "../title";
+
+export const CardHeader = ({
+  backgroundColor,
+  borderRadius,
+  as,
+  headerText,
+  headerColor,
+  headerVariant,
+  padding
+}) => {
+  return (
+    <Box
+      padding={padding}
+      background={backgroundColor}
+      borderRadius={`${borderRadius} ${borderRadius} 0 0`}
+    >
+      <Title as={as} 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,46 @@
+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
+              as="p"
+              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

@@ -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,
+  textColor
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CardProps {
+  text?: string;
+  titleText?: string;
+  titleVariant?: string;
+  extraStyles?: string;
+  imgSrc?: string;
+  imgHeight?: string;
+  imgAltText?: string;
+  imgObjectFit?:
+    | "contain"
+    | "cover"
+    | "fill"
+    | "none"
+    | "scale-down"
+    | "inherit"
+    | "initial"
+    | "revert"
+    | "revert-layer"
+    | "unset";
+  headerAs?: string;
+  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,4 +41,6 @@ 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";
 export { default as LoadingLine } from "./loading-line";

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);