@mozaic-ds/vue 2.12.0 → 2.13.0

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

@@ -1,7 +1,7 @@
 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/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+import { CheckCircleFilled24 } from '@mozaic-ds/icons-vue';
 import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
 
 const StubMBuiltInMenu = {

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

@@ -5,6 +5,7 @@ import { action } from 'storybook/actions';
 const meta: Meta<typeof MCheckListMenu> = {
   title: 'Navigation/Check-list menu',
   component: MCheckListMenu,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/checklistmenu/MCheckListMenu.vue

@@ -10,7 +10,7 @@
 import { computed } from 'vue';
 import MBuiltInMenu from '../builtinmenu/MBuiltInMenu.vue';
 import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
-import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+import { CheckCircleFilled24 } from '@mozaic-ds/icons-vue';
 
 /**
  * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.

package/src/components/checklistmenu/README.md

@@ -16,3 +16,17 @@ A check-list menu is a structured vertical list where each item represents a dis
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emitted when the selected item changes, providing the updated selected value. | [value: number] |
+
+## Dependencies
+
+### Depends on
+
+- [MBuiltInMenu](../builtinmenu)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCheckListMenu --> MBuiltInMenu
+style MCheckListMenu fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/circularprogressbar/README.md

@@ -9,6 +9,20 @@ A circular progress bar visually represents progress toward a goal or completion
 | --- | --- | --- | --- | 
 | `size` | Sets the size of the progress bar. | `"s"` `"m"` `"l"` | - |
 | `value` | The current value of the progress bar. | `number` | `0` |
-| `type` | Shows either a percentage or custom content. | `"percentage"` `"content"` | `"percentage"` |
+| `type` | Shows either a percentage or custom content. | `"content"` `"percentage"` | `"percentage"` |
 | `contentValue` | Main content shown when `type` is `'content'`. | `string` | - |
 | `additionalInfo` | Additional text shown to define the `contentValue`. | `string` | - |
+
+## Dependencies
+
+### Used By
+
+- [MStepperCompact](../steppercompact)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStepperCompact --> MCircularProgressbar
+style MCircularProgressbar fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/datepicker/MDatepicker.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 /**
  * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
  */

package/src/components/divider/README.md

@@ -16,3 +16,25 @@ A divider is a visual element used to separate content or sections within an int
 | Name | Description |
 | --- | --- |
 | `default` | Use this slot to insert the content who need a vertical divider |
+
+## Dependencies
+
+### Used By
+
+- [MActionBottomBar](../actionbottombar)
+- [MActionListbox](../actionlistbox)
+- [MFileUploaderItem](../fileuploaderitem)
+- [MStepperBottomBar](../stepperbottombar)
+- [MTabs](../tabs)
+
+### Graph
+
+```mermaid
+graph TD;
+  MActionBottomBar --> MDivider
+  MActionListbox --> MDivider
+  MFileUploaderItem --> MDivider
+  MStepperBottomBar --> MDivider
+  MTabs --> MDivider
+style MDivider fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/drawer/MDrawer.vue

@@ -66,8 +66,7 @@
 
 <script setup lang="ts">
 import { computed, watch, type VNode, ref, onMounted, onUnmounted } from 'vue';
-import ArrowBack24 from '@mozaic-ds/icons-vue/src/components/ArrowBack24/ArrowBack24.vue';
-import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
+import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
 /**

package/src/components/drawer/README.md

@@ -29,3 +29,19 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 | --- | --- | --- |
 | `back` | Emits when click back button of the drawer. | [] |
 | `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+- [MOverlay](../overlay)
+
+### Graph
+
+```mermaid
+graph TD;
+  MDrawer --> MIconButton
+  MDrawer --> MOverlay
+style MDrawer fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/field/README.md

@@ -23,3 +23,17 @@ A field label is a text element that identifies the purpose of an input field, p
 | Name | Description |
 | --- | --- |
 | `default` | Use this slot to insert the form element of your choice |
+
+## Dependencies
+
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MField --> MLoader
+style MField fill:#008240,stroke:#333,stroke-width:4px
+```