Merge branch 'main' into EB-1111-data-test

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/components/tab-navigation/src/tab-navigation-title.ts

@@ -3,15 +3,15 @@ import type { ExtractPropTypes } from 'vue'
 import type TabNavigationTitle from './tab-navigation-title.vue'
 
 export const tabNavigationTitleProps = buildProps({
+  position: {
+    type: Number,
+    required: true,
+  },
   disabled: {
     type: Boolean,
     required: false,
     default: false,
   },
-  position: {
-    type: Number,
-    required: true,
-  },
 } as const)
 
 export type TabNavigationTitleProps = ExtractPropTypes<

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/accordion-group.scss

@@ -1,19 +1,15 @@
 .puik-accordion-group {
-  .puik-accordion {
-    @apply mb-4;
-  }
+  @apply flex flex-col gap-4 w-full;
 
   &--contained {
+    @apply gap-0;
+
     .puik-accordion {
-      @apply mb-0 border-t-0 border-b;
+      @apply border-t-0;
     }
 
     & > .puik-accordion:first-of-type {
       @apply border-t;
     }
-
-    & > .puik-accordion:last-of-type {
-      @apply border-t-0 border-b;
-    }
   }
 }

packages/theme/src/accordion.scss

@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-accordion {
-  @apply border border-primary-400 mb-4;
+  @apply border border-primary-400;
 
   &__header {
     @apply px-6 py-4 flex w-full items-center;

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

packages/theme/src/tab-navigation-group-titles.scss

@@ -1,3 +1,3 @@
 .puik-tab-navigation__group-titles {
-  @apply flex  min-h-[48px] overflow-x-auto;
+  @apply flex flex-col min-h-[48px] sm:flex-row sm:flex-wrap;
 }

packages/theme/src/tab-navigation-title.scss

@@ -1,29 +1,19 @@
 @use './common/typography.scss';
 
 .puik-tab-navigation__title {
-  @apply relative  min-h-full p-2 flex items-center cursor-pointer puik-body-default-bold;
-  flex: 0 1 135px;
-  gap: 8px;
-  white-space: nowrap;
-  border-bottom: 1px solid #dce1e3;
+  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold sm:w-[135px];
+
   &:focus:not(:hover) {
-    @apply bg-primary-400;
-    outline: none;
+    @apply bg-primary-400 outline-none;
   }
+
   &:hover {
     @apply bg-primary-300;
   }
+
   &--selected {
     &::before {
-      @apply bg-black;
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      border-radius: 4px 4px 0 0;
+      @apply bg-primary content-[''] block absolute bottom-0 left-0 w-full h-[3px] rounded-t-[4px];
     }
   }
   &--disabled {

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