From 9cd3db280852dba3939181b878717de8f8d51720 Mon Sep 17 00:00:00 2001
From: nerim <nerimartinez@gmail.com>
Date: Thu, 29 Feb 2024 17:21:45 +0100
Subject: [PATCH] Add action slot to card component

---
 components/src/stories/Card.stories.js | 10 ++++++-
 components/src/widgets/card/widget.vue | 36 +++++++++++++++++---------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/components/src/stories/Card.stories.js b/components/src/stories/Card.stories.js
index 01b139c0..97ee70e0 100644
--- a/components/src/stories/Card.stories.js
+++ b/components/src/stories/Card.stories.js
@@ -16,7 +16,15 @@ export const Component = {
     setup() {
       return { args };
     },
-    template: '<ui-card v-bind="args">{{ args.content }}</ui-card>',
+    template: `
+    <ui-card v-bind="args" style="width: 400px">
+      <div slot="default">
+        {{ args.content }}
+      </div>
+      <div slot="actions">
+        <button>Action!</button>
+      </div>
+    </ui-card>`,
   }),
 
   args: {
diff --git a/components/src/widgets/card/widget.vue b/components/src/widgets/card/widget.vue
index ca88da37..a85fc2d4 100644
--- a/components/src/widgets/card/widget.vue
+++ b/components/src/widgets/card/widget.vue
@@ -1,18 +1,23 @@
 <template>
   <div class="c-card">
     <div class="c-card__header">
-      <p
-        v-if="title"
-        class="c-card__title"
-      >
-        {{ title }}
-      </p>
-      <p
-        v-if="subtitle"
-        class="c-card__subtitle"
-      >
-        {{ subtitle }}
-      </p>
+      <div class="c-card__title-container">
+        <p
+          v-if="title"
+          class="c-card__title"
+        >
+          {{ title }}
+        </p>
+        <p
+          v-if="subtitle"
+          class="c-card__subtitle"
+        >
+          {{ subtitle }}
+        </p>
+      </div>
+      <div class="c-card__actions">
+        <slot name="actions"/>
+      </div>
     </div>
 
     <div class="c-card__content">
@@ -51,7 +56,11 @@ export default {
   color: inherit;
 
   &__header{
+    display: flex;
     margin-bottom: 26px;
+    align-items: start;
+    flex-grow: 1;
+    justify-content: space-between;
   }
 
   &__title {
@@ -67,5 +76,8 @@ export default {
     margin: 0;
   }
 
+  &__title-container {
+    display: inline-block !important;
+  }
 }
 </style>