Merge pull request #32 from LucasWerey/feat/11

feat(dslib): add SelectField

README.md

@@ -60,7 +60,7 @@ You will find the last version of the library here : https://github.com/LucasWer
 In your main project import the library :
 
 ```bash
-yarn add @lucaswerey/[email protected].52
+yarn add @lucaswerey/[email protected].55
 ```
 
 ## Use docker

package.json

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

src/App.vue

@@ -1,7 +1,21 @@
 <script setup lang="ts">
 import './assets/index.css'
+
+const handleUpdate = (value: string) => {
+  console.log(value)
+}
 </script>
 
 <template>
-  <ChipContainer label="Espagnol" hasIcon />
+  <SelectField
+    title="Date"
+    :options="[
+      { value: 'Mois', label: 'Mois' },
+      { value: 'Années', label: 'Années' },
+      { value: 'Semaines', label: 'Semaines' },
+      { value: 'Jours', label: 'Jours' }
+    ]"
+    :default="'go'"
+    @update:modelValue="handleUpdate"
+  />
 </template>

src/assets/index.css

@@ -1,3 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: 'Eina1';
+  src: url('./fonts/Eina01-Regular.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Eina1';
+  src: url('./fonts/Eina01-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+* {
+  font-family: 'Inter', sans-serif;
+}

src/components.d.ts

@@ -24,6 +24,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']
+    SelectField: typeof import('./components/CTA/SelectField/SelectField.vue')['default']
+    'SelectField.story': typeof import('./components/CTA/SelectField/SelectField.story.vue')['default']
     SnackBar: typeof import('./components/Indicators/SnackBar/SnackBar.vue')['default']
     'SnackBar.story': typeof import('./components/Indicators/SnackBar/SnackBar.story.vue')['default']
     StepIndicator: typeof import('./components/Indicators/StepIndicator/StepIndicator.vue')['default']

src/components/CTA/SelectField/SelectField.model.ts

@@ -0,0 +1,37 @@
+/*
+            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 interface SelectFieldOption {
+  value: string
+  label: string
+}
+
+export interface SelectFieldProps {
+  options: SelectFieldOption[]
+  default: string
+  tabindex: number
+  title: string
+}

src/components/CTA/SelectField/SelectField.spec.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+
+import SelectField from './SelectField.vue'
+import { nextTick } from 'vue'
+
+describe('SelectField.vue', () => {
+  it('renders title prop', async () => {
+    const wrapper = mount(SelectField, {
+      props: {
+        title: 'Test Title',
+        options: [{ label: 'Option 1', value: 'option1' }],
+        default: 'option1'
+      }
+    })
+
+    await nextTick()
+
+    expect(wrapper.find('h1').text()).toBe('Test Title')
+  })
+
+  it('emits update:modelValue event when an option is clicked', async () => {
+    const wrapper = mount(SelectField, {
+      props: {
+        title: 'Test Title',
+        options: [{ label: 'Option 1', value: 'option1' }],
+        default: 'option1'
+      }
+    })
+
+    await nextTick()
+
+    await wrapper.find('.items div').trigger('click')
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['option1'])
+  })
+})

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

@@ -0,0 +1,47 @@
+<template>
+  <Story title="Select Field" group="cta">
+    <template #controls>
+      <ControlDescription>
+        <HstSelect v-model="controls.default" :options="options" title="Options" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.title" :options="title" title="Title" />
+      </ControlDescription>
+    </template>
+    <Variant title="Playground" :auto-props-disabled="true">
+      <div class="h-[30vh]">
+        <SelectField
+          :options="options"
+          :default="controls.default"
+          :title="controls.title"
+          @update:modelValue="logEvent('update', $event)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { SelectFieldOption } from './SelectField.model'
+import { logEvent } from 'histoire/client'
+
+interface Controls {
+  options: SelectFieldOption[]
+  default: string
+  title: string
+}
+
+const controls = reactive<Controls>({
+  options: [
+    { value: 'Mois', label: 'Mois' },
+    { value: 'Années', label: 'Années' },
+    { value: 'Semaines', label: 'Semaines' },
+    { value: 'Jours', label: 'Jours' }
+  ],
+  default: 'Mois',
+  title: 'Date'
+})
+
+const options = computed(() => controls.options)
+const title = computed(() => controls.title)
+</script>

src/components/CTA/SelectField/SelectField.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flex h-[72px] w-[200px] flex-col gap-2">
+    <h1 class="font-eina1 text-2 font-bold uppercase text-basic-black">
+      {{ title }}
+    </h1>
+    <div class="relative h-full w-full text-left outline-none">
+      <div
+        class="full flex h-[48px] w-full cursor-pointer select-none items-center justify-between rounded-[4px] border border-basic-grey bg-basic-white px-[16px] py-[13px] font-eina1 text-4 lowercase text-basic-darkgrey"
+        :class="{ 'h-[48px] rounded-b-[0px] ': open }"
+        @click="open = !open"
+        @blur="open = false"
+      >
+        {{ selected }}
+        <IconsBase
+          :rotate="open ? 180 : 0"
+          name="chevronDown"
+          class="h-[24px] w-[24px] bg-basic-white"
+          color="darkgrey"
+        />
+      </div>
+      <div class="items" v-show="open">
+        <div
+          v-for="(option, i) of options"
+          :key="i"
+          @click="handleClick(option)"
+          :class="[
+            'flex h-[48px] w-full cursor-pointer border-b border-l border-r border-basic-grey px-[16px] py-[13px] font-eina1 text-4 lowercase text-basic-darkgrey hover:border-basic-lightgrey hover:bg-basic-lightgrey',
+            { 'rounded-b-[4px]': i === (options?.length ?? 0) - 1 },
+            {
+              ' border-basic-lightgrey bg-basic-lightgrey font-bold  text-basic-darkgrey':
+                option.value === selectedValue
+            },
+            {
+              ' bg-basic-white': option.value != selectedValue
+            }
+          ]"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SelectFieldOption } from './SelectField.model'
+
+const props = defineProps({
+  options: {
+    type: Array as PropType<SelectFieldOption[]>,
+    required: true
+  },
+  default: { String, required: true },
+  title: { String, required: true }
+})
+
+const selectedValue: Ref<string> = ref('')
+const selected = computed(() => {
+  if (selectedValue.value) return selectedValue.value
+  if (props.default) return props.default
+  if (props.options.length > 0) return props.options[0].value
+  return null
+})
+const open = ref(false)
+
+onMounted(() => {
+  emit('update:modelValue', selected.value)
+})
+
+const handleClick = (option: SelectFieldOption) => {
+  selectedValue.value = option.value
+  open.value = false
+  emit('update:modelValue', option.value)
+}
+
+const emit = defineEmits(['update:modelValue'])
+</script>

src/components/CTA/SelectField/index.ts

@@ -0,0 +1 @@
+export { default } from './SelectField.vue';

src/components/Containment/ChipContainer/ChipContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-[22px] min-w-[69px] max-w-[95px] items-center justify-center justify-between gap-2 overflow-hidden rounded-lg border-[0.25px] border-primary-moonstone bg-primary-light bg-opacity-10 px-2 py-1 text-2 font-normal leading-5 text-primary-moonstone"
+    class="flex h-[22px] min-w-[69px] max-w-[95px] items-center justify-between gap-2 overflow-hidden rounded-lg border-[0.25px] border-primary-moonstone bg-primary-light bg-opacity-10 px-2 py-1 text-2 font-normal leading-5 text-primary-moonstone"
     :class="setIconPosition"
   >
     <div class="flex cursor-default overflow-hidden overflow-ellipsis whitespace-nowrap">

tailwind.config.js

@@ -1,4 +1,19 @@
 module.exports = {
   content: ['./src/**/*.vue'],
-  presets: [require('./src/tailwind/preset.js')]
+  presets: [require('./src/tailwind/preset.js')],
+  theme: {
+    extend: {
+      fontFamily: {
+        inter: ['Inter', 'sans-serif'],
+        eina1: ['Eina1', 'sans-serif']
+      },
+      fontWeight: {
+        500: '500',
+        700: '700',
+        800: '800',
+        medium: '500',
+        bold: '700'
+      }
+    }
+  }
 }