docs: moves Card stories to the card folder

Author: Nikolai Lopin

src/components/Card/Card.tsx

@@ -25,6 +25,7 @@ type CardProps = BorderRadiusProps &
     PaddingProps & {
         /**
          * Set the visual depth of the card by adding a shadow (available values: 0, 100, 200, 300)
+         * @default 0
          */
         level?: ResponsiveValue<0 | 100 | 200 | 300>;
     };

src/components/Card/docs/Card.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Card } from '../Card';
+import { Button } from '../../Button/Button';
+
+const meta: Meta = {
+    title: 'Components/Card',
+    component: Card,
+    argTypes: {
+        ref: { table: { disable: true } },
+        forwardedAs: { table: { disable: true } },
+        theme: { table: { disable: true } },
+        as: { table: { disable: true } },
+        children: { description: 'Defines the inner content of the card' },
+        level: {
+            options: [0, 100, 200, 300],
+            control: 'radio'
+        }
+    },
+    args: {
+        children: 'Card Contents'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {};
+
+export const WithLevel: Story = {
+    args: {
+        level: 300
+    }
+};
+
+export const WithReactComponent = {
+    args: {
+        children: <Button>A button inside the `Card`</Button>
+    }
+};

src/components/Card/docs/Card.storybook.mdx

@@ -0,0 +1,17 @@
+import { Meta, ArgsTable, Primary, Stories } from '@storybook/blocks';
+import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
+
+# Card
+
+<Primary />
+
+## Properties
+
+<ArgsTable story="Default" />
+
+<StyledSystemLinks component="Card" supportedProps={['space', 'height', 'width']} />
+
+<Stories includePrimary={false} />