Feat/create divider component

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'

packages/components/divider/src/divider.ts

@@ -0,0 +1,31 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type Divider from './divider.vue'
+
+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,
+  },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+} as const)
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>
+
+export type DividerInstance = InstanceType<typeof Divider>

packages/components/divider/src/divider.vue

@@ -0,0 +1,22 @@
+<template>
+  <hr
+    v-if="props.orientation === PuikDividerOrientation.HORIZONTAL"
+    class="puik-divider puik-divider--horizontal"
+    :data-test="dataTest"
+  />
+  <div
+    v-if="props.orientation === PuikDividerOrientation.VERTICAL"
+    class="puik-divider puik-divider--vertical"
+    :data-test="dataTest"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { dividerProps, PuikDividerOrientation } from './divider'
+
+defineOptions({
+  name: 'PuikDivider',
+})
+
+const props = defineProps(dividerProps)
+</script>

packages/components/divider/stories/divider.stories.ts

@@ -0,0 +1,147 @@
+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 tests purpose',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+  },
+  args: {},
+} as Meta
+
+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: `
+<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: DefaultTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!-- VueJS Snippet -->
+<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',
+      },
+    },
+  },
+}

packages/components/divider/style/css.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-divider.css'

packages/components/divider/style/index.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/divider.scss'

packages/components/divider/test/divider.spec.ts

@@ -0,0 +1,34 @@
+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 findDivider = () => wrapper.find('.puik-divider')
+  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()
+  })
+
+  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 "test"', () => {
+    factory({ orientation: 'vertical', dataTest: 'test' })
+    expect(findDivider().attributes('data-test')).toBe('test')
+  })
+})

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'

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,

packages/theme/src/divider.scss

@@ -0,0 +1,6 @@
+.puik-divider--horizontal {
+  @apply text-primary-400;
+}
+.puik-divider--vertical {
+  @apply bg-primary-400 w-[1px] min-h-full;
+}

packages/theme/src/index.scss

@@ -42,3 +42,4 @@
 @use 'progress-stepper-step';
 @use 'chip';
 @use 'tag';
+@use 'divider';

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']