style dtl-panel and dtl-btn

src/components/design-to-light/DTLButton.vue

@@ -1,5 +1,7 @@
 <template>
-  <button :data-new="hasAlternatives ? true : undefined">{{ content }}</button>
+  <button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + grade" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
+    <span lang="en" class="sr-only">Design to Light</span>
+  </button>
 </template>
 <script setup>
 import { storeToRefs } from "pinia";
@@ -12,20 +14,8 @@ const hasAlternatives = computed(() => {
   return page.value.designToLight.length > 1;
 });
 
-const content = computed(() => {
+const grade = computed(() => {
   if (hasAlternatives.value) return "new";
   return page.value.designToLight[0].grades.global.letter;
 });
 </script>
-
-<style scoped>
-button {
-  position: fixed;
-  min-width: 4rem;
-  min-height: 2rem;
-  right: 2rem;
-  bottom: 2rem;
-  background-color: #000;
-  color: #fff;
-}
-</style>

src/components/design-to-light/DTLPanel.vue

@@ -1,38 +1,77 @@
 <template>
-  <aside @click="preventClose($event)">
-    <button @click="emits('close')">X</button>
-    <ul class="tabs">
-      <li v-for="(proposal, index) in proposals">
-        <button @click="activeProposal = proposal">
-          {{ index === 0 ? "Proposition initiale" : "Alternative " + index }}
+  <aside id="dtl-panel" class="text-sm bg-black rounded-2xl" aria-labelledby="dtl-label" @click="preventClose($event)">
+    <header class="flex items-center | border-b pl-32 pr-16 py-8" data-icon="leaf" style="--column-gap:.5rem">
+      <h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
+      <button @click="emits('close')" class="btn btn--icon btn--transparent | ml-auto" data-icon="close">
+        <span class="sr-only">Fermer</span>
+      </button>
+    </header>
+    <nav class="tabs" role="tablist" tabindex="-1">
+      <button 
+        v-for="(proposal, index) in proposals"
+        @click="activeProposal = proposal"
+        role="tab"
+        :aria-selected="proposal.isActive"
+        aria-controls=""
+      >
+        {{ index === 0 ? "Proposition initiale" : "Alternative " + index }}
+      </button>
+    </nav>
+    <section class="overflow-y" tabindex="-1">
+      <div id="proposition" class="flex | bg-white-05 text-grey-200 px-32 py-16" style="--column-gap:1rem">
+        <h3 class="sr-only">Proposition</h3>
+        <img v-if="activeProposal.thumb" :src="activeProposal.thumb" alt="" width="72" height="72" loading="lazy" class="bg-white rounded-sm">
+        <p>Données basées sur la proposition <br>du {{ activeProposal.date }} <br>{{ activeProposal.stepLabel }}</p>
+      </div>
+      <div id="note-globale" class="px-32 py-16 border-b flow">
+        <h3>Note globale</h3>
+        <div class="flex" style="--column-gap:1rem">
+          <p :data-grade="activeProposal.grades.global.letter"><strong class="sr-only">{{ activeProposal.grades.global.letter }}</strong></p>
+          <div class="flex-1">
+            <p><strong class="text-md font-medium">{{ activeProposal.grades.global.mention }}</strong> <span class="text-white-50 ml-8">{{ activeProposal.grades.global.number }}/10</span></p>
+            <input type="range" min="0" max="10" :value="activeProposal.grades.global.number" disabled />
+            <p>{{ activeProposal.grades.global.comment }}</p>
+          </div>
+        </div>
+      </div>
+      <div id="positionnement" class="px-32 py-16 border-b flow">
+        <h3>Positionnement</h3>
+        <dl>
+          <dt id="design">Design</dt>
+          <dd><span class="sr-only">{{ activeProposal.grades.position.complexity }}</span></dd>
+          <dt id="poids">Poids</dt>
+          <dd><span class="sr-only">{{ activeProposal.grades.position.weight }}</span></dd>
+        </dl>
+        <button 
+          class="dot"
+          v-for="(proposal, index) in proposals"
+          @click="activeProposal = proposal"
+          :aria-selected="proposal.isActive"
+          :style="'--x:'+activeProposal.grades.position.complexity+';--y:'+activeProposal.grades.position.weight"
+          :title="index === 0 ? 'Proposition initiale' : 'Alternative ' + index"
+        >
+          <span class="sr-only">{{ index === 0 ? "Proposition initiale" : "Alternative " + index }}</span>
         </button>
-      </li>
-    </ul>
-    <img v-if="activeProposal.thumb" :src="activeProposal.thumb" alt="" />
-    <p>Données basées sur la proposition du {{ activeProposal.date }}</p>
-    <p>{{ activeProposal.stepLabel }}</p>
-
-    <h4>Note globale</h4>
-    <p>{{ activeProposal.grades.global.letter }}</p>
-    <p>{{ activeProposal.grades.global.mention }}</p>
-    <input type="range" :value="activeProposal.grades.global.number" disabled />
-    <p>{{ activeProposal.grades.global.comment }}</p>
-
-    <h4>Positionnement</h4>
-    {{ activeProposal.grades.position.complexity }}
-    {{ activeProposal.grades.position.weight }}
-
-    <h4>Indicateur des composants impliqués</h4>
-    <template
-      v-for="indicator in activeProposal.grades.indicators"
-      :key="indicator.value"
-    >
-      <label for="">{{ indicator.label }}</label>
-      <input type="range" :value="indicator.value" min="-5" max="+5" disabled />
-    </template>
-
-    <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
-    <button>Demander une expertise d'optimisation</button>
+      </div>
+      <div id="indicateur" class="px-32 py-16 border-b flow">
+        <h3>Indicateur des composants impliqués</h3>
+        <div class="grid">
+          <template
+            v-for="indicator in activeProposal.grades.indicators"
+            :key="indicator.value"
+          >
+            <div class="gauge" :data-value="indicator.value < 0 ? indicator.value : '+'+indicator.value">
+              <label :for="indicator.id" :style="'--value:'+indicator.value">{{ indicator.label }}</label>
+              <input :id="indicator.id" type="range" min="-5" max="5" orient="vertical" :value="indicator.value" disabled />
+            </div>
+          </template>
+        </div>
+      </div>
+      <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
+      <footer class="p-16">
+        <button class="btn btn--white w-full">Demander une expertise d’optimisation</button>
+      </footer>
+    </section>
   </aside>
 </template>
 <script setup>
@@ -75,21 +114,3 @@ function preventClose(event) {
   event.stopImmediatePropagation();
 }
 </script>
-
-<style scoped>
-aside {
-  position: fixed;
-  right: 1rem;
-  top: 1rem;
-  bottom: 1rem;
-  padding: 0.7rem;
-  width: 30vw;
-  border-radius: 1rem;
-  background-color: #191919;
-  color: #fff;
-}
-
-button {
-  color: #fff;
-}
-</style>