From 8fd8b2a4618192689659770d96496b738640a008 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 23 Nov 2023 16:44:05 +0100
Subject: [PATCH 1/2] feat: Add red color for puik-card (needed for the
 tech-console)

---
 packages/components/card/src/card.ts | 1 +
 packages/theme/src/card.scss         | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
index 51dc83b8..10b43317 100644
--- a/packages/components/card/src/card.ts
+++ b/packages/components/card/src/card.ts
@@ -8,6 +8,7 @@ export const cardVariants = [
   'purple',
   'amber',
   'green',
+  'red',
   'default',
 ] as const
 
diff --git a/packages/theme/src/card.scss b/packages/theme/src/card.scss
index 01fdae3d..d47a71eb 100644
--- a/packages/theme/src/card.scss
+++ b/packages/theme/src/card.scss
@@ -19,4 +19,7 @@
   &--green {
     @apply bg-green-50 border-none;
   }
+  &--red {
+    @apply bg-red-50 border-none;
+  }
 }

From 09fd8cde467221c5f1fc33ddc079cd0b34b4c804 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 23 Nov 2023 16:48:58 +0100
Subject: [PATCH 2/2] fix: update card doc

---
 .../components/card/stories/card.stories.ts   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/components/card/stories/card.stories.ts b/packages/components/card/stories/card.stories.ts
index 4545c44a..d93d8ada 100644
--- a/packages/components/card/stories/card.stories.ts
+++ b/packages/components/card/stories/card.stories.ts
@@ -216,6 +216,33 @@ export const Green = {
   },
 }
 
+export const Red = {
+  render: Template,
+
+  args: {
+    variant: 'red',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-card variant="red">
+    Card content
+  </puik-card>
+
+  <!--HTML/CSS Snippet-->
+  <div class="puik-card puik-card--red">
+    Card content
+  </div>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const WithPictureTitleTextAndAction: StoryObj = {
   render: (args: Args) => ({
     components: {