refactor(stories): migrate stories to CSF3 format

1 files changed, 440 insertions, 431 deletions

diff --git a/src/components/molecules/card/card.stories.tsx b/src/components/molecules/card/card.stories.tsx
index 7cc2ad4..55a0609 100644
--- a/src/components/molecules/card/card.stories.tsx
+++ b/src/components/molecules/card/card.stories.tsx
@@ -1,8 +1,8 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import NextImage from 'next/image';
 import { Button, ButtonLink, Link, Time } from '../../atoms';
 import { MetaItem } from '../meta-list';
-import { Card, type CardProps } from './card';
+import { Card } from './card';
 import { CardActions } from './card-actions';
 import { CardBody } from './card-body';
 import { CardCover } from './card-cover';
@@ -11,228 +11,138 @@ import { CardHeader } from './card-header';
 import { CardMeta } from './card-meta';
 import { CardTitle } from './card-title';
 
-/**
- * Card - Storybook Meta
- */
-export default {
-  title: 'Molecules/Card',
+const meta = {
   component: Card,
-  argTypes: {},
-} as ComponentMeta<typeof Card>;
-
-const Template: Story<CardProps<string | undefined>> = <
-  T extends string | undefined,
->(
-  args: CardProps<T>
-) => <Card {...args} />;
+  title: 'Molecules/Card',
+} satisfies Meta<typeof Card>;
 
-/**
- * Card Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  children: 'The card contents.',
-};
+export default meta;
 
-/**
- * Card Stories - AsLink
- */
-export const AsLink = Template.bind({});
-AsLink.args = {
-  'aria-label': 'Learn more about this card',
-  children: 'The card contents.',
-  linkTo: '#card',
-};
+type Story = StoryObj<typeof meta>;
 
-export const HeaderCover = Template.bind({});
-HeaderCover.args = {
-  children: <CardHeader />,
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
+export const Default: Story = {
+  args: {
+    children: 'The card contents.',
+  },
 };
 
-export const HeaderTitle = Template.bind({});
-HeaderTitle.args = {
-  children: (
-    <CardHeader>
-      <CardTitle>The card title</CardTitle>
-    </CardHeader>
-  ),
+export const AsLink: Story = {
+  args: {
+    'aria-label': 'Learn more about this card',
+    children: 'The card contents.',
+    linkTo: '#card',
+  },
 };
 
-export const HeaderMeta = Template.bind({});
-HeaderMeta.args = {
-  children: (
-    <CardHeader>
-      <CardMeta isInline>
-        <MetaItem label="Written by:" value="The author" />
-        <MetaItem
-          label="Published on:"
-          value={<Time date={new Date().toISOString()} />}
+export const HeaderCover: Story = {
+  args: {
+    children: <CardHeader />,
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
         />
-      </CardMeta>
-    </CardHeader>
-  ),
+      </CardCover>
+    ),
+  },
 };
 
-export const BodyContents = Template.bind({});
-BodyContents.args = {
-  children: <CardBody>The card contents</CardBody>,
+export const HeaderTitle: Story = {
+  args: {
+    children: (
+      <CardHeader>
+        <CardTitle>The card title</CardTitle>
+      </CardHeader>
+    ),
+  },
 };
 
-export const FooterActions = Template.bind({});
-FooterActions.args = {
-  children: (
-    <CardFooter>
-      <CardActions>
-        <ButtonLink to="#post">Read more</ButtonLink>
-        <Button>Share</Button>
-      </CardActions>
-    </CardFooter>
-  ),
+export const HeaderMeta: Story = {
+  args: {
+    children: (
+      <CardHeader>
+        <CardMeta isInline>
+          <MetaItem label="Written by:" value="The author" />
+          <MetaItem
+            label="Published on:"
+            value={<Time date={new Date().toISOString()} />}
+          />
+        </CardMeta>
+      </CardHeader>
+    ),
+  },
 };
 
-export const FooterMeta = Template.bind({});
-FooterMeta.args = {
-  children: <CardFooter />,
-  meta: (
-    <CardMeta>
-      <MetaItem
-        label="Categories:"
-        value={[
-          { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
-          { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
-        ]}
-      />
-      <MetaItem
-        label="Tags:"
-        value={[
-          { id: 'tag-1', value: 'Tag 1' },
-          { id: 'tag-2', value: 'Tag 2' },
-          { id: 'tag-3', value: 'Tag 3' },
-        ]}
-      />
-    </CardMeta>
-  ),
+export const BodyContents: Story = {
+  args: {
+    children: <CardBody>The card contents</CardBody>,
+  },
 };
 
-export const CompositionCoverTitle = Template.bind({});
-CompositionCoverTitle.args = {
-  children: (
-    <CardHeader>
-      <CardTitle>The card title</CardTitle>
-    </CardHeader>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
+export const FooterActions: Story = {
+  args: {
+    children: (
+      <CardFooter>
+        <CardActions>
+          <ButtonLink to="#post">Read more</ButtonLink>
+          <Button>Share</Button>
+        </CardActions>
+      </CardFooter>
+    ),
+  },
 };
 
-export const CompositionTitleMeta = Template.bind({});
-CompositionTitleMeta.args = {
-  children: (
-    <CardHeader>
-      <CardTitle>The card title</CardTitle>
-      <CardMeta isInline>
-        <MetaItem label="Written by:" value="The author" />
+export const FooterMeta: Story = {
+  args: {
+    children: <CardFooter />,
+    meta: (
+      <CardMeta>
         <MetaItem
-          label="Published on:"
-          value={<Time date={new Date().toISOString()} />}
+          label="Categories:"
+          value={[
+            { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
+            { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
+          ]}
         />
-      </CardMeta>
-    </CardHeader>
-  ),
-};
-
-export const CompositionCoverTitleMeta = Template.bind({});
-CompositionCoverTitleMeta.args = {
-  children: (
-    <CardHeader>
-      <CardTitle>The card title</CardTitle>
-      <CardMeta isInline>
-        <MetaItem label="Written by:" value="The author" />
         <MetaItem
-          label="Published on:"
-          value={<Time date={new Date().toISOString()} />}
+          label="Tags:"
+          value={[
+            { id: 'tag-1', value: 'Tag 1' },
+            { id: 'tag-2', value: 'Tag 2' },
+            { id: 'tag-3', value: 'Tag 3' },
+          ]}
         />
       </CardMeta>
-    </CardHeader>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
-};
-
-export const CompositionTitleBody = Template.bind({});
-CompositionTitleBody.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-      </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-    </>
-  ),
+    ),
+  },
 };
 
-export const CompositionCoverTitleBody = Template.bind({});
-CompositionCoverTitleBody.args = {
-  children: (
-    <>
+export const CompositionCoverTitle: Story = {
+  args: {
+    children: (
       <CardHeader>
         <CardTitle>The card title</CardTitle>
       </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-    </>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+  },
 };
 
-export const CompositionTitleMetaBody = Template.bind({});
-CompositionTitleMetaBody.args = {
-  children: (
-    <>
+export const CompositionTitleMeta: Story = {
+  args: {
+    children: (
       <CardHeader>
         <CardTitle>The card title</CardTitle>
         <CardMeta isInline>
@@ -243,20 +153,13 @@ CompositionTitleMetaBody.args = {
           />
         </CardMeta>
       </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-    </>
-  ),
+    ),
+  },
 };
 
-export const CompositionCoverTitleMetaBody = Template.bind({});
-CompositionCoverTitleMetaBody.args = {
-  children: (
-    <>
+export const CompositionCoverTitleMeta: Story = {
+  args: {
+    children: (
       <CardHeader>
         <CardTitle>The card title</CardTitle>
         <CardMeta isInline>
@@ -267,242 +170,348 @@ CompositionCoverTitleMetaBody.args = {
           />
         </CardMeta>
       </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-    </>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+  },
 };
 
-export const CompositionTitleActions = Template.bind({});
-CompositionTitleActions.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-      </CardHeader>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to="#post">Read more</ButtonLink>
-          <Button>Share</Button>
-        </CardActions>
-      </CardFooter>
-    </>
-  ),
+export const CompositionTitleBody: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+      </>
+    ),
+  },
 };
 
-export const CompositionCoverTitleActions = Template.bind({});
-CompositionCoverTitleActions.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-      </CardHeader>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to="#post">Read more</ButtonLink>
-          <Button>Share</Button>
-        </CardActions>
-      </CardFooter>
-    </>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
+export const CompositionCoverTitleBody: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+      </>
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+  },
 };
 
-export const CompositionTitleBodyActions = Template.bind({});
-CompositionTitleBodyActions.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-      </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to="#post">Read more</ButtonLink>
-          <Button>Share</Button>
-        </CardActions>
-      </CardFooter>
-    </>
-  ),
+export const CompositionTitleMetaBody: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+          <CardMeta isInline>
+            <MetaItem label="Written by:" value="The author" />
+            <MetaItem
+              label="Published on:"
+              value={<Time date={new Date().toISOString()} />}
+            />
+          </CardMeta>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+      </>
+    ),
+  },
 };
 
-export const CompositionTitleBodyActionsMeta = Template.bind({});
-CompositionTitleBodyActionsMeta.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-      </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to="#post">Read more</ButtonLink>
-          <Button>Share</Button>
-        </CardActions>
-      </CardFooter>
-    </>
-  ),
-  meta: (
-    <CardMeta>
-      <MetaItem
-        label="Categories:"
-        value={[
-          { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
-          { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
-        ]}
-      />
-      <MetaItem
-        label="Tags:"
-        value={[
-          { id: 'tag-1', value: 'Tag 1' },
-          { id: 'tag-2', value: 'Tag 2' },
-          { id: 'tag-3', value: 'Tag 3' },
-        ]}
-      />
-    </CardMeta>
-  ),
+export const CompositionCoverTitleMetaBody: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+          <CardMeta isInline>
+            <MetaItem label="Written by:" value="The author" />
+            <MetaItem
+              label="Published on:"
+              value={<Time date={new Date().toISOString()} />}
+            />
+          </CardMeta>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+      </>
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+  },
 };
 
-export const CompositionCoverTitleBodyActionsMeta = Template.bind({});
-CompositionCoverTitleBodyActionsMeta.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-      </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to="#post">Read more</ButtonLink>
-          <Button>Share</Button>
-        </CardActions>
-      </CardFooter>
-    </>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
-  meta: (
-    <CardMeta>
-      <MetaItem
-        label="Categories:"
-        value={[
-          { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
-          { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
-        ]}
-      />
-      <MetaItem
-        label="Tags:"
-        value={[
-          { id: 'tag-1', value: 'Tag 1' },
-          { id: 'tag-2', value: 'Tag 2' },
-          { id: 'tag-3', value: 'Tag 3' },
-        ]}
-      />
-    </CardMeta>
-  ),
+export const CompositionTitleActions: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardFooter>
+          <CardActions>
+            <ButtonLink to="#post">Read more</ButtonLink>
+            <Button>Share</Button>
+          </CardActions>
+        </CardFooter>
+      </>
+    ),
+  },
 };
 
-export const CompositionAllContents = Template.bind({});
-CompositionAllContents.args = {
-  children: (
-    <>
-      <CardHeader>
-        <CardTitle>The card title</CardTitle>
-        <CardMeta isInline>
-          <MetaItem label="Written by:" value="The author" />
-          <MetaItem
-            label="Published on:"
-            value={<Time date={new Date().toISOString()} />}
-          />
-        </CardMeta>
-      </CardHeader>
-      <CardBody>
-        Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
-        necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
-        velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur
-        dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
-      </CardBody>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to="#post">Read more</ButtonLink>
-          <Button>Share</Button>
-        </CardActions>
-      </CardFooter>
-    </>
-  ),
-  cover: (
-    <CardCover>
-      <NextImage
-        alt="A cover example"
-        height={480}
-        src="https://picsum.photos/640/480"
-        width={640}
-      />
-    </CardCover>
-  ),
-  meta: (
-    <CardMeta>
-      <MetaItem
-        label="Categories:"
-        value={[
-          { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
-          { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
-        ]}
-      />
-      <MetaItem
-        label="Tags:"
-        value={[
-          { id: 'tag-1', value: 'Tag 1' },
-          { id: 'tag-2', value: 'Tag 2' },
-          { id: 'tag-3', value: 'Tag 3' },
-        ]}
-      />
-    </CardMeta>
-  ),
+export const CompositionCoverTitleActions: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardFooter>
+          <CardActions>
+            <ButtonLink to="#post">Read more</ButtonLink>
+            <Button>Share</Button>
+          </CardActions>
+        </CardFooter>
+      </>
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+  },
+};
+
+export const CompositionTitleBodyActions: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+        <CardFooter>
+          <CardActions>
+            <ButtonLink to="#post">Read more</ButtonLink>
+            <Button>Share</Button>
+          </CardActions>
+        </CardFooter>
+      </>
+    ),
+  },
+};
+
+export const CompositionTitleBodyActionsMeta: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+        <CardFooter>
+          <CardActions>
+            <ButtonLink to="#post">Read more</ButtonLink>
+            <Button>Share</Button>
+          </CardActions>
+        </CardFooter>
+      </>
+    ),
+    meta: (
+      <CardMeta>
+        <MetaItem
+          label="Categories:"
+          value={[
+            { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
+            { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
+          ]}
+        />
+        <MetaItem
+          label="Tags:"
+          value={[
+            { id: 'tag-1', value: 'Tag 1' },
+            { id: 'tag-2', value: 'Tag 2' },
+            { id: 'tag-3', value: 'Tag 3' },
+          ]}
+        />
+      </CardMeta>
+    ),
+  },
+};
+
+export const CompositionCoverTitleBodyActionsMeta: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+        <CardFooter>
+          <CardActions>
+            <ButtonLink to="#post">Read more</ButtonLink>
+            <Button>Share</Button>
+          </CardActions>
+        </CardFooter>
+      </>
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+    meta: (
+      <CardMeta>
+        <MetaItem
+          label="Categories:"
+          value={[
+            { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
+            { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
+          ]}
+        />
+        <MetaItem
+          label="Tags:"
+          value={[
+            { id: 'tag-1', value: 'Tag 1' },
+            { id: 'tag-2', value: 'Tag 2' },
+            { id: 'tag-3', value: 'Tag 3' },
+          ]}
+        />
+      </CardMeta>
+    ),
+  },
+};
+
+export const CompositionAllContents: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>The card title</CardTitle>
+          <CardMeta isInline>
+            <MetaItem label="Written by:" value="The author" />
+            <MetaItem
+              label="Published on:"
+              value={<Time date={new Date().toISOString()} />}
+            />
+          </CardMeta>
+        </CardHeader>
+        <CardBody>
+          Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et
+          necessitatibus esse laudantium sequi ad. Et est quas pariatur facere
+          velit veritatis nihil. Ratione aperiam omnis quia ut asperiores
+          tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea.
+        </CardBody>
+        <CardFooter>
+          <CardActions>
+            <ButtonLink to="#post">Read more</ButtonLink>
+            <Button>Share</Button>
+          </CardActions>
+        </CardFooter>
+      </>
+    ),
+    cover: (
+      <CardCover>
+        <NextImage
+          alt="A cover example"
+          height={480}
+          src="https://picsum.photos/640/480"
+          width={640}
+        />
+      </CardCover>
+    ),
+    meta: (
+      <CardMeta>
+        <MetaItem
+          label="Categories:"
+          value={[
+            { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> },
+            { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> },
+          ]}
+        />
+        <MetaItem
+          label="Tags:"
+          value={[
+            { id: 'tag-1', value: 'Tag 1' },
+            { id: 'tag-2', value: 'Tag 2' },
+            { id: 'tag-3', value: 'Tag 3' },
+          ]}
+        />
+      </CardMeta>
+    ),
+  },
 };