@thecb/components 7.13.4-beta.1 → 7.13.4-beta.10

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowSize from "../../withWindowSize";
@@ -64,37 +64,41 @@ const Card = ({
               as={headerAs}
             ></CardHeader>
           )}
-          {Image && !imgSrc && (
-            <Box
-              minHeight={imgHeight}
-              padding="0"
-              background={themeValues.imageBackgroundColor}
-            >
-              <Cover minHeight={imgHeight} singleChild>
-                <Center intrinsic>
-                  <Image alt={imgAltText} />
-                </Center>
-              </Cover>
+          <Stack direction="row" childGap="0">
+            {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}
+              />
+            )}
+            <Box padding="0">
+              {text && (
+                <CardText
+                  padding={padding}
+                  titleText={titleText}
+                  text={text}
+                  titleVariant={titleVariant}
+                />
+              )}
+              {children}
             </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>
         </Stack>
       </Cover>
     </BoxWithShadow>

package/src/components/atoms/index.js

@@ -45,7 +45,6 @@ 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";

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

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

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