Merge branch 'main' into feat/update-storybook

.github/workflows/ci.yml

@@ -45,3 +45,6 @@ jobs:
 
       - name: Run tests 🧪
         run: pnpm test
+
+      - name: Run coverage 📈
+        run: pnpm coverage

CONTRIBUTING.md

@@ -101,6 +101,14 @@ Example:
 $ pnpm test
 ```
 
+This project uses [v8](https://v8.dev/blog/javascript-code-coverage) as test coverage provider. Run the following command to check the current coverage. Min coverage rate is at 60%
+
+Example:
+
+```sh
+$ pnpm coverage
+```
+
 ### Storybook
 
 If you are adding a new feature, refactoring or changing the behavior of a component

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "cz": "git-cz",
     "test": "vitest --no-threads",
+    "coverage": "vitest run --coverage",
     "gen:version": "tsx scripts/gen-version.ts",
     "update:version": "tsx scripts/update-version.ts",
     "clean": "pnpm clean:dist && pnpm -r --parallel clean",
@@ -79,6 +80,7 @@
     "@typescript-eslint/eslint-plugin": "5.58.0",
     "@typescript-eslint/parser": "5.58.0",
     "@vitejs/plugin-vue": "^4.1.0",
+    "@vitest/coverage-v8": "^0.32.4",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
     "chalk": "^5.2.0",
@@ -105,7 +107,7 @@
     "type-fest": "^2.19.0",
     "typescript": "^5.0.4",
     "unplugin-vue-define-options": "^1.3.3",
-    "vitest": "^0.30.1",
+    "vitest": "^0.32.4",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.2.0"

packages/components/accordion/test/accordion-group.spec.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import PuikAccordionGroup from '../src/accordion-group.vue'
@@ -17,8 +18,11 @@ const factory = (template: string, options: MountingOptions<any> = {}) => {
   })
 }
 
+const rootClass = 'puik-accordion'
+const expandedClass = 'puik-accordion--expanded'
+
 const getAccordionGroup = () => wrapper.find('.puik-accordion-group')
-const getAccordions = () => wrapper.findAll('.puik-accordion')
+const getAccordions = () => wrapper.findAll(`.${rootClass}`)
 
 describe('AccordionGroup collapse/expand tests', () => {
   it('should be a vue instance', () => {
@@ -50,7 +54,7 @@ describe('AccordionGroup collapse/expand tests', () => {
     factory(template)
 
     const accordion = getAccordion(wrapper)
-    expect(accordion.classes()).toContain('puik-accordion--expanded')
+    expect(accordion.classes()).toContain(expandedClass)
   })
 
   it('should accordions title have aria-expanded', () => {
@@ -113,4 +117,65 @@ describe('AccordionGroup props tests', () => {
     const group = getAccordionGroup()
     expect(group.classes()).toContain('puik-accordion-group--contained')
   })
+  it('should change expanded accordion on v-model change', async () => {
+    const template = `
+      <puik-accordion-group v-model="expandedAccordions">
+        <puik-accordion name="accordion-1" title="title 1">
+          Content 1
+        </puik-accordion>
+        <puik-accordion name="accordion-2" title="title 2">
+          Content 2
+        </puik-accordion>
+        <puik-accordion name="accordion-3" title="title 3">
+          Content 3
+        </puik-accordion>
+      </puik-accordion-group>
+    `
+
+    factory(template, {
+      data() {
+        return { expandedAccordions: 'accordion-1' }
+      },
+    })
+
+    wrapper.setData({ expandedAccordions: 'accordion-2' })
+    await nextTick()
+
+    const accordions = getAccordions()
+    expect(accordions[1].classes()).toEqual([rootClass, expandedClass])
+    expect(accordions[2].classes()).toEqual([rootClass])
+
+    wrapper.setData({ expandedAccordions: ['accordion-3'] })
+    await nextTick()
+    expect(accordions[1].classes()).toEqual([rootClass])
+    expect(accordions[2].classes()).toEqual([rootClass, expandedClass])
+  })
+  it('should change expanded accordion on click on multiple mode', async () => {
+    const template = `
+      <puik-accordion-group multiple>
+        <puik-accordion name="accordion-1" title="title 1">
+          Content 1
+        </puik-accordion>
+        <puik-accordion name="accordion-2" title="title 2">
+          Content 2
+        </puik-accordion>
+        <puik-accordion name="accordion-3" title="title 3">
+          Content 3
+        </puik-accordion>
+      </puik-accordion-group>
+    `
+
+    factory(template)
+
+    const accordions = getAccordions()
+    const accordionButtons = wrapper.findAll('.puik-accordion__header')
+
+    accordionButtons[0].trigger('click')
+    accordionButtons[1].trigger('click')
+    await nextTick()
+
+    expect(accordions[0].classes()).toEqual([rootClass, expandedClass])
+    expect(accordions[1].classes()).toEqual([rootClass, expandedClass])
+    expect(accordions[2].classes()).toEqual([rootClass])
+  })
 })

packages/components/accordion/test/accordion.spec.ts

@@ -27,6 +27,8 @@ export const getAccordionSubTitle = (component) =>
   component.find('.puik-accordion__header__content__sub-title')
 export const getAccordionExpandIcon = (component) =>
   component.find('.puik-accordion__header__expand__icon')
+export const getAccordionIcon = (component) =>
+  component.find('.puik-accordion__header__icon')
 
 describe('Accordion tests', () => {
   it('should be a vue instance', () => {
@@ -136,4 +138,18 @@ describe('Accordion tests', () => {
     expect(accordion.classes()).toContain('puik-accordion--disabled')
     expect(getAccordionHeader(accordion).attributes('disabled')).toBeDefined()
   })
+
+  it('should have icon', () => {
+    const icon = 'home'
+    const template = `
+      <puik-accordion-group>
+        <puik-accordion name="accordion-1" icon="${icon}">
+          Content
+        </puik-accordion>
+      </puik-accordion-group>
+    `
+    factory(template)
+
+    expect(getAccordionIcon(wrapper).text()).toBe(icon)
+  })
 })

packages/components/breadcrumb/test/breadcrumb.spec.ts

@@ -48,7 +48,7 @@ describe('Breadcrumb tests', () => {
     expect(wrapper).toBeTruthy()
   })
   it('should not display without items', () => {
-    factory({ items: [] })
+    factory()
     expect(wrapper.element.tagName).toBeFalsy()
   })
   it('should first item be A with href', () => {

packages/components/menu/src/menu.vue

@@ -1,11 +1,12 @@
 <template>
   <Popover
+    v-slot="{ open }"
     class="puik-menu"
     :class="[`puik-menu--position-${position}`, `puik-menu--align-${align}`]"
     as="div"
   >
     <PopoverButton class="puik-menu__trigger" as="template">
-      <slot name="trigger"></slot>
+      <slot name="trigger" :open="open"></slot>
     </PopoverButton>
 
     <transition
@@ -21,7 +22,7 @@
         class="puik-menu__content"
         :style="{ maxHeight, width }"
       >
-        <slot :close="close"></slot>
+        <slot :close="close" :open="open"></slot>
       </PopoverPanel>
     </transition>
   </Popover>

packages/components/menu/stories/menu.stories.ts

@@ -61,10 +61,31 @@ export default {
     trigger: {
       control: 'none',
       description: 'Trigger used to show or hide menu',
+      table: {
+        type: {
+          summary: 'SlotProps',
+          detail: `
+  {
+    open: boolean
+  }
+          `,
+        },
+      },
     },
     default: {
       control: 'none',
       description: 'Menu content',
+      table: {
+        type: {
+          summary: 'SlotProps',
+          detail: `
+  {
+    open: boolean,
+    close: () => void
+  }
+            `,
+        },
+      },
     },
   },
   args: {

packages/theme/src/common/typography.scss

@@ -93,13 +93,13 @@
 // Buttons
 
 .puik-text-button-default {
-  @apply font-primary font-semibold text-sm leading-[1.125rem];
+  @apply font-primary font-medium text-sm leading-[1.125rem];
 }
 
 .puik-text-button-small {
-  @apply font-primary text-xs leading-4 font-semibold;
+  @apply font-primary text-xs leading-4 font-medium;
 }
 
 .puik-text-button-large {
-  @apply font-primary text-base leading-5 font-semibold;
+  @apply font-primary text-base leading-5 font-medium;
 }

packages/theme/src/menu.scss

@@ -12,7 +12,8 @@
       flex
       flex-col
       gap-0.5
-      overflow-y-auto;
+      overflow-y-auto
+      z-[1];
   }
 
   &--invisible {