Feature/card component

packages/components-css/card-group/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Frameless CardGroup component

packages/components-css/card-group/index.scss

@@ -0,0 +1,24 @@
+.frameless-card-group {
+  container-type: inline-size;
+  display: grid;
+  gap: var(--frameless-card-group-gap);
+  grid-auto-flow: dense;
+}
+
+@media (width >= 600px) {
+  .frameless-card-group {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (width <= 900px) {
+  .frameless-card-group {
+    grid-template-columns: 1fr;
+  }
+}
+
+@container (max-width: 400px) {
+  .frameless-card {
+    --utrecht-paragraph-font-size: var(--frameless-card-paragraph-font-size);
+  }
+}

packages/components-css/card/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Frameless Card component

packages/components-css/card/index.scss

@@ -0,0 +1,38 @@
+.frameless-card {
+  background-color: var(--frameless-card-color-background-color);
+  border-radius: var(--frameless-card-border-border-radius);
+  font-family: var(--frameless-card-font-font-family);
+  max-inline-size: var(--frameless-card-spacing-max-width);
+  padding-block-end: var(--frameless-card-spacing-padding-block-end);
+  padding-block-start: var(--frameless-card-spacing-padding-block-start);
+  padding-inline-end: var(--frameless-card-spacing-padding-inline-end);
+  padding-inline-start: var(--frameless-card-spacing-padding-inline-start);
+}
+
+.frameless-card__content {
+  --utrecht-paragraph-margin-block-end: var(--frameless-card-paragraph-margin-block-end);
+  --utrecht-space-around: 1;
+}
+
+@container (max-width: 400px) {
+  .frameless-card__content {
+    --utrecht-paragraph-font-size: var(--frameless-card-paragraph-font-size);
+  }
+}
+
+.frameless-card__heading {
+  --utrecht-heading-2-font-size: var(--frameless-card-heading-font-size);
+  --utrecht-heading-3-font-size: var(--frameless-card-heading-font-size);
+  --utrecht-heading-4-font-size: var(--frameless-card-heading-font-size);
+  --utrecht-heading-5-font-size: var(--frameless-card-heading-font-size);
+  --utrecht-heading-6-font-size: var(--frameless-card-heading-font-size);
+  --utrecht-heading-2-margin-block-end: var(--frameless-card-heading-margin-block-end);
+  --utrecht-heading-3-margin-block-end: var(--frameless-card-heading-margin-block-end);
+  --utrecht-heading-4-margin-block-end: var(--frameless-card-heading-margin-block-end);
+  --utrecht-heading-5-margin-block-end: var(--frameless-card-heading-margin-block-end);
+  --utrecht-heading-6-margin-block-end: var(--frameless-card-heading-margin-block-end);
+  --utrecht-heading-4-line-height: var(--frameless-card-line-height);
+  --utrecht-heading-5-line-height: var(--frameless-card-line-height);
+  --utrecht-heading-6-line-height: var(--frameless-card-line-height);
+  --utrecht-space-around: 1;
+}

packages/components-react/src/Card/index.tsx

@@ -0,0 +1,26 @@
+import { Heading } from '@utrecht/component-library-react';
+import clsx from 'clsx';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import '@frameless/components-css/card/index.scss';
+
+interface CardProps extends HTMLAttributes<HTMLElement> {
+  heading?: string;
+  headingLevel?: number;
+}
+
+export const Card = ({
+  children,
+  heading,
+  headingLevel = 2,
+  className,
+  ...restProps
+}: PropsWithChildren<CardProps>) => (
+  <div {...restProps} className={clsx('frameless-card', className)}>
+    {heading && (
+      <Heading className="frameless-card__heading" level={headingLevel}>
+        {heading}
+      </Heading>
+    )}
+    <div className="frameless-card__content">{children}</div>
+  </div>
+);

packages/components-react/src/CardGroup/index.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+import '@frameless/components-css/card-group/index.scss';
+import '@frameless/components-css/card/index.scss';
+
+export type CardGroupProps = HTMLAttributes<HTMLDivElement>;
+
+export const CardGroup = forwardRef(
+  ({ children, className, ...restProps }: PropsWithChildren<CardGroupProps>, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('frameless-card-group', className)}>
+      {children}
+    </div>
+  ),
+);
+
+CardGroup.displayName = 'CardGroup';

packages/components-react/src/index.ts

@@ -1 +1,3 @@
 export { Heading1 } from '@utrecht/component-library-react';
+export { Card } from './Card';
+export { CardGroup } from './CardGroup';

packages/storybook/src/css-card.stories.tsx

@@ -0,0 +1,141 @@
+import '@frameless/components-css/card/index.scss';
+import readme from '@frameless/components-css/card/README.md?raw';
+import { Card } from '@frameless/components-react/src/Card';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Paragraph } from '@utrecht/component-library-react';
+
+const meta = {
+  title: 'CSS Component/Card',
+  id: 'css-card',
+  component: Card,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Card',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};
+
+export const LongHeading: Story = {
+  args: {
+    heading: 'The quick brown fox jumps over the lazy dog',
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    children: '',
+  },
+};
+
+export const WithHeading2: Story = {
+  args: {
+    heading: 'Design Systems',
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};
+export const WithHeading3: Story = {
+  args: {
+    heading: 'Design Systems',
+    headingLevel: 3,
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};
+export const WithHeading4: Story = {
+  args: {
+    heading: 'Design Systems',
+    headingLevel: 4,
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};
+export const WithHeading5: Story = {
+  args: {
+    heading: 'Design Systems',
+    headingLevel: 5,
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};
+
+export const WithHeading6: Story = {
+  args: {
+    heading: 'Design Systems',
+    headingLevel: 6,
+    children: (
+      <>
+        <Paragraph>
+          Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+          aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+        </Paragraph>
+      </>
+    ),
+  },
+};

packages/storybook/src/css-cardgroup.stories.tsx

@@ -0,0 +1,62 @@
+/* @license CC0-1.0 */
+
+import '@frameless/components-css/card/index.scss';
+import readme from '@frameless/components-css/card-group/README.md?raw';
+import { Card } from '@frameless/components-react/src/Card';
+import { CardGroup } from '@frameless/components-react/src/CardGroup';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Paragraph } from '@utrecht/component-library-react';
+
+const meta = {
+  title: 'CSS Component/CardGroup',
+  id: 'css-card-group',
+  component: CardGroup,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'CardGroup',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof CardGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Card heading="Design System" headingLevel={2}>
+          <Paragraph>
+            Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+            aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+          </Paragraph>
+        </Card>
+        <Card heading="Design System" headingLevel={2}>
+          <Paragraph>
+            Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al
+            aan meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System.
+          </Paragraph>
+        </Card>
+      </>
+    ),
+  },
+  name: 'Frameless CardGroup',
+};

packages/storybook/src/css-stories/heading1.stories.tsx

@@ -1,10 +1,8 @@
 /* @license CC0-1.0 */
 
-// import readme from '@frameless/components-css/heading1/README.md?raw';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Heading1 } from '@utrecht/component-library-react/dist/css-module';
 // import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
-// import '@frameless/components-css/heading1/index.scss';
 
 const meta = {
   title: 'CSS Component/Heading1',