@mozaic-ds/vue/src/components/starrating/MStarRating.figma.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

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