@mozaic-ds/vue 2.16.0 → 2.17.0

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',
   };
 });
 

package/src/components/statusmessage/README.md

@@ -8,6 +8,8 @@ A Status Message is a compact component that combines an icon and concise text t
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `status` | Allows to define the status message style. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` `"inprogress"` | `"info"` |
+| `appearance` | Allows to define the status message appearance.
+The accent status is used to highlight a specific message. | `"standard"` `"accent"` | `"standard"` |
 | `label*` | Label of the status message. | `string` | - |
 
 ## Dependencies

package/src/components/statusnotification/MStatusNotification.figma.ts

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

package/src/components/stepperbottombar/MStepperBottomBar.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MStepperBottomBar
+ * Links Figma Stepper bottom bar (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=10726-18528',
+  {
+    props: {
+      cancel: figma.boolean('Has cancel action'),
+    },
+    example: ({ cancel }) =>
+      html`<script setup>
+        import { MStepperBottomBar } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperBottomBar cancel=${cancel} :steps="3" />`,
+  },
+);

package/src/components/steppercompact/MStepperCompact.figma.ts

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MStepperCompact
+ * Links Figma Stepper (Compact) (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=13297-24864',
+  {
+    props: {
+      label: figma.string('Step label'),
+      description: figma.string('Next step label'),
+    },
+    example: ({ label, description }) =>
+      html`<script setup>
+        import { MStepperCompact } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperCompact label=${label} :description=${description} :value="1" :max-steps="4"></MStepperCompact>`,
+  },
+);

package/src/components/stepperinline/MStepperInline.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MStepperInline
+ * Links Figma Stepper (Inline) 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=13050-10371',
+  {
+    props: {
+      showStep03: figma.boolean('Show Step 03'),
+      showStep04: figma.boolean('Show Step 04'),
+      showStep05: figma.boolean('Show Step 05'),
+      showStep06: figma.boolean('Show Step 06'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MStepperInline } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperInline :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperInline>`,
+  },
+);

package/src/components/stepperstacked/MStepperStacked.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MStepperStacked
+ * Links Figma Stepper (Stacked) (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=13179-6447',
+  {
+    props: {
+      showStep03: figma.boolean('Show Step 03'),
+      showStep04: figma.boolean('Show Step 04'),
+      showStep05: figma.boolean('Show Step 05'),
+      showStep06: figma.boolean('Show Step 06'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MStepperStacked } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperStacked :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperStacked>`,
+  },
+);

package/src/components/tabs/MTabs.figma.ts

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MTabs
+ * Links Figma Tabs (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-11474',
+  {
+    props: {
+      divider: figma.boolean('Show divider'),
+      centered: figma.enum('Centered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ divider, centered }) =>
+      html`<script setup>
+        import { MTabs } from '@mozaic-ds/vue';
+      </script>
+
+      <MTabs
+        :divider=${divider}
+        centered=${centered}
+        model-value="label1"
+        :tabs="[
+          { id: 'label1', label: 'Label' },
+          { id: 'label2', label: 'Label' },
+          { id: 'label3', label: 'Label' },
+        ]"
+      ></MTabs>`,
+  },
+);

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>`,
+  },
+);