@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/datatable/utils.js

@@ -0,0 +1,19 @@
+import { deals } from './tools/data';
+
+export const addlDeals = deals;
+export const deals10 = [...deals.slice(0, 10)];
+export const deals25 = [...deals.slice(0, 25)];
+export const deals50 = [...deals.slice(0, 50)];
+export const deals75 = [...deals.slice(0, 75)];
+export const deals100 = [...deals.slice(0, 100)];
+
+export const args = {
+  items: deals10,
+};
+
+export const backgrounds = {
+  default: 'datatable',
+  values: [{ name: 'datatable', value: '#EAEDEF' }],
+};
+
+export const formatDate = (date) => new Date(date).toLocaleString();

package/src/components/datepicker/MDatepicker.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MDatepicker
+ * Links Figma Date picker (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29074',
+  {
+    props: {
+      showFieldLabel: figma.boolean('Show Field label'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MDatepicker } from '@mozaic-ds/vue';
+      </script>
+
+      <MDatepicker id="datepicker" />`,
+  },
+);

package/src/components/divider/MDivider.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MDivider
+ * Links Figma Divider (Horizontal) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-26971',
+  {
+    props: {
+      appearance: figma.enum('Style', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary',
+        Inverse: 'inverse',
+      }),
+      size: figma.enum('Size', {
+        'S (1px)': 's',
+        'M (4px)': 'm',
+        'L (8px)': 'l',
+      }),
+    },
+    example: ({ appearance, size }) =>
+      html`<script setup>
+        import { MDivider } from '@mozaic-ds/vue';
+      </script>
+
+      <MDivider appearance=${appearance} size=${size} />`,
+  },
+);

package/src/components/drawer/MDrawer.figma.ts

@@ -0,0 +1,37 @@
+/**
+ * Code Connect mapping for MDrawer
+ * Links Figma Drawer (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6717',
+  {
+    props: {
+      position: figma.enum('Left alignment', {
+        True: 'left',
+        False: 'right',
+      }),
+      extended: figma.enum('Is extended (only from M)', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ position, extended }) =>
+      html`<script setup>
+        import { MDrawer, MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MDrawer
+        open
+        title="Drawer title"
+        :position=${position}
+        :extended=${extended}
+      >
+        <p>Drawer content</p>
+        <template #footer>
+          <MButton>Confirm</MButton>
+        </template>
+      </MDrawer>`,
+  },
+);

package/src/components/drawer/README.md

@@ -27,8 +27,8 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 
 | Name | Description | Type |
 | --- | --- | --- |
-| `back` | Emits when click back button of the drawer. | [] |
 | `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |
+| `back` | Emits when click back button of the drawer. | [] |
 
 ## Dependencies
 

package/src/components/field/MField.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MField
+ * Links Figma _Field label to @mozaic-ds/vue
+ *
+ * MField is a wrapper that encompasses form inputs. The default slot accepts any
+ * form component: MTextInput, MTextArea, MSelect, MCombobox, MPasswordInput,
+ * MPhoneNumber, MPincode, MQuantitySelector, etc.
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29469',
+  {
+    props: {
+      label: figma.string('Label'),
+      requirementText: figma.enum('Necessity indicator', {
+        True: 'required',
+        False: '',
+      }),
+    },
+    example: ({ label, requirementText }) =>
+      html`<script setup>
+        import { MField, MTextInput } from '@mozaic-ds/vue';
+      </script>
+
+      <MField id="field-id" label=${label} requirement-text=${requirementText}>
+        <MTextInput id="field-id" placeholder="Placeholder"></MTextInput>
+      </MField>`,
+  },
+);

package/src/components/fileuploader/MFileUploader.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MFileUploader
+ * Links Figma File uploader (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=11973-12085',
+  {
+    props: {
+      hasDragDrop: figma.enum('Has drag & drop', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ hasDragDrop }) =>
+      html`<script setup>
+        import { MFileUploader } from '@mozaic-ds/vue';
+      </script>
+
+      <MFileUploader :model-value="[]" :has-drag-drop=${hasDragDrop} />`,
+  },
+);

package/src/components/fileuploaderitem/MFileUploaderItem.figma.ts

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MFileUploaderItem
+ * Links Figma _file uploader / file item to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=11975-12550',
+  {
+    props: {
+      format: figma.enum('🚫 Format', {
+        'Inline (default)': 'inline',
+        Stacked: 'stacked',
+      }),
+      valid: figma.enum('Is invalid', {
+        False: true,
+        True: false,
+      }),
+    },
+    example: ({ format, valid }) =>
+      html`<script setup>
+        import { MFileUploaderItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MFileUploaderItem :file="{ name: 'document.pdf' }" format=${format} :valid=${valid} />`,
+  },
+);

package/src/components/flag/MFlag.figma.ts

@@ -0,0 +1,26 @@
+/**
+ * Code Connect mapping for MFlag
+ * Links Figma Flag to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5462-8542',
+  {
+    props: {
+      label: figma.string('Flag label'),
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Danger: 'danger',
+        Inverse: 'inverse',
+      }),
+    },
+    example: ({ label, appearance }) =>
+      html`<script setup>
+        import { MFlag } from '@mozaic-ds/vue';
+      </script>
+
+      <MFlag label=${label} appearance=${appearance}></MFlag>`,
+  },
+);

package/src/components/iconbutton/MIconButton.figma.ts

@@ -0,0 +1,54 @@
+/**
+ * Code Connect mapping for MIconButton
+ * Links Figma Icon Button (ADS2) to @mozaic-ds/vue
+ * Props from figma_get_component (Figma Console MCP) + MIconButton.stories.ts
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1-1978',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Danger: 'danger',
+        'Inverse (only on dark background)': 'inverse',
+      }),
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+        L: 'l',
+      }),
+      disabled: figma.enum('is disabled', {
+        False: false,
+        True: true,
+      }),
+      isLoading: figma.enum('Is loading', {
+        False: false,
+        True: true,
+      }),
+      outlined: figma.enum('Type', { Outlined: true }),
+      ghost: figma.enum('Type', { Ghost: true }),
+    },
+    example: ({ appearance, size, disabled, isLoading, outlined, ghost }) =>
+      html`<script setup>
+        import { MIconButton } from '@mozaic-ds/vue';
+        import { ChevronRight24 } from '@mozaic-ds/icons-vue';
+      </script>
+
+      <MIconButton
+        appearance=${appearance}
+        size=${size}
+        disabled=${disabled}
+        :is-loading=${isLoading}
+        outlined=${outlined}
+        ghost=${ghost}
+        aria-label="Action"
+      >
+        <template #icon>
+          <ChevronRight24 />
+        </template>
+      </MIconButton>`,
+  },
+);

package/src/components/kpiitem/MKpiItem.figma.ts

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MKpiItem
+ * Links Figma KPI item (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-21651',
+  {
+    props: {
+      value: figma.string('Value'),
+      label: figma.string('KPI label'),
+      size: figma.enum('Size', {
+        'S (Badge)': 's',
+        'M (Inline)': 'm',
+        'L (Card)': 'l',
+      }),
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+      }),
+    },
+    example: ({ value, label, size, status }) =>
+      html`<script setup>
+        import { MKpiItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MKpiItem value=${value} label=${label} size=${size} status=${status} />`,
+  },
+);

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MLinearProgressbarBuffer
+ * Links Figma Linear progress bar (Buffer) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-13925',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+        L: 'l',
+      }),
+      value: figma.enum('Completion', {
+        '0%': 0,
+        '25%': 25,
+        '50%': 50,
+        '75%': 75,
+        '100%': 100,
+      }),
+    },
+    example: ({ size, value }) =>
+      html`<script setup>
+        import { MLinearProgressbarBuffer } from '@mozaic-ds/vue';
+      </script>
+
+      <MLinearProgressbarBuffer size=${size} :value=${value}></MLinearProgressbarBuffer>`,
+  },
+);

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.figma.ts

@@ -0,0 +1,26 @@
+/**
+ * Code Connect mapping for MLinearProgressbarPercentage
+ * Links Figma Linear progress bar (Percentage) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-13902',
+  {
+    props: {
+      value: figma.enum('Completion', {
+        '0%': 0,
+        '25%': 25,
+        '50%': 50,
+        '75%': 75,
+        '100%': 100,
+      }),
+    },
+    example: ({ value }) =>
+      html`<script setup>
+        import { MLinearProgressbarPercentage } from '@mozaic-ds/vue';
+      </script>
+
+      <MLinearProgressbarPercentage :value=${value}></MLinearProgressbarPercentage>`,
+  },
+);

package/src/components/link/MLink.figma.ts

@@ -0,0 +1,32 @@
+/**
+ * Code Connect mapping for MLink
+ * Links Figma Link (Standalone) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11290',
+  {
+    props: {
+      label: figma.string('Label'),
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+      }),
+      appearance: figma.enum('Appearance', {
+        Primary: 'standard',
+        Secondary: 'secondary',
+        Accent: 'accent',
+        Inverse: 'inverse',
+      }),
+    },
+    example: ({ label, size, appearance }) =>
+      html`<script setup>
+        import { MLink } from '@mozaic-ds/vue';
+      </script>
+
+      <MLink href="#" size=${size} appearance=${appearance}>
+        ${label}
+      </MLink>`,
+  },
+);

package/src/components/loader/MLoader.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MLoader
+ * Links Figma Loader to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-14423',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Inverse: 'inverse',
+      }),
+      size: figma.enum('Size', {
+        'XS (20px)': 'xs',
+        'S (24px)': 's',
+        'M (32px)': 'm',
+        'L (64px)': 'l',
+      }),
+    },
+    example: ({ appearance, size }) =>
+      html`<script setup>
+        import { MLoader } from '@mozaic-ds/vue';
+      </script>
+
+      <MLoader appearance=${appearance} size=${size}></MLoader>`,
+  },
+);

package/src/components/loadingoverlay/MLoadingOverlay.figma.ts

@@ -0,0 +1,18 @@
+/**
+ * Code Connect mapping for MLoadingOverlay
+ * Links Figma Loading overlay (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-14550',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MLoadingOverlay } from '@mozaic-ds/vue';
+      </script>
+
+      <MLoadingOverlay is-visible text="Loading..."></MLoadingOverlay>`,
+  },
+);

package/src/components/modal/MModal.figma.ts

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MModal
+ * Links Figma Modal (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6700',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MModal, MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MModal
+        open
+        title="Modal title"
+        description="A modal is a dialog window allowing you to focus the user's attention."
+        closable
+      >
+        <template #footer>
+          <MButton>Confirm</MButton>
+        </template>
+      </MModal>`,
+  },
+);

package/src/components/navigationindicator/MNavigationIndicator.figma.ts

@@ -0,0 +1,24 @@
+/**
+ * Code Connect mapping for MNavigationIndicator
+ * Links Figma Navigation indicator to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-14643',
+  {
+    props: {
+      player: figma.boolean('Show player'),
+      showIndicator03: figma.boolean('Show Indicator 03'),
+      showIndicator04: figma.boolean('Show Indicator 04'),
+      showIndicator05: figma.boolean('Show Indicator 05'),
+      showIndicator06: figma.boolean('Show Indicator 06'),
+    },
+    example: ({ player }) =>
+      html`<script setup>
+        import { MNavigationIndicator } from '@mozaic-ds/vue';
+      </script>
+
+      <MNavigationIndicator :steps="6" :model-value="0" player=${player}></MNavigationIndicator>`,
+  },
+);

package/src/components/navigationindicator/MNavigationIndicator.spec.ts

@@ -77,24 +77,6 @@ describe('MNavigationIndicator.vue', () => {
     expect(emitted![0][0]).toBe(1);
   });
 
-  it('emits update:modelValue when Enter is pressed on a step', async () => {
-    const wrapper = mount(MNavigationIndicator, {
-      props: { steps: 3, modelValue: 0 },
-      global: {
-        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
-      },
-    });
-
-    const stepButtons = wrapper.findAll(
-      '.mc-navigation-indicator__list .mc-navigation-indicator__button',
-    );
-    await stepButtons[2].trigger('keydown', { key: 'Enter' });
-
-    const emitted = wrapper.emitted('update:modelValue');
-    expect(emitted).toBeTruthy();
-    expect(emitted![0][0]).toBe(2);
-  });
-
   it('does not emit update:modelValue when a wrong key is pressed', async () => {
     const wrapper = mount(MNavigationIndicator, {
       props: { steps: 3, modelValue: 0 },
@@ -149,4 +131,79 @@ describe('MNavigationIndicator.vue', () => {
     expect(button.text()).toContain('Pause');
     expect(wrapper.find('[data-testid="pause-icon"]').exists()).toBe(true);
   });
+
+  it('renders a navigation landmark with an aria-label', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 0 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const navigation = wrapper.find('nav[aria-label="Navigation steps"]');
+    expect(navigation.exists()).toBe(true);
+    expect(navigation.attributes('aria-label')).toBe('Navigation steps');
+  });
+
+  it('player icon button has aria-label reflecting action state', () => {
+    const wrapperPause = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'pause' },
+      global: { stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 } },
+    });
+    expect(
+      wrapperPause
+        .find('[data-testid="m-icon-button"]')
+        .attributes('aria-label'),
+    ).toBe('Pause');
+
+    const wrapperResume = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'resume' },
+      global: { stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 } },
+    });
+    expect(
+      wrapperResume
+        .find('[data-testid="m-icon-button"]')
+        .attributes('aria-label'),
+    ).toBe('Resume');
+  });
+
+  it('gives each step button an action-oriented aria-label', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 1 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const buttons = wrapper.findAll('.mc-navigation-indicator__button');
+    expect(buttons[0].attributes('aria-label')).toBe('Go to step 1 of 3');
+    expect(buttons[1].attributes('aria-label')).toBe('Current step, 2 of 3');
+    expect(buttons[2].attributes('aria-label')).toBe('Go to step 3 of 3');
+  });
+
+  it('sets aria-current="step" only on the active step button', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 1 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const buttons = wrapper.findAll('.mc-navigation-indicator__button');
+    expect(buttons[1].attributes('aria-current')).toBe('step');
+    expect(buttons[0].attributes('aria-current')).not.toBe('step');
+    expect(buttons[2].attributes('aria-current')).not.toBe('step');
+  });
+
+  it('emits "action" when the player button is clicked', async () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'resume' },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    await wrapper.find('[data-testid="m-icon-button"]').trigger('click');
+    expect(wrapper.emitted('action')).toBeTruthy();
+  });
 });