@mozaic-ds/vue 2.11.0 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -21,7 +21,7 @@
     "lint": "eslint . --fix",
     "test:unit": "vitest",
     "format": "prettier --write src/",
-    "build": "vite build",
+    "build": "vue-tsc -b tsconfig.app.json && vite build",
     "readme": "node generate-readmes.js ",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "npm run build-storybook",
@@ -41,7 +41,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.4.0",
+    "@mozaic-ds/styles": "^2.7.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -50,7 +50,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@mozaic-ds/css-dev-tools": "1.75.0",
-    "@mozaic-ds/icons-vue": "^1.0.0",
+    "@mozaic-ds/icons-vue": "^2.2.0",
     "@release-it/conventional-changelog": "^10.0.1",
     "@storybook/addon-a11y": "^10.0.4",
     "@storybook/addon-docs": "^10.0.4",
@@ -76,7 +76,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
     "release-it": "^19.0.4",
-    "sass": "^1.86.0",
+    "sass": "1.94.2",
     "storybook": "^10.0.4",
     "storybook-addon-tag-badges": "^3.0.2",
     "typescript": "^5.7.2",
@@ -84,7 +84,8 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^4.0.7",
     "vue-component-meta": "^3.0.8",
-    "vue-eslint-parser": "^10.1.1"
+    "vue-eslint-parser": "^10.1.1",
+    "vue-tsc": "^3.1.8"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/{usingPresets.mdx → BrandPresets.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Getting Started/Using Presets" />
+<Meta title="Brand Presets" />
 
-# Mozaic's presets
+# Brand Presets
 
 **Mozaic** is a **multi-brand** design system.<br/>
 This means that it is fully customisable so that its constituent elements _(foundations, components, etc.)_ can be adapted to the graphic charter of the brand that uses it.

package/src/components/Changelog.mdx

@@ -0,0 +1,19 @@
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
+import Changelog from '../../CHANGELOG.md?raw';
+
+<style>
+  {`
+  .sbdocs-toc--custom {
+    display: none;
+  }
+  `}
+</style>
+
+<Meta
+  title="Changelog"
+  parameters={{
+    docs: { toc: { disable: true } },
+  }}
+/>
+
+<Markdown>{Changelog}</Markdown>

package/src/components/Color.mdx

@@ -0,0 +1,226 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+<style>
+  {`
+  .css-1gwggp0 span {
+    display: none;
+  }
+  `}
+</style>
+
+<Meta title="Foundations/Color" />
+
+# Color
+
+Colors are foundational elements of the interface used to convey meaning, establish hierarchy, and reinforce brand identity. They help guide user attention, communicate status, and ensure readability across different contexts and themes.
+
+Each color should be used according to its designated role to preserve visual consistency, contrast, and usability across the interface.
+
+<br />
+
+### Text
+
+Text colors define the appearance of all written content. Use primary and secondary text colors for readability and hierarchy, tertiary for subtle information, accent for emphasis, and inverse variants for dark backgrounds.
+
+<ColorPalette>
+  {/* Text */}
+  <ColorItem
+    title="Text / Primary"
+    colors={{
+      '--color-text-primary': 'var(--color-text-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Text / Secondary"
+  colors={{
+    '--color-text-secondary': 'var(--color-text-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Tertiary"
+  colors={{
+    '--color-text-tertiary': 'var(--color-text-tertiary)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Accent"
+  colors={{
+    '--color-text-accent': 'var(--color-text-accent)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Disabled"
+  colors={{
+    '--color-text-disabled': 'var(--color-text-disabled)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Primary Inverse"
+  colors={{
+    '--color-text-primary-inverse': 'var(--color-text-primary-inverse)',
+  }}
+/>
+
+  <ColorItem
+    title="Text / Secondary Inverse"
+    colors={{
+      '--color-text-secondary-inverse':
+        'var(--color-text-secondary-inverse)',
+    }}
+  />
+</ColorPalette>
+
+### Background
+
+Background colors are used to create contrast and define sections of the interface. Primary is the default canvas, secondary provides subtle separation, accent highlights areas, ghost is for overlays, and inverse variants for dark parts.
+
+<ColorPalette>
+  {/* Background */}
+  <ColorItem
+    title="Background / Primary"
+    colors={{
+      '--color-background-primary': 'var(--color-background-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Background / Secondary"
+  colors={{
+    '--color-background-secondary': 'var(--color-background-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Secondary Inverse"
+  colors={{
+    '--color-background-secondary-inverse':
+      'var(--color-background-secondary-inverse)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Accent"
+  colors={{
+    '--color-background-accent': 'var(--color-background-accent)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Accent Inverse"
+  colors={{
+    '--color-background-accent-inverse':
+      'var(--color-background-accent-inverse)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Ghost"
+  colors={{
+    '--color-background-ghost': 'var(--color-background-ghost)',
+  }}
+/>
+
+  <ColorItem
+    title="Background / Disabled"
+    colors={{
+      '--color-background-disabled': 'var(--color-background-disabled)',
+    }}
+  />
+</ColorPalette>
+
+### Border
+
+Border colors provide visual separation between interface elements. Use primary for main borders, secondary and tertiary for subtle dividers, and inverse for dark backgrounds.
+
+<ColorPalette>
+  {/* Border */}
+  <ColorItem
+    title="Border / Primary"
+    colors={{
+      '--color-border-primary': 'var(--color-border-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Border / Secondary"
+  colors={{
+    '--color-border-secondary': 'var(--color-border-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Border / Tertiary"
+  colors={{
+    '--color-border-tertiary': 'var(--color-border-tertiary)',
+  }}
+/>
+
+  <ColorItem
+    title="Border / Inverse"
+    colors={{
+      '--color-border-inverse': 'var(--color-border-inverse)',
+    }}
+  />
+</ColorPalette>
+
+### Icon
+
+Icon colors communicate meaning and status. Primary icons are default, secondary and tertiary support hierarchy, accent icons draw attention, disabled icons indicate inactivity, and inverse variants are for dark backgrounds.
+
+<ColorPalette>
+  {/* Icon */}
+  <ColorItem
+    title="Icon / Primary"
+    colors={{
+      '--color-icon-primary': 'var(--color-icon-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Icon / Secondary"
+  colors={{
+    '--color-icon-secondary': 'var(--color-icon-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Tertiary"
+  colors={{
+    '--color-icon-tertiary': 'var(--color-icon-tertiary)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Accent"
+  colors={{
+    '--color-icon-accent': 'var(--color-icon-accent)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Disabled"
+  colors={{
+    '--color-icon-disabled': 'var(--color-icon-disabled)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Primary Inverse"
+  colors={{
+    '--color-icon-primary-inverse': 'var(--color-icon-primary-inverse)',
+  }}
+/>
+
+  <ColorItem
+    title="Icon / Secondary Inverse"
+    colors={{
+      '--color-icon-secondary-inverse':
+        'var(--color-icon-secondary-inverse)',
+    }}
+  />
+</ColorPalette>

package/src/components/Contributing.mdx

@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 import { Mermaid } from 'mdx-mermaid/Mermaid';
 
-<Meta title="Getting Started/Contributing" />
+<Meta title="Contributing" />
 
 # Be part of something bigger!
 
@@ -77,7 +77,10 @@ If you’re only fixing a bug, it should be fine to submit a pull request but we
 
 ### Project setup
 
-```bash
+<Source
+  language='bash'
+  dark
+  code={`
 // Clone mozaic-vue repo
 git clone git@github.com:adeo/mozaic-vue.git
 
@@ -89,7 +92,7 @@ git checkout <branch name>
 
 // Install dependencies
 npm install
-```
+`} />
 
 ## Submitting Changes/ Pull Requests
 
@@ -100,7 +103,10 @@ Mozaic's team is keeping an eye on pull requests. We will check your pull reques
 
 Before submitting please make sure to run:
 
-```
+<Source
+  language='bash'
+  dark
+  code={`
 // Pull down the latest
 $ git pull origin main
 
@@ -115,4 +121,4 @@ $ npm run lint
 
 // Run formatter
 $ npm run format
-```
+`} />

package/src/components/GettingStarted.mdx

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Getting Started/Getting Started" />
+<Meta title="Getting Started" />
 
 # Getting Started
 

package/src/components/Icon.stories.ts

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { Component } from 'vue';
+import * as Icons from '@mozaic-ds/icons-vue';
+import {
+  Release32,
+  CheckCircleFilled20,
+  CheckCircleFilled24,
+  CheckCircleFilled32,
+  CheckCircleFilled48,
+  CheckCircleFilled64,
+} from '@mozaic-ds/icons-vue';
+
+const meta: Meta = {
+  title: 'Foundations/Icon',
+  component: Release32,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Icons are compact visual elements used to represent actions, objects, or concepts in a clear and recognizable way. They can be used as standalone components or paired with other UI elements to enhance meaning and usability. Their style, size, and emphasis depend on the function they communicate and the context in which they appear.',
+      },
+    },
+  },
+  tags: ['v2'],
+  argTypes: {
+    color: {
+      description: 'customize the color of the SVG.',
+      control: 'select',
+      options: [
+        undefined,
+        'var(--color-icon-primary)',
+        'var(--color-icon-secondary)',
+        'var(--color-icon-tertiary)',
+        'var(--color-icon-primary-inverse)',
+        'var(--color-icon-secondary-inverse)',
+        'var(--color-icon-accent)',
+        'var(--color-icon-disabled)',
+      ],
+      table: {
+        category: 'Properties',
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => ({
+    components: Icons,
+    setup() {
+      return { args };
+    },
+    template: `
+      <Release32 v-bind="args"/>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Size: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+          <template>
+            <CheckCircleFilled20 />
+            <CheckCircleFilled24 />
+            <CheckCircleFilled32 />
+            <CheckCircleFilled48 />
+            <CheckCircleFilled64 />
+          </template>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      CheckCircleFilled20,
+      CheckCircleFilled24,
+      CheckCircleFilled32,
+      CheckCircleFilled48,
+      CheckCircleFilled64,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CheckCircleFilled20/>
+      <CheckCircleFilled24/>
+      <CheckCircleFilled32/>
+      <CheckCircleFilled48/>
+      <CheckCircleFilled64/>
+    `,
+  }),
+};
+
+export const Color: Story = {
+  args: {
+    color: 'var(--color-icon-accent)',
+  },
+};
+
+export const IconList: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: () => ({
+    components: Icons,
+    setup() {
+      const icons32: Record<string, Component> = Object.fromEntries(
+        Object.entries(Icons).filter(([name]) => name.endsWith('32')),
+      );
+
+      return { icons32 };
+    },
+    template: `
+      <div class="icon-grid">
+        <div
+          v-for="(Icon, name) in icons32"
+          :key="name"
+          class="icon-item"
+        >
+          <component :is="Icon" width="32" height="32" />
+          <div class="icon-label"><{{ name }}/></div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/Welcome.mdx

@@ -0,0 +1,49 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+import ads from '../../.storybook/assets/logo.svg';
+import vue from '../../.storybook/assets/vue.svg';
+import '@mozaic-ds/styles';
+
+<style>
+  {`
+  .sbdocs-toc--custom {
+    display: none;
+  }
+  `}
+</style>
+
+<Meta title="Welcome" />
+
+<div class="hero">
+  <p
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '1rem',
+    }}
+  >
+    <img src={ads} alt="ADEO Design system logo" style={{ height: '80px' }} />
+    <span style={{ fontSize: '32px' }}>x</span>
+    <img src={vue} alt="Vue.js logo" style={{ height: '80px' }} />
+  </p>
+  <h1 class="mt-heading--l">ADEO Design system - Vue.js library</h1>
+
+  <p class="mt-body-l">A library of **Vue.js** components implementing **ADEO Design system** guidelines.</p>
+
+  <div class="hero-links">
+    <a href="https://github.com/adeo/mozaic-vue" target="_blank" class="mc-button mc-button--outlined">
+      <svg class="mc-button__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 1024 1024" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#000"/></svg>
+      <span class="mc-button__label">Github</span>
+    </a>
+    <a href="https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-" target="_blank" class="mc-button mc-button--outlined">
+      <svg lass="mc-button__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 54 80" fill="none"><g clip-path="url(#figma__clip0_912_3)"><path d="M13.3333 80.0002C20.6933 80.0002 26.6667 74.0268 26.6667 66.6668V53.3335H13.3333C5.97333 53.3335 0 59.3068 0 66.6668C0 74.0268 5.97333 80.0002 13.3333 80.0002Z" fill="#0ACF83"/><path d="M0 39.9998C0 32.6398 5.97333 26.6665 13.3333 26.6665H26.6667V53.3332H13.3333C5.97333 53.3332 0 47.3598 0 39.9998Z" fill="#A259FF"/><path d="M0 13.3333C0 5.97333 5.97333 0 13.3333 0H26.6667V26.6667H13.3333C5.97333 26.6667 0 20.6933 0 13.3333Z" fill="#F24E1E"/><path d="M26.6667 0H40.0001C47.3601 0 53.3334 5.97333 53.3334 13.3333C53.3334 20.6933 47.3601 26.6667 40.0001 26.6667H26.6667V0Z" fill="#FF7262"/><path d="M53.3334 39.9998C53.3334 47.3598 47.3601 53.3332 40.0001 53.3332C32.6401 53.3332 26.6667 47.3598 26.6667 39.9998C26.6667 32.6398 32.6401 26.6665 40.0001 26.6665C47.3601 26.6665 53.3334 32.6398 53.3334 39.9998Z" fill="#1ABCFE"/></g><defs><clipPath id="figma__clip0_912_3"><rect width="53.3333" height="80" fill="white"/></clipPath></defs></svg>
+      <span class="mc-button__label">Figma</span>
+    </a>
+    <a href="?path=/docs/getting-started--docs" class="mc-button mc-button--accent">
+      <span class="mc-button__label">Get Started</span>
+      <svg class="mc-button__icon" width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path fill-rule="evenodd" d="M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"></path>
+      </svg>
+    </a>
+  </div>
+</div>

package/src/components/accordionlist/MAccordionList.spec.ts

@@ -0,0 +1,136 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { inject, defineComponent } from 'vue';
+
+import MAccordionList from './MAccordionList.vue';
+import {
+  AccordionStateKey,
+  AccordionToggleFnKey,
+} from './m-accordion-list.const';
+
+const AccordionItemsMock = defineComponent({
+  setup() {
+    const toggle = inject(AccordionToggleFnKey)!;
+    const openIds = inject(AccordionStateKey);
+    return { toggle, openIds };
+  },
+  template: `
+      <div>
+        <button id="a" @click="toggle('a')" />
+        <button id="b" @click="toggle('b')" />
+      </div>
+    `,
+});
+
+describe('MAccordionList', () => {
+  it('renders default slot content', () => {
+    const wrapper = mount(MAccordionList, {
+      slots: {
+        default: '<div class="slot-content">Content</div>',
+      },
+    });
+
+    expect(wrapper.find('.slot-content').exists()).toBe(true);
+  });
+
+  it('applies ghost modifier class when appearance is ghost', () => {
+    const wrapper = mount(MAccordionList, {
+      props: {
+        appearance: 'ghost',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-accordion--ghost');
+  });
+
+  it('does not apply ghost modifier class by default', () => {
+    const wrapper = mount(MAccordionList);
+
+    expect(wrapper.classes()).not.toContain('mc-accordion--ghost');
+  });
+
+  it('provides openIds state based on modelValue', async () => {
+    const wrapper = mount(MAccordionList, {
+      props: {
+        modelValue: ['a', 'b'],
+      },
+      slots: {
+        default: AccordionItemsMock,
+      },
+    });
+
+    const consumer = wrapper.findComponent(AccordionItemsMock);
+    expect(consumer.vm.openIds).toEqual(['a', 'b']);
+  });
+
+  it('emits update:modelValue when toggling in multiple mode', async () => {
+    const wrapper = mount(MAccordionList, {
+      props: {
+        modelValue: [],
+        behavior: 'multiple',
+      },
+      slots: {
+        default: AccordionItemsMock,
+      },
+    });
+
+    await wrapper.findAll('button')[0].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[['a']]]);
+  });
+
+  it('adds and removes ids in multiple behavior', async () => {
+    const Parent = defineComponent({
+      components: { MAccordionList, AccordionItemsMock },
+      data() {
+        return {
+          value: ['a'],
+        };
+      },
+      template: `
+      <MAccordionList v-model="value" behavior="multiple">
+        <AccordionItemsMock />
+      </MAccordionList>
+    `,
+    });
+
+    const wrapper = mount(Parent);
+
+    await wrapper.find('#b').trigger('click');
+    expect(wrapper.vm.value).toEqual(['a', 'b']);
+
+    await wrapper.find('#a').trigger('click');
+    expect(wrapper.vm.value).toEqual(['b']);
+  });
+
+  it('allows only one open item in single behavior', async () => {
+    const wrapper = mount(MAccordionList, {
+      props: {
+        modelValue: ['a'],
+        behavior: 'single',
+      },
+      slots: {
+        default: AccordionItemsMock,
+      },
+    });
+
+    await wrapper.find('#b').trigger('click');
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toEqual(['b']);
+  });
+
+  it('closes the open item when toggled again in single mode', async () => {
+    const wrapper = mount(MAccordionList, {
+      props: {
+        modelValue: ['a'],
+        behavior: 'single',
+      },
+      slots: {
+        default: AccordionItemsMock,
+      },
+    });
+
+    await wrapper.findAll('button')[0].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toEqual([]);
+  });
+});