@thecb/components 7.13.3 → 7.13.4-beta.1

package/package.json

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

package/src/components/atoms/cardAlt/CardAlt.js

@@ -0,0 +1,113 @@
+import React, { Fragment } from "react";
+
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowSize from "../../withWindowSize";
+
+import { fallbackValues } from "../card/Card.theme";
+
+import Box from "../layouts/Box";
+import BoxWithShadow from "../box-with-shadow";
+import Center from "../layouts/Center";
+import Cover from "../layouts/Cover";
+import Stack from "../layouts/Stack";
+
+import CardImage from "../card/CardImage.styled";
+import CardText from "../card/CardText";
+import CardHeader from "../card/CardHeader";
+
+const CardAlt = ({
+  borderRadius = "4px",
+  extraStyles,
+  headerAs = "h2",
+  headerText,
+  headerVariant = "small",
+  imgSrc,
+  Image,
+  imgHeight = "150px",
+  imgObjectFit = "none",
+  imgAltText,
+  padding = "24px",
+  text,
+  titleText,
+  titleVariant = "small",
+  themeValues,
+  width = "276px",
+  children
+}) => {
+  const hasImage = Image || imgSrc;
+  const numberOfChildren =
+    (Array.isArray(children) ? children.length : 1) +
+    (text ? 1 : 0) +
+    (hasImage ? 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}
+          direction="row"
+        >
+          {headerText && (
+            <CardHeader
+              headerText={headerText}
+              headerColor={themeValues.headerColor}
+              headerVariant={headerVariant}
+              backgroundColor={themeValues.headerBackgroundColor}
+              borderRadius={borderRadius}
+              padding={padding}
+              as={headerAs}
+            ></CardHeader>
+          )}
+          {Image && !imgSrc && (
+            <Box
+              minHeight={imgHeight}
+              padding="0"
+              background={themeValues.imageBackgroundColor}
+            >
+              <Cover minHeight={imgHeight} singleChild>
+                <Center intrinsic>
+                  <Image alt={imgAltText} />
+                </Center>
+              </Cover>
+            </Box>
+          )}
+          {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(CardAlt),
+  "CardAlt",
+  fallbackValues
+);

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

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

package/src/components/atoms/index.js

@@ -45,6 +45,7 @@ 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 CardAlt } from "./cardAlt";
 export { default as NavTabs } from "./nav-tabs";
 export { default as LoadingLine } from "./loading-line";
 export * from "./table";