@thecb/components 10.11.2 → 10.12.0

package/package.json

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

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

@@ -14,6 +14,7 @@ import Stack from "../layouts/Stack";
 import CardImage from "./CardImage.styled";
 import CardText from "./CardText";
 import CardHeader from "./CardHeader";
+import { noop } from "../../../util/general";
 
 const Card = ({
   borderRadius = "4px",
@@ -26,8 +27,12 @@ const Card = ({
   imgHeight = "150px",
   imgObjectFit = "none",
   imgAltText,
+  onQuitClick = noop,
   padding = "24px",
+  showQuitLink = false,
   text,
+  textAs = "p",
+  titleAs = "h2",
   titleText,
   titleVariant = "small",
   themeValues,
@@ -90,9 +95,13 @@ const Card = ({
             <Box padding="0" width="100%" extraStyles="flex-basis: 100%;">
               {text && (
                 <CardText
+                  onQuitClick={onQuitClick}
                   padding={padding}
+                  showQuitLink={showQuitLink}
+                  titleAs={titleAs}
                   titleText={titleText}
                   text={text}
+                  textAs={textAs}
                   titleVariant={titleVariant}
                 />
               )}

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

@@ -10,10 +10,16 @@ import Cover from "../layouts/Cover";
 import Paragraph from "../paragraph";
 import Stack from "../layouts/Stack";
 import Title from "../title";
+import IconQuitLarge from "../../atoms/icons/IconQuitLarge";
+import { Cluster } from "../layouts";
 
 export const CardText = ({
+  showQuitLink,
+  onQuitClick,
+  titleAs,
   padding,
   text,
+  textAs = "p",
   titleText,
   titleVariant = "small",
   themeValues
@@ -22,17 +28,34 @@ export const CardText = ({
     <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>
+          <Cluster justify="space-between" align="center" overflow={true}>
+            {titleText && (
+              <Title
+                as={titleAs}
+                variant={titleVariant}
+                color={themeValues.titleColor}
+                weight={themeValues.titleWeight}
+              >
+                {titleText}
+              </Title>
+            )}
+            {showQuitLink && (
+              <Box
+                padding="0"
+                onClick={onQuitClick}
+                onKeyDown={e => e.key === "Enter" && onQuitClick()}
+                role="button"
+                tabIndex={0}
+                aria-label={`Close Card: ${titleText}`}
+                extraStyles="cursor: pointer;"
+              >
+                <IconQuitLarge />
+              </Box>
+            )}
+          </Cluster>
+          <Paragraph as={textAs} color={themeValues.textColor}>
+            {text}
+          </Paragraph>
         </Stack>
       </Cover>
     </Box>

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

@@ -2,8 +2,10 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -27,6 +29,10 @@ export interface CardProps {
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 export const Card: React.FC<Expand<CardProps> &