Update bubble-select to allow for labels

thunderbird · Sep 13, 2024 · 25dd971 · 25dd971
1 parent 2c60b04
commit 25dd971
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 19 deletions.
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue';
+import {
+  computed, inject, onMounted, ref,
+} from 'vue';
 import { storeToRefs } from 'pinia';
 import { DateFormatStrings, DEFAULT_SLOT_DURATION, SLOT_DURATION_OPTIONS } from '@/definitions';
 import { useI18n } from 'vue-i18n';
@@ -136,7 +138,9 @@ onMounted(async () => {
         <text-input type="time" name="startTime" v-model="schedule.startTime" required>{{ t('label.startTime') }}</text-input>
         <text-input type="time" name="endTime" v-model="schedule.endTime" required>{{ t('label.endTime') }}</text-input>
         </div>
-        <bubble-select class="bubbleSelect" :options="scheduleDayOptions" v-model="schedule.days" />
+        <bubble-select class="bubbleSelect" :options="scheduleDayOptions" v-model="schedule.days" :required="true">
+          {{ t('label.availableDays') }}
+        </bubble-select>
       </div>
       <div class="column">
         <select-input name="calendar" v-model="schedule.calendar" :options="calendarOptions" required>

diff --git a/frontend/src/tbpro/elements/BubbleSelect.vue b/frontend/src/tbpro/elements/BubbleSelect.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { SelectOption } from "@/models";
+import { SelectOption } from '@/models';
 
 // component properties
 interface Props {
   options: SelectOption[];
-};
-defineProps<Props>();
+  required: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  required: false,
+});
 
 const model = defineModel<number[]>({ default: [] });
 
@@ -35,27 +39,54 @@ const toggleBubble = (option: SelectOption) => {
 </script>
 
 <template>
-  <ul>
-    <li v-for="option in options" :key="option.value">
-      <button
-        :class="{'selected': model.indexOf(option.value) > -1}"
-        type="button"
-        @click="() => toggleBubble(option)"
-      >
-        {{ option.label }}
-      </button>
-    </li>
-  </ul>
+  <div class="wrapper">
+    <label>
+      <span class="label">
+        <slot/>
+        <span v-if="required && model?.length === 0" class="required">*</span>
+      </span>
+    </label>
+    <ul class="bubble-list">
+      <li v-for="option in options" :key="option.value">
+        <button
+          class="tbpro-bubble"
+          :aria-pressed="model.indexOf(option.value) > -1"
+          :class="{'selected': model.indexOf(option.value) > -1}"
+          :title="option.fullLabel ?? option.value"
+          type="button"
+          @click="() => toggleBubble(option)"
+        >
+          {{ option.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped>
-ul {
+.wrapper {
   display: flex;
-  gap: 0.625rem;
+  flex-direction: column;
+  color: var(--colour-ti-base);
+  font-family: 'Inter', 'sans-serif';
+  font-size: var(--txt-input);
+  line-height: var(--line-height-input);
+  font-weight: 400;
+}
+
+.bubble-list {
+  padding: 0;
+  display: flex;
+  gap: 0.25rem;
   list-style: none;
 }
 
-button {
+.label {
+  width: 100%;
+  font-weight: 600;
+}
+
+.tbpro-bubble {
   transition: all 250ms ease-out;
 
   display: flex;
@@ -76,4 +107,7 @@ button {
   border-color: var(--colour-service-primary-pressed);
   color: var(--colour-neutral-base);
 }
+.required {
+  color: var(--colour-ti-critical);
+}
 </style>