@mozaic-ds/vue 2.11.0 → 2.13.0

package/src/components/builtinmenu/MBuiltInMenu.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MBuiltInMenu from './MBuiltInMenu.vue';
+import { Less24 } from '@mozaic-ds/icons-vue';
+import { action } from 'storybook/actions';
+
+const meta: Meta<typeof MBuiltInMenu> = {
+  title: 'Navigation/Built-in menu',
+  component: MBuiltInMenu,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.',
+      },
+    },
+  },
+  args: {
+    items: [
+      { label: 'Label' },
+      { label: 'Label' },
+      { label: 'Label' },
+      { label: 'Label' },
+    ],
+    modelValue: 0,
+  },
+  render: (args) => ({
+    components: { MBuiltInMenu },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MBuiltInMenu v-model="args.modelValue" v-bind="args" @update:modelValue="handleUpdate"></MBuiltInMenu>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBuiltInMenu>;
+
+export const Default: Story = {};
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { label: 'Label', icon: Less24 },
+      { label: 'Label', icon: Less24 },
+      { label: 'Label', icon: Less24 },
+      { label: 'Label', icon: Less24 },
+    ],
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    outlined: true,
+  },
+};

package/src/components/builtinmenu/MBuiltInMenu.vue

@@ -0,0 +1,110 @@
+<template>
+  <nav
+    :class="{
+      'mc-built-in-menu': true,
+      'mc-built-in-menu--outlined': props.outlined,
+    }"
+    aria-label="menu"
+  >
+    <ul class="mc-built-in-menu__list">
+      <li
+        v-for="(item, index) in props.items"
+        :key="index"
+        :class="{
+          'mc-built-in-menu__item': true,
+          'mc-built-in-menu__item--selected': currentMenuItem === index,
+        }"
+        v-bind="currentMenuItem === index ? { 'aria-current': true } : {}"
+      >
+        <component
+          :is="getItemTag(item)"
+          :class="{
+            'mc-built-in-menu__button': getItemTag(item) === 'button',
+            'mc-built-in-menu__link': isLink(item),
+          }"
+          v-bind="isLink(item) ? getLinkAttrs(item) : {}"
+          @click="currentMenuItem = index"
+        >
+          <component
+            v-if="item.icon"
+            :is="item.icon"
+            class="mc-built-in-menu__icon"
+          />
+
+          <span class="mc-built-in-menu__label">{{ item.label }}</span>
+
+          <ChevronRight20 class="mc-built-in-menu__icon" />
+        </component>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ChevronRight20 } from '@mozaic-ds/icons-vue';
+import { computed, type Component } from 'vue';
+
+/**
+ * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+ */
+
+export type MenuItem = {
+  label: string;
+  icon?: Component;
+  href?: string;
+  to?: string;
+  target?: '_self' | '_blank' | '_parent' | '_top';
+};
+
+const props = defineProps<{
+  /**
+   * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+   */
+  modelValue?: number;
+  /**
+   * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
+   */
+  items: MenuItem[];
+  /**
+   * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+   */
+  outlined?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the selected item changes, providing the updated selected value.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+
+const currentMenuItem = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: number) {
+    emit('update:modelValue', value);
+  },
+});
+
+function getItemTag(item: MenuItem) {
+  if (item.href) return 'a';
+  if (item.to) return 'router-link';
+  return 'button';
+}
+
+function isLink(item: MenuItem) {
+  return getItemTag(item) === 'a' || getItemTag(item) === 'router-link';
+}
+
+function getLinkAttrs(item: MenuItem) {
+  return {
+    ...(getItemTag(item) === 'a' ? { href: item.href } : { to: item.to }),
+    target: item.target || '_self',
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/built-in-menu';
+</style>

package/src/components/builtinmenu/README.md

@@ -0,0 +1,32 @@
+# MBuiltInMenu
+
+A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
+| `items*` | Defines the menu items, each of which can include an icon and act as a button, link, or router-link. | `MenuItem[]` | - |
+| `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emitted when the selected item changes, providing the updated selected value. | [value: number] |
+
+## Dependencies
+
+### Used By
+
+- [MCheckListMenu](../checklistmenu)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCheckListMenu --> MBuiltInMenu
+style MBuiltInMenu fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/button/MButton.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MButton from './MButton.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronRight24 } from '@mozaic-ds/icons-vue';
 import MLoader from '../loader/MLoader.vue';
 
 describe('MButton component', () => {

package/src/components/button/MButton.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MButton from './MButton.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronRight24, Edit24, Search24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MButton> = {
   title: 'Action/Button',
@@ -16,7 +16,7 @@ const meta: Meta<typeof MButton> = {
   },
   args: { default: 'Button Label' },
   render: (args) => ({
-    components: { MButton, ChevronRight24 },
+    components: { MButton, ChevronRight24, Edit24, Search24 },
     setup() {
       return { args };
     },
@@ -33,21 +33,173 @@ const meta: Meta<typeof MButton> = {
 export default meta;
 type Story = StoryObj<typeof MButton>;
 
-export const Filled: Story = {};
+export const Filled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Most visible variant, used to emphasize the primary action on a page or a section.',
+      },
+    },
+  },
+};
 
-export const Outline: Story = {
+export const Outlined: Story = {
   args: { outlined: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
+      },
+    },
+  },
 };
 
 export const Ghost: Story = {
   args: { ghost: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'More discreet, should be used exclusively for canceling or ignoring a task or action.',
+      },
+    },
+  },
 };
 
-export const Icon: Story = {
+export const IconLeft: Story = {
   args: {
     iconPosition: 'left',
+    icon: '<Edit24/>',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used in conjunction with the action verb, reinforcing its meaning.',
+      },
+    },
+  },
+};
+
+export const IconRight: Story = {
+  args: {
+    iconPosition: 'right',
     icon: '<ChevronRight24/>',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Often emphasizes the concept of navigation, guiding users effectively.',
+      },
+    },
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    default: undefined,
+    iconPosition: 'only',
+    icon: '<Search24/>',
+    ariaLabel: 'Search button',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used when the action is generic enough to be understood without accompanying text.',
+      },
+    },
+  },
+};
+
+export const Standard: Story = {
+  args: { appearance: 'standard' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
+      },
+    },
+  },
+};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
+      },
+    },
+  },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
+      },
+    },
+  },
+};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  args: { size: 's' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
+      },
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: { size: 'm' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: { size: 'l' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
+      },
+    },
+  },
 };
 
 export const Loading: Story = {
@@ -55,4 +207,12 @@ export const Loading: Story = {
     isLoading: true,
     ariaLabel: 'Loading button',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Visually communicates to users that a process or action is in progress. It helps set user expectations during waiting periods by indicating that the system is working. Typically used for actions that require more than a fraction of a second to complete.',
+      },
+    },
+  },
 };

package/src/components/button/README.md

@@ -7,7 +7,7 @@ Buttons are key interactive elements used to perform actions and can be used as
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `appearance` | Defines the visual style of the button. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `appearance` | Defines the visual style of the button. | `"standard"` `"danger"` `"inverse"` `"accent"` | `"standard"` |
 | `size` | Determines the size of the button. | `"s"` `"m"` `"l"` | `"m"` |
 | `disabled` | If `true`, disables the button, making it non-interactive. | `boolean` | - |
 | `ghost` | If `true`, applies a "ghost" style to the button, typically a transparent background with a border. | `boolean` | - |
@@ -22,3 +22,35 @@ Buttons are key interactive elements used to perform actions and can be used as
 | --- | --- |
 | `default` | The content displayed in the button. |
 | `icon` | Use this slot to insert an icon for the Button. |
+
+## Dependencies
+
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MButton --> MLoader
+style MButton fill:#008240,stroke:#333,stroke-width:4px
+```
+
+### Used By
+
+- [MFileUploaderItem](../fileuploaderitem)
+- [MPagination](../pagination)
+- [MPasswordInput](../passwordinput)
+- [MStepperBottomBar](../stepperbottombar)
+
+### Graph
+
+```mermaid
+graph TD;
+  MFileUploaderItem --> MButton
+  MPagination --> MButton
+  MPasswordInput --> MButton
+  MStepperBottomBar --> MButton
+style MButton fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/callout/MCallout.spec.ts

@@ -2,15 +2,16 @@ import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MCallout from './MCallout.vue';
 
-vi.mock(
-  '@mozaic-ds/icons-vue/src/components/ImageAlt32/ImageAlt32.vue',
-  () => ({
-    default: {
+vi.mock('@mozaic-ds/icons-vue', async () => {
+  const actual = await vi.importActual('@mozaic-ds/icons-vue');
+  return {
+    ...actual,
+    ImageAlt32: {
       name: 'ImageAlt32',
       template: '<svg class="mock-icon" />',
     },
-  }),
-);
+  };
+});
 
 describe('MCallout.vue', () => {
   it('renders title and description correctly', () => {

package/src/components/callout/MCallout.stories.ts

@@ -2,8 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MCallout from './MCallout.vue';
 import MButton from '../button/MButton.vue';
 import MLink from '../link/MLink.vue';
-import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
-import ImageAlt32 from '@mozaic-ds/icons-vue/src/components/ImageAlt32/ImageAlt32.vue';
+import { ArrowNext20, ImageAlt32 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MCallout> = {
   title: 'Content/Callout',

package/src/components/carousel/MCarousel.spec.ts

@@ -2,8 +2,7 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
 import MCarousel from './MCarousel.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
-import ChevronLeft20 from '@mozaic-ds/icons-vue/src/components/ChevronLeft20/ChevronLeft20.vue';
-import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 

package/src/components/carousel/MCarousel.stories.ts

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MCarousel from './MCarousel.vue';
 import MLink from '../link/MLink.vue';
-import ArrowNext24 from '@mozaic-ds/icons-vue/src/components/ArrowNext24/ArrowNext24.vue';
+import { ArrowNext24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MCarousel> = {
   title: 'Content/Carousel',
   component: MCarousel,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/carousel/MCarousel.vue

@@ -48,8 +48,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, type VNode } from 'vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
-import ChevronLeft20 from '@mozaic-ds/icons-vue/src/components/ChevronLeft20/ChevronLeft20.vue';
-import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 /**
  * A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.
  */

package/src/components/carousel/README.md

@@ -16,3 +16,17 @@ A Carousel allows users to browse through multiple items within a horizontal con
 | --- | --- |
 | `default` | Use this slot to insert a list of components to be displayed in the carousel. |
 | `header` | Use this slot to insert the title, subtitle or link of the carousel. |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCarousel --> MIconButton
+style MCarousel fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/checkbox/README.md

@@ -21,3 +21,17 @@ A checkbox is an interactive component used to select or deselect an option, typ
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the checkbox value changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Used By
+
+- [MCheckboxGroup](../checkboxgroup)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCheckboxGroup --> MCheckbox
+style MCheckbox fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/checkboxgroup/README.md

@@ -18,3 +18,17 @@ A checkbox is an interactive component used to select or deselect an option, typ
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the checkbox group value changes, updating the modelValue prop. | [value: Array<string>] |
+
+## Dependencies
+
+### Depends on
+
+- [MCheckbox](../checkbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCheckboxGroup --> MCheckbox
+style MCheckboxGroup fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/checklistmenu/MCheckListMenu.spec.ts

@@ -0,0 +1,77 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MCheckListMenu, { type CheckListMenuItem } from './MCheckListMenu.vue';
+import { CheckCircleFilled24 } from '@mozaic-ds/icons-vue';
+import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
+
+const StubMBuiltInMenu = {
+  name: 'MBuiltInMenu',
+  props: ['modelValue', 'items', 'outlined'],
+  emits: ['update:modelValue'],
+  template: '<div />',
+};
+
+describe('MCheckListMenu', () => {
+  it('maps items and sets icon for checked items', () => {
+    const items: CheckListMenuItem[] = [
+      {
+        label: 'One',
+        checked: true,
+        href: '/one',
+        to: undefined,
+        target: undefined,
+      },
+      {
+        label: 'Two',
+        checked: false,
+        href: undefined,
+        to: '/two',
+        target: '_blank',
+      },
+    ];
+
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, modelValue: undefined },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    const passedItems = builtIn.props('items') as MenuItem[];
+
+    expect(passedItems).toHaveLength(2);
+    expect(passedItems[0].label).toBe('One');
+    expect(passedItems[0].icon).toBe(CheckCircleFilled24);
+    expect(passedItems[0].href).toBe('/one');
+
+    expect(passedItems[1].label).toBe('Two');
+    expect(passedItems[1].icon).toBeUndefined();
+    expect(passedItems[1].to).toBe('/two');
+    expect(passedItems[1].target).toBe('_blank');
+  });
+
+  it('forwards outlined prop to MBuiltInMenu', () => {
+    const items = [{ label: 'A', checked: false }];
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, modelValue: undefined, outlined: true },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    expect(builtIn.props('outlined')).toBe(true);
+  });
+
+  it('emits update:modelValue when inner menu updates modelValue', async () => {
+    const items = [{ label: 'X', checked: false }];
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, modelValue: undefined },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    await builtIn.vm.$emit('update:modelValue', 3);
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual([3]);
+  });
+});