Merge pull request #42 from LucasWerey/fix/15

fix(dslib): add colors
LucasWerey · Jan 19, 2024 · 580e5c9 · 580e5c9
2 parents 867ce7b + 8ddec15
commit 580e5c9
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 13 deletions.
diff --git 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,13 +152,15 @@ interface Props {
   state: ButtonState
   iconPosition: ButtonIconPosition
   style: ButtonStyle
+  isLight: boolean
 }
 
 const controls = reactive<Props>({
   type: BUTTON_TYPE_DEFAULT,
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -14,7 +14,7 @@ export default Object.freeze({
         light: '#00F2A5',
         charcoal: '#373F51',
         moonstone: '#58A4B0',
-        lightmoonstone: '#58A4B0',
+        lightmoonstone: '#58A4B01A',
         powder: '#A9BCD0',
         platinum: '#D8DBE2'
       },