From 03fe458248a8955d4846d4bacf4348a04e2f8783 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 11:26:04 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui)=20:=20composant=20partag=C3=A9=20Malio?=
 =?UTF-8?q?RequiredMark=20(ast=C3=A9risque=20champ=20obligatoire)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../malio/shared/RequiredMark.test.ts         | 20 +++++++++++++++++++
 app/components/malio/shared/RequiredMark.vue  | 11 ++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 app/components/malio/shared/RequiredMark.test.ts
 create mode 100644 app/components/malio/shared/RequiredMark.vue

diff --git a/app/components/malio/shared/RequiredMark.test.ts b/app/components/malio/shared/RequiredMark.test.ts
new file mode 100644
index 0000000..69ad5c1
--- /dev/null
+++ b/app/components/malio/shared/RequiredMark.test.ts
@@ -0,0 +1,20 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import RequiredMark from './RequiredMark.vue'
+
+describe('MalioRequiredMark', () => {
+  it('rend un astérisque', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.text()).toBe('*')
+  })
+
+  it('est masqué pour les technologies d\'assistance', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('utilise le token de couleur danger', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').classes()).toContain('text-m-danger')
+  })
+})
diff --git a/app/components/malio/shared/RequiredMark.vue b/app/components/malio/shared/RequiredMark.vue
new file mode 100644
index 0000000..c61d5e9
--- /dev/null
+++ b/app/components/malio/shared/RequiredMark.vue
@@ -0,0 +1,11 @@
+<template>
+  <span
+    data-test="required-mark"
+    aria-hidden="true"
+    class="ml-0.5 select-none text-m-danger"
+  >*</span>
+</template>
+
+<script setup lang="ts">
+defineOptions({name: 'MalioRequiredMark', inheritAttrs: false})
+</script>