Merge pull request #48 from LucasWerey/feat/17

feat(dslib): add offerCard

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucaswerey/dslib-pfe",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "private": false,
   "main": "./lib/index.umd.js",
   "module": "./lib/index.mjs",

src/App.vue

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

src/assets/icons/desktop.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="33" height="33" rx="5" :fill="color" fill-opacity="0.1" />
+    <path
+      d="M23.4064 19.3845V11.3803C23.4064 10.9085 23.2172 10.4561 22.8806 10.1225C22.5439 9.78896 22.0873 9.60156 21.6112 9.60156H10.8403C10.3642 9.60156 9.9076 9.78896 9.57094 10.1225C9.23429 10.4561 9.04516 10.9085 9.04516 11.3803V19.3845M23.4064 19.3845H9.04516M23.4064 19.3845L24.5553 21.6524C24.6245 21.7885 24.6572 21.9398 24.6504 22.0921C24.6436 22.2443 24.5974 22.3922 24.5163 22.5216C24.4352 22.6511 24.3219 22.7577 24.1873 22.8313C24.0527 22.9049 23.9012 22.943 23.7474 22.942H8.70408C8.55031 22.943 8.39885 22.9049 8.26421 22.8313C8.12958 22.7577 8.01628 22.6511 7.93519 22.5216C7.8541 22.3922 7.80793 22.2443 7.80111 22.0921C7.7943 21.9398 7.82706 21.7885 7.89626 21.6524L9.04516 19.3845"
+      :stroke="color"
+      stroke-width="1.3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000'
+  }
+})
+</script>

src/components.d.ts

@@ -28,6 +28,8 @@ declare module 'vue' {
     'InputField.story': typeof import('./components/CTA/InputField/InputField.story.vue')['default']
     Loader: typeof import('./components/Indicators/Loader/Loader.vue')['default']
     'Loader.story': typeof import('./components/Indicators/Loader/Loader.story.vue')['default']
+    OfferCard: typeof import('./components/Containment/OfferCard/OfferCard.vue')['default']
+    'OfferCard.story': typeof import('./components/Containment/OfferCard/OfferCard.story.vue')['default']
     RankingContainer: typeof import('./components/Containment/RankingContainer/RankingContainer.vue')['default']
     'RankingContainer.story': typeof import('./components/Containment/RankingContainer/RankingContainer.story.vue')['default']
     SelectField: typeof import('./components/CTA/SelectField/SelectField.vue')['default']

src/components/Containment/OfferCard/OfferCard.model.ts

@@ -0,0 +1,34 @@
+/*
+            Avaible colors:
+
+                  basic:
+                    black: '#1B1B1E',
+                    darkgrey: '#787878',
+                    grey: '#CDCDCD',
+                    lightgrey: '#ECECEC',
+                    verylightgrey: '#F6F6F6',
+                    white: '#FAFAFA'
+                  primary:
+                    DEFAULT: '#000000',
+                    light: '#00F2A5',
+                    charcoal: '#373F51',
+                    moonstone: '#58A4B0',
+                    powder: '#A9BCD0',
+                    platinum: '#D8DBE2'
+                  transparent: 'transparent',
+                  current: 'currentColor',
+                  inherit: 'inherit',
+                  error: '#FF5656',
+                  warning: '#FFC85C',
+                  success: '#7BC079',
+                  info: '#333333'
+            */
+
+export const OFFER_CARD_TYPE = {
+  fill: 'fill',
+  empty: 'empty'
+} as const
+
+export const OFFER_CARD_TYPES = Object.values(OFFER_CARD_TYPE)
+export type OfferCardType = (typeof OFFER_CARD_TYPES)[number]
+export const OFFER_CARD_TYPE_DEFAULT = OFFER_CARD_TYPE.empty

src/components/Containment/OfferCard/OfferCard.spec.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+import OfferCard from './OfferCard.vue'
+
+describe('OfferCard.vue', () => {
+  it('renders correctly when type is empty', () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'empty',
+        title: '',
+        location: '',
+        nCandidates: 0,
+        contractType: '',
+        contractDuration: '',
+        id: '',
+        studentNames: [],
+        desktopColor: 'transparent'
+      }
+    })
+    expect(wrapper.find('.h-60').exists()).toBe(true)
+    expect(wrapper.find('[data-test="create-offer"]').exists()).toBe(true)
+  })
+
+  it('renders correctly when type is fill', () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'fill',
+        title: 'Test Title',
+        location: 'Test Location',
+        nCandidates: 5,
+        contractType: 'Test Contract Type',
+        contractDuration: 'Test Contract Duration',
+        id: '1',
+        studentNames: ['John', 'Doe'],
+        desktopColor: 'error'
+      }
+    })
+    expect(wrapper.find('.h-60').exists()).toBe(true)
+    expect(wrapper.find('h4').text()).toBe('Test Title')
+    expect(wrapper.find('p').text()).toBe('Test Location')
+    expect(wrapper.findAll('[data-test="avatar"]').length).toBe(2)
+  })
+
+  it('emits seeOffer event', async () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'fill',
+        title: 'Test Title',
+        location: 'Test Location',
+        nCandidates: 5,
+        contractType: 'Test Contract Type',
+        contractDuration: 'Test Contract Duration',
+        id: '1',
+        studentNames: ['John', 'Doe'],
+        desktopColor: 'error'
+      }
+    })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('seeOffer')
+    expect(wrapper.emitted().seeOffer[0]).toEqual(['1'])
+  })
+
+  it('emits createOffer event', async () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'empty',
+        title: '',
+        location: '',
+        nCandidates: 0,
+        contractType: '',
+        contractDuration: '',
+        id: '',
+        studentNames: [],
+        desktopColor: 'error'
+      }
+    })
+    await wrapper.find('[data-test="create-offer"]').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('createOffer')
+  })
+})

src/components/Containment/OfferCard/OfferCard.story.vue

@@ -0,0 +1,91 @@
+<template>
+  <Story
+    title="Offer Card"
+    group="containment"
+    :layout="{
+      type: 'grid',
+      width: '50%'
+    }"
+  >
+    <template #controls>
+      <ControlDescription>
+        <HstSelect v-model="controls.type" :options="Object.values(OFFER_CARD_TYPE)" title="Type" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.title" title="Title" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.location" title="Location" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstNumber v-model="controls.nCandidates" title="Number of candidates" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.contractType" title="Contract type" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.contractDuration" title="Contract duration" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.id" title="Id" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.studentNames" title="Student names" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstSelect
+          v-model="controls.desktopColor"
+          :options="Object.keys(colorsPalette)"
+          title="Desktop color"
+        />
+      </ControlDescription>
+    </template>
+
+    <template #default>
+      <OfferCard
+        :type="controls.type"
+        :title="controls.title"
+        :location="controls.location"
+        :n-candidates="controls.nCandidates"
+        :contract-type="controls.contractType"
+        :contract-duration="controls.contractDuration"
+        :id="controls.id"
+        :student-names="controls.studentNames"
+        :desktop-color="controls.desktopColor"
+        @seeOffer="() => {}"
+        @createOffer="() => {}"
+      />
+    </template>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { OFFER_CARD_TYPE_DEFAULT, OFFER_CARD_TYPE } from './OfferCard.model'
+import { colorsPalette } from '../../../tailwind/presetConfig'
+import type { OfferCardType } from './OfferCard.model'
+import type { IconsColor } from '../../Media/IconsBase/IconsBase.model'
+
+interface Controls {
+  type: OfferCardType
+  title: string
+  location: string
+  nCandidates: number
+  contractType: string
+  contractDuration: string
+  id: string
+  studentNames: string[]
+  desktopColor: IconsColor
+}
+
+const controls = reactive<Controls>({
+  type: OFFER_CARD_TYPE_DEFAULT,
+  title: 'default',
+  location: 'default',
+  nCandidates: 0,
+  contractType: 'default',
+  contractDuration: 'default',
+  id: '2323232',
+  studentNames: ['Pierre', 'Paul', 'Jacques', 'Thiery'],
+  desktopColor: 'warning'
+})
+</script>