Card: Add <Card.Divider/> child component.

.changeset/the-man.md

@@ -0,0 +1,5 @@
+---
+"@nordcom/nordstar-card": patch
+---
+
+Add `<Card.Divider/>` child component.

packages/components/card/src/card.module.scss

@@ -1,12 +1,20 @@
 .container {
-    padding: var(--layout-block-padding);
-
     border-width: var(--border-width-half);
     border-style: solid;
     border-radius: var(--border-radius);
 
     font-family: var(--font-body);
 
+    &:not([data-padding='false']) {
+        $padding: var(--layout-block-padding);
+
+        padding: $padding;
+
+        .divider {
+            margin: $padding calc($padding * -1);
+        }
+    }
+
     &[data-variant='solid'] {
         border-width: 0;
 
@@ -36,4 +44,11 @@
     &[data-color='secondary'] {
         border-color: var(--color-accent-secondary);
     }
+
+    .divider {
+        height: var(--border-width-half);
+
+        // TODO: Use the proper color based on `data-color`.
+        background: var(--color-background-highlight);
+    }
 }

packages/components/card/src/card.stories.tsx

@@ -20,35 +20,51 @@ const story: Meta<typeof Card> = {
     }
 };
 
-const Template = (args: CardProps) => <Card {...args}>Content inside of the card</Card>;
+const Template = (args: CardProps<any>) => <Card {...args} style={{ width: '18rem', maxWidth: '100%' }} />;
 
 export const Default = {
     render: Template,
     args: {
         variant: 'default',
-        color: 'default'
+        color: 'default',
+        children: (
+            <>
+                Hello World!
+                <Card.Divider />
+                Content inside of the card
+                <br />
+                Another line of content inside of the card.
+                <br />
+                And another one.
+                <Card.Divider />
+                Imaginary footer
+            </>
+        )
     }
 };
 
 export const DefaultSolid = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'default'
+        color: 'default',
+        children: <>Content inside of the card</>
     }
 };
 export const PrimarySolid = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'primary'
+        color: 'primary',
+        children: <>Content inside of the card</>
     }
 };
 export const SecondarySolid = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'secondary'
+        color: 'secondary',
+        children: <>Content inside of the card</>
     }
 };
 

packages/components/card/src/card.tsx

@@ -1,5 +1,5 @@
-import type { As, CSSCustomProperties, NordstarColor } from '@nordcom/nordstar-system';
-import { forwardRef } from '@nordcom/nordstar-system';
+import { forwardRef, type As, type CSSCustomProperties, type NordstarColor } from '@nordcom/nordstar-system';
+import type { ComponentProps } from 'react';
 import styles from './card.module.scss';
 
 export type CardProps = {
@@ -16,16 +16,33 @@ export type CardProps = {
  * @param {As} [props.as] - The element to render the component as.
  * @param {'default' | 'solid'} [props.variant='default'] - The variant of the card.
  * @param {NordstarColor} [props.color='default'] - The color scheme of the card.
+ * @param {CSSCustomProperties} [props.style] - Custom CSS properties.
+ * @param {React.ReactNode} [props.children] - The children of the component.
  * @returns {React.ReactNode} The `<Card/>` component.
  */
+
 const Card = forwardRef<'section', CardProps>(
-    ({ as: Tag = 'section', className, variant = 'default', color = 'default', ...props }, ref) => {
+    ({ as, className, variant = 'default', color = 'default', ...props }, ref) => {
+        const Tag = as || 'section';
         const classes = `${styles.container}${className ? ` ${className}` : ''}`;
 
-        return <Tag ref={ref} data-variant={variant} data-color={color} {...props} className={classes} />;
+        return <Tag {...props} ref={ref} data-variant={variant} data-color={color} className={classes} />;
     }
 );
-
 Card.displayName = 'Nordstar.Card';
 
-export default Card;
+export type CardDividerProps = {} & ComponentProps<'hr'>;
+
+/**
+ * `<Card.Divider/>`, a component to render card dividers.
+ * @param {object} props - `<Card.Divider/>` props.
+ * @returns {React.ReactNode} The `<Card.Divider/>` component.
+ */
+const Divider = ({ className, ...props }: CardDividerProps) => {
+    const classes = `${styles.divider}${className ? ` ${className}` : ''}`;
+
+    return <section {...props} className={classes} />;
+};
+Divider.displayName = 'Nordstar.Card.Divider';
+
+export default Object.assign(Card, { Divider });