@mozaic-ds/vue 2.15.0 → 2.17.0

package/src/components/pincode/MPincode.figma.ts

@@ -0,0 +1,41 @@
+/**
+ * Code Connect mapping for MPincode
+ * Links Figma Pincode input (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=12443-35984',
+  {
+    props: {
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Disabled: false,
+        Hovered: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MPincode } from '@mozaic-ds/vue';
+      </script>
+
+      <MPincode
+        id="pincode-id"
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        aria-label="Enter your code"
+      ></MPincode>`,
+  },
+);

package/src/components/pincode/MPincode.spec.ts

@@ -93,10 +93,7 @@ describe('MPincode component', () => {
       },
     });
 
-    const inputs = wrapper.findAll('input');
-    for (const input of inputs) {
-      expect(input.classes()).toContain('is-invalid');
-    }
+    expect(wrapper.classes()).toContain('is-invalid');
   });
 
   it('disables inputs when disabled is true', () => {

package/src/components/pincode/MPincode.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="mc-pincode-input" @paste="onPaste">
+  <div
+    class="mc-pincode-input"
+    :class="{
+      'mc-pincode-input': true,
+      'mc-pincode-input__disabled': disabled,
+      'mc-pincode-input__readonly': readonly,
+      'is-invalid': isInvalid,
+    }"
+    @paste="onPaste"
+  >
     <input
       v-for="(digit, index) in otp"
       :key="index"
@@ -12,7 +21,6 @@
       autocomplete="one-time-code"
       :name="name || `pincode-${id}`"
       class="mc-pincode-input__control"
-      :class="classObject"
       :disabled="disabled"
       :readonly="readonly"
       :value="digit"
@@ -25,13 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-  type ComponentPublicInstance,
-} from 'vue';
+import { ref, watch, nextTick, type ComponentPublicInstance } from 'vue';
 /**
  * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<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).
  */
@@ -71,12 +73,6 @@ const props = withDefaults(
   },
 );
 
-const classObject = computed(() => {
-  return {
-    'is-invalid': props.isInvalid,
-  };
-});
-
 const emit = defineEmits<{
   /**
    * Emits when the pincode value changes, updating the modelValue prop.

package/src/components/popover/MPopover.figma.ts

@@ -0,0 +1,42 @@
+/**
+ * Code Connect mapping for MPopover
+ * Links Figma Popover (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=9680-7268',
+  {
+    props: {
+      appearance: figma.enum('Appareance', {
+        Standard: 'standard',
+        Inverse: 'inverse',
+      }),
+      size: figma.enum('Size', {
+        'S (default)': 's',
+        M: 'm',
+        L: 'l',
+      }),
+      pointer: figma.boolean('Has pointer'),
+      closable: figma.boolean('Is closable'),
+    },
+    example: ({ appearance, size, pointer, closable }) =>
+      html`<script setup>
+        import { MPopover, MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MPopover
+        id="popover-id"
+        title="Popover title"
+        description="Popover description"
+        :pointer=${pointer}
+        :closable=${closable}
+        appearance=${appearance}
+        size=${size}
+      >
+        <template #activator="{ id }">
+          <MButton :popovertarget="id">Open</MButton>
+        </template>
+      </MPopover>`,
+  },
+);

package/src/components/quantityselector/MQuantitySelector.figma.ts

@@ -0,0 +1,50 @@
+/**
+ * Code Connect mapping for MQuantitySelector
+ * Links Figma _quantity selector / 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-29697',
+  {
+    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,
+      }),
+    },
+    example: ({ size, disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MQuantitySelector } from '@mozaic-ds/vue';
+      </script>
+
+      <MQuantitySelector
+        id="quantity-selector-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :model-value="1"
+        :min="0"
+        :max="10"
+      ></MQuantitySelector>`,
+  },
+);

package/src/components/radio/MRadio.figma.ts

@@ -0,0 +1,40 @@
+/**
+ * Code Connect mapping for MRadio
+ * Links Figma Radio button (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-29235',
+  {
+    props: {
+      modelValue: figma.enum('Is checked', {
+        True: true,
+        False: false,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      isInvalid: figma.enum('is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ modelValue, disabled, isInvalid }) =>
+      html`<script setup>
+        import { MRadio } from '@mozaic-ds/vue';
+      </script>
+
+      <MRadio
+        id="radio-id"
+        label="Radio button Label"
+        :model-value=${modelValue}
+        disabled=${disabled}
+        :is-invalid=${isInvalid}
+      ></MRadio>`,
+  },
+);

package/src/components/radiogroup/MRadioGroup.figma.ts

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

package/src/components/segmentedcontrol/MSegmentedControl.figma.ts

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MSegmentedControl
+ * Links Figma Segmented control (ADS2) to @mozaic-ds/vue
+ * Props from figma_get_component (Figma Console MCP) + MSegmentedControl.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=6-26997',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+      }),
+      full: figma.enum('Full width', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ size, full }) =>
+      html`<script setup>
+        import { MSegmentedControl } from '@mozaic-ds/vue';
+      </script>
+
+      <MSegmentedControl
+        size=${size}
+        full=${full}
+        :segments="[{ id: 'label1', label: 'Label' }, { id: 'label2', label: 'Label' }]"
+        model-value="label1"
+      ></MSegmentedControl>`,
+  },
+);

package/src/components/select/MSelect.figma.ts

@@ -0,0 +1,49 @@
+/**
+ * Code Connect mapping for MSelect
+ * Links Figma _select / 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=4924-17972',
+  {
+    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,
+      }),
+    },
+    example: ({ size, disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MSelect } from '@mozaic-ds/vue';
+      </script>
+
+      <MSelect
+        id="select-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        placeholder="Choose an option"
+        :options="[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]"
+      ></MSelect>`,
+  },
+);

package/src/components/sidebar/MSidebar.figma.ts

@@ -0,0 +1,28 @@
+/**
+ * Code Connect mapping for MSidebar
+ * Links Figma Sidebar (desktop only) (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=11697-6444',
+  {
+    props: {
+      modelValue: figma.enum('is expanded', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ modelValue }) =>
+      html`<script setup>
+        import { MSidebar } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebar :model-value=${modelValue}>
+        <template #header>Header</template>
+        <template #shortcuts>Shortcuts</template>
+        <template #nav>Nav items</template>
+        <template #footer>Footer</template>
+      </MSidebar>`,
+  },
+);

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.figma.ts

@@ -0,0 +1,19 @@
+/**
+ * Code Connect mapping for MSidebarExpandableItem
+ * Links Figma _sidebar / section menu item (multiple levels) 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=11697-6356',
+  {
+    example: () =>
+      html`<script setup>
+        import { MSidebarExpandableItem, MSidebarNavItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarExpandableItem label="Section" menu-label="Section">
+        <MSidebarNavItem label="Sub item" />
+      </MSidebarExpandableItem>`,
+  },
+);

package/src/components/sidebarfooter/MSidebarFooter.figma.ts

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MSidebarFooter
+ * Links Figma _sidebar / footer 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=11880-28442',
+  {
+    props: {
+      expendable: figma.boolean('Is expandable'),
+      hasProfileInfo: figma.boolean('Has profile info'),
+    },
+    example: ({ expendable }) =>
+      html`<script setup>
+        import { MSidebarFooter } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarFooter title="User name" subtitle="user@example.com" :expendable=${expendable} />`,
+  },
+);

package/src/components/sidebarheader/MSidebarHeader.figma.ts

@@ -0,0 +1,18 @@
+/**
+ * Code Connect mapping for MSidebarHeader
+ * Links Figma _sidebar / header 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=11910-12842',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MSidebarHeader } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarHeader title="App name" logo="/logo.png" />`,
+  },
+);

package/src/components/sidebarnavitem/MSidebarNavItem.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MSidebarNavItem
+ * Links Figma _sidebar / section menu item (single level) 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=18213-20397',
+  {
+    props: {
+      active: figma.enum('Is selected', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ active }) =>
+      html`<script setup>
+        import { MSidebarNavItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarNavItem label="Menu item" active=${active} />`,
+  },
+);

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MSidebarShortcutItem
+ * Links Figma _sidebar / shortcut 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=11697-6376',
+  {
+    props: {
+      label: figma.string('Text'),
+    },
+    example: ({ label }) =>
+      html`<script setup>
+        import { MSidebarShortcutItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarShortcutItem label=${label} href="#" />`,
+  },
+);

package/src/components/starrating/MStarRating.figma.ts

@@ -0,0 +1,35 @@
+/**
+ * Code Connect mapping for MStarRating
+ * Links Figma Star Rating to @mozaic-ds/vue
+ * Figma component (node 5:14389) exposes: Type, Size, Text only.
+ */
+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-14389',
+  {
+    props: {
+      text: figma.string('Text'),
+      size: figma.enum('Size', {
+        'S (20px)': 's',
+        'M (24px)': 'm',
+        'L (32px)': 'l',
+      }),
+      type: figma.enum('Type', {
+        'Stars only (read-only or as input)': 'stars',
+        'Additional info': 'additionalInfo',
+        Link: 'link',
+      }),
+    },
+    example: ({ text, size }) =>
+      html`<script setup>
+        import { MStarRating } from '@mozaic-ds/vue';
+      </script>
+
+      <MStarRating
+        :model-value="3.5"
+        size=${size}
+        text=${text}
+      ></MStarRating>`,
+  },
+);

package/src/components/statusbadge/MStatusBadge.figma.ts

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MStatusBadge
+ * Links Figma Status badge (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-21619',
+  {
+    props: {
+      label: figma.string('Label'),
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+      }),
+    },
+    example: ({ label, status }) =>
+      html`<script setup>
+        import { MStatusBadge } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusBadge label=${label} status=${status}></MStatusBadge>`,
+  },
+);

package/src/components/statusdot/MStatusDot.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MStatusDot
+ * Links Figma Status dot (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-21635',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+      }),
+      size: figma.enum('Size', {
+        'S (4px)': 's',
+        'M (8px)': 'm',
+        'L (16px)': 'l',
+      }),
+    },
+    example: ({ status, size }) =>
+      html`<script setup>
+        import { MStatusDot } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusDot status=${status} size=${size}></MStatusDot>`,
+  },
+);

package/src/components/statusmessage/MStatusMessage.figma.ts

@@ -0,0 +1,28 @@
+/**
+ * Code Connect mapping for MStatusMessage
+ * Links Figma Status message 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=20807-13948',
+  {
+    props: {
+      label: figma.string('Status message'),
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+        'In progress': 'inprogress',
+      }),
+    },
+    example: ({ label, status }) =>
+      html`<script setup>
+        import { MStatusMessage } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusMessage label=${label} status=${status}></MStatusMessage>`,
+  },
+);

package/src/components/statusmessage/MStatusMessage.spec.ts

@@ -20,6 +20,21 @@ describe('MStatusMessage.vue', () => {
     );
   });
 
+  it('adds the accent modifier class when appearance is accent', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { label: 'Accent', appearance: 'accent' },
+    });
+    expect(wrapper.classes()).toContain('mc-status-message--accent');
+  });
+
+  it('does NOT add the accent modifier class when appearance is standard', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { label: 'Standard', appearance: 'standard' },
+    });
+    expect(wrapper.classes()).not.toContain('mc-status-message--accent');
+    expect(wrapper.classes()).not.toContain('mc-status-message--standard');
+  });
+
   it('uses the info icon by default', () => {
     const wrapper = mount(MStatusMessage, {
       props: { label: 'Info message' },

package/src/components/statusmessage/MStatusMessage.stories.ts

@@ -50,3 +50,7 @@ export const Neutral: Story = {
 export const InProgress: Story = {
   args: { status: 'inprogress' },
 };
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};

package/src/components/statusmessage/MStatusMessage.vue

@@ -35,6 +35,11 @@ const props = withDefaults(
       | 'error'
       | 'neutral'
       | 'inprogress';
+    /**
+     * Allows to define the status message appearance.
+     * The accent status is used to highlight a specific message.
+     */
+    appearance?: 'standard' | 'accent';
     /**
      * Label of the status message.
      */
@@ -42,6 +47,7 @@ const props = withDefaults(
   }>(),
   {
     status: 'info',
+    appearance: 'standard',
   },
 );
 
@@ -49,6 +55,7 @@ const classObject = computed(() => {
   return {
     [`mc-status-message--${props.status}`]:
       props.status && props.status != 'info',
+    [`mc-status-message--${props.appearance}`]: props.appearance != 'standard',
   };
 });