@thecb/components 6.3.1-beta.2 → 6.3.1-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.3.1-beta.2",
+  "version": "6.3.1-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -3,38 +3,77 @@ import React, { Fragment } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowSize from "../../withWindowSize";
 
-import { Box, Stack, Cover } from "../layouts";
-import BoxWithShadow from "../box-with-shadow";
 import { fallbackValues } from "./Card.theme";
 
-const CardVariantSwitcher = ({ variant, children }) => {
-  return variant === "vertical" ? (
-    <Fragment>{children}</Fragment>
-  ) : (
-    <Box padding="0" extraStyles={`width: 100%`}>
-      <Stack childGap="0" maxWidth="100%" fullHeight>
-        {children}
-      </Stack>
-    </Box>
-  );
-};
+import Box from "../layouts/Box";
+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 = ({
+  themeValues,
+  children,
+  extraStyles,
+  width = "276px",
+  text,
+  titleText,
+  titleVariant = "small",
+  imgSrc,
+  imgHeight = "150px",
+  imgObjectFit = "none",
+  headerText,
+  headerVariant = "small",
+  borderRadius = "4px",
+  padding = "24px"
+}) => {
+  const numberOfChildren =
+    children.length + (imgSrc ? 1 : 0) + (text ? 1 : 0) + (headerText ? 1 : 0);
 
-const Card = ({ themeValues, variant, children, extraStyles, ...props }) => {
   return (
     <BoxWithShadow
       variant="baseStandard"
       background={themeValues.backgroundColor}
-      borderRadius="4px"
+      borderRadius={borderRadius}
       padding="0"
       margin="0"
-      maxWidth={variant !== "vertical" ? "100%" : "276px"}
-      minHeight="100%"
-      minWidth={variant !== "vertical" && "276px"}
+      minWidth={width}
       extraStyles={extraStyles}
-      {...props}
     >
-      <Cover singleChild fillCenter>
-        <CardVariantSwitcher variant={variant}>{children}</CardVariantSwitcher>
+      <Cover singleChild>
+        <Stack fullHeight childGap="0" bottomItem={numberOfChildren}>
+          {headerText && (
+            <CardHeader
+              headerText={headerText}
+              headerColor={themeValues.headerColor}
+              headerVariant={headerVariant}
+              backgroundColor={themeValues.headerBackgroundColor}
+              borderRadius={borderRadius}
+              padding={padding}
+            ></CardHeader>
+          )}
+          {imgSrc && (
+            <CardImage
+              height={imgHeight}
+              objectFit={imgObjectFit}
+              backgroundColor={themeValues.imageBackgroundColor}
+              src={imgSrc}
+            />
+          )}
+          <Box padding={padding}>
+            {text && (
+              <CardText
+                titleText={titleText}
+                text={text}
+                titleVariant={titleVariant}
+              />
+            )}
+            {children}
+          </Box>
+        </Stack>
       </Cover>
     </BoxWithShadow>
   );

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

@@ -1,7 +1,14 @@
-import { WHITE } from "../../../constants/colors";
+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
+  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/{molecules/welcome-card/WelcomeCard.theme.js → atoms/card/CardText.theme.js}

@@ -1,15 +1,12 @@
-import { BRIGHT_GREY, INFO_BLUE } from "../../../constants/colors";
+import { BRIGHT_GREY } 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;
+const textColor = BRIGHT_GREY;
 
 export const fallbackValues = {
-  textColor,
   titleColor,
   titleWeight,
-  imageBackgroundColor
+  titleWeight
 };

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

@@ -2,8 +2,28 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface CardProps {
-  variant?: string;
+  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> &

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

@@ -7,4 +7,5 @@ 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/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

@@ -3,3 +3,4 @@ export * from "./Center";
 export * from "./Cluster";
 export * from "./Cover";
 export * from "./Stack";
+export * from "./Switcher";

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/molecules/index.d.ts

@@ -1,3 +1 @@
-export * from "./card-with-header";
 export * from "./footer-with-subfooter";
-export * from "./welcome-card";

package/src/components/molecules/index.js

@@ -1,5 +1,4 @@
 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";
@@ -35,6 +34,5 @@ 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";

package/src/components/molecules/card-with-header/CardWithHeader.js

@@ -1,34 +0,0 @@
-import React from "react";
-
-import { fallbackValues } from "./CardWithHeader.theme";
-import { themeComponent } from "../../../util/themeUtils";
-
-import { Box, Card, Title } from "../../atoms";
-
-const CardWithHeader = ({
-  themeValues,
-  children,
-  header,
-  extraStyles,
-  variant,
-  ...props
-}) => {
-  return (
-    <Card extraStyles={extraStyles} {...props}>
-      <Box
-        padding="24px"
-        background={themeValues.headerBackgroundColor}
-        extraStyles={`
-        border-radius: 4px 4px 0 0;
-        `}
-      >
-        <Title variant="small" color={themeValues.headerTextColor}>
-          {header}
-        </Title>
-      </Box>
-      <Box padding="24px">{children}</Box>
-    </Card>
-  );
-};
-
-export default themeComponent(CardWithHeader, "CardWithHeader", fallbackValues);

package/src/components/molecules/card-with-header/CardWithHeader.theme.js

@@ -1,9 +0,0 @@
-import { STORM_GREY, WHITE } from "../../../constants/colors";
-
-const headerBackgroundColor = STORM_GREY;
-const headerTextColor = WHITE;
-
-export const fallbackValues = {
-  headerBackgroundColor,
-  headerTextColor
-};

package/src/components/molecules/card-with-header/index.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface CardWithHeaderProps {
-  header: string;
-  extraStyles?: string;
-  variant?: string;
-}
-
-export const CardWithHeader: React.FC<Expand<CardWithHeaderProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/card-with-header/index.js

@@ -1,2 +0,0 @@
-import CardWithHeader from "./CardWithHeader";
-export default CardWithHeader;

package/src/components/molecules/welcome-card/WelcomeCard.js

@@ -1,64 +0,0 @@
-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,
-  variant
-}) => {
-  return (
-    <Card variant={variant}>
-      {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/index.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface WelcomeCardProps {
-  title: string;
-  text: string;
-  url?: string;
-  buttonText?: string;
-  imageSrc?: string;
-  newTab?: boolean;
-  variant?: string;
-}
-
-export const WelcomeCard: React.FC<Expand<WelcomeCardProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/welcome-card/index.js

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