Updated Card Pattern (#2470)

- Updated the CardFixedContainer to not have padding on the bottom when
  it is not the last child so that the right spacing is provided when
  used in conjunction with an external CardFooterGroup
- Updated the `Heading` fontSize to be reduced in blocks that follow the
  leading block
- Added optional `className` props to the `CardFixedContainer`,
  `CardContentBlock`, and `CardFooterGroup` to allow for customization
- Made the `children` prop of `CardContentBlock` optional to allow for cases where
  providing content via other props is sufficient

.changeset/giant-gifts-fold.md

@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': patch
+---
+
+Updated the CardPattern component to allow for more flexible customization

packages/libs/kode-ui/src/patterns/Card/CardContentBlock.tsx

@@ -1,19 +1,22 @@
+import cn from 'classnames';
 import React from 'react';
 import { Box, Heading, Stack, Text } from '../../components';
 import { atoms } from '../../styles';
 import {
   bodyContainer,
   bodyContent,
   extendedContainer,
+  heading,
 } from './CardPattern.css';
 
 export interface ICardContentBlockProps {
   title: string;
   visual?: React.ReactNode;
   description?: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   supportingContent?: React.ReactNode;
   extendedContent?: React.ReactNode;
+  className?: string;
 }
 
 export const CardContentBlock = ({
@@ -23,24 +26,17 @@ export const CardContentBlock = ({
   children,
   supportingContent,
   extendedContent,
+  className,
 }: ICardContentBlockProps) => {
   return (
     <Stack
       flexDirection={{ xs: 'column', md: 'row' }}
-      gap="lg"
-      className={bodyContainer}
+      gap="xl"
+      className={cn(bodyContainer, className)}
     >
       <Stack flexDirection="column" alignItems="flex-start" flex={1}>
         <Box marginBlockEnd="sm">{visual}</Box>
-        {title && (
-          <Heading
-            className={atoms({
-              marginBlockEnd: 'md',
-            })}
-          >
-            {title}
-          </Heading>
-        )}
+        {title && <Heading className={heading}>{title}</Heading>}
         {description && (
           <Text as="p" className={atoms({ marginBlockEnd: 'md' })}>
             {description}

packages/libs/kode-ui/src/patterns/Card/CardFixedContainer.tsx

@@ -1,15 +1,18 @@
+import cn from 'classnames';
 import React from 'react';
 import { Card } from '../../components';
 import { container, paddingContainer } from './CardPattern.css';
 
 export const CardFixedContainer = ({
+  className,
   children,
 }: {
+  className?: string;
   children: React.ReactNode;
 }) => {
   return (
     <div className={paddingContainer}>
-      <Card className={container}>{children}</Card>
+      <Card className={cn(container, className)}>{children}</Card>
     </div>
   );
 };

packages/libs/kode-ui/src/patterns/Card/CardPattern.css.ts

@@ -2,13 +2,18 @@ import { style } from '@vanilla-extract/css';
 import { atoms, responsiveStyle, token } from '../../../src/styles';
 
 // NOTE: Padding is applied via this container instead of margin to the container to avoid margin collapse with the body
-export const paddingContainer = style(
-  responsiveStyle({
+export const paddingContainer = style({
+  ...responsiveStyle({
     md: {
       paddingBlock: token('size.n32'),
     },
   }),
-);
+  selectors: {
+    '&:not(:last-child)': {
+      paddingBottom: 0,
+    },
+  },
+});
 
 export const container = style([
   atoms({
@@ -46,6 +51,20 @@ export const bodyContainer = style([
   },
 ]);
 
+export const heading = style([
+  {
+    marginBlockEnd: token('spacing.md'),
+    fontSize: token('typography.fontSize.xl'),
+    lineHeight: token('typography.lineHeight.xl'),
+    selectors: {
+      [`${bodyContainer}:first-child &`]: {
+        fontSize: token('typography.fontSize.2xl'),
+        lineHeight: token('typography.lineHeight.2xl'),
+      },
+    },
+  },
+]);
+
 export const bodyContent = style([
   { marginBlockStart: token('spacing.xl'), flex: 1.5 },
   {

packages/libs/kode-ui/src/patterns/Card/CardPattern.stories.tsx

@@ -293,3 +293,59 @@ export const CardWithStackedContent: Story = {
     );
   },
 };
+
+export const ExternalFooter: Story = {
+  name: 'Card Pattern with external footer',
+  args: {},
+  render: ({}) => {
+    return (
+      <Box>
+        <CardFixedContainer>
+          <CardContentBlock
+            title="Example Card Layout"
+            description="This card layout is a pattern within the design system. The only mandatory properties are title and children, but many optional properties are available so that users can configure what they need."
+            visual={<MonoNote width={36} height={36} />}
+            extendedContent={
+              <Box
+                backgroundColor="semantic.warning.subtle"
+                width="100%"
+                padding="xxxl"
+                style={{ aspectRatio: 1 }}
+              />
+            }
+            supportingContent={
+              <Box
+                backgroundColor="brand.secondary.subtle"
+                width="100%"
+                paddingBlock="xxxl"
+              />
+            }
+          >
+            <Stack
+              backgroundColor="brand.primary.subtle"
+              padding="xl"
+              marginBlockEnd="md"
+            />
+            <Stack
+              backgroundColor="brand.primary.subtle"
+              padding="xl"
+              marginBlockEnd="md"
+            />
+            <Stack
+              backgroundColor="brand.primary.subtle"
+              padding="xl"
+              marginBlockEnd="md"
+            />
+          </CardContentBlock>
+        </CardFixedContainer>
+        <CardFooterGroup separated={true}>
+          <Button variant="negative">Action</Button>
+          <CardFooterGroup>
+            <Button variant="outlined">Cancel</Button>
+            <Button variant="primary">Next</Button>
+          </CardFooterGroup>
+        </CardFooterGroup>
+      </Box>
+    );
+  },
+};