From e2b85be69843ee456808d4a2ef849d4c0d94dd6a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 14 Nov 2023 09:51:01 +0100
Subject: [PATCH 1/5] fix: #241 - add min-content for alert container

---
 packages/theme/src/alert.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss
index 76c11090..dbed9c54 100644
--- a/packages/theme/src/alert.scss
+++ b/packages/theme/src/alert.scss
@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-alert {
-  @apply relative flex flex-row p-4 border text-primary-800 items-start;
+  @apply relative min-w-fit flex flex-row items-start p-4 border text-primary-800;
   &--success {
     @apply bg-green-50 border border-green;
     .puik-alert__icon {
@@ -30,7 +30,7 @@
     @apply border-0;
   }
   &__container {
-    @apply flex flex-col md:flex-row w-full;
+    @apply flex flex-col md:flex-row md:items-start w-full;
   }
   &__content {
     @apply flex flex-row flex-grow;
@@ -46,7 +46,7 @@
     @extend .puik-body-default;
   }
   &__button {
-    @apply text-sm px-4 py-3 mt-2 ml-9 md:m-0;
+    @apply text-sm px-4 py-3 mt-2 ml-9 md:m-0 h-auto;
   }
   &__icon {
     @apply mt-0.5 flex-shrink-0;

From e1e18de3a0d60864a20bc99adc061f6be9c1b14a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 14 Nov 2023 16:46:15 +0100
Subject: [PATCH 2/5] fix: #241 - min height for button component

---
 packages/tailwind-preset/theme.js | 5 +++++
 packages/theme/src/alert.scss     | 2 +-
 packages/theme/src/button.scss    | 6 +++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/tailwind-preset/theme.js b/packages/tailwind-preset/theme.js
index 0d0b162a..bd71ccb2 100644
--- a/packages/tailwind-preset/theme.js
+++ b/packages/tailwind-preset/theme.js
@@ -93,6 +93,11 @@ module.exports = {
     screens: {
       xs: '320px',
     },
+    minHeight: {
+      sm: '1.75rem',
+      md: '2.25rem',
+      lg: '3rem',
+    },
     opacity: {
       overlay: '0.8',
     },
diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss
index dbed9c54..2d865d51 100644
--- a/packages/theme/src/alert.scss
+++ b/packages/theme/src/alert.scss
@@ -46,7 +46,7 @@
     @extend .puik-body-default;
   }
   &__button {
-    @apply text-sm px-4 py-3 mt-2 ml-9 md:m-0 h-auto;
+    @apply mt-2 ml-9 md:m-0;
   }
   &__icon {
     @apply mt-0.5 flex-shrink-0;
diff --git a/packages/theme/src/button.scss b/packages/theme/src/button.scss
index f9922b2d..7adf1acd 100644
--- a/packages/theme/src/button.scss
+++ b/packages/theme/src/button.scss
@@ -6,16 +6,16 @@
 
   &--sm {
     @extend .puik-text-button-small;
-    @apply py-1 px-2 h-7;
+    @apply py-1 px-2 min-h-sm;
   }
 
   &--md {
-    @apply h-9;
+    @apply min-h-md;
   }
 
   &--lg {
     @extend .puik-text-button-large;
-    @apply py-3.5 px-4 gap-3 h-12;
+    @apply py-3.5 px-4 gap-3 min-h-lg;
   }
 
   &--fluid {

From d28c6b63241211b457322f7c9faf07df4526af35 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 13:42:22 +0100
Subject: [PATCH 3/5] feat: [button/alert] add button label wrap prop

---
 packages/components/alert/src/alert.ts        |  5 ++
 packages/components/alert/src/alert.vue       |  1 +
 .../components/alert/stories/alert.stories.ts | 73 +++++++++++++++++++
 packages/components/alert/test/alert.spec.ts  |  5 ++
 packages/components/button/src/button.ts      |  5 ++
 packages/components/button/src/button.vue     |  1 +
 .../button/stories/button.stories.ts          | 10 +++
 .../components/button/test/button.spec.ts     |  5 ++
 packages/theme/src/button.scss                |  4 +
 9 files changed, 109 insertions(+)

diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index f179699e..d86d1a7f 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -37,6 +37,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonWrapLabel: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   isClosable: {
     type: Boolean,
     required: false,
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 4992e0e4..cfcd3495 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -31,6 +31,7 @@
       <PuikButton
         v-if="buttonLabel"
         :variant="variant"
+        :wrap-label="buttonWrapLabel"
         class="puik-alert__button"
         :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
         @click="click"
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index c405d565..0f261fa6 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -40,6 +40,14 @@ export default {
     buttonLabel: {
       description: 'Label of the button',
     },
+    buttonWrapLabel: {
+      description: 'Set the carriage return of the button label',
+      table: {
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
     isClosable: {
       description: 'Display a close button',
     },
@@ -59,6 +67,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    buttonWrapLabel: true,
     isClosable: false,
   },
 } as Meta
@@ -125,6 +134,70 @@ export const Default = {
   },
 }
 
+export const buttonWrapLabelToFalse: StoryObj = {
+  render: () => ({
+    components: {
+      PuikAlert,
+    },
+    template: `
+      <div class="flex flex-col space-y-4">
+       <puik-alert title="Title" button-label="Button with a very long label" :button-wrap-Label="false">
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+       </puik-alert>
+      </div>
+    `,
+  }),
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-alert
+    title="Title"
+    button-label="No wrap button with a very long label"
+    :button-wrap-Label="false"
+    @click="click"
+  >
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+  </puik-alert>
+
+  <!--HTML/CSS Snippet-->
+<div class="puik-alert__container">
+  <div class="puik-alert__content">
+      <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
+      <div class="puik-alert__text">
+          <p class="puik-alert__title">Title</p>
+          <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
+      </div>
+  </div>
+  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+      Button with a very long label
+  </button>
+</div>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const Success: StoryObj = {
   render: () => ({
     components: {
diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts
index d2bdcb6f..e45df80e 100644
--- a/packages/components/alert/test/alert.spec.ts
+++ b/packages/components/alert/test/alert.spec.ts
@@ -40,6 +40,11 @@ describe('Alert tests', () => {
     expect(findAlert().classes()).toContain('puik-alert--warning')
   })
 
+  it('should set the button label wrap to false', () => {
+    factory({ buttonLabel: 'Button', buttonWrapLabel: false })
+    expect(findButton().classes()).toContain('puik-button--no-wrap')
+  })
+
   it('should display a button which emits the click event on click', () => {
     factory({ buttonLabel: 'Button' })
     expect(findButton().exists()).toBeTruthy()
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index a6885676..441abe9f 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -38,6 +38,11 @@ export const buttonProps = buildProps({
     required: false,
     default: false,
   },
+  wrapLabel: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   disabled: {
     type: Boolean,
     required: false,
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 5c095584..4f667329 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -8,6 +8,7 @@
       `puik-button--${size}`,
       { 'puik-button--disabled': disabled },
       { 'puik-button--fluid': fluid },
+      { 'puik-button--no-wrap': !wrapLabel },
     ]"
     :disabled="disabled"
     :data-test="dataTest"
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index a71e84a2..b815c931 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -44,6 +44,14 @@ export default {
         },
       },
     },
+    wrapLabel: {
+      description: 'Set the carriage return of the button label',
+      table: {
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
     disabled: {
       description: 'Set the button as disabled',
       table: {
@@ -81,6 +89,7 @@ export default {
     variant: 'primary',
     size: 'md',
     fluid: false,
+    wrapLabel: true,
     disabled: false,
     leftIcon: '',
     rightIcon: '',
@@ -117,6 +126,7 @@ export const Default = {
     :size="$sizes"
     :variant="$variants"
     :fluid="true|false"
+    :wrap-label="true|false"
     :disabled="true|false"
     :left-icon="leftIcon"
     :right-icon="rightIcon"
diff --git a/packages/components/button/test/button.spec.ts b/packages/components/button/test/button.spec.ts
index a209f85c..da319d3e 100644
--- a/packages/components/button/test/button.spec.ts
+++ b/packages/components/button/test/button.spec.ts
@@ -91,6 +91,11 @@ describe('Button tests', () => {
     expect(findButton().classes()).toContain('puik-button--fluid')
   })
 
+  it('should set the button label wrap to false', () => {
+    factory({ wrapLabel: false })
+    expect(findButton().classes()).toContain('puik-button--no-wrap')
+  })
+
   it('should be a router-link if to prop is defined', () => {
     factory({ to: '/test' })
     expect(findButton().element.tagName).toBe('ROUTER-LINK')
diff --git a/packages/theme/src/button.scss b/packages/theme/src/button.scss
index 7adf1acd..f567b69d 100644
--- a/packages/theme/src/button.scss
+++ b/packages/theme/src/button.scss
@@ -22,6 +22,10 @@
     @apply w-full;
   }
 
+  &--no-wrap {
+    @apply whitespace-nowrap;
+  }
+
   &:focus-visible {
     @apply outline-none ring ring-offset-2 ring-blue;
   }

From 912ad53b4d005a3deb3064d2d4d43ead0f402620 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 14:13:14 +0100
Subject: [PATCH 4/5] feat: [button/alert] - wrap button label set tofalse by
 default

---
 packages/components/alert/src/alert.ts        |  2 +-
 .../components/alert/stories/alert.stories.ts | 56 ++++++++++++++++---
 packages/components/button/src/button.ts      |  2 +-
 .../button/stories/button.stories.ts          |  2 +-
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index d86d1a7f..abe388d4 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -40,7 +40,7 @@ export const alertProps = buildProps({
   buttonWrapLabel: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   isClosable: {
     type: Boolean,
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index 0f261fa6..6df21f4b 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -44,7 +44,7 @@ export default {
       description: 'Set the carriage return of the button label',
       table: {
         defaultValue: {
-          summary: true,
+          summary: false,
         },
       },
     },
@@ -67,7 +67,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
-    buttonWrapLabel: true,
+    buttonWrapLabel: false,
     isClosable: false,
   },
 } as Meta
@@ -134,14 +134,25 @@ export const Default = {
   },
 }
 
-export const buttonWrapLabelToFalse: StoryObj = {
+export const buttonWrapLabel: StoryObj = {
   render: () => ({
     components: {
       PuikAlert,
     },
     template: `
       <div class="flex flex-col space-y-4">
-       <puik-alert title="Title" button-label="Button with a very long label" :button-wrap-Label="false">
+       <puik-alert title="buttonWrapLabel to true" button-label="Button with a very long label" button-wrap-Label>
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+       </puik-alert>
+       <puik-alert title="buttonWrapLabel to false (by default)" button-label="Button with a very long label">
         This an alert with a very long description.
         This an alert with a very long description.
         This an alert with a very long description.
@@ -162,9 +173,25 @@ export const buttonWrapLabelToFalse: StoryObj = {
         code: `
   <!--VueJS Snippet-->
   <puik-alert
-    title="Title"
-    button-label="No wrap button with a very long label"
-    :button-wrap-Label="false"
+    title="buttonWrapLabel to true"
+    button-label="Button with a very long label"
+    button-wrap-Label
+    @click="click"
+  >
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+  </puik-alert>
+
+  <puik-alert
+    title="buttonWrapLabel to false (by default)"
+    button-label="Button with a very long label"
     @click="click"
   >
     This an alert with a very long description.
@@ -183,7 +210,20 @@ export const buttonWrapLabelToFalse: StoryObj = {
   <div class="puik-alert__content">
       <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
       <div class="puik-alert__text">
-          <p class="puik-alert__title">Title</p>
+          <p class="puik-alert__title">buttonWrapLabel to true</p>
+          <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
+      </div>
+  </div>
+  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+      Button with a very long label
+  </button>
+</div>
+
+<div class="puik-alert__container">
+  <div class="puik-alert__content">
+      <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
+      <div class="puik-alert__text">
+          <p class="puik-alert__title">buttonWrapLabel to false (by default)</p>
           <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
       </div>
   </div>
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 441abe9f..f0158d3f 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -41,7 +41,7 @@ export const buttonProps = buildProps({
   wrapLabel: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   disabled: {
     type: Boolean,
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index b815c931..728cbcdb 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -48,7 +48,7 @@ export default {
       description: 'Set the carriage return of the button label',
       table: {
         defaultValue: {
-          summary: true,
+          summary: false,
         },
       },
     },

From df78e26cb1f08123d35b3b06d9103c002e5dff3d Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 14:16:16 +0100
Subject: [PATCH 5/5] docs: [alert] update storybook

---
 packages/components/alert/stories/alert.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index 6df21f4b..5abf29c6 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -214,7 +214,7 @@ export const buttonWrapLabel: StoryObj = {
           <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
       </div>
   </div>
-  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+  <button class="puik-button puik-button--success puik-button--md puik-alert__button">
       Button with a very long label
   </button>
 </div>