@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/tabs/Mtabs.spec.ts

@@ -161,6 +161,168 @@ describe('MTabs.vue', () => {
     expect(wrapper.emitted('update:modelValue')!.length).toBe(1);
   });
 
+  it('selected tab has tabindex="0", others have tabindex="-1"', () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '2' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('tabindex')).toBe('-1');
+    expect(buttons[1].attributes('tabindex')).toBe('0');
+    expect(buttons[2].attributes('tabindex')).toBe('-1');
+  });
+
+  it('falls back to first enabled tab for tabindex when selected tab is disabled', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1', disabled: true },
+          { id: '2', label: 'Tab 2' },
+          { id: '3', label: 'Tab 3' },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('tabindex')).toBe('-1');
+    expect(buttons[1].attributes('tabindex')).toBe('0');
+    expect(buttons[2].attributes('tabindex')).toBe('-1');
+  });
+
+  it('falls back to first enabled tab for tabindex when modelValue is invalid', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        modelValue: 'unknown-id',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('tabindex')).toBe('0');
+    expect(buttons[1].attributes('tabindex')).toBe('-1');
+    expect(buttons[2].attributes('tabindex')).toBe('-1');
+  });
+
+  it('sets disabled and aria-disabled attributes on disabled tabs', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1' },
+          { id: '2', label: 'Tab 2', disabled: true },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('aria-disabled')).toBeUndefined();
+    expect(buttons[1].attributes('aria-disabled')).toBe('true');
+  });
+
+  it('ArrowRight moves selection to the next tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '1' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2']);
+  });
+
+  it('ArrowLeft moves selection to the previous tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '2' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[1].trigger('keydown', { key: 'ArrowLeft' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1']);
+  });
+
+  it('ArrowRight wraps from last to first tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '3' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[2].trigger('keydown', { key: 'ArrowRight' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1']);
+  });
+
+  it('Home moves selection to the first tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '3' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[2].trigger('keydown', { key: 'Home' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1']);
+  });
+
+  it('End moves selection to the last tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '1' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'End' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3']);
+  });
+
+  it('does not react to ArrowUp and ArrowDown keys', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '1' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowDown' });
+    await buttons[0].trigger('keydown', { key: 'ArrowUp' });
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+  });
+
+  it('ArrowRight skips disabled tabs', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1' },
+          { id: '2', label: 'Tab 2', disabled: true },
+          { id: '3', label: 'Tab 3' },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3']);
+  });
+
+  it('does not emit on keydown when all tabs are disabled', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1', disabled: true },
+          { id: '2', label: 'Tab 2', disabled: true },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+    await buttons[0].trigger('keydown', { key: 'Home' });
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+  });
+
   it('renders icon component when icon prop is provided', () => {
     const DummyIcon = markRaw(
       defineComponent({

package/src/components/tag/MTag.figma.ts

@@ -0,0 +1,26 @@
+/**
+ * Code Connect mapping for MTag
+ * Links Figma Tag 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=5730-15694',
+  {
+    props: {
+      type: figma.enum('Type', {
+        'Informative (Read-only)': 'informative',
+        'Interactive (as link or button)': 'interactive',
+        Contextualised: 'contextualised',
+        Removable: 'removable',
+        Selectable: 'selectable',
+      }),
+    },
+    example: ({ type }) =>
+      html`<script setup>
+        import { MTag } from '@mozaic-ds/vue';
+      </script>
+
+      <MTag type=${type} label="Tag label"></MTag>`,
+  },
+);

package/src/components/tag/MTag.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
+import { FeelingSatisfied20 } from '@mozaic-ds/icons-vue';
 import MTag from './MTag.vue';
 
 const meta: Meta<typeof MTag> = {
@@ -17,7 +18,7 @@ const meta: Meta<typeof MTag> = {
     label: 'Tag label',
   },
   render: (args) => ({
-    components: { MTag },
+    components: { MTag, FeelingSatisfied20 },
     setup() {
       const handleUpdate = action('update:modelValue');
       const handleRemoveTag = action('remove-tag');
@@ -25,11 +26,14 @@ const meta: Meta<typeof MTag> = {
       return { args, handleUpdate, handleRemoveTag };
     },
     template: `
-      <MTag 
+      <MTag
         v-bind="args"
         @update:modelValue="handleUpdate"
         @remove-tag="handleRemoveTag"
-      ></MTag>
+        v-model="args.modelValue"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+      </MTag>
     `,
   }),
 };
@@ -42,6 +46,12 @@ export const Size: Story = {
   args: { size: 's' },
 };
 
+export const Icon: Story = {
+  args: {
+    icon: '<FeelingSatisfied20/>',
+  },
+};
+
 export const Interactive: Story = {
   args: { type: 'interactive' },
 };

package/src/components/tag/MTag.vue

@@ -17,6 +17,7 @@
       "
       v-bind="$attrs"
     />
+    <slot v-if="!modelValue" name="icon" />
     <span class="mc-tag__label">{{ label }}</span>
   </label>
 
@@ -28,6 +29,7 @@
     :disabled="disabled"
     v-bind="$attrs"
   >
+    <slot name="icon" />
     <span class="mc-tag__label">{{ label }}</span>
   </button>
 
@@ -66,12 +68,13 @@
 
   <!-- informative -->
   <span v-else class="mc-tag" :class="classObject" v-bind="$attrs">
+    <slot name="icon" />
     <span class="mc-tag__label">{{ label }}</span>
   </span>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type VNode } from 'vue';
 import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
@@ -128,6 +131,13 @@ const props = withDefaults(
   },
 );
 
+defineSlots<{
+  /**
+   * Use this slot to insert an icon in the tag.
+   */
+  icon?: VNode;
+}>();
+
 const classObject = computed(() => {
   return {
     [`mc-tag-${props.type}`]: props.type && props.type != 'informative',

package/src/components/tag/README.md

@@ -17,6 +17,12 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | `contextualisedNumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
 | `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | `"Remove"` |
 
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon in the tag. |
+
 ## Events
 
 | Name | Description | Type |

package/src/components/textarea/MTextArea.figma.ts

@@ -0,0 +1,28 @@
+/**
+ * Code Connect mapping for MTextArea
+ * Links Figma _text area / base 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=4544-28487',
+  {
+    props: {
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ isInvalid }) =>
+      html`<script setup>
+        import { MTextArea } from '@mozaic-ds/vue';
+      </script>
+
+      <MTextArea
+        id="textarea-id"
+        :is-invalid=${isInvalid}
+        placeholder="Placeholder"
+        model-value=""
+      ></MTextArea>`,
+  },
+);

package/src/components/textinput/MTextInput.figma.ts

@@ -0,0 +1,51 @@
+/**
+ * Code Connect mapping for MTextInput
+ * Links Figma _text input / base 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-29794',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        Disabled: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+      isClearable: figma.boolean('Is clearable'),
+    },
+    example: ({ size, disabled, readonly, isInvalid, isClearable }) =>
+      html`<script setup>
+        import { MTextInput } from '@mozaic-ds/vue';
+      </script>
+
+      <MTextInput
+        id="text-input-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :is-clearable=${isClearable}
+        placeholder="Placeholder"
+        model-value=""
+      ></MTextInput>`,
+  },
+);

package/src/components/tile/MTile.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MTile
+ * Links Figma Tile (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=156-18755',
+  {
+    props: {
+      type: figma.enum('Type', {
+        'Base (as container)': 'base',
+        'Clickable (as navigation)': 'clickable',
+        'Expandable (as accordion)': 'expandable',
+        'Selectable (as option)': 'selectable',
+      }),
+      bordered: figma.enum('Is bordered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ bordered }) =>
+      html`<script setup>
+        import { MTile } from '@mozaic-ds/vue';
+      </script>
+
+      <MTile bordered=${bordered}>
+        <p>Tile content</p>
+      </MTile>`,
+  },
+);

package/src/components/tileclickable/MTileClickable.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MTileClickable
+ * Links Figma clickable tile (as navigation) 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=156-18803',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Inverse: 'inverse',
+      }),
+      iconPosition: figma.enum('Icon position', {
+        Bottom: 'bottom',
+        Right: 'right',
+      }),
+    },
+    example: ({ appearance, iconPosition }) =>
+      html`<script setup>
+        import { MTileClickable } from '@mozaic-ds/vue';
+      </script>
+
+      <MTileClickable appearance=${appearance} icon-position=${iconPosition}>
+        <p>Tile content</p>
+        <template #icon>Action</template>
+      </MTileClickable>`,
+  },
+);

package/src/components/tileexpandable/MTileExpandable.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MTileExpandable
+ * Links Figma expandable tile (as accordion) 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=156-18764',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+      }),
+      trigger: figma.enum('Triggering event', {
+        Container: 'container',
+        Icon: 'icon',
+        Button: 'button',
+      }),
+    },
+    example: ({ appearance, trigger }) =>
+      html`<script setup>
+        import { MTileExpandable } from '@mozaic-ds/vue';
+      </script>
+
+      <MTileExpandable appearance=${appearance} trigger=${trigger}>
+        <p>Tile content</p>
+        <template #details>Expandable details</template>
+      </MTileExpandable>`,
+  },
+);

package/src/components/tileselectable/MTileSelectable.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MTileSelectable
+ * Links Figma selectable tile (as option) 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=156-18948',
+  {
+    props: {
+      inputPosition: figma.enum('Input on the left', {
+        False: 'right',
+        True: 'left',
+      }),
+      centered: figma.enum('Centered input', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ inputPosition, centered }) =>
+      html`<script setup>
+        import { MTileSelectable } from '@mozaic-ds/vue';
+      </script>
+
+      <MTileSelectable v-model="selected" input-position=${inputPosition} :centered=${centered}>
+        <p>Tile content</p>
+      </MTileSelectable>`,
+  },
+);

package/src/components/toaster/MToaster.figma.ts

@@ -0,0 +1,25 @@
+/**
+ * Code Connect mapping for MToaster
+ * Links Figma Toaster (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=12131-26443',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+      }),
+    },
+    example: ({ status }) =>
+      html`<script setup>
+        import { MToaster } from '@mozaic-ds/vue';
+      </script>
+
+      <MToaster description="Notification message" status=${status} />`,
+  },
+);

package/src/components/toggle/MToggle.figma.ts

@@ -0,0 +1,39 @@
+/**
+ * Code Connect mapping for MToggle
+ * Links Figma Toggle (stand-alone) (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-29289',
+  {
+    props: {
+      modelValue: figma.enum('Is checked', {
+        True: true,
+        False: false,
+      }),
+      size: figma.enum('Size', {
+        'S (default)': 's',
+        M: 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+      }),
+    },
+    example: ({ modelValue, size, disabled }) =>
+      html`<script setup>
+        import { MToggle } from '@mozaic-ds/vue';
+      </script>
+
+      <MToggle
+        id="toggle-id"
+        label="Toggle Label"
+        :model-value=${modelValue}
+        size=${size}
+        disabled=${disabled}
+      ></MToggle>`,
+  },
+);

package/src/components/togglegroup/MToggleGroup.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MToggleGroup
+ * Links Figma Toggle group (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-29266',
+  {
+    props: {
+      inline: figma.enum('Layout', {
+        'Stacked (default)': false,
+        Inline: true,
+      }),
+    },
+    example: ({ inline }) =>
+      html`<script setup>
+        import { MToggleGroup } from '@mozaic-ds/vue';
+      </script>
+
+      <MToggleGroup
+        name="group"
+        :options="[
+          { id: '1', label: 'Option 1', value: '1' },
+          { id: '2', label: 'Option 2', value: '2' },
+        ]"
+        inline=${inline}
+      />`,
+  },
+);

package/src/components/tooltip/MTooltip.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MTooltip
+ * Links Figma Tooltip (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-6487',
+  {
+    props: {
+      text: figma.string('Text'),
+      position: figma.enum('Position', {
+        Top: 'top',
+        Bottom: 'bottom',
+        Left: 'left',
+        Right: 'right',
+      }),
+      pointer: figma.boolean('Pointer'),
+    },
+    example: ({ text, position, pointer }) =>
+      html`<script setup>
+        import { MTooltip } from '@mozaic-ds/vue';
+      </script>
+
+      <MTooltip id="tooltip-id" text=${text} position=${position} :pointer=${pointer}>
+        <span>Hover me</span>
+      </MTooltip>`,
+  },
+);

package/src/main.ts

@@ -59,6 +59,7 @@ export { default as MStatusNotification } from './components/statusnotification/
 export { default as MStepperBottomBar } from './components/stepperbottombar/MStepperBottomBar.vue';
 export { default as MStepperCompact } from './components/steppercompact/MStepperCompact.vue';
 export { default as MStepperInline } from './components/stepperinline/MStepperInline.vue';
+export { default as MStepperStacked } from './components/stepperstacked/MStepperStacked.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';