From 939a68b8263738fd24cf1188e8db08ab7ca8ba11 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 18 Oct 2023 17:55:30 +0200
Subject: [PATCH 01/11] feat: [divider] create component (wip)

---
 packages/components/divider/index.ts          |  8 +++++
 packages/components/divider/src/divider.ts    | 15 ++++++++
 packages/components/divider/src/divider.vue   | 12 +++++++
 .../divider/stories/divider.stories.ts        | 34 +++++++++++++++++++
 packages/components/divider/style/css.ts      |  2 ++
 packages/components/divider/style/index.ts    |  2 ++
 .../components/divider/test/divider.spec.ts   | 23 +++++++++++++
 packages/components/index.ts                  |  1 +
 packages/puik/component.ts                    |  2 ++
 packages/theme/src/divider.scss               |  3 ++
 packages/theme/src/index.scss                 |  1 +
 typings/global.d.ts                           |  1 +
 12 files changed, 104 insertions(+)
 create mode 100644 packages/components/divider/index.ts
 create mode 100644 packages/components/divider/src/divider.ts
 create mode 100644 packages/components/divider/src/divider.vue
 create mode 100644 packages/components/divider/stories/divider.stories.ts
 create mode 100644 packages/components/divider/style/css.ts
 create mode 100644 packages/components/divider/style/index.ts
 create mode 100644 packages/components/divider/test/divider.spec.ts
 create mode 100644 packages/theme/src/divider.scss

diff --git a/packages/components/divider/index.ts b/packages/components/divider/index.ts
new file mode 100644
index 00000000..30fa819e
--- /dev/null
+++ b/packages/components/divider/index.ts
@@ -0,0 +1,8 @@
+import { withInstall } from '@puik/utils'
+
+import Divider from './src/divider.vue'
+
+export const PuikDivider = withInstall(Divider)
+export default PuikDivider
+
+export * from './src/divider'
diff --git a/packages/components/divider/src/divider.ts b/packages/components/divider/src/divider.ts
new file mode 100644
index 00000000..97002bfe
--- /dev/null
+++ b/packages/components/divider/src/divider.ts
@@ -0,0 +1,15 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes } from 'vue'
+import type Divider from './divider.vue'
+
+export const dividerProps = buildProps({
+  id: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+} as const)
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>
+
+export type DividerInstance = InstanceType<typeof Divider>
diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
new file mode 100644
index 00000000..af834835
--- /dev/null
+++ b/packages/components/divider/src/divider.vue
@@ -0,0 +1,12 @@
+<template>
+  <hr class="puik-divider" />
+</template>
+
+<script setup lang="ts">
+import { dividerProps } from './divider'
+defineOptions({
+  name: 'PuikDivider',
+})
+
+const props = defineProps(dividerProps)
+</script>
diff --git a/packages/components/divider/stories/divider.stories.ts b/packages/components/divider/stories/divider.stories.ts
new file mode 100644
index 00000000..5c6e0c8f
--- /dev/null
+++ b/packages/components/divider/stories/divider.stories.ts
@@ -0,0 +1,34 @@
+import PuikDivider from './../src/divider.vue'
+import type { Meta, StoryFn, Args } from '@storybook/vue3'
+
+export default {
+  title: 'Components/Divider',
+  component: PuikDivider,
+} as Meta
+
+const Template: StoryFn = (args: Args) => ({
+  components: {
+    PuikDivider,
+  },
+  setup() {
+    return { args }
+  },
+  template: `<puik-divider/>`,
+})
+
+export const Default = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <!--VueJS Snippet-->
+
+        <!--HTML/CSS Snippet-->
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
diff --git a/packages/components/divider/style/css.ts b/packages/components/divider/style/css.ts
new file mode 100644
index 00000000..d2c5dbbc
--- /dev/null
+++ b/packages/components/divider/style/css.ts
@@ -0,0 +1,2 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-divider.css'
diff --git a/packages/components/divider/style/index.ts b/packages/components/divider/style/index.ts
new file mode 100644
index 00000000..891b06e6
--- /dev/null
+++ b/packages/components/divider/style/index.ts
@@ -0,0 +1,2 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/divider.scss'
diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
new file mode 100644
index 00000000..823dcfc5
--- /dev/null
+++ b/packages/components/divider/test/divider.spec.ts
@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikDivider from '../src/divider.vue'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+
+describe('Divider tests', () => {
+  let wrapper: VueWrapper<any>
+  const factory = (
+    propsData: Record<string, any> = {},
+    options: MountingOptions<any> = {}
+  ) => {
+    wrapper = mount(PuikDivider, {
+      props: {
+        ...propsData,
+      },
+      ...options,
+    })
+  }
+  it('should be a vue instance', () => {
+    factory()
+    expect(wrapper).toBeTruthy()
+  })
+})
diff --git a/packages/components/index.ts b/packages/components/index.ts
index d0a24516..54dbcd54 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -29,3 +29,4 @@ export * from './tab-navigation'
 export * from './progress-stepper'
 export * from './chip'
 export * from './tag'
+export * from './divider'
diff --git a/packages/puik/component.ts b/packages/puik/component.ts
index 4bc52ab5..c79653ca 100644
--- a/packages/puik/component.ts
+++ b/packages/puik/component.ts
@@ -1,3 +1,4 @@
+import { PuikDivider } from '@puik/components/divider'
 import { PuikTag } from '@puik/components/tag'
 import { PuikChip } from '@puik/components/chip'
 import {
@@ -50,6 +51,7 @@ import type { Plugin } from 'vue'
 
 // prettier-ignore
 export default [
+  PuikDivider,
   PuikTag,
   PuikChip,
   PuikTabNavigationGroupPanels,
diff --git a/packages/theme/src/divider.scss b/packages/theme/src/divider.scss
new file mode 100644
index 00000000..2f0915d7
--- /dev/null
+++ b/packages/theme/src/divider.scss
@@ -0,0 +1,3 @@
+.puik-divider {
+  @apply text-primary-400;
+}
diff --git a/packages/theme/src/index.scss b/packages/theme/src/index.scss
index d888a495..35ddfef1 100644
--- a/packages/theme/src/index.scss
+++ b/packages/theme/src/index.scss
@@ -42,3 +42,4 @@
 @use 'progress-stepper-step';
 @use 'chip';
 @use 'tag';
+@use 'divider';
diff --git a/typings/global.d.ts b/typings/global.d.ts
index df474081..e188f5ce 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -1,6 +1,7 @@
 // GlobalComponents for Volar
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    PuikDivider: typeof import('@prestashopcorp/puik')['PuikDivider']
     PuikTag: typeof import('@prestashopcorp/puik')['PuikTag']
     PuikTabNavigationGroupPanels: typeof import('@prestashopcorp/puik')['PuikTabNavigationGroupPanels']
     PuikTabNavigationTitle: typeof import('@prestashopcorp/puik')['PuikTabNavigationTitle']

From 10c2f3a23f450a17bab28d05a7abaaca2e889e84 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 19 Oct 2023 09:27:24 +0200
Subject: [PATCH 02/11] fix: #226 - [divider] - add tests and stories

---
 packages/components/divider/src/divider.vue   |  2 +-
 .../divider/stories/divider.stories.ts        | 28 ++++++++++++++++---
 .../components/divider/test/divider.spec.ts   |  6 ++++
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index af834835..a24e87e0 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <hr class="puik-divider" />
+  <hr :id="id" class="puik-divider" />
 </template>
 
 <script setup lang="ts">
diff --git a/packages/components/divider/stories/divider.stories.ts b/packages/components/divider/stories/divider.stories.ts
index 5c6e0c8f..c6cca67f 100644
--- a/packages/components/divider/stories/divider.stories.ts
+++ b/packages/components/divider/stories/divider.stories.ts
@@ -4,6 +4,24 @@ import type { Meta, StoryFn, Args } from '@storybook/vue3'
 export default {
   title: 'Components/Divider',
   component: PuikDivider,
+  argTypes: {
+    id: {
+      description:
+        "Prop which will correspond to the component's html id attribute. NB: must not start with a number",
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+  },
+  args: {
+    id: 'puik-chip-id',
+  },
 } as Meta
 
 const Template: StoryFn = (args: Args) => ({
@@ -13,7 +31,7 @@ const Template: StoryFn = (args: Args) => ({
   setup() {
     return { args }
   },
-  template: `<puik-divider/>`,
+  template: `<puik-divider v-bind="args"/>`,
 })
 
 export const Default = {
@@ -23,10 +41,12 @@ export const Default = {
     docs: {
       source: {
         code: `
-        <!--VueJS Snippet-->
+<!--VueJS Snippet-->
+<puik-divider id="puik-divider-id"/>
 
-        <!--HTML/CSS Snippet-->
-        `,
+<!--HTML/CSS Snippet-->
+<hr id="puik-divider-id" class="puik-divider">
+`,
         language: 'html',
       },
     },
diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
index 823dcfc5..8e863595 100644
--- a/packages/components/divider/test/divider.spec.ts
+++ b/packages/components/divider/test/divider.spec.ts
@@ -5,6 +5,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Divider tests', () => {
   let wrapper: VueWrapper<any>
+  const findDivider = () => wrapper.find('.puik-divider')
   const factory = (
     propsData: Record<string, any> = {},
     options: MountingOptions<any> = {}
@@ -20,4 +21,9 @@ describe('Divider tests', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
+
+  it('as id prop value is "puik-chip-example", id html attribute of puik-chip should be "puik-chip-example"', () => {
+    factory({ id: 'puik-divider-id' })
+    expect(findDivider().attributes().id).toBe('puik-divider-id')
+  })
 })

From 90198bfc9d67cb5434a79e1e5daf503c4f58719e Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 23 Oct 2023 15:35:25 +0200
Subject: [PATCH 03/11] feat: [divider] - remove id prop

---
 packages/components/divider/src/divider.ts       | 8 +-------
 packages/components/divider/src/divider.vue      | 4 +---
 packages/components/divider/test/divider.spec.ts | 5 -----
 3 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/components/divider/src/divider.ts b/packages/components/divider/src/divider.ts
index 97002bfe..58f98fae 100644
--- a/packages/components/divider/src/divider.ts
+++ b/packages/components/divider/src/divider.ts
@@ -2,13 +2,7 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes } from 'vue'
 import type Divider from './divider.vue'
 
-export const dividerProps = buildProps({
-  id: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-} as const)
+export const dividerProps = buildProps({} as const)
 
 export type DividerProps = ExtractPropTypes<typeof dividerProps>
 
diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index a24e87e0..19e8d6f9 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <hr :id="id" class="puik-divider" />
+  <hr class="puik-divider" />
 </template>
 
 <script setup lang="ts">
@@ -7,6 +7,4 @@ import { dividerProps } from './divider'
 defineOptions({
   name: 'PuikDivider',
 })
-
-const props = defineProps(dividerProps)
 </script>
diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
index 8e863595..657d9f64 100644
--- a/packages/components/divider/test/divider.spec.ts
+++ b/packages/components/divider/test/divider.spec.ts
@@ -21,9 +21,4 @@ describe('Divider tests', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
-
-  it('as id prop value is "puik-chip-example", id html attribute of puik-chip should be "puik-chip-example"', () => {
-    factory({ id: 'puik-divider-id' })
-    expect(findDivider().attributes().id).toBe('puik-divider-id')
-  })
 })

From 0a5e04236f605c516097cbcce282d81bcbc7692e Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 24 Oct 2023 17:25:05 +0200
Subject: [PATCH 04/11] docs: [divider storybook] - remove id prop

---
 .../divider/stories/divider.stories.ts        | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/components/divider/stories/divider.stories.ts b/packages/components/divider/stories/divider.stories.ts
index c6cca67f..1b59477e 100644
--- a/packages/components/divider/stories/divider.stories.ts
+++ b/packages/components/divider/stories/divider.stories.ts
@@ -4,24 +4,7 @@ import type { Meta, StoryFn, Args } from '@storybook/vue3'
 export default {
   title: 'Components/Divider',
   component: PuikDivider,
-  argTypes: {
-    id: {
-      description:
-        "Prop which will correspond to the component's html id attribute. NB: must not start with a number",
-      control: 'text',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: 'undefined',
-        },
-      },
-    },
-  },
-  args: {
-    id: 'puik-chip-id',
-  },
+  args: {},
 } as Meta
 
 const Template: StoryFn = (args: Args) => ({
@@ -31,7 +14,7 @@ const Template: StoryFn = (args: Args) => ({
   setup() {
     return { args }
   },
-  template: `<puik-divider v-bind="args"/>`,
+  template: `<puik-divider />`,
 })
 
 export const Default = {
@@ -42,10 +25,10 @@ export const Default = {
       source: {
         code: `
 <!--VueJS Snippet-->
-<puik-divider id="puik-divider-id"/>
+<puik-divider />
 
 <!--HTML/CSS Snippet-->
-<hr id="puik-divider-id" class="puik-divider">
+<hr class="puik-divider">
 `,
         language: 'html',
       },

From 0a50e2bdd243f0ee64524c0315727a44adea78cc Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 2 Nov 2023 15:01:57 +0100
Subject: [PATCH 05/11] feat: [divider] - add orientation prop

---
 packages/components/divider/src/divider.ts    | 21 +++++++++++++++++--
 packages/components/divider/src/divider.vue   | 14 +++++++++++--
 .../components/divider/test/divider.spec.ts   |  4 ++++
 packages/theme/src/divider.scss               |  5 ++++-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/components/divider/src/divider.ts b/packages/components/divider/src/divider.ts
index 58f98fae..6772d62e 100644
--- a/packages/components/divider/src/divider.ts
+++ b/packages/components/divider/src/divider.ts
@@ -1,8 +1,25 @@
 import { buildProps } from '@puik/utils'
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type Divider from './divider.vue'
 
-export const dividerProps = buildProps({} as const)
+export enum PuikDividerOrientation {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+export const dividerOrientations = ['horizontal', 'vertical'] as const
+export type PuikDividerOrientationString = (typeof dividerOrientations)[number]
+
+export const dividerProps = buildProps({
+  orientation: {
+    type: [
+      String as PropType<PuikDividerOrientation>,
+      String as PropType<PuikDividerOrientationString>,
+    ],
+    required: false,
+    default: PuikDividerOrientation.HORIZONTAL,
+  },
+} as const)
 
 export type DividerProps = ExtractPropTypes<typeof dividerProps>
 
diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index 19e8d6f9..95debdc5 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -1,10 +1,20 @@
 <template>
-  <hr class="puik-divider" />
+  <hr
+    v-if="props.orientation === PuikDividerOrientation.HORIZONTAL"
+    class="puik-divider puik-divider--horizontal"
+  />
+  <div
+    v-if="props.orientation === PuikDividerOrientation.VERTICAL"
+    class="puik-divider puik-divider--vertical"
+  ></div>
 </template>
 
 <script setup lang="ts">
-import { dividerProps } from './divider'
+import { dividerProps, PuikDividerOrientation } from './divider'
+
 defineOptions({
   name: 'PuikDivider',
 })
+
+const props = defineProps(dividerProps)
 </script>
diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
index 657d9f64..0e95b0c3 100644
--- a/packages/components/divider/test/divider.spec.ts
+++ b/packages/components/divider/test/divider.spec.ts
@@ -21,4 +21,8 @@ describe('Divider tests', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
+  it('should be a vertical divider', () => {
+    factory({ orientation: 'vertical' })
+    expect(findDivider().classes()).toContain('puik-divider--vertical')
+  })
 })
diff --git a/packages/theme/src/divider.scss b/packages/theme/src/divider.scss
index 2f0915d7..b1ac4d3e 100644
--- a/packages/theme/src/divider.scss
+++ b/packages/theme/src/divider.scss
@@ -1,3 +1,6 @@
-.puik-divider {
+.puik-divider--horizontal {
   @apply text-primary-400;
 }
+.puik-divider--vertical {
+  @apply bg-primary-400 w-[1px] h-full;
+}

From b5acdc9124cce9cb6aaa88e6a494f6dcdb3dcb72 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 2 Nov 2023 15:21:19 +0100
Subject: [PATCH 06/11] feat: [divider] - add data-test attribute

---
 packages/components/divider/src/divider.ts       | 5 +++++
 packages/components/divider/src/divider.vue      | 2 ++
 packages/components/divider/test/divider.spec.ts | 6 ++++++
 3 files changed, 13 insertions(+)

diff --git a/packages/components/divider/src/divider.ts b/packages/components/divider/src/divider.ts
index 6772d62e..967a1a8b 100644
--- a/packages/components/divider/src/divider.ts
+++ b/packages/components/divider/src/divider.ts
@@ -19,6 +19,11 @@ export const dividerProps = buildProps({
     required: false,
     default: PuikDividerOrientation.HORIZONTAL,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type DividerProps = ExtractPropTypes<typeof dividerProps>
diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index 95debdc5..d719f5be 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -2,10 +2,12 @@
   <hr
     v-if="props.orientation === PuikDividerOrientation.HORIZONTAL"
     class="puik-divider puik-divider--horizontal"
+    :data-test="dataTest != undefined ? `horizontal-${dataTest}` : ''"
   />
   <div
     v-if="props.orientation === PuikDividerOrientation.VERTICAL"
     class="puik-divider puik-divider--vertical"
+    :data-test="dataTest != undefined ? `vertical-${dataTest}` : ''"
   ></div>
 </template>
 
diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
index 0e95b0c3..2be05992 100644
--- a/packages/components/divider/test/divider.spec.ts
+++ b/packages/components/divider/test/divider.spec.ts
@@ -21,8 +21,14 @@ describe('Divider tests', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
+
   it('should be a vertical divider', () => {
     factory({ orientation: 'vertical' })
     expect(findDivider().classes()).toContain('puik-divider--vertical')
   })
+
+  it('the value of the data-test attribute should be "vertical-test"', () => {
+    factory({ orientation: 'vertical', dataTest: 'test' })
+    expect(findDivider().attributes('data-test')).toBe('vertical-test')
+  })
 })

From defeba6e3b052541c2f6a2eca63cf08edbba2631 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 2 Nov 2023 16:16:54 +0100
Subject: [PATCH 07/11] feat: [divider] - update storybook stories

---
 .../divider/stories/divider.stories.ts        | 122 +++++++++++++++++-
 packages/theme/src/divider.scss               |   2 +-
 2 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/packages/components/divider/stories/divider.stories.ts b/packages/components/divider/stories/divider.stories.ts
index 1b59477e..8d6ac944 100644
--- a/packages/components/divider/stories/divider.stories.ts
+++ b/packages/components/divider/stories/divider.stories.ts
@@ -1,34 +1,144 @@
+import { dividerOrientations } from '../src/divider'
 import PuikDivider from './../src/divider.vue'
 import type { Meta, StoryFn, Args } from '@storybook/vue3'
 
+const dividerOrientationsSummary = dividerOrientations.join('|')
+
 export default {
   title: 'Components/Divider',
   component: PuikDivider,
+  argTypes: {
+    orientation: {
+      description:
+        'define the horizontal or vertical orientation of the divider component',
+      control: 'select',
+      options: dividerOrientations,
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'horizontal',
+        },
+      },
+    },
+    dataTest: {
+      description: 'set data-test attribute for e2e test purpose',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+  },
   args: {},
 } as Meta
 
-const Template: StoryFn = (args: Args) => ({
+const DefaultTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikDivider,
+  },
+  setup() {
+    return { args }
+  },
+  template: `<puik-divider v-bind="args"/>`,
+})
+
+const OrientationTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikDivider,
+  },
+  setup() {
+    return { args }
+  },
+  template: `
+<div style="display: flex; flex-direction: column; gap: 8px;">
+  <puik-divider orientation="horizontal"/>
+  <div style="min-height: 96px; display: flex">
+    <puik-divider orientation="vertical"/>
+  </div>
+</div>
+  `,
+})
+
+const DataTestTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikDivider,
   },
   setup() {
     return { args }
   },
-  template: `<puik-divider />`,
+  template: `
+<div style="display: flex; flex-direction: column; gap: 8px;">
+  <puik-divider orientation="horizontal" dataTest="test"/>
+  <div style="min-height: 96px; display: flex">
+    <puik-divider orientation="vertical" dataTest="test"/>
+  </div>
+</div>
+  `,
 })
 
 export const Default = {
-  render: Template,
+  render: DefaultTemplate,
   args: {},
   parameters: {
     docs: {
       source: {
         code: `
-<!--VueJS Snippet-->
+<!-- VueJS Snippet -->
 <puik-divider />
 
-<!--HTML/CSS Snippet-->
-<hr class="puik-divider">
+<!-- HTML/CSS Snippet -->
+<hr class="puik-divider puik-divider--horizontal">
+`,
+        language: 'html',
+      },
+    },
+  },
+}
+
+export const Orientation = {
+  render: OrientationTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!-- VueJS Snippet -->
+<!-- $orientations: ${dividerOrientationsSummary} -->
+<puik-divider orientation="{$size}"/>
+
+<!-- HTML/CSS Snippet -->
+<!-- $size = 'horizontal' -->
+<hr class="puik-divider puik-divider--horizontal">
+<!-- $size = 'vertical' -->
+<div class="puik-divider puik-divider--vertical"></div>
+`,
+        language: 'html',
+      },
+    },
+  },
+}
+
+export const DataTest = {
+  render: DataTestTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!-- VueJS Snippet -->
+<puik-divider orientation="{$size}" data-test="{$test}"/>
+
+<!-- HTML/CSS Snippet -->
+<!-- $size = 'horizontal' -->
+<hr class="puik-divider puik-divider--horizontal" data-test="horizontal-{$test}">
+<!-- $size = 'vertical' -->
+<div class="puik-divider puik-divider--vertical" data-test="vertical-{$test}"></div>
 `,
         language: 'html',
       },
diff --git a/packages/theme/src/divider.scss b/packages/theme/src/divider.scss
index b1ac4d3e..26c0fa47 100644
--- a/packages/theme/src/divider.scss
+++ b/packages/theme/src/divider.scss
@@ -2,5 +2,5 @@
   @apply text-primary-400;
 }
 .puik-divider--vertical {
-  @apply bg-primary-400 w-[1px] h-full;
+  @apply bg-primary-400 w-[1px] min-h-full;
 }

From 2823a8b2a270eae6e27229791d7c2344b2e79d98 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 2 Nov 2023 16:50:37 +0100
Subject: [PATCH 08/11] feat: [divider] - refacto condition for display
 data-test attribute

---
 packages/components/divider/src/divider.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index d719f5be..34de9b69 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -2,12 +2,12 @@
   <hr
     v-if="props.orientation === PuikDividerOrientation.HORIZONTAL"
     class="puik-divider puik-divider--horizontal"
-    :data-test="dataTest != undefined ? `horizontal-${dataTest}` : ''"
+    :data-test="dataTest ?? undefined"
   />
   <div
     v-if="props.orientation === PuikDividerOrientation.VERTICAL"
     class="puik-divider puik-divider--vertical"
-    :data-test="dataTest != undefined ? `vertical-${dataTest}` : ''"
+    :data-test="dataTest ?? undefined"
   ></div>
 </template>
 

From 261c85f4d58126425ef85fd3ed087d902df61316 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 2 Nov 2023 17:00:40 +0100
Subject: [PATCH 09/11] feat: [divider] - fix tests

---
 packages/components/divider/test/divider.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
index 2be05992..aa7630c8 100644
--- a/packages/components/divider/test/divider.spec.ts
+++ b/packages/components/divider/test/divider.spec.ts
@@ -27,8 +27,8 @@ describe('Divider tests', () => {
     expect(findDivider().classes()).toContain('puik-divider--vertical')
   })
 
-  it('the value of the data-test attribute should be "vertical-test"', () => {
+  it('the value of the data-test attribute should be "test"', () => {
     factory({ orientation: 'vertical', dataTest: 'test' })
-    expect(findDivider().attributes('data-test')).toBe('vertical-test')
+    expect(findDivider().attributes('data-test')).toBe('test')
   })
 })

From 29ff53f89e5c5192a9b2cf0a1d5ac508cb29fb6c Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 3 Nov 2023 09:39:23 +0100
Subject: [PATCH 10/11] docs: [divider - storybook] - fix typo

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

diff --git a/packages/components/divider/stories/divider.stories.ts b/packages/components/divider/stories/divider.stories.ts
index 8d6ac944..ea8a2344 100644
--- a/packages/components/divider/stories/divider.stories.ts
+++ b/packages/components/divider/stories/divider.stories.ts
@@ -23,7 +23,7 @@ export default {
       },
     },
     dataTest: {
-      description: 'set data-test attribute for e2e test purpose',
+      description: 'set data-test attribute for e2e tests purpose',
       control: 'text',
       table: {
         type: {

From dde6fe65fc11cb65a8330de6dd4fb36440b21a4e Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 3 Nov 2023 11:37:22 +0100
Subject: [PATCH 11/11] feat: [divider] - remove useless condition for
 data-test

---
 packages/components/divider/src/divider.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index 34de9b69..420c711d 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -2,12 +2,12 @@
   <hr
     v-if="props.orientation === PuikDividerOrientation.HORIZONTAL"
     class="puik-divider puik-divider--horizontal"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
   />
   <div
     v-if="props.orientation === PuikDividerOrientation.VERTICAL"
     class="puik-divider puik-divider--vertical"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
   ></div>
 </template>