From 8ddec154538740187924ea9c71094c6a0d82f382 Mon Sep 17 00:00:00 2001
From: LucasWerey <lucas.werey@hotmail.com>
Date: Fri, 19 Jan 2024 18:49:16 +0100
Subject: [PATCH] fix(dslib): add colors

---
 src/components/CTA/Button/Button.story.vue    |  8 ++++++-
 src/components/CTA/Button/Button.vue          | 22 ++++++++++++++-----
 .../CTA/InputField/InputField.story.vue       |  8 ++++++-
 src/components/CTA/InputField/InputField.vue  |  7 +++++-
 .../ChipContainer/ChipContainer.vue           |  2 +-
 src/tailwind/preset.js                        |  2 +-
 src/tailwind/preset.ts                        |  2 +-
 src/tailwind/presetConfig.ts                  |  2 +-
 8 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/components/CTA/Button/Button.story.vue b/src/components/CTA/Button/Button.story.vue
index d86af53..18965ce 100644
--- a/src/components/CTA/Button/Button.story.vue
+++ b/src/components/CTA/Button/Button.story.vue
@@ -28,6 +28,9 @@
           title="Icon Position"
         />
       </ControlDescription>
+      <ControlDescription>
+        <HstCheckbox v-model="controls.isLight" title="isLight" />
+      </ControlDescription>
     </template>
     <Variant title="Playground" auto-props-disabled>
       <Button
@@ -36,6 +39,7 @@
         :state="controls.state"
         :iconPosition="controls.iconPosition"
         :styled="controls.style"
+        :isLight="controls.isLight"
         >Hello</Button
       >
     </Variant>
@@ -148,6 +152,7 @@ interface Props {
   state: ButtonState
   iconPosition: ButtonIconPosition
   style: ButtonStyle
+  isLight: boolean
 }
 
 const controls = reactive<Props>({
@@ -155,6 +160,7 @@ const controls = reactive<Props>({
   icon: 'none',
   state: BUTTON_STATE_DEFAULT,
   iconPosition: 'none',
-  style: BUTTON_STYLE_DEFAULT
+  style: BUTTON_STYLE_DEFAULT,
+  isLight: false
 })
 </script>
diff --git a/src/components/CTA/Button/Button.vue b/src/components/CTA/Button/Button.vue
index fd36c21..eef96a0 100644
--- a/src/components/CTA/Button/Button.vue
+++ b/src/components/CTA/Button/Button.vue
@@ -6,17 +6,20 @@
       'h-12 w-[375px] items-center justify-center gap-4 rounded  border-2':
         !isOffAndActive && !isOffAndDisabled,
       'border-primary-moonstone bg-primary-moonstone text-basic-white':
-        isFilledAndActive && !isMediaButton,
+        isFilledAndActive && !isMediaButton && !isLight,
+      'border-0 bg-primary-lightmoonstone text-primary-moonstone':
+        isFilledAndActive && !isMediaButton && isLight,
       'cursor-not-allowed border-basic-grey bg-basic-grey text-basic-white':
-        isFilledAndDisabled && !isMediaButton,
+        isFilledAndDisabled && !isMediaButton && !isLight,
       'border-primary-moonstone bg-transparent text-primary-moonstone':
-        isOutlinedAndActive && !isMediaButton,
+        isOutlinedAndActive && !isMediaButton && !isLight,
       'cursor-not-allowed border-basic-grey bg-transparent text-basic-grey':
-        isOutlinedAndDisabled && !isMediaButton,
+        isOutlinedAndDisabled && !isMediaButton && !isLight,
       'gap-2 bg-inherit text-primary-moonstone': isOffAndActive && !isMediaButton,
-      'cursor-not-allowed gap-2 bg-inherit text-basic-grey': isOffAndDisabled && !isMediaButton,
+      'cursor-not-allowed gap-2 bg-inherit text-basic-grey':
+        isOffAndDisabled && !isMediaButton && !isLight,
       'border-basic-grey bg-inherit font-normal normal-case text-basic-black':
-        icon && isMediaButton,
+        icon && isMediaButton && !isLight,
       'flex-row-reverse': isIconTrailing
     }"
   >
@@ -74,6 +77,11 @@ const props = defineProps({
     type: String as PropType<ButtonIconPosition>,
     required: false,
     validator: (value: ButtonIconPosition): boolean => BUTTON_ICON_POSITIONS.includes(value)
+  },
+  isLight: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 
@@ -85,6 +93,8 @@ const state = computed(() => props.state)
 
 const icon = computed(() => props.icon)
 
+const isLight = computed(() => props.isLight)
+
 const iconPosition = computed(() => props.iconPosition)
 
 const isFilledAndActive = computed(() => style.value === 'fill' && state.value === 'active')
diff --git a/src/components/CTA/InputField/InputField.story.vue b/src/components/CTA/InputField/InputField.story.vue
index 101bb80..d592db9 100644
--- a/src/components/CTA/InputField/InputField.story.vue
+++ b/src/components/CTA/InputField/InputField.story.vue
@@ -40,6 +40,9 @@
           title="State"
         />
       </ControlDescription>
+      <ControlDescription>
+        <HstCheckbox v-model="controls.isRequired" title="isRequired" />
+      </ControlDescription>
     </template>
     <Variant title="Playground" auto-props-disabled>
       <InputField
@@ -52,6 +55,7 @@
         :size="controls.size"
         :state="controls.state"
         :inputType="controls.inputType"
+        :isRequired="controls.isRequired"
         @blur="() => console.log('blur')"
       />
     </Variant>
@@ -133,6 +137,7 @@ interface Props {
   size: InputFieldSize
   state: InputFieldState
   inputType: string
+  isRequired: boolean
 }
 
 const controls = reactive<Props>({
@@ -144,6 +149,7 @@ const controls = reactive<Props>({
   isDateInput: false,
   size: INPUTFIELD_SIZE_DEFAULT,
   state: INPUTFIELD_STATE_DEFAULT,
-  inputType: 'text'
+  inputType: 'text',
+  isRequired: false
 })
 </script>
diff --git a/src/components/CTA/InputField/InputField.vue b/src/components/CTA/InputField/InputField.vue
index 519b019..64c1acb 100644
--- a/src/components/CTA/InputField/InputField.vue
+++ b/src/components/CTA/InputField/InputField.vue
@@ -4,7 +4,7 @@
       class="h-4 pl-1 text-2 font-bold uppercase tracking-tight text-basic-black"
       data-test="Label"
     >
-      {{ label }}
+      {{ label + (isRequired ? ' ' : '') }}<span class="text-error" v-if="isRequired">*</span>
     </p>
     <div v-if="!isBigSize" class="relative h-12 w-full">
       <div v-if="!hasDateInput" class="relative h-12 w-full">
@@ -118,6 +118,10 @@ const props = defineProps({
     validator: function (value) {
       return ['text', 'password', 'number', 'email'].includes(value as string)
     }
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -137,6 +141,7 @@ const hasError = computed(() => state.value === INPUTFIELD_STATE.error)
 const hasErrorIcon = computed(() => hasError.value && hasIcon.value && !isBigSize.value)
 const hasDateInput = computed(() => isDateInput.value && !isBigSize.value)
 const isBigSize = computed(() => size.value === INPUTFIELD_SIZE.big)
+const isRequired = computed(() => props.isRequired)
 
 const emit = defineEmits(['update:modelValue', 'blur'])
 
diff --git a/src/components/Containment/ChipContainer/ChipContainer.vue b/src/components/Containment/ChipContainer/ChipContainer.vue
index a57522d..1b97ef8 100644
--- a/src/components/Containment/ChipContainer/ChipContainer.vue
+++ b/src/components/Containment/ChipContainer/ChipContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-primary-moonston bg-primary-lightmoonstone flex h-[22px] min-w-fit max-w-[95px] items-center justify-between gap-2 overflow-hidden rounded-lg border-[0.25px] bg-opacity-10 px-2 py-1 text-2 font-normal leading-5 text-primary-moonstone"
+    class="border-primary-moonston flex h-[22px] min-w-fit max-w-[95px] items-center justify-between gap-2 overflow-hidden rounded-lg border-[0.25px] bg-primary-lightmoonstone px-2 py-1 text-2 font-normal leading-5 text-primary-moonstone"
     :class="setIconPosition"
   >
     <div class="flex overflow-hidden overflow-ellipsis whitespace-nowrap">
diff --git a/src/tailwind/preset.js b/src/tailwind/preset.js
index 04a1aa7..73d04b7 100644
--- a/src/tailwind/preset.js
+++ b/src/tailwind/preset.js
@@ -17,7 +17,7 @@ module.exports = {
         light: '#00F2A5',
         charcoal: '#373F51',
         moonstone: '#58A4B0',
-        lightmoonstone: '#58A4B0',
+        lightmoonstone: '#58A4B01A',
         powder: '#A9BCD0',
         platinum: '#D8DBE2'
       },
diff --git a/src/tailwind/preset.ts b/src/tailwind/preset.ts
index e270779..630b243 100644
--- a/src/tailwind/preset.ts
+++ b/src/tailwind/preset.ts
@@ -16,7 +16,7 @@ module.exports = {
         light: '#00F2A5',
         charcoal: '#373F51',
         moonstone: '#58A4B0',
-        lightmoonstone: '#58A4B0',
+        lightmoonstone: '#58A4B01A',
         powder: '#A9BCD0',
         platinum: '#D8DBE2'
       },
diff --git a/src/tailwind/presetConfig.ts b/src/tailwind/presetConfig.ts
index e82e86a..20e413b 100644
--- a/src/tailwind/presetConfig.ts
+++ b/src/tailwind/presetConfig.ts
@@ -14,7 +14,7 @@ export default Object.freeze({
         light: '#00F2A5',
         charcoal: '#373F51',
         moonstone: '#58A4B0',
-        lightmoonstone: '#58A4B0',
+        lightmoonstone: '#58A4B01A',
         powder: '#A9BCD0',
         platinum: '#D8DBE2'
       },