docs: refactor Card, Label and Icon stories (#1059)

src/components/Card/README.md

@@ -26,11 +26,11 @@ This parameter is used to specify the theme style of the card. It determines the
 
 By specifying different theme values, you can customize the visual appearance of the `Card` component to match the desired style and purpose.
 
-- `normal` - represents the normal/default theme of the card.
-- `info` - represents the theme for displaying informational content.
-- `success` - represents the theme for displaying positive/affirmative content.
-- `warning` - represents the theme for displaying warning or cautionary content.
-- `danger` - represents the theme for displaying content related to danger or critical situations.
+- `normal`: represents the normal/default theme of the card.
+- `info`: represents the theme for displaying informational content.
+- `success`: represents the theme for displaying positive/affirmative content.
+- `warning`: represents the theme for displaying warning or cautionary content.
+- `danger`: represents the theme for displaying content related to danger or critical situations.
 
 <!--LANDING_BLOCK
 <ExampleBlock
@@ -65,9 +65,9 @@ LANDING_BLOCK-->
 
 This parameter is used to define the type of the `Card` component. It allows you to customize the appearance and behavior of the card.
 
-- `container` - represents a card that acts as a container for other elements. It provides a structured layout for content.
-- `action` - represents a card with an interactive element, such as a button, that triggers an action when clicked.
-- `selection` - represents a card that can be selected or clicked to perform a specific action.
+- `container`: represents a card that acts as a container for other elements. It provides a structured layout for content.
+- `action`: represents a card with an interactive element, such as a button, that triggers an action when clicked.
+- `selection`: represents a card that can be selected or clicked to perform a specific action.
 
 <!--LANDING_BLOCK
 <ExampleBlock

src/components/Card/__stories__/Card.stories.tsx

@@ -1,25 +1,139 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Card} from '../Card';
-import type {CardProps} from '../Card';
-
-import {CardShowcase} from './CardShowcase';
-
-import './Card.stories.scss';
 
 export default {
     title: 'Components/Data Display/Card',
     component: Card,
 } as Meta;
 
-const DefaultTemplate: StoryFn<CardProps> = (args) => (
-    <Card {...args} className="card-stories">
-        <div className="card-content-stories">card&lsquo;s content</div>
-    </Card>
-);
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+    args: {
+        children: 'Content',
+        style: {
+            width: 120,
+            height: 120,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    },
+};
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args} size="m">
+                Size m
+            </Card>
+            <Card {...args} size="l">
+                Size l
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const Theme: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args} view="outlined" theme="normal">
+                Normal
+            </Card>
+            <Card {...args} view="outlined" theme="info">
+                Info
+            </Card>
+            <Card {...args} view="outlined" theme="success">
+                Success
+            </Card>
+            <Card {...args} view="outlined" theme="warning">
+                Warning
+            </Card>
+            <Card {...args} view="outlined" theme="danger">
+                Danger
+            </Card>
+            <Card {...args} view="filled" theme="normal">
+                Normal
+            </Card>
+            <Card {...args} view="filled" theme="info">
+                Info
+            </Card>
+            <Card {...args} view="filled" theme="success">
+                Success
+            </Card>
+            <Card {...args} view="filled" theme="warning">
+                Warning
+            </Card>
+            <Card {...args} view="filled" theme="danger">
+                Danger
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const View: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args} view="clear">
+                Clear
+            </Card>
+            <Card {...args} view="outlined">
+                Outlined
+            </Card>
+            <Card {...args} view="filled">
+                Filled
+            </Card>
+            <Card {...args} view="raised">
+                Raised
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const ActionType: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args}>Default</Card>
+            <Card {...args} disabled>
+                Disabled
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        type: 'action',
+    },
+    name: 'Action Type',
+};
 
-const ShowcaseTemplate: StoryFn<CardProps> = () => <CardShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const SelectionType: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args}>Default</Card>
+            <Card {...args} selected>
+                Selected
+            </Card>
+            <Card {...args} disabled>
+                Disabled
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        type: 'selection',
+    },
+    name: 'Selection Type',
+};