Merge pull request #40 from LucasWerey/fix/13

fix(dslib): change for ui
LucasWerey · Jan 19, 2024 · a4eb153 · a4eb153
2 parents 7e18be2 + 1451105
commit a4eb153
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lucaswerey/dslib-pfe",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "private": false,
   "main": "./lib/index.umd.js",
   "module": "./lib/index.mjs",

diff --git a/src/components/CTA/Button/Button.vue b/src/components/CTA/Button/Button.vue
@@ -1,21 +1,21 @@
 <template>
   <button
     data-test="Button"
-    class="inline-flex text-3 font-bold uppercase tracking-[0.42px] px-4 py-2 items-center"
+    class="inline-flex items-center px-4 py-2 text-3 font-bold tracking-[0.42px]"
     :class="{
-      'w-[375px] h-12 rounded justify-center items-center gap-4  border-2':
+      'h-12 w-[375px] items-center justify-center gap-4 rounded  border-2':
         !isOffAndActive && !isOffAndDisabled,
-      'bg-primary-moonstone text-basic-white border-primary-moonstone':
+      'border-primary-moonstone bg-primary-moonstone text-basic-white':
         isFilledAndActive && !isMediaButton,
-      'bg-basic-grey text-basic-white cursor-not-allowed border-basic-grey':
+      'cursor-not-allowed border-basic-grey bg-basic-grey text-basic-white':
         isFilledAndDisabled && !isMediaButton,
-      'bg-transparent text-primary-moonstone border-primary-moonstone':
+      'border-primary-moonstone bg-transparent text-primary-moonstone':
         isOutlinedAndActive && !isMediaButton,
-      'bg-transparent text-basic-grey border-basic-grey cursor-not-allowed':
+      'cursor-not-allowed border-basic-grey bg-transparent text-basic-grey':
         isOutlinedAndDisabled && !isMediaButton,
-      'bg-inherit text-primary-moonstone gap-2': isOffAndActive && !isMediaButton,
-      'bg-inherit text-basic-grey cursor-not-allowed gap-2': isOffAndDisabled && !isMediaButton,
-      'bg-inherit text-basic-black border-basic-grey normal-case font-normal':
+      'gap-2 bg-inherit text-primary-moonstone': isOffAndActive && !isMediaButton,
+      'cursor-not-allowed gap-2 bg-inherit text-basic-grey': isOffAndDisabled && !isMediaButton,
+      'border-basic-grey bg-inherit font-normal normal-case text-basic-black':
         icon && isMediaButton,
       'flex-row-reverse': isIconTrailing
     }"

diff --git a/src/components/CTA/InputField/InputField.vue b/src/components/CTA/InputField/InputField.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="flex flex-col w-[375px] items-start gap-2" data-test="InputField">
+  <div class="flex w-[375px] flex-col items-start gap-2" data-test="InputField">
     <p
-      class="text-basic-black text-2 font-bold uppercase tracking-tight h-4 pl-1"
+      class="h-4 pl-1 text-2 font-bold uppercase tracking-tight text-basic-black"
       data-test="Label"
     >
       {{ label }}
     </p>
-    <div v-if="!isBigSize" class="w-full h-12 relative">
-      <div v-if="!hasDateInput" class="w-full h-12 relative">
+    <div v-if="!isBigSize" class="relative h-12 w-full">
+      <div v-if="!hasDateInput" class="relative h-12 w-full">
         <input
           @blur="emit('blur')"
           data-test="InputText"
@@ -16,7 +16,7 @@
           :placeholder="placeholder"
           :value="modelValue"
           @input="handleInput($event as InputEvent)"
-          class="items-start rounded-md border-2 px-4 py-3 align-middle focus:border-primary-charcoal resize-none w-full h-full"
+          class="bold-placeholder h-full w-full resize-none items-start rounded-md border-2 px-4 py-3 align-middle focus:border-primary-charcoal"
           :class="{
             'border-error': hasError,
             'border-basic-grey': !hasError,
@@ -25,7 +25,7 @@
           }"
           :autocomplete="isAutoComplete ? 'new-password' : 'off'"
         />
-        <span v-if="hasErrorIcon" class="absolute right-4 top-1/2 transform -translate-y-1/2">
+        <span v-if="hasErrorIcon" class="absolute right-4 top-1/2 -translate-y-1/2 transform">
           <IconsBase data-test="IconInput" name="warning" color="error" />
         </span>
       </div>
@@ -37,7 +37,7 @@
           :placeholder="placeholder"
           :value="modelValue"
           @input="handleInput($event as InputEvent)"
-          class="text-primary-moonstone items-start rounded-md border-2 px-4 py-2.5 align-middle border-basic-grey focus:border-primary-charcoal resize-none w-full h-full"
+          class="h-full w-full resize-none items-start rounded-md border-2 border-basic-grey px-4 py-2.5 align-middle text-primary-moonstone focus:border-primary-charcoal"
           :class="{
             'bg-basic-verylightgrey text-basic-darkgrey': isDisabled,
             'bg-basic-white text-primary-moonstone ': !isDisabled
@@ -52,10 +52,10 @@
       :placeholder="placeholder"
       :value="modelValue"
       @input="handleInput($event as InputEvent)"
-      class="text-primary-moonstone items-start rounded-md border-2 px-4 py-3 focus:border-primary-charcoal resize-none bg-basic-white w-full h-24"
+      class="h-24 w-full resize-none items-start rounded-md border-2 bg-basic-white px-4 py-3 text-primary-moonstone focus:border-primary-charcoal"
       :class="hasError ? 'border-error' : 'border-basic-grey'"
     />
-    <p v-if="hasError" data-test="Hint" class="text-error pl-1 leading-tight text-3 font-normal">
+    <p v-if="hasError" data-test="Hint" class="pl-1 text-3 font-normal leading-tight text-error">
       {{ hint }}
     </p>
   </div>
@@ -144,3 +144,10 @@ const handleInput = (event: InputEvent) => {
   emit('update:modelValue', (event.target as HTMLInputElement)?.value)
 }
 </script>
+
+<style scoped>
+.bold-placeholder::placeholder {
+  font-weight: 400;
+  font-family: Eina1;
+}
+</style>