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

<template>
  <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";
import { usePageStore } from "../../stores/page";
import { computed } from "vue";

const { page } = storeToRefs(usePageStore());

const hasAlternatives = computed(() => {
  return page.value.designToLight.length > 1;
});

const grade = computed(() => {
  if (hasAlternatives.value) return "new";
  return page.value.designToLight[0].grades.global.letter;
});
</script>