@mozaic-ds/vue 2.16.0 → 2.17.0

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