feat(InteractiveCard): new component

src/components/atoms/Pill/Pill.tsx

@@ -78,7 +78,7 @@ interface IPillProps {
  */
 const Pill: FC<IPillProps> = ({
     appearance = "informative",
-    size = "medium",
+    size = "small",
     text,
     iconAlignment = "before",
     filled,

src/components/molecules/InteractiveCard/InteractiveCard.scss

@@ -0,0 +1,129 @@
+@use "../../../assets/styles/mixins";
+
+.interactiveCard {
+    $this: &;
+
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 0;
+    border: var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);
+    background-color: var(--guit-sem-color-background-neutral-1);
+
+    &_size {
+        &_large {
+            gap: var(--guit-ref-spacing-large);
+            padding: var(--guit-ref-spacing-large);
+            border-radius: var(--guit-ref-radius-2xsmall);
+
+            &#{ $this }_withIcon {
+                padding-inline-start: var(--guit-ref-spacing-medium);
+            }
+
+            &#{ $this }_withAction {
+                padding-inline-end: var(--guit-ref-spacing-medium);
+            }
+
+            #{ $this }__main {
+                gap: var(--guit-ref-spacing-medium);
+            }
+        }
+
+        &_medium {
+            gap: var(--guit-ref-spacing-medium);
+            padding: var(--guit-ref-spacing-medium);
+            border-radius: var(--guit-ref-radius-3xsmall);
+
+            &#{ $this }_withIcon {
+                padding-inline-start: var(--guit-ref-spacing-small);
+            }
+
+            &#{ $this }_withAction {
+                padding-inline-end: var(--guit-ref-spacing-small);
+            }
+
+            #{ $this }__main {
+                gap: var(--guit-ref-spacing-xsmall);
+            }
+        }
+
+        &_small {
+            gap: var(--guit-ref-spacing-xsmall);
+            padding: var(--guit-ref-spacing-small);
+            border-radius: var(--guit-ref-radius-3xsmall);
+
+            &#{ $this }_withIcon {
+                padding-inline-start: var(--guit-ref-spacing-xsmall);
+            }
+
+            &#{ $this }_withAction {
+                padding-inline-end: var(--guit-ref-spacing-xsmall);
+            }
+
+            #{ $this }__main {
+                gap: var(--guit-ref-spacing-2xsmall);
+            }
+        }
+    }
+
+    &__main {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__icon {
+        flex: 0 0 auto;
+        color: var(--guit-sem-color-foreground-accent-blue);
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--guit-ref-spacing-4xsmall);
+        flex: 1;
+        min-width: 0;
+
+        &_onlyDescription {
+            align-self: flex-end;
+        }
+    }
+
+    &__description {
+        color: var(--guit-sem-color-foreground-neutral-1);
+        word-break: break-word;
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--guit-ref-spacing-xsmall);
+        flex: 0 0 auto;
+    }
+
+    &_mode {
+        &_interactive {
+            @include mixins.media-hover {
+                &:hover {
+                    background-color: var(--guit-sem-color-background-neutral-1-hover);
+                }
+            }
+
+            &:active {
+                background-color: var(--guit-sem-color-background-neutral-1-pressed);
+            }
+
+            &#{ $this }_disabled {
+                pointer-events: none;
+                user-select: none;
+                border-color: var(--guit-sem-color-border-disabled-1);
+
+                #{ $this }__icon,
+                #{ $this }__description {
+                    color: var(--guit-sem-color-foreground-disabled);
+                }
+            }
+        }
+    }
+}

src/components/molecules/InteractiveCard/InteractiveCard.stories.tsx

@@ -0,0 +1,141 @@
+import React, { ComponentType, FC } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { AppGrid, ArchiveFilled, Calculator, CheckMarkCircleFilled, Flask, Globe, Power } from "@geneui/icons";
+
+// Components
+import { Col, Grid, Row } from "@components/atoms/Grid";
+import Pill from "@components/atoms/Pill";
+import Checkbox from "@components/molecules/Checkbox";
+import InteractiveCard, { IInteractiveCardProps } from "@components/molecules/InteractiveCard";
+import Switch from "@components/molecules/Switch";
+
+// Helpers
+import { args, propCategory } from "../../../../stories/assets/storybook.globals";
+
+const meta: Meta<IInteractiveCardProps> = {
+    title: "Molecules/InteractiveCard",
+    component: InteractiveCard,
+    subcomponents: {
+        Pill: Pill as ComponentType<unknown>,
+        Checkbox: Checkbox as ComponentType<unknown>,
+        Switch: Switch as ComponentType<unknown>
+    },
+    argTypes: {
+        className: args({ control: "false", ...propCategory.appearance }),
+        size: args({ control: "select", ...propCategory.appearance }),
+        label: args({ control: "text", ...propCategory.content }),
+        infoText: args({ control: "text", ...propCategory.content }),
+        description: args({ control: "text", ...propCategory.content }),
+        Icon: args({ control: "false", ...propCategory.content }),
+        disabled: args({ control: "boolean", ...propCategory.states }),
+        onClick: args({ control: "false", ...propCategory.action }),
+        actionProps: args({ control: "false", ...propCategory.functionality }),
+        pill: args({ control: "false", ...propCategory.content }),
+        onFocus: args({ control: "false", ...propCategory.action })
+    },
+    args: {}
+};
+
+export default meta;
+
+type Story = StoryObj<IInteractiveCardProps>;
+
+export const Default: Story = {
+    args: {
+        size: "medium",
+        label: "Label",
+        infoText: "info text",
+        description: "description",
+        Icon: Globe,
+        disabled: false,
+        onClick: (e) => e.preventDefault()
+    }
+};
+
+const InteractiveCardsCombinationComponent: FC<IInteractiveCardProps> = (props) => {
+    const { disabled } = props;
+    return (
+        <Grid>
+            <Row flexible={false}>
+                <Col size={6}>
+                    <InteractiveCard
+                        label="Card 1"
+                        disabled={disabled}
+                        description="With Checkbox"
+                        Icon={AppGrid}
+                        actionProps={{
+                            type: "checkbox"
+                        }}
+                        pill={{
+                            text: "Pill",
+                            filled: true,
+                            appearance: "magenta",
+                            Icon: CheckMarkCircleFilled,
+                            size: "small"
+                        }}
+                        {...props}
+                    />
+                </Col>
+                <Col size={6}>
+                    <InteractiveCard
+                        disabled={disabled}
+                        label="Card 2"
+                        description="With Switch"
+                        Icon={ArchiveFilled}
+                        actionProps={{
+                            type: "switch"
+                        }}
+                        {...props}
+                    />
+                </Col>
+            </Row>
+            <Row>
+                <Col size={4}>
+                    <InteractiveCard
+                        label="Card 3"
+                        description="Full Interactive"
+                        Icon={Calculator}
+                        disabled={disabled}
+                        {...props}
+                    />
+                </Col>
+                <Col size={4}>
+                    <InteractiveCard
+                        label="Card 4"
+                        description="Full Interactive"
+                        Icon={CheckMarkCircleFilled}
+                        disabled={disabled}
+                        {...props}
+                    />
+                </Col>
+                <Col size={4}>
+                    <InteractiveCard
+                        label="Card 5"
+                        description="Full Interactive"
+                        Icon={Flask}
+                        disabled={disabled}
+                        {...props}
+                    />
+                </Col>
+            </Row>
+            <Row>
+                <Col size={12}>
+                    <InteractiveCard
+                        disabled={disabled}
+                        label="Ineractive"
+                        description="With Size Large and long description. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source."
+                        infoText="info text"
+                        Icon={Power}
+                        size="large"
+                        {...props}
+                    />
+                </Col>
+            </Row>
+        </Grid>
+    );
+};
+
+export const InteractiveCardsCombination: Story = {
+    render: (props) => <InteractiveCardsCombinationComponent {...props} />
+};