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

<template>
  <button :data-new="hasAlternatives ? true : undefined">{{ content }}</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 content = 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>