Merge pull request #34 from LucasWerey/feat/13

feat(dslib): add certification container and change default config of…

histoire.config.ts

@@ -1,28 +1,60 @@
-import { defineConfig } from 'histoire'
+import { defaultColors, defineConfig } from 'histoire'
 import { HstVue } from '@histoire/plugin-vue'
 
 export default defineConfig({
   plugins: [HstVue()],
   viteIgnorePlugins: ['vite:dts'],
   setupFile: './histoire.setup.ts',
   theme: {
+    title: 'HOOK DSLib',
     logo: {
       square: './src/Logo.svg',
       light: './src/Logo.svg',
       dark: './src/Logo.svg'
     },
-
+    colors: {
+      primary: defaultColors.cyan
+    },
     logoHref: 'https://dslibpfe.vercel.app/',
     favicon: './public/Logo.svg',
-    hideColorSchemeSwitch: true
+    storeColorScheme: true
   },
   defaultStoryProps: {
     layout: {
       type: 'grid',
       width: 300
-    }
+    },
+    autoPropsDisabled: true,
+    responsiveDisabled: true
   },
 
+  backgroundPresets: [
+    {
+      label: 'black',
+      color: '#1B1B1E'
+    },
+    {
+      label: 'darkgrey',
+      color: '#787878'
+    },
+    {
+      label: 'grey',
+      color: '#CDCDCD'
+    },
+    {
+      label: 'lightgrey',
+      color: '#ECECEC'
+    },
+    {
+      label: 'verylightgrey',
+      color: '#F6F6F6'
+    },
+    {
+      label: 'white',
+      color: '#FFFFFF'
+    }
+  ],
+
   tree: {
     groups: [
       {

package.json

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

src/App.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import './assets/index.css'
+import CertifContainer from './components/Containment/CertifContainer'
 
 const handleUpdate = (value: string) => {
   console.log(value)
 }
 </script>
 
 <template>
-  <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"
-  />
+  <div class="h-[100vh] w-[100vw] bg-basic-lightgrey p-2">
+    <CertifContainer
+      :labels="['Bonjour', 'Yo']"
+      title="Certification en Développement de Logiciels Embarqués"
+      description="Institut de Certification en Technologies de l'Information (ICTI)"
+      date="Juillet 2023"
+      idCertif="ICTI-DEV-EMB-2023"
+      image="https://images.pexels.com/photos/14983436/pexels-photo-14983436/free-photo-of-church-roof-with-a-cross-on-top.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+    />
+  </div>
 </template>

src/components.d.ts

@@ -13,6 +13,8 @@ declare module 'vue' {
     'BulletPoints.story': typeof import('./components/Indicators/BulletPoints/BulletPoints.story.vue')['default']
     Button: typeof import('./components/CTA/Button/Button.vue')['default']
     'Button.story': typeof import('./components/CTA/Button/Button.story.vue')['default']
+    CertifContainer: typeof import('./components/Containment/CertifContainer/CertifContainer.vue')['default']
+    'CertifContainer.story': typeof import('./components/Containment/CertifContainer/CertifContainer.story.vue')['default']
     CheckBox: typeof import('./components/CTA/CheckBox/CheckBox.vue')['default']
     'CheckBox.story': typeof import('./components/CTA/CheckBox/CheckBox.story.vue')['default']
     ChipContainer: typeof import('./components/Containment/ChipContainer/ChipContainer.vue')['default']

src/components/Containment/CertifContainer/CertifContainer.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 CERTIF_CONTAINER_STATE = {
+  opened: 'opened',
+  closed: 'closed'
+} as const
+
+export const CERTIF_CONTAINER_STATES = Object.values(CERTIF_CONTAINER_STATE)
+export type CertifContainerState = (typeof CERTIF_CONTAINER_STATES)[number]
+export const CERTIF_CONTAINER_STATE_DEFAULT = CERTIF_CONTAINER_STATE.closed

src/components/Containment/CertifContainer/CertifContainer.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+import CertifContainer from './CertifContainer.vue'
+
+describe('CertifContainer', () => {
+  it('renders the title correctly', () => {
+    const wrapper = mount(CertifContainer, {
+      props: {
+        title: 'Test Title'
+      }
+    })
+    expect(wrapper.text()).toContain('Test Title')
+  })
+  it('renders a maximum of 4 labels', () => {
+    const wrapper = mount(CertifContainer, {
+      props: {
+        labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']
+      }
+    })
+    expect(wrapper.findAllComponents({ name: 'ChipContainer' })).toHaveLength(4)
+  })
+  it('emits update:state event when the icon is clicked', async () => {
+    const wrapper = mount(CertifContainer)
+    await wrapper.find('.cursor-pointer').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('update:state')
+  })
+
+})

src/components/Containment/CertifContainer/CertifContainer.story.vue

@@ -0,0 +1,75 @@
+<template>
+  <Story
+    title="Certification Container"
+    group="containment"
+    :layout="{
+      type: 'grid',
+      width: '80%'
+    }"
+  >
+    <template #controls>
+      <ControlDescription>
+        <HstSelect
+          v-model="controls.state"
+          :options="Object.values(CERTIF_CONTAINER_STATE)"
+          title="State"
+        />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.image" title="Image" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.title" title="Title" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.description" title="Description" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.date" title="Date" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.idCertif" title="IdCertif" />
+      </ControlDescription>
+    </template>
+
+    <Variant title="Playground" auto-props-disabled>
+      <div class="h-[50vh]">
+        <CertifContainer
+          :state="controls.state"
+          :image="controls.image"
+          :title="controls.title"
+          :description="controls.description"
+          :date="controls.date"
+          :idCertif="controls.idCertif"
+          :labels="controls.labels"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { CERTIF_CONTAINER_STATE_DEFAULT, CERTIF_CONTAINER_STATE } from './CertifContainer.model'
+import type { CertifContainerState } from './CertifContainer.model'
+
+interface Controls {
+  state: CertifContainerState
+  image: string
+  title: string
+  description: string
+  date: string
+  idCertif: string
+  labels: string[]
+}
+
+const controls = reactive<Controls>({
+  state: CERTIF_CONTAINER_STATE_DEFAULT,
+  image:
+    'https://images.pexels.com/photos/14983436/pexels-photo-14983436/free-photo-of-church-roof-with-a-cross-on-top.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  title: 'Title',
+  description: 'Description',
+  date: 'Date',
+  idCertif: 'IdCertif',
+  labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
+})
+</script>

src/components/Containment/CertifContainer/CertifContainer.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex min-h-32 w-full flex-col rounded-3xl shadow sm:w-[432px]">
+    <div
+      class="flex h-32 w-full items-center justify-between gap-2 rounded-3xl bg-basic-white p-6 sm:gap-4"
+      :class="{ 'rounded-b-[0px]': isOpen }"
+    >
+      <Avatar type="photo" size="large" :src="image" alt="Certif Photo" />
+      <div class="font-eina1 text-2 font-bold text-basic-black sm:text-4">
+        {{ title }}
+      </div>
+      <div class="h-6 w-6 cursor-pointer" @click="handleClick">
+        <IconsBase name="chevronDown" color="darkgrey" :rotate="isOpen ? 180 : 0" />
+      </div>
+    </div>
+    <div v-show="isOpen" class="flex w-full flex-col gap-4 rounded-b-3xl bg-basic-white p-6 pt-0">
+      <div class="flex flex-col gap-1">
+        <div class="font-eina1 text-2 font-normal text-basic-black sm:text-4">
+          {{ description }}
+        </div>
+        <div class="font-eina1 text-2 font-normal italic text-basic-darkgrey sm:text-4">
+          Date de délivrance : {{ date }}
+        </div>
+        <div class="font-eina1 text-2 font-normal italic text-basic-darkgrey sm:text-4">
+          Identifiant de la certification : {{ idCertif }}
+        </div>
+      </div>
+      <div class="flex w-full items-center gap-2">
+        <ChipContainer v-for="(label, index) in labels.slice(0, 4)" :key="index" :label="label" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CERTIF_CONTAINER_STATE_DEFAULT, CERTIF_CONTAINER_STATE } from './CertifContainer.model'
+import type { CertifContainerState } from './CertifContainer.model'
+
+const props = defineProps({
+  state: {
+    type: String as PropType<CertifContainerState>,
+    default: CERTIF_CONTAINER_STATE_DEFAULT,
+    validator: (value: CertifContainerState) => {
+      return Object.values(CERTIF_CONTAINER_STATE).includes(value)
+    }
+  },
+  image: {
+    type: String as PropType<string>,
+    default:
+      'https://images.pexels.com/photos/14983436/pexels-photo-14983436/free-photo-of-church-roof-with-a-cross-on-top.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
+  },
+  title: {
+    type: String as PropType<string>,
+    default: 'Title'
+  },
+  description: {
+    type: String as PropType<string>,
+    default: 'Description'
+  },
+  date: {
+    type: String as PropType<string>,
+    default: 'Date'
+  },
+  idCertif: {
+    type: String as PropType<string>,
+    default: 'IdCertif'
+  },
+  labels: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+    validator: (labels: string[]) => labels.length <= 4
+  }
+})
+
+const state = computed(() => props.state)
+const image = computed(() => props.image)
+const title = computed(() => props.title)
+const description = computed(() => props.description)
+const date = computed(() => props.date)
+const idCertif = computed(() => props.idCertif)
+const labels = computed(() => props.labels)
+
+const isOpenBydefault = computed(() => {
+  return state.value === CERTIF_CONTAINER_STATE.opened
+})
+
+const isOpen = ref(isOpenBydefault.value)
+
+const handleClick = () => {
+  isOpen.value = !isOpen.value
+  emit('update:state', isOpen.value ? CERTIF_CONTAINER_STATE.opened : CERTIF_CONTAINER_STATE.closed)
+}
+
+const emit = defineEmits(['update:state'])
+</script>

src/components/Containment/CertifContainer/index.ts

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

src/index.ts

@@ -13,3 +13,4 @@ export { default as VideoPlayer } from './components/Media/VideoPlayer'
 export { default as  InputField } from './components/CTA/InputField';
 export { default as  chipContainer } from './components/Containment/ChipContainer';
 export { default as  ChipContainer } from './components/Containment/ChipContainer';
+export { default as  CertifContainer } from './components/Containment/CertifContainer';