Refactor variable

client/src/components/ui/ItCheckbox.vue

@@ -3,7 +3,7 @@ import type { CheckboxItem } from "@/components/ui/checkbox.types";
 import log from "loglevel";
 
 const props = defineProps<{
-  checkbox_item: CheckboxItem<any>;
+  checkboxItem: CheckboxItem<any>;
   disabled?: boolean;
 }>();
 
@@ -36,7 +36,7 @@ const input = (e: Event) => {
     <label
       class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50"
       :class="
-        checkbox_item.checked
+        checkboxItem.checked
           ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'
           : 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]'
       "
@@ -45,21 +45,21 @@ const input = (e: Event) => {
     >
       <input
         ref="checkbox"
-        :checked="checkbox_item.checked"
-        :value="checkbox_item.value"
+        :checked="checkboxItem.checked"
+        :value="checkboxItem.value"
         :disabled="disabled"
-        :data-cy="`it-checkbox-${checkbox_item.value}`"
+        :data-cy="`it-checkbox-${checkboxItem.value}`"
         class="sr-only"
         type="checkbox"
         @keydown="keydown"
         @input="input"
       />
       <div class="ml-4 flex-col">
-        <div v-if="checkbox_item.label">
-          {{ checkbox_item.label }}
+        <div v-if="checkboxItem.label">
+          {{ checkboxItem.label }}
         </div>
-        <div v-if="checkbox_item.subtitle" class="text-gray-900">
-          {{ checkbox_item.subtitle }}
+        <div v-if="checkboxItem.subtitle" class="text-gray-900">
+          {{ checkboxItem.subtitle }}
         </div>
       </div>
     </label>

client/src/components/ui/ItCheckboxGroup.vue

@@ -25,7 +25,7 @@ function updateItems(itemValue: string) {
     <ItCheckbox
       v-for="item in items"
       :key="item.value"
-      :checkbox_item="item"
+      :checkbox-item="item"
       :class="item.subtitle ? 'mb-6' : 'mb-4'"
       @toggle="updateItems(item.value)"
     />

client/src/pages/StyleGuidePage.vue

@@ -418,7 +418,7 @@ function log(data: any) {
     <h2 class="mb-8 mt-8">Checkbox</h2>
 
     <ItCheckbox
-      :checkbox_item="{
+      :checkbox-item="{
         subtitle: 'Subtitle',
         label: 'Label',
         value: 'value',
@@ -433,7 +433,7 @@ function log(data: any) {
 
     <ItCheckbox
       :disabled="true"
-      :checkbox_item="{
+      :checkbox-item="{
         subtitle: 'checked disabled',
         label: 'Label',
         value: 'value',

client/src/pages/learningPath/circlePage/LearningSequence.vue

@@ -127,7 +127,7 @@ const learningSequenceBorderClass = computed(() => {
             </div>
             <ItCheckbox
               v-else
-              :checkbox_item="{
+              :checkbox-item="{
                 value: learningContent.completion_status,
                 checked: learningContent.completion_status === 'success',
               }"