From 7bb8910a183d549b34709d4a44777d0255b769e1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 22 Dec 2022 11:09:32 +0100
Subject: [PATCH] Add checkbox group component, update checkbox component

---
 client/src/components/ui/ItCheckbox.vue      | 11 ++++--
 client/src/components/ui/ItCheckboxGroup.vue | 36 ++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/ui/ItCheckboxGroup.vue

diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue
index d729ed8d..906e9094 100644
--- a/client/src/components/ui/ItCheckbox.vue
+++ b/client/src/components/ui/ItCheckbox.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import log from "loglevel";
+
 interface Props {
   checked?: boolean;
   disabled?: boolean;
+  label?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   checked: false,
   disabled: false,
+  label: undefined,
 });
 
 const emit = defineEmits(["toggle"]);
@@ -33,10 +36,10 @@ const input = (e: Event) => {
       'opacity-50': disabled,
       'cursor-not-allowed': disabled,
     }"
-    class="w-8 h-8 cursor-pointer"
+    class="cursor-pointer inline-flex grow"
   >
     <label
-      class="w-8 h-8 block flex-none bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked"
+      class="block bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked bg-no-repeat pl-8 h-8 flex items-center"
       :class="
         checked
           ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'
@@ -55,6 +58,10 @@ const input = (e: Event) => {
         @keydown="keydown"
         @input="input"
       />
+
+      <span v-if="label" class="ml-4">
+        {{ label }}
+      </span>
     </label>
   </div>
 </template>
diff --git a/client/src/components/ui/ItCheckboxGroup.vue b/client/src/components/ui/ItCheckboxGroup.vue
new file mode 100644
index 00000000..aa5833ad
--- /dev/null
+++ b/client/src/components/ui/ItCheckboxGroup.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    :model-value="modelValue"
+    class="border p-12"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
+    <div class="flex flex-col justify-start align-items-start justify-items-start">
+      <ItCheckbox
+        v-for="item in items"
+        :key="item.id"
+        :label="item.name"
+        class="mb-4"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RadioItem } from "@/components/learningPath/feedback.types";
+
+import ItCheckbox from "@/components/ui/ItCheckbox.vue";
+import {
+  RadioGroup,
+  // RadioGroupDescription,
+  RadioGroupLabel,
+  RadioGroupOption,
+} from "@headlessui/vue";
+
+defineProps<{
+  modelValue: any;
+  items: RadioItem<any>[];
+  label: string;
+}>();
+defineEmits(["update:modelValue"]);
+</script>