Merge pull request #52 from LucasWerey/fix/22

fix(lib): fix ui issues

src/App.vue

@@ -1,20 +1,10 @@
 <script setup lang="ts">
 import './assets/index.css'
-const names = ['Lucas', 'Baptiste', 'Rose', 'Marine']
+const names = ['Lucasezaezazaeezaeazeza', 'Baptiste', 'Rose', 'Marine']
 </script>
 
 <template>
   <div class="flex h-[100vh] w-[100vw] flex-col gap-5 bg-basic-lightgrey p-2">
-    <OfferCard type="empty" />
-    <OfferCard
-      type="fill"
-      contractDuration="2 mois"
-      contractType="stage"
-      title="Dév web"
-      location="Paris"
-      :nCandidates="38"
-      :studentNames="names"
-      desktopColor="warning"
-    />
+    <RankingContainer title="test" :labels="names" />
   </div>
 </template>

src/components/CTA/SelectField/SelectField.story.vue

@@ -7,13 +7,17 @@
       <ControlDescription>
         <HstText v-model="controls.title" :options="title" title="Title" />
       </ControlDescription>
+      <ControlDescription>
+        <HstCheckbox v-model="controls.isRequired" title="isRequired" />
+      </ControlDescription>
     </template>
     <Variant title="Playground" :auto-props-disabled="true">
       <div class="h-[30vh]">
         <SelectField
           :options="options"
           :default="controls.default"
           :title="controls.title"
+          :isRequired="controls.isRequired"
           @update:modelValue="logEvent('update', $event)"
         />
       </div>
@@ -29,6 +33,7 @@ interface Controls {
   options: SelectFieldOption[]
   default: string
   title: string
+  isRequired: boolean
 }
 
 const controls = reactive<Controls>({
@@ -43,7 +48,8 @@ const controls = reactive<Controls>({
     { value: 'Jours', label: 'Jours' }
   ],
   default: 'Mois',
-  title: 'Date'
+  title: 'Date',
+  isRequired: true
 })
 
 const options = computed(() => controls.options)

src/components/CTA/SelectField/SelectField.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-[72px] w-[200px] flex-col gap-2" @focusout="open = false">
     <h1 class="font-eina1 text-2 font-bold uppercase text-basic-black">
-      {{ title }}
+      {{ title + (isRequired ? ' ' : '') }}<span class="text-error" v-if="isRequired">*</span>
     </h1>
     <div class="relative h-full w-full text-left outline-none">
       <div
@@ -50,10 +50,16 @@ const props = defineProps({
     type: Array as PropType<SelectFieldOption[]>,
     required: true
   },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
   default: { String, required: true },
   title: { String, required: true }
 })
 
+const isRequired = computed(() => props.isRequired)
+
 const selectedValue: Ref<string> = ref('')
 const selected = computed(() => {
   if (selectedValue.value) return selectedValue.value

src/components/Containment/RankingContainer/RankingContainer.vue

@@ -15,16 +15,16 @@
       >
         <p class="rotate-90" :class="topRankClassSeparator">|||</p>
       </div>
-      <div class="flex h-full w-fit min-w-0 flex-row items-center gap-1 sm:gap-5">
+      <div class="flex h-full w-fit w-full min-w-0 flex-row items-center gap-1 sm:gap-5">
         <div
-          class="flex items-center font-eina1 text-1 font-semibold text-basic-black sm:whitespace-nowrap sm:text-4"
+          class="flex items-center font-eina1 text-4 font-semibold text-basic-black sm:whitespace-nowrap"
           data-test="title"
         >
           {{ title }}
         </div>
         <div class="flex items-center text-4" :class="topRankClassSeparator">|</div>
         <div
-          class="scrollbar-hide flex min-w-0 cursor-grab select-none flex-row items-center gap-2 overflow-x-scroll pr-2"
+          class="scrollbar-hide flex w-full cursor-grab select-none flex-row items-center gap-2 overflow-x-scroll pr-2"
           @mousedown="handleMouseDown"
           @mousemove="handleMouseMove"
           @mouseup="handleMouseUp"

src/index.ts

@@ -19,3 +19,4 @@ export { default as RankingContainer } from './components/Containment/RankingCon
 export { default as SelectField } from './components/CTA/SelectField'
 export { default as  OfferCard } from './components/Containment/OfferCard';
 export { default as  DemandCard } from './components/Containment/DemandCard';
+export { default as  MatchContainer } from './components/Containment/MatchContainer';

src/tailwind/preset.ts

@@ -57,7 +57,7 @@ module.exports = {
     },
     fontFamilly: {
       default: ['Inter', 'sans-serif'],
-      second: ['Eina', 'sans-serif']
+      second: ['Eina1', 'sans-serif']
     }
   },
   plugins: [
@@ -86,22 +86,22 @@ module.exports = {
         '.DS-text-body': {
           fontSize: theme('fontSize.4'),
           fontWeight: 400,
-          fontFamilly: theme('fontFamilly.second')
+          fontFamily: theme('fontFamilly.second')
         },
         '.DS-text-body-bold': {
           fontSize: theme('fontSize.4'),
           fontWeight: 700,
-          fontFamilly: theme('fontFamilly.second')
+          fontFamily: theme('fontFamilly.second')
         },
         '.DS-text-small': {
           fontSize: theme('fontSize.3'),
           fontWeight: 400,
-          fontFamilly: theme('fontFamilly.second')
+          fontFamily: theme('fontFamilly.second')
         },
         '.DS-text-preTitle': {
           fontSize: theme('fontSize.2'),
           fontWeight: 700,
-          fontFamilly: theme('fontFamilly.second'),
+          fontFamily: theme('fontFamilly.second'),
           letterSpacing: '3%'
         },
         '.DS-text-btn': {