From 8143bc3a7536ca3759f2471fbe7d63e091893287 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Fri, 4 Oct 2024 10:38:49 +0200
Subject: [PATCH 01/14] feat: init checkbox components

---
 .../components/input/CheckboxGroup.vue        | 64 +++++++++++++++++++
 .../components/input/CheckboxIcon.vue         | 20 ++++++
 .../pages/input/Checkbox.story.vue            | 15 +++++
 3 files changed, 99 insertions(+)
 create mode 100644 apps/tailwind-components/components/input/CheckboxGroup.vue
 create mode 100644 apps/tailwind-components/components/input/CheckboxIcon.vue

diff --git a/apps/tailwind-components/components/input/CheckboxGroup.vue b/apps/tailwind-components/components/input/CheckboxGroup.vue
new file mode 100644
index 0000000000..032d117f5f
--- /dev/null
+++ b/apps/tailwind-components/components/input/CheckboxGroup.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="`${id}-checkbox-group`">
+    <div
+      class="flex justify-start align-center"
+      v-for="option in checkboxOptions"
+      :key="option.value"
+    >
+      <InputCheckbox
+        :id="`${id}-checkbox-group-${option.value}`"
+        class="sr-only"
+        :name="id"
+        :value="option.value"
+        v-model="modelValue"
+        :checked="option.value === modelValue"
+      />
+      <InputCheckboxIcon :checked="option.value === modelValue" />
+      <InputLabel
+        :for="`${id}-checkbox-group-${option.value}`"
+        class="hover:cursor-pointer"
+      >
+        <template v-if="option.label">
+          {{ option.label }}
+        </template>
+        <template v-else>
+          {{ option.value }}
+        </template>
+      </InputLabel>
+    </div>
+    <div class="mt-2" v-if="showClearButton">
+      <button
+        type="reset"
+        :id="`${id}-checkbox-group-clear`"
+        :form="`${id}-checkbox-group`"
+        @click.prevent="resetModelValue"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface checkboxDataIF {
+  value: string;
+  label?: string;
+  checked?: boolean | undefined;
+}
+withDefaults(
+  defineProps<{
+    id: string;
+    checkboxOptions: checkboxDataIF[];
+    showClearButton?: boolean;
+  }>(),
+  {
+    showClearButton: false,
+  }
+);
+
+const modelValue = defineModel<string>();
+
+function resetModelValue() {
+  modelValue.value = "";
+}
+</script>
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
new file mode 100644
index 0000000000..267ee3a39c
--- /dev/null
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    view-box="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    class="mt-1.5"
+    :class="{
+      'fill-yellow-500 stroke-none': checked
+    }"
+  >
+    <path d="M1,11 h 18,11 1,18" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{ checked?: boolean }>(), {
+  checked: false,
+});
+</script>
diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index cbdaaea7c2..c689e6a7eb 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -52,4 +52,19 @@ const requiredSelection = ref<string>("No");
       <p>Answer: {{ requiredSelection }}</p>
     </div>
   </div>
+  <form>
+    <legend class="text-title">
+      Which features would you like to make available for end users?
+    </legend>
+    <InputCheckboxGroup
+      id="example-4"
+      :checkbox-options="[
+        { value: 'database', label: 'Building databases from templates or importing your own' },
+        { value: 'scripts', label: 'Writing and executing scripts' },
+        { value: 'apps', label: 'Designing and developing custom interfaces' },
+        { value: 'users', label: 'Managing user accounts and access levels' },
+      ]"
+    />
+  </form>
+  
 </template>

From e2b81c4aa708b6e2e10225fd89db36082cc67b4d Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Fri, 4 Oct 2024 15:00:11 +0200
Subject: [PATCH 02/14] fix: revised checkbox input icon

---
 .../components/input/Checkbox.vue             |  6 +--
 .../components/input/CheckboxGroup.vue        | 16 ++++---
 .../components/input/CheckboxIcon.vue         | 45 ++++++++++++++++---
 .../pages/input/Checkbox.story.vue            |  6 ++-
 4 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/apps/tailwind-components/components/input/Checkbox.vue b/apps/tailwind-components/components/input/Checkbox.vue
index 8c834a8932..b1d5533b8f 100644
--- a/apps/tailwind-components/components/input/Checkbox.vue
+++ b/apps/tailwind-components/components/input/Checkbox.vue
@@ -3,9 +3,5 @@ const modelValue = defineModel<boolean | string>();
 </script>
 
 <template>
-  <input
-    v-model="modelValue"
-    type="checkbox"
-    class="w-5 h-5 rounded-3px ml-[6px] mr-2.5 mt-0.5 accent-yellow-500 indeterminate:accent-yellow-500 border border-checkbox hover:cursor-pointer"
-  />
+  <input v-model="modelValue" type="checkbox" class="hover:cursor-pointer" />
 </template>
diff --git a/apps/tailwind-components/components/input/CheckboxGroup.vue b/apps/tailwind-components/components/input/CheckboxGroup.vue
index 032d117f5f..09f6381802 100644
--- a/apps/tailwind-components/components/input/CheckboxGroup.vue
+++ b/apps/tailwind-components/components/input/CheckboxGroup.vue
@@ -1,9 +1,9 @@
 <template>
   <div :id="`${id}-checkbox-group`">
+    {{ modelValue }}
     <div
       class="flex justify-start align-center"
       v-for="option in checkboxOptions"
-      :key="option.value"
     >
       <InputCheckbox
         :id="`${id}-checkbox-group-${option.value}`"
@@ -11,13 +11,15 @@
         :name="id"
         :value="option.value"
         v-model="modelValue"
-        :checked="option.value === modelValue"
       />
-      <InputCheckboxIcon :checked="option.value === modelValue" />
+      <!-- :checked="true" -->
+      <!-- :checked="modelValue ? modelValue.indexOf(option.value) > -1 : false" -->
       <InputLabel
         :for="`${id}-checkbox-group-${option.value}`"
-        class="hover:cursor-pointer"
+        class="hover:cursor-pointer flex flex-row gap-1"
       >
+        <!-- :checked="modelValue ? modelValue.indexOf(option.value) > -1 : false" -->
+        <InputCheckboxIcon class="mr-2.5" />
         <template v-if="option.label">
           {{ option.label }}
         </template>
@@ -52,13 +54,13 @@ withDefaults(
     showClearButton?: boolean;
   }>(),
   {
-    showClearButton: false,
+    showClearButton: true,
   }
 );
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string[] | boolean[]>();
 
 function resetModelValue() {
-  modelValue.value = "";
+  modelValue.value = [];
 }
 </script>
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index 267ee3a39c..e172438d54 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -5,16 +5,47 @@
     view-box="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
     class="mt-1.5"
-    :class="{
-      'fill-yellow-500 stroke-none': checked
-    }"
   >
-    <path d="M1,11 h 18,11 1,18" />
+    <rect
+      width="20"
+      height="20"
+      rx="3"
+      fill="none"
+      class="stroke-gray-600"
+      :class="{
+        'fill-yellow-500 stroke-none': checked || indeterminate,
+      }"
+    />
+    <path
+      v-if="checked"
+      d="M5,10 L 9,14 L 16,6"
+      class="stroke-gray-900"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+    />
+    <path
+      v-if="indeterminate"
+      d="M5,10 L 15,10"
+      class="stroke-gray-900"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+    />
   </svg>
 </template>
 
 <script lang="ts" setup>
-withDefaults(defineProps<{ checked?: boolean }>(), {
-  checked: false,
-});
+withDefaults(
+  defineProps<{
+    checked?: boolean;
+    indeterminate?: boolean;
+  }>(),
+  {
+    checked: false,
+    indeterminate: false,
+  }
+);
 </script>
diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index c689e6a7eb..94247a0e21 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -59,12 +59,14 @@ const requiredSelection = ref<string>("No");
     <InputCheckboxGroup
       id="example-4"
       :checkbox-options="[
-        { value: 'database', label: 'Building databases from templates or importing your own' },
+        {
+          value: 'database',
+          label: 'Building databases from templates or importing your own',
+        },
         { value: 'scripts', label: 'Writing and executing scripts' },
         { value: 'apps', label: 'Designing and developing custom interfaces' },
         { value: 'users', label: 'Managing user accounts and access levels' },
       ]"
     />
   </form>
-  
 </template>

From 139df8dfe560d518f206fd3e1da23c93fc66d3fc Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Mon, 7 Oct 2024 11:41:21 +0200
Subject: [PATCH 03/14] fix: model value and styling

---
 .../components/input/Checkbox.vue             |  2 +-
 .../components/input/CheckboxGroup.vue        | 23 +++++++++--------
 .../components/input/CheckboxIcon.vue         |  2 +-
 .../pages/input/Checkbox.story.vue            | 25 ++++++++++++++++---
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/apps/tailwind-components/components/input/Checkbox.vue b/apps/tailwind-components/components/input/Checkbox.vue
index b1d5533b8f..3e8915b9f0 100644
--- a/apps/tailwind-components/components/input/Checkbox.vue
+++ b/apps/tailwind-components/components/input/Checkbox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const modelValue = defineModel<boolean | string>();
+const modelValue = defineModel<string | boolean>();
 </script>
 
 <template>
diff --git a/apps/tailwind-components/components/input/CheckboxGroup.vue b/apps/tailwind-components/components/input/CheckboxGroup.vue
index 09f6381802..cb2f0306af 100644
--- a/apps/tailwind-components/components/input/CheckboxGroup.vue
+++ b/apps/tailwind-components/components/input/CheckboxGroup.vue
@@ -1,25 +1,26 @@
 <template>
   <div :id="`${id}-checkbox-group`">
-    {{ modelValue }}
     <div
       class="flex justify-start align-center"
       v-for="option in checkboxOptions"
     >
-      <InputCheckbox
-        :id="`${id}-checkbox-group-${option.value}`"
-        class="sr-only"
+      <input
+        type="checkbox"
+        :id="`${id}-${option.value}`"
         :name="id"
         :value="option.value"
         v-model="modelValue"
+        :checked="modelValue!.includes(option.value)"
+        class="sr-only"
       />
-      <!-- :checked="true" -->
-      <!-- :checked="modelValue ? modelValue.indexOf(option.value) > -1 : false" -->
       <InputLabel
-        :for="`${id}-checkbox-group-${option.value}`"
+        :for="`${id}-${option.value}`"
         class="hover:cursor-pointer flex flex-row gap-1"
       >
-        <!-- :checked="modelValue ? modelValue.indexOf(option.value) > -1 : false" -->
-        <InputCheckboxIcon class="mr-2.5" />
+        <InputCheckboxIcon
+          class="mr-2.5"
+          :checked="modelValue!.includes(option.value)"
+        />
         <template v-if="option.label">
           {{ option.label }}
         </template>
@@ -54,11 +55,11 @@ withDefaults(
     showClearButton?: boolean;
   }>(),
   {
-    showClearButton: true,
+    showClearButton: false,
   }
 );
 
-const modelValue = defineModel<string[] | boolean[]>();
+const modelValue = defineModel<string[]>();
 
 function resetModelValue() {
   modelValue.value = [];
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index e172438d54..98fbe812e0 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -10,9 +10,9 @@
       width="20"
       height="20"
       rx="3"
-      fill="none"
       class="stroke-gray-600"
       :class="{
+        'fill-none': !checked && !indeterminate,
         'fill-yellow-500 stroke-none': checked || indeterminate,
       }"
     />
diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index 94247a0e21..d06c876fa7 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -2,6 +2,8 @@
 const defaultSelection = ref<boolean>(false);
 const valueSelection = ref<string>("No");
 const requiredSelection = ref<string>("No");
+
+const featureSelection = ref<string[]>(["database"]);
 </script>
 
 <template>
@@ -58,15 +60,30 @@ const requiredSelection = ref<string>("No");
     </legend>
     <InputCheckboxGroup
       id="example-4"
-      :checkbox-options="[
+      v-model="featureSelection"
+      :checkboxOptions="[
         {
           value: 'database',
           label: 'Building databases from templates or importing your own',
+          checked: true,
+        },
+        {
+          value: 'scripts',
+          label: 'Writing and executing scripts',
+        },
+        {
+          value: 'apps',
+          label: 'Designing and developing custom interfaces',
+        },
+        {
+          value: 'users',
+          label: 'Managing user accounts and access levels',
         },
-        { value: 'scripts', label: 'Writing and executing scripts' },
-        { value: 'apps', label: 'Designing and developing custom interfaces' },
-        { value: 'users', label: 'Managing user accounts and access levels' },
       ]"
+      :showClearButton="true"
     />
+    <output>
+      <span>Selection: {{ featureSelection }}</span>
+    </output>
   </form>
 </template>

From eee081959b1f978f79abc598c54834b543f2295f Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Mon, 7 Oct 2024 15:47:45 +0200
Subject: [PATCH 04/14] update checkbox story

---
 .../pages/input/Checkbox.story.vue            | 169 ++++++++++++------
 1 file changed, 110 insertions(+), 59 deletions(-)

diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index d06c876fa7..ec08ddbe8b 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -1,89 +1,140 @@
 <script setup lang="ts">
-const defaultSelection = ref<boolean>(false);
-const valueSelection = ref<string>("No");
-const requiredSelection = ref<string>("No");
-
-const featureSelection = ref<string[]>(["database"]);
+const termsAndConditionsExample = ref<string>("");
+const termsAndConditionsExampleReq = ref<string>("");
+const signupNewsletterExample = ref<boolean>(false);
+const toppingsSelection = ref<string[]>(["tomatoes", "basil"]);
 </script>
 
 <template>
   <h2>Checkbox component</h2>
-  <div
-    class="grid grid-cols-2 gap-6 my-5 [&>div]:p-1 [&_h3]:font-semibold [&_h3]:my-2"
+  <p class="mb-2">
+    Use the <code>InputCheckbox</code> component if you would like to display a
+    single checkbox element. However, this component only returns the input
+    element. You will also need to include the
+    <code>InputCheckboxIcon</code> and <code>InputLabel</code> components, as
+    well as set the css styles to make sure the design is consistent with the
+    rest of the frontend. This process is rather straightforward, but we also
+    encourage developers to use the <code>InputCheckboxGroup</code> component
+    for convenience.
+  </p>
+  <p class="mb-2">
+    The following examples demonstrate the use of both input checkbox components
+    with varying configurations.
+  </p>
+  <form
+    class="flex flex-col gap-6 my-5 [&>div]:p-1 [&_h3]:font-semibold [&_h3]:my-2"
   >
     <div>
-      <h3>Default checkbox</h3>
+      <h3>InputCheckbox Example: Default checkbox</h3>
       <InputCheckbox
-        id="checkbox-default"
-        v-model="defaultSelection"
-        value="test"
-        checked="true"
+        id="checkbox-example-newsletter-signup"
+        class="sr-only"
+        :value="true"
+        v-model="signupNewsletterExample"
       />
-      <InputLabel for="checkbox-default">
-        Do you aggree to the terms and conditions?
+      <InputLabel
+        class="flex flex-row gap-1"
+        for="checkbox-example-newsletter-signup"
+      >
+        <InputCheckboxIcon class="mr-2.5" :checked="signupNewsletterExample" />
+        Would you like to subscribe to our newsletter?
       </InputLabel>
-      <p>Answer: {{ defaultSelection }}</p>
+      <p>Answer: {{ signupNewsletterExample }}</p>
     </div>
     <div>
-      <h3>Checkbox with yes and no values defined</h3>
+      <h3>InputCheckbox Example: Checkbox with yes and no values defined</h3>
       <InputCheckbox
-        id="checkbox-default-labels"
-        v-model="valueSelection"
+        id="checkbox-example-terms-and-conditions"
+        class="sr-only"
         true-value="Yes"
         false-value="No"
-        checked="true"
+        :value="true"
+        :checked="termsAndConditionsExample"
+        v-model="termsAndConditionsExample"
       />
-      <InputLabel for="checkbox-default-labels">
-        Do you aggree to the terms and conditions?
+      <InputLabel
+        class="flex flex-row gap-1"
+        for="checkbox-example-terms-and-conditions"
+      >
+        <InputCheckboxIcon
+          class="mr-2.5"
+          :checked="termsAndConditionsExample === 'Yes'"
+        />
+        Do you agree to the terms and conditions?
       </InputLabel>
-      <p>Answer: {{ valueSelection }}</p>
+      <output>
+        <span>Selection: {{ termsAndConditionsExample }}</span>
+      </output>
     </div>
     <div>
-      <h3>Checkbox with yes and no values defined and as a required input</h3>
+      <h3>
+        InputCheckbox Example: Checkbox with yes and no values defined and as a
+        required input
+      </h3>
       <InputCheckbox
-        id="checkbox-default-labels-required"
-        v-model="requiredSelection"
+        id="checkbox-example-terms-and-conditions-required"
+        class="sr-only"
+        v-model="termsAndConditionsExampleReq"
         true-value="Yes"
         false-value="No"
         checked="true"
         required="true"
       />
-      <InputLabel for="checkbox-default-labels-required" :required="true">
+      <InputLabel
+        class="flex flex-row gap-1"
+        for="checkbox-example-terms-and-conditions-required"
+        :required="true"
+      >
+        <InputCheckboxIcon
+          class="mr-2.5"
+          :checked="termsAndConditionsExampleReq === 'Yes'"
+        />
         Do you aggree to the terms and conditions?
       </InputLabel>
-      <p>Answer: {{ requiredSelection }}</p>
+      <p>Answer: {{ termsAndConditionsExampleReq }}</p>
+    </div>
+    <div>
+      <h3>InputCheckboxGroup example</h3>
+      <p class="mb-2">
+        The <code>InputCheckboxGroup</code> should be used if there are more
+        than one related checkboxes. In the example, below, we demonstrate how
+        to create more than one checkbox with custom values and labels, as well
+        as set default options.
+      </p>
+      <legend class="text-title">
+        Which toppings would you like on your pizza? You may select more than
+        one.
+      </legend>
+      <InputCheckboxGroup
+        id="example-4"
+        v-model="toppingsSelection"
+        :checkboxOptions="[
+          {
+            value: 'tomatoes',
+            label: 'Roma tomatoes',
+          },
+          {
+            value: 'pepperoni',
+            label: 'Pepperoni',
+          },
+          {
+            value: 'mozzerella',
+            label: 'Fresh mozzerella',
+          },
+          {
+            value: 'chillies',
+            label: 'Chillies',
+          },
+          {
+            value: 'basil',
+            label: 'Fresh basil',
+          },
+        ]"
+        :showClearButton="true"
+      />
+      <output>
+        <span>Selection: {{ toppingsSelection }}</span>
+      </output>
     </div>
-  </div>
-  <form>
-    <legend class="text-title">
-      Which features would you like to make available for end users?
-    </legend>
-    <InputCheckboxGroup
-      id="example-4"
-      v-model="featureSelection"
-      :checkboxOptions="[
-        {
-          value: 'database',
-          label: 'Building databases from templates or importing your own',
-          checked: true,
-        },
-        {
-          value: 'scripts',
-          label: 'Writing and executing scripts',
-        },
-        {
-          value: 'apps',
-          label: 'Designing and developing custom interfaces',
-        },
-        {
-          value: 'users',
-          label: 'Managing user accounts and access levels',
-        },
-      ]"
-      :showClearButton="true"
-    />
-    <output>
-      <span>Selection: {{ featureSelection }}</span>
-    </output>
   </form>
 </template>

From b63b302c87507f3b442eaca823c1bbb455934062 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Tue, 8 Oct 2024 12:02:10 +0200
Subject: [PATCH 05/14] feat: init e2e test

---
 .../input/checkbox.spec.ts                    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 e2e/tests/tailwind-components/input/checkbox.spec.ts

diff --git a/e2e/tests/tailwind-components/input/checkbox.spec.ts b/e2e/tests/tailwind-components/input/checkbox.spec.ts
new file mode 100644
index 0000000000..f9ea91f0a7
--- /dev/null
+++ b/e2e/tests/tailwind-components/input/checkbox.spec.ts
@@ -0,0 +1,41 @@
+import {test, expect } from "@playwright/test";
+
+test(
+  "Checkbox input: labels are properly displayed @tw-components @tw-forms @tw-checkbox",
+  async ({ page }) => {
+    await page.goto('/apps/tailwind-components/#/input/Checkbox.story');
+    await expect(page.locator('label').filter({ hasText: 'Would you like to subscribe' })).toHaveText('Would you like to subscribe to our newsletter?');
+  }
+)
+
+test(
+  "Checkbox input: svg icon updates when checked @tw-components @tw-forms @tw-checkbox",
+  async ({ page }) => {
+    await page.goto('/apps/tailwind-components/#/input/Checkbox.story');
+    await page.getByText('Would you like to subscribe').click();
+    await expect(page.locator('label').filter({ hasText: 'Would you like to subscribe' }).getByRole('img')).toHaveAttribute('data-checked', 'true');
+    await page.getByText('Would you like to subscribe').click();
+    await expect(page.locator('label').filter({ hasText: 'Would you like to subscribe' }).getByRole('img')).toHaveAttribute('data-checked', 'false');
+  }
+)
+
+test(
+  "Checkbox input: input values are properly binded to the input element @tw-components @tw-forms @tw-checkbox",
+  async ({ page }) => {
+    await page.goto('/apps/tailwind-components/#/input/Checkbox.story');
+    await page.getByText('Do you agree to the terms and').click();
+    await expect(page.getByText('Do you agree to the terms and')).toBeChecked();
+  }
+);
+
+test(
+  "Checkbox group input: default options are checked @tw-components @tw-forms @tw-checkbox",
+  async ({ page }) => {
+    await page.goto('/apps/tailwind-components/#/input/Checkbox.story');
+    await expect(page.getByText('Roma tomatoes')).toBeChecked();
+    await expect(page.getByText('Pepperoni')).toBeChecked({ checked: false });
+    await expect(page.getByText('Fresh mozzerella')).toBeChecked({ checked: false });
+    await expect(page.getByText('Chillies')).toBeChecked({ checked: false });
+    await expect(page.getByText('Fresh basil')).toBeChecked();
+  }
+)
\ No newline at end of file

From c48409cf0074d0d65bec0d75f31f8ff538b14fdf Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Tue, 8 Oct 2024 12:02:36 +0200
Subject: [PATCH 06/14] fix: bind statuses to svg component

---
 apps/tailwind-components/components/input/CheckboxIcon.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index 98fbe812e0..2a702a0afd 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -5,6 +5,8 @@
     view-box="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
     class="mt-1.5"
+    :data-checked="checked"
+    :data-indeterminate="indeterminate"
   >
     <rect
       width="20"

From 56f81f55b150386a3e67326478b495dd2cc39759 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Tue, 8 Oct 2024 12:02:50 +0200
Subject: [PATCH 07/14] docs: finalised story

---
 .../pages/input/Checkbox.story.vue            | 28 -------------------
 1 file changed, 28 deletions(-)

diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index ec08ddbe8b..d92a283912 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const termsAndConditionsExample = ref<string>("");
-const termsAndConditionsExampleReq = ref<string>("");
 const signupNewsletterExample = ref<boolean>(false);
 const toppingsSelection = ref<string[]>(["tomatoes", "basil"]);
 </script>
@@ -66,33 +65,6 @@ const toppingsSelection = ref<string[]>(["tomatoes", "basil"]);
         <span>Selection: {{ termsAndConditionsExample }}</span>
       </output>
     </div>
-    <div>
-      <h3>
-        InputCheckbox Example: Checkbox with yes and no values defined and as a
-        required input
-      </h3>
-      <InputCheckbox
-        id="checkbox-example-terms-and-conditions-required"
-        class="sr-only"
-        v-model="termsAndConditionsExampleReq"
-        true-value="Yes"
-        false-value="No"
-        checked="true"
-        required="true"
-      />
-      <InputLabel
-        class="flex flex-row gap-1"
-        for="checkbox-example-terms-and-conditions-required"
-        :required="true"
-      >
-        <InputCheckboxIcon
-          class="mr-2.5"
-          :checked="termsAndConditionsExampleReq === 'Yes'"
-        />
-        Do you aggree to the terms and conditions?
-      </InputLabel>
-      <p>Answer: {{ termsAndConditionsExampleReq }}</p>
-    </div>
     <div>
       <h3>InputCheckboxGroup example</h3>
       <p class="mb-2">

From fc75330b6ee8c959fae2b79800ca32cfd4af5280 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Thu, 10 Oct 2024 14:33:32 +0200
Subject: [PATCH 08/14] feat: integrated checkbox component into tree input

---
 .../components/input/CheckboxIcon.vue         |  1 -
 .../components/input/Tree.vue                 | 48 ++++++++++++-------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index 2a702a0afd..1198774121 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -11,7 +11,6 @@
     <rect
       width="20"
       height="20"
-      rx="3"
       class="stroke-gray-600"
       :class="{
         'fill-none': !checked && !indeterminate,
diff --git a/apps/tailwind-components/components/input/Tree.vue b/apps/tailwind-components/components/input/Tree.vue
index 5cad30a3d7..dd824f9a31 100644
--- a/apps/tailwind-components/components/input/Tree.vue
+++ b/apps/tailwind-components/components/input/Tree.vue
@@ -90,8 +90,8 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
     ]"
   >
     <li v-for="node in nodes" :key="node.name" class="mt-2.5 relative">
-      <span class="flex items-center">
-        <span
+      <div class="flex items-center">
+        <button
           v-if="node.children?.length"
           @click.stop="toggleExpand(node.name)"
           class="-left-[11px] top-0 rounded-full hover:cursor-pointer h-6 w-6 flex items-center justify-center absolute z-20"
@@ -105,11 +105,12 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
         >
           <BaseIcon
             :name="
-              expandedNodes.includes(node.name) ? 'caret-down' : 'caret-up'
+              expandedNodes.includes(node.name) ? 'caret-down' : 'caret-right'
             "
             :width="20"
           />
-        </span>
+          <span class="sr-only">expand {{ node.name }}</span>
+        </button>
         <template v-if="!isRoot">
           <BaseIcon
             v-if="node.children?.length"
@@ -124,25 +125,37 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
             class="text-blue-200 absolute -top-[9px]"
           />
         </template>
-      </span>
+      </div>
       <div class="flex items-start ml-4">
-        <div class="flex items-center">
-          <input
-            type="checkbox"
+        <input
+          type="checkbox"
+          :indeterminate="
+            node.children?.some((c) => modelValue.includes(c.name)) &&
+            !node.children?.every((c) => modelValue.includes(c.name))
+          "
+          :id="node.name"
+          :name="node.name"
+          :checked="modelValue.includes(node.name)"
+          @click.stop="toggleSelect(node)"
+          class="sr-only"
+        />
+        <InputLabel
+          :for="node.name"
+          class="hover:cursor-pointer text-body-sm group flex items-center"
+        >
+          <InputCheckboxIcon
             :indeterminate="
               node.children?.some((c) => modelValue.includes(c.name)) &&
               !node.children?.every((c) => modelValue.includes(c.name))
             "
-            :id="node.name"
-            :name="node.name"
-            :checked="modelValue.includes(node.name)"
-            @click.stop="toggleSelect(node)"
-            class="w-5 h-5 rounded-3px ml-[6px] mr-2.5 mt-0.5 accent-yellow-500 indeterminate:accent-yellow-500 border border-checkbox hover:cursor-pointer"
+            :checked="
+              modelValue.includes(node.name) &&
+              node.children?.every((c) => modelValue.includes(c.name))
+            "
+            class="ml-[-6px] mr-2.5 mt-0.5"
           />
-        </div>
-        <label :for="node.name" class="hover:cursor-pointer text-body-sm group">
-          <span class="group-hover:underline">{{ node.name }}</span>
-        </label>
+          <span>{{ node.name }}</span>
+        </InputLabel>
         <div class="inline-flex items-center whitespace-nowrap">
           <div class="inline-block pl-1">
             <CustomTooltip
@@ -154,7 +167,6 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
           </div>
         </div>
       </div>
-
       <Tree
         v-if="node.children.length"
         v-show="expandedNodes.includes(node.name)"

From 1bf566885f6eb07ac337b388b7ef0449dc449177 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Thu, 10 Oct 2024 14:35:21 +0200
Subject: [PATCH 09/14] fix: adjusted margin on checkbox icon

---
 apps/tailwind-components/components/input/Tree.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/components/input/Tree.vue b/apps/tailwind-components/components/input/Tree.vue
index dd824f9a31..b5d2a2484f 100644
--- a/apps/tailwind-components/components/input/Tree.vue
+++ b/apps/tailwind-components/components/input/Tree.vue
@@ -152,7 +152,7 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
               modelValue.includes(node.name) &&
               node.children?.every((c) => modelValue.includes(c.name))
             "
-            class="ml-[-6px] mr-2.5 mt-0.5"
+            class="ml-[-6px] mr-2.5 mt-[-1px]"
           />
           <span>{{ node.name }}</span>
         </InputLabel>

From a97813928347d1c1e3def2ecb6085e632bf77d9f Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Fri, 11 Oct 2024 11:25:10 +0200
Subject: [PATCH 10/14] fix: added classes for svg input icons

---
 apps/tailwind-components/assets/css/main.css  | 28 ++-----------------
 .../components/input/CheckboxIcon.vue         |  8 +++---
 apps/tailwind-components/tailwind.config.js   |  9 ++++++
 3 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index f671535d3f..0311132083 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -96,6 +96,8 @@
     --backgroud-color-tab-active: var(--color-blue-500);
     --background-color-disabled: var(--color-gray-200);
     --background-color-invalid: var(--color-red-200);
+    --background-color-input: var(--color-white);
+    --background-color-input-checked: var(--color-yellow-500);
 
     --text-color-button-primary: var(--color-gray-900);
     --text-color-button-primary-hover: var(--color-gray-900);
@@ -164,6 +166,7 @@
     --border-color-search-input: var(--color-white);
     --border-color-search-input-mobile: var(--color-gray-100);
     --border-color-pagination: var(--color-transparent);
+    --border-color-input: var(--color-transparent);
 
     --border-radius-3px: 3px;
     --border-radius-50px: 50px;
@@ -315,31 +318,6 @@
     --backgroud-color-button-primary-hover: var(--color-orange-200);
   }
 
-  [type="checkbox"]:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  }
-
-  [type="radio"]:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-
-  [type="checkbox"],
-  [type="radio"] {
-    @apply focus:ring-0 focus:ring-offset-0;
-  }
-
-  [type="checkbox"],
-  [type="checkbox"]:checked,
-  [type="checkbox"]:checked:hover,
-  [type="checkbox"]:checked:focus,
-  [type="checkbox"]:indeterminate:hover,
-  [type="radio"],
-  [type="radio"]:checked,
-  [type="radio"]:checked:hover,
-  [type="radio"]:checked:focus {
-    @apply border-white;
-  }
-
   .v-popper--theme-tooltip {
     @apply text-body-sm font-sans flex items-center justify-center;
   }
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index 1198774121..e1581ebdd7 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -4,17 +4,17 @@
     height="20"
     view-box="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
-    class="mt-1.5"
+    class="mt-1.5 hover:cursor-pointer"
     :data-checked="checked"
     :data-indeterminate="indeterminate"
   >
     <rect
       width="20"
       height="20"
-      class="stroke-gray-600"
+      class="border-input"
       :class="{
-        'fill-none': !checked && !indeterminate,
-        'fill-yellow-500 stroke-none': checked || indeterminate,
+        'fill-input': !checked && !indeterminate,
+        'fill-input-checked stroke-none': checked || indeterminate,
       }"
     />
     <path
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index 1c94b81087..b2030ee59a 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -152,6 +152,7 @@ module.exports = {
         "tab-active": "var(--backgroud-color-tab-active)",
         "disabled": "var(--background-color-disabled)",
         "invalid": "var(--background-color-invalid)",
+        "input": "var(--background-color-input)",
       }),
       textColor: ({ theme }) => ({
         "button-primary": "var(--text-color-button-primary)",
@@ -221,6 +222,14 @@ module.exports = {
         "invalid": "var(--border-color-invalid)",
         "valid": "var(--border-color-valid)",
         "disabled": "var(--border-color-disabled)",
+        "input": "var(--border-color-input)",
+      }),
+      stroke: ({ theme }) => ({
+        "input": "var(--border-color-input)",
+      }),
+      fill: ({ theme }) => ({
+        "input": "var(--background-color-input)",
+        "input-checked": "var(--background-color-input-checked)",
       }),
       borderRadius: {
         "3px": "var(--border-radius-3px)",

From f3dd0c9b80ed0daf0b2ab65cca2f62ff96b0c0da Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Fri, 11 Oct 2024 11:25:27 +0200
Subject: [PATCH 11/14] fix: corrected duplicate input IDs

---
 apps/tailwind-components/app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/app.vue b/apps/tailwind-components/app.vue
index e3c9ba9cc1..49e5995110 100644
--- a/apps/tailwind-components/app.vue
+++ b/apps/tailwind-components/app.vue
@@ -65,8 +65,8 @@ function toggleLayout () {
             <label class="hover:cursor-pointer" for="umcg-theme"> UMCG </label>
           </div>
           <div class="px-1">
-            <input class="hover:cursor-pointer mr-2" id="umcg-theme" type="radio" v-model="theme" value="aumc" />
-            <label class="hover:cursor-pointer" for="umcg-theme"> AUMC </label>
+            <input class="hover:cursor-pointer mr-2" id="aumc-theme" type="radio" v-model="theme" value="aumc" />
+            <label class="hover:cursor-pointer" for="aumc-theme"> AUMC </label>
           </div>
         </fieldset>
       </div>

From bbd678c882b874b830d6358706327f7501dce6ab Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Mon, 14 Oct 2024 10:19:54 +0100
Subject: [PATCH 12/14] fix: adjusted component spacing

---
 .../components/input/CheckboxGroup.vue        | 20 ++----
 .../components/input/CheckboxIcon.vue         |  2 +-
 .../components/input/Tree.vue                 |  8 +--
 .../pages/input/Checkbox.story.vue            | 71 ++++++++++---------
 .../pages/input/Tree.story.vue                |  6 +-
 5 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/apps/tailwind-components/components/input/CheckboxGroup.vue b/apps/tailwind-components/components/input/CheckboxGroup.vue
index cb2f0306af..0f5071af17 100644
--- a/apps/tailwind-components/components/input/CheckboxGroup.vue
+++ b/apps/tailwind-components/components/input/CheckboxGroup.vue
@@ -1,9 +1,6 @@
 <template>
   <div :id="`${id}-checkbox-group`">
-    <div
-      class="flex justify-start align-center"
-      v-for="option in checkboxOptions"
-    >
+    <div class="flex flex-row" v-for="option in checkboxOptions">
       <input
         type="checkbox"
         :id="`${id}-${option.value}`"
@@ -15,18 +12,15 @@
       />
       <InputLabel
         :for="`${id}-${option.value}`"
-        class="hover:cursor-pointer flex flex-row gap-1"
+        class="hover:cursor-pointer flex justify-start items-center"
       >
-        <InputCheckboxIcon
-          class="mr-2.5"
-          :checked="modelValue!.includes(option.value)"
-        />
-        <template v-if="option.label">
+        <InputCheckboxIcon :checked="modelValue!.includes(option.value)" />
+        <span class="block" v-if="option.label">
           {{ option.label }}
-        </template>
-        <template v-else>
+        </span>
+        <span class="block" v-else>
           {{ option.value }}
-        </template>
+        </span>
       </InputLabel>
     </div>
     <div class="mt-2" v-if="showClearButton">
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index e1581ebdd7..e3c0da8ebb 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -4,7 +4,7 @@
     height="20"
     view-box="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
-    class="mt-1.5 hover:cursor-pointer"
+    class="hover:cursor-pointer w-[20px] mr-2.5"
     :data-checked="checked"
     :data-indeterminate="indeterminate"
   >
diff --git a/apps/tailwind-components/components/input/Tree.vue b/apps/tailwind-components/components/input/Tree.vue
index b5d2a2484f..42e99d67b1 100644
--- a/apps/tailwind-components/components/input/Tree.vue
+++ b/apps/tailwind-components/components/input/Tree.vue
@@ -126,7 +126,7 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
           />
         </template>
       </div>
-      <div class="flex items-start ml-4">
+      <div class="flex justify-start items-center ml-4">
         <input
           type="checkbox"
           :indeterminate="
@@ -141,7 +141,7 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
         />
         <InputLabel
           :for="node.name"
-          class="hover:cursor-pointer text-body-sm group flex items-center"
+          class="flex justify-center items-start hover:cursor-pointer text-body-sm group"
         >
           <InputCheckboxIcon
             :indeterminate="
@@ -152,9 +152,9 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
               modelValue.includes(node.name) &&
               node.children?.every((c) => modelValue.includes(c.name))
             "
-            class="ml-[-6px] mr-2.5 mt-[-1px]"
+            class="w-[40px] ml-[-6px] mr-0"
           />
-          <span>{{ node.name }}</span>
+          <span class="w-auto">{{ node.name }}</span>
         </InputLabel>
         <div class="inline-flex items-center whitespace-nowrap">
           <div class="inline-block pl-1">
diff --git a/apps/tailwind-components/pages/input/Checkbox.story.vue b/apps/tailwind-components/pages/input/Checkbox.story.vue
index d92a283912..5739799213 100644
--- a/apps/tailwind-components/pages/input/Checkbox.story.vue
+++ b/apps/tailwind-components/pages/input/Checkbox.story.vue
@@ -20,47 +20,48 @@ const toppingsSelection = ref<string[]>(["tomatoes", "basil"]);
     The following examples demonstrate the use of both input checkbox components
     with varying configurations.
   </p>
-  <form
-    class="flex flex-col gap-6 my-5 [&>div]:p-1 [&_h3]:font-semibold [&_h3]:my-2"
-  >
+  <form class="flex flex-col gap-6 my-5 [&_h3]:font-semibold [&_h3]:my-2">
     <div>
       <h3>InputCheckbox Example: Default checkbox</h3>
-      <InputCheckbox
-        id="checkbox-example-newsletter-signup"
-        class="sr-only"
-        :value="true"
-        v-model="signupNewsletterExample"
-      />
-      <InputLabel
-        class="flex flex-row gap-1"
-        for="checkbox-example-newsletter-signup"
-      >
-        <InputCheckboxIcon class="mr-2.5" :checked="signupNewsletterExample" />
-        Would you like to subscribe to our newsletter?
-      </InputLabel>
-      <p>Answer: {{ signupNewsletterExample }}</p>
+      <div class="flex justify-start items-center">
+        <InputCheckbox
+          id="checkbox-example-newsletter-signup"
+          class="sr-only"
+          :value="true"
+          v-model="signupNewsletterExample"
+        />
+        <InputLabel
+          class="flex justify-start items-center"
+          for="checkbox-example-newsletter-signup"
+        >
+          <InputCheckboxIcon :checked="signupNewsletterExample" />
+          <span>Would you like to subscribe to our newsletter?</span>
+        </InputLabel>
+      </div>
+      <output>
+        <span>Answer: {{ signupNewsletterExample }}</span>
+      </output>
     </div>
     <div>
       <h3>InputCheckbox Example: Checkbox with yes and no values defined</h3>
-      <InputCheckbox
-        id="checkbox-example-terms-and-conditions"
-        class="sr-only"
-        true-value="Yes"
-        false-value="No"
-        :value="true"
-        :checked="termsAndConditionsExample"
-        v-model="termsAndConditionsExample"
-      />
-      <InputLabel
-        class="flex flex-row gap-1"
-        for="checkbox-example-terms-and-conditions"
-      >
-        <InputCheckboxIcon
-          class="mr-2.5"
-          :checked="termsAndConditionsExample === 'Yes'"
+      <div class="flex justify-start items-center">
+        <InputCheckbox
+          id="checkbox-example-terms-and-conditions"
+          class="sr-only"
+          true-value="Yes"
+          false-value="No"
+          :value="true"
+          :checked="termsAndConditionsExample"
+          v-model="termsAndConditionsExample"
         />
-        Do you agree to the terms and conditions?
-      </InputLabel>
+        <InputLabel
+          class="flex justify-start items-center"
+          for="checkbox-example-terms-and-conditions"
+        >
+          <InputCheckboxIcon :checked="termsAndConditionsExample === 'Yes'" />
+          <span>Do you agree to the terms and conditions?</span>
+        </InputLabel>
+      </div>
       <output>
         <span>Selection: {{ termsAndConditionsExample }}</span>
       </output>
diff --git a/apps/tailwind-components/pages/input/Tree.story.vue b/apps/tailwind-components/pages/input/Tree.story.vue
index e18bcc4d40..f2e8eb42be 100644
--- a/apps/tailwind-components/pages/input/Tree.story.vue
+++ b/apps/tailwind-components/pages/input/Tree.story.vue
@@ -37,8 +37,8 @@ const expandSelected = ref(true);
 </script>
 
 <template>
-  <div class="flex mb-4">
-    <div class="flex-1">
+  <div class="flex flex-row gap-2 mb-4">
+    <div class="basis-3/5">
       <InputTree
         :nodes="nodes"
         v-model="selectedNodesNames"
@@ -49,7 +49,7 @@ const expandSelected = ref(true);
       />
     </div>
 
-    <div class="ml-4 mt-2">
+    <div class="basis-2/5 p-2">
       <fieldset class="border border-gray-900 mb-2">
         <legend class="m-2 px-2">Props</legend>
         <div class="mb-2">

From 8892546f4526dfde1fa1c10253caf8c605b850a5 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Tue, 15 Oct 2024 09:07:03 +0100
Subject: [PATCH 13/14] fix: adjust margins; added inverted colors

---
 apps/tailwind-components/assets/css/main.css               | 1 +
 apps/tailwind-components/components/input/CheckboxIcon.vue | 1 -
 apps/tailwind-components/components/input/Tree.vue         | 7 +++++--
 apps/tailwind-components/tailwind.config.js                | 1 +
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index 0311132083..258b7b4a10 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -167,6 +167,7 @@
     --border-color-search-input-mobile: var(--color-gray-100);
     --border-color-pagination: var(--color-transparent);
     --border-color-input: var(--color-transparent);
+    --border-color-input-inverted: var(--color-gray-600);
 
     --border-radius-3px: 3px;
     --border-radius-50px: 50px;
diff --git a/apps/tailwind-components/components/input/CheckboxIcon.vue b/apps/tailwind-components/components/input/CheckboxIcon.vue
index e3c0da8ebb..16cdd03972 100644
--- a/apps/tailwind-components/components/input/CheckboxIcon.vue
+++ b/apps/tailwind-components/components/input/CheckboxIcon.vue
@@ -11,7 +11,6 @@
     <rect
       width="20"
       height="20"
-      class="border-input"
       :class="{
         'fill-input': !checked && !indeterminate,
         'fill-input-checked stroke-none': checked || indeterminate,
diff --git a/apps/tailwind-components/components/input/Tree.vue b/apps/tailwind-components/components/input/Tree.vue
index 42e99d67b1..0ba9daf05c 100644
--- a/apps/tailwind-components/components/input/Tree.vue
+++ b/apps/tailwind-components/components/input/Tree.vue
@@ -152,9 +152,12 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
               modelValue.includes(node.name) &&
               node.children?.every((c) => modelValue.includes(c.name))
             "
-            class="w-[40px] ml-[-6px] mr-0"
+            class="w-[40px] ml-[-6px]"
+            :class="{
+              '[&>rect]:stroke-gray-400': inverted,
+            }"
           />
-          <span class="w-auto">{{ node.name }}</span>
+          <span class="w-[calc(100%-40px)]">{{ node.name }}</span>
         </InputLabel>
         <div class="inline-flex items-center whitespace-nowrap">
           <div class="inline-block pl-1">
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index b2030ee59a..d76d8e6b90 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -223,6 +223,7 @@ module.exports = {
         "valid": "var(--border-color-valid)",
         "disabled": "var(--border-color-disabled)",
         "input": "var(--border-color-input)",
+        "input-inverted": "var(--border-color-input-inverted)",
       }),
       stroke: ({ theme }) => ({
         "input": "var(--border-color-input)",

From 2be2dc1f3bdd1d6fd87633445a4a184c5926f08e Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Wed, 16 Oct 2024 10:49:42 +0100
Subject: [PATCH 14/14] fix: reduced padding on tree input icon components

---
 apps/tailwind-components/components/input/Tree.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/tailwind-components/components/input/Tree.vue b/apps/tailwind-components/components/input/Tree.vue
index 0ba9daf05c..412010aadf 100644
--- a/apps/tailwind-components/components/input/Tree.vue
+++ b/apps/tailwind-components/components/input/Tree.vue
@@ -141,7 +141,7 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
         />
         <InputLabel
           :for="node.name"
-          class="flex justify-center items-start hover:cursor-pointer text-body-sm group"
+          class="flex justify-center items-start hover:cursor-pointer"
         >
           <InputCheckboxIcon
             :indeterminate="
@@ -152,12 +152,14 @@ function handleChildSelect(selected: string[], parent: ITreeNode) {
               modelValue.includes(node.name) &&
               node.children?.every((c) => modelValue.includes(c.name))
             "
-            class="w-[40px] ml-[-6px]"
+            class="w-[20px] ml-[-6px]"
             :class="{
               '[&>rect]:stroke-gray-400': inverted,
             }"
           />
-          <span class="w-[calc(100%-40px)]">{{ node.name }}</span>
+          <span class="block w-[calc(100%-20px)] text-body-sm leading-normal">{{
+            node.name
+          }}</span>
         </InputLabel>
         <div class="inline-flex items-center whitespace-nowrap">
           <div class="inline-block pl-1">