Update/fs card

dev/storybook/src/stories/shared/Button.stories.ts

@@ -9,13 +9,33 @@ const meta = {
   component: FSButton,
   tags: ['autodocs'],
   argTypes: {
-    onClick: { action: 'clicked' }
+    ...addSubcomponentsArgTypes([FSCard], FSButton),
+    ...addComponentEmits(FSButton),
+    variant: {
+      control: { type: 'radio' },
+      options: ['standard', 'full', 'icon']
+    }
   }
 } satisfies Meta<typeof FSButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {
+  args: {
+    label: "I am a button",
+    icon: "mdi-plus-circle-outline"
+  },
+  render: (args) => ({
+    components: { FSButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <FSButton v-bind="args" />`
+  })
+}
+
 export const Variations: Story = {
   render: () => ({
     components: { FSButton, FSIcon, FSSpan },
@@ -131,30 +151,33 @@ export const ColorVariations: Story = {
   })
 }
 
-import FSClickable from  "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
 import FSText from  "@dative-gpi/foundation-shared-components/components/FSText.vue";
 import FSRow from  "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export const ContentVariant: Story = {
-  render: () => ({
-    components: { FSClickable, FSRow, FSIcon, FSText },
+  args: {
+    variant: 'standard',
+    color: 'primary',
+    padding: '12px'
+  },
+  render: (args) => ({
+    components: { FSCard, FSRow, FSIcon, FSText },
+    setup() {
+      return { args };
+    },
     template: `
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: flex; gap: 10px;">
-        <FSClickable color="primary" padding="12px">
-          <template #default="{ contentVariant }">
-            <FSRow align="center-center">
-              <FSIcon color="success" :variant="contentVariant">
-                mdi-plus-circle-outline
-              </FSIcon>
-              <FSText color="error" :variant="contentVariant">
-                Create
-              </FSText>
-            </FSRow>
-          </template>
-        </FSClickable>
-      </div>
-    </div>`
+    <FSCard>
+      <template #default="{ contentVariant }">
+        <FSRow align="center-center">
+          <FSIcon color="success" :variant="contentVariant">
+            mdi-plus-circle-outline
+          </FSIcon>
+          <FSText color="warning" :variant="contentVariant">
+            Create
+          </FSText>
+        </FSRow>
+      </template>
+    </FSCard>`
   })
 }
 
@@ -469,6 +492,8 @@ export const Submit: Story = {
 
 import FSButtonCheckbox from  "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 import FSTagField from '@dative-gpi/foundation-shared-components/components/fields/FSTagField.vue';
+import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 
 export const Checkbox: Story = {
   args: {

dev/storybook/src/stories/shared/Calendar.stories.ts

@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
 import FSSimpleCalendarHeader from "@dative-gpi/foundation-shared-components/components/calendar/FSSimpleCalendarHeader.vue";
 import FSSimpleCalendar from "@dative-gpi/foundation-shared-components/components/calendar/FSSimpleCalendar.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 
 const meta = {
   title: 'Foundation/Shared/Calendar',
@@ -21,7 +21,7 @@ export const Default: Story = {
   args: {
   },
   render: (args, { argTypes }) => ({
-    components: { FSCol, FSSimpleCalendarHeader, FSSimpleCalendar, FSClickable },
+    components: { FSCol, FSSimpleCalendarHeader, FSSimpleCalendar, FSCard },
     props: Object.keys(argTypes),
     setup() {
       const disabledDates = ref<Date[]>([]);
@@ -48,18 +48,18 @@ export const Default: Story = {
         <FSSimpleCalendarHeader v-model:month="month" v-model:year="year" width="500px" />
         <FSSimpleCalendar v-model:month="month" v-model:year="year">
           <template #day="{ date, isToday, isPast, isFutur, isNextMonth, isPreviousMonth, isCurrentMonth }">
-            <FSClickable
+            <FSCard
               height="100px"
               width="100%"
               :disabled="isPast"
               padding="8px"
-              :variant="!isCurrentMonth ? 'full' : undefined"
-              :color="isDisabled(date) ? 'error' : undefined"
+              :variant="!isCurrentMonth ? 'full' : 'standard'"
+              :color="isDisabled(date) ? 'error' : 'light'"
               @click="toggleDate(date)"
             >
-              <FSClickable v-if="isToday" color="primary" padding="0 4px" variant="full">{{ date.getDate() }}</FSClickable>
+              <FSCard v-if="isToday" color="primary" padding="0 4px" variant="full">{{ date.getDate() }}</FSCard>
               <template v-else>{{ date.getDate() }}</template>
-            </FSClickable>
+            </FSCard>
           </template>
         </FSSimpleCalendar>
 

dev/storybook/src/stories/shared/Card.stories.ts

@@ -1,73 +1,162 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import { VDivider } from 'vuetify/lib/components/index.mjs';
-
-import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
-import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+import { CardVariants } from '@dative-gpi/foundation-shared-components/models';
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import { addComponentEmits } from '@/utils/properties';
+import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 
 const meta = {
   title: 'Foundation/Shared/Card',
   component: FSCard,
   tags: ['autodocs'],
   argTypes: {
-    onClick: { action: 'clicked' }
+    variant: {
+      control: { type: 'select' },
+      options: [CardVariants.Standard, CardVariants.Background, CardVariants.Gradient, CardVariants.Full],
+      description: 'Mode of the agenda view',
+    },
+    clickable: {
+      control: { type: 'boolean' }
+    },
+    ...addComponentEmits(FSCard)
   },
 } satisfies Meta<typeof FSCard>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Variations: Story = {
-  render: () => ({
-    components: { VDivider, FSCard, FSText, FSRow, FSButton },
+export const Default: Story = {
+  render: (args) => ({
+    components: { FSCard, FSSpan },
+    setup() {
+      return { args };
+    },
+    template: `
+    <FSCard
+      v-bind="args"
+    >
+      <FSSpan>I am a card content</FSSpan>
+    </FSCard>`
+  }),
+  args: {
+    padding: '16px',
+    clickable: false,
+  },
+};
+
+export const Variants: Story = {
+  render: (args) => ({
+    components: { FSCard, FSSpan },
+    setup() {
+      return { args, ColorEnum };
+    },
+    inheritAttrs: false,
     template: `
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-        <div style="display: flex; gap: 10px;">
-            <FSCard>
-                <template #header>
-                    <FSText font="text-button">Obiwan kenobi</FSText>
-                </template>
-                <template #body>
-                    <FSText> - Hello there!</FSText>
-                </template>
-            </FSCard>
-        </div>
-        <div style="display: flex; gap: 10px;">
-            <FSCard>
-                <template #header>
-                    <FSText font="text-button">General Grievous</FSText>
-                </template>
-                <template #body>
-                    <FSText> - General Kenobi!</FSText>
-                </template>
-                <template #footer>
-                    <FSText font="text-overline">(suprised)</FSText>
-                </template>
-            </FSCard>
-            <FSCard>
-                <template #header>
-                    <FSText font="text-button">General Grievous</FSText>
-                </template>
-                <template #body>
-                    <FSText> - You are a bold one.</FSText>
-                </template>
-            </FSCard>
-        </div>
-        <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
-        <div style="display: flex; gap: 10px;">
-            <FSCard color="primary">
-                <FSRow>
-                    <FSButton color="primary" variant="icon" icon="mdi-format-header-1" />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-header-2" />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-header-3" />
-                    <v-divider vertical />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-bold" />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-italic" />
-                </FSRow>
-            </FSCard>
-        </div>
-    </div>`
-  })
-}
+    <div
+        style="display: flex; flex-direction: row; gap: 16px;"
+    >
+        <FSCard
+        v-bind="args"
+        variant="background"
+        >
+        <FSSpan>Variant : background</FSSpan>
+        </FSCard>
+        <FSCard
+        v-bind="args"
+        variant="standard"
+        >
+        <FSSpan>Variant : standard</FSSpan>
+        </FSCard>
+        <FSCard
+        v-bind="args"
+        variant="full"
+        >
+        <FSSpan>Variant : full</FSSpan>
+        </FSCard>
+        <FSCard
+        v-bind="args"
+        :color="[ColorEnum.Primary, ColorEnum.Error]"
+        variant="gradient"
+        >
+        <FSSpan>Variant : gradient</FSSpan>
+        </FSCard>
+    </div>
+    `
+  }),
+  args: {
+    padding: '16px',
+    color: ColorEnum.Primary
+  },
+};
+
+export const Clickables: Story = {
+  render: (args) => ({
+    components: {
+      FSCard,
+      FSSpan,
+      FSIcon
+    },
+    setup() {
+      return { args, ColorEnum };
+    },
+    inheritAttrs: false,
+    template: `
+    <div
+        style="display: flex; flex-direction: row; gap: 16px;"
+    >
+        <FSCard
+            v-bind="args"
+            href="https://dative-gpi.com"
+        >
+          <FSSpan>
+            Href
+          </FSSpan>
+        </FSCard>
+        <FSCard
+            v-bind="args"
+            :to="{ name: 'About' }"
+        >
+          <FSSpan>
+            Router Link
+          </FSSpan>
+        </FSCard>
+       <FSCard
+            v-bind="args" 
+            @click="() => console.log('Card clicked')"
+        >
+            <template #default="{ contentVariant }">
+                <FSIcon
+                    icon="mdi-check"
+                    :variant="contentVariant"
+                    color="error"
+                    size="16"
+                />
+                <FSSpan>
+                  Clickable event
+                </FSSpan>
+            </template>
+        </FSCard>
+        <FSCard
+          :clickable="true"
+          type="submit"
+          v-bind="args"
+        >
+            <FSIcon
+                icon="mdi-check"
+                size="16"
+            />
+            <FSSpan>
+              Clickable submit
+            </FSSpan>
+        </FSCard>
+    </div>
+    `
+  }),
+  args: {
+    padding: '16px',
+    color: ColorEnum.Primary,
+    variant: 'standard'
+  },
+};