Merge pull request #36 from LucasWerey/feat/14

feat(dslib): add delete modal

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].55
+yarn add @lucaswerey/[email protected].57
 ```
 
 ## Use docker

package.json

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

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import './assets/index.css'
 import CertifContainer from './components/Containment/CertifContainer'
+import DeleteModal from './components/Indicators/DeleteModal'
 
 const handleUpdate = (value: string) => {
   console.log(value)
@@ -9,13 +10,11 @@ const handleUpdate = (value: string) => {
 
 <template>
   <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"
+    <DeleteModal
+      description="Lorem ipsum dolor sit amet consectetur. Quis aliquet eget id quis lectus pellentesque. Porttitor."
+      title="Voulez-vous vraiment supprimer cet élément ?"
+      labelFirstButton="Annuler"
+      labelSecondButton="Oui, Supprimer"
     />
   </div>
 </template>

src/components.d.ts

@@ -20,6 +20,8 @@ declare module 'vue' {
     ChipContainer: typeof import('./components/Containment/ChipContainer/ChipContainer.vue')['default']
     'ChipContainer.story': typeof import('./components/Containment/ChipContainer/ChipContainer.story.vue')['default']
     ControlDescription: typeof import('./../histoire/components/internals/ControlDescription.vue')['default']
+    DeleteModal: typeof import('./components/Indicators/DeleteModal/DeleteModal.vue')['default']
+    'DeleteModal.story': typeof import('./components/Indicators/DeleteModal/DeleteModal.story.vue')['default']
     IconsBase: typeof import('./components/Media/IconsBase/IconsBase.vue')['default']
     'IconsBase.story': typeof import('./components/Media/IconsBase/IconsBase.story.vue')['default']
     InputField: typeof import('./components/CTA/InputField/InputField.vue')['default']

src/components/Containment/ChipContainer/ChipContainer.vue

@@ -9,7 +9,7 @@
     <div
       v-if="hasIcon"
       class="flex h-[18px] w-[18px] cursor-pointer items-center overflow-y-hidden"
-      :click="emit('deleteChip')"
+      @click="emit('deleteChip')"
     >
       <IconsBase name="close" class="h-full w-full" />
     </div>

src/components/Indicators/DeleteModal/DeleteModal.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+import DeleteModal from '.'
+
+describe('DeleteModal', () => {
+  it('renders the title and description correctly', () => {
+    const wrapper = mount(DeleteModal, {
+      props: {
+        title: 'Test Title',
+        description: 'Test Description'
+      }
+    })
+    expect(wrapper.text()).toContain('Test Title')
+    expect(wrapper.text()).toContain('Test Description')
+  })
+
+  it('emits FirstButtonClicked when the first button is clicked', async () => {
+    const wrapper = mount(DeleteModal)
+    await wrapper.findAllComponents({ name: 'Button' })[0].trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('FirstButtonClicked')
+  })
+
+  it('emits SecondButtonClicked when the second button is clicked', async () => {
+    const wrapper = mount(DeleteModal)
+    await wrapper.findAllComponents({ name: 'Button' })[1].trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('SecondButtonClicked')
+  })
+})

src/components/Indicators/DeleteModal/DeleteModal.story.vue

@@ -0,0 +1,53 @@
+<template>
+  <Story
+    title="Delete Modal"
+    group="indicators"
+    :layout="{
+      type: 'grid',
+      width: '80%'
+    }"
+  >
+    <template #controls>
+      <ControlDescription>
+        <HstText v-model="controls.title" title="Title" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.description" title="Description" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.labelFirstButton" title="LabelFirstButton" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.labelSecondButton" title="LabelSecondButton" />
+      </ControlDescription>
+    </template>
+
+    <Variant title="Playground" auto-props-disabled>
+      <DeleteModal
+        :title="controls.title"
+        :description="controls.description"
+        :labelFirstButton="controls.labelFirstButton"
+        :labelSecondButton="controls.labelSecondButton"
+        @FirstButtonClicked="logEvent('FirstButtonClicked', $event)"
+        @SecondButtonClicked="logEvent('SecondButtonClicked', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { logEvent } from 'histoire/client'
+interface Controls {
+  title: string
+  description: string
+  labelFirstButton: string
+  labelSecondButton: string
+}
+
+const controls = reactive<Controls>({
+  title: 'Title',
+  description: '',
+  labelFirstButton: 'LabelButton',
+  labelSecondButton: 'LabelButton'
+})
+</script>

src/components/Indicators/DeleteModal/DeleteModal.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="flex min-h-44 w-[300px] flex-col items-center gap-8 overflow-hidden rounded-3xl bg-basic-white p-6 shadow sm:w-[400px]"
+  >
+    <div class="flex w-full flex-col items-center gap-4">
+      <div class="text-center font-inter text-8">{{ title }}</div>
+      <div v-show="description" class="text-center font-eina1 text-3 font-normal">
+        {{ description }}
+      </div>
+    </div>
+    <div class="flex w-full flex-row gap-3 text-3">
+      <Button
+        class="overflow-hidden"
+        type="default"
+        state="active"
+        styled="outlined"
+        style="border-color: #d1d1d1; color: #000000"
+        @click="emit('FirstButtonClicked')"
+      >
+        {{ labelFirstButton }}
+      </Button>
+      <Button
+        class="overflow-hidden"
+        type="default"
+        state="active"
+        styled="fill"
+        style="border-color: #ff5656; background-color: #ff5656"
+        @click="emit('SecondButtonClicked')"
+      >
+        {{ labelSecondButton }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String as PropType<string>,
+    default: 'Title'
+  },
+  description: {
+    type: String as PropType<string>
+  },
+  labelFirstButton: {
+    type: String as PropType<string>,
+    default: 'LabelButton'
+  },
+  labelSecondButton: {
+    type: String as PropType<string>,
+    default: 'LabelButton'
+  }
+})
+
+const title = computed(() => props.title)
+const description = computed(() => props.description)
+const labelFirstButton = computed(() => props.labelFirstButton)
+const labelSecondButton = computed(() => props.labelSecondButton)
+
+const emit = defineEmits(['FirstButtonClicked', 'SecondButtonClicked'])
+</script>

src/components/Indicators/DeleteModal/index.ts

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

src/index.ts

@@ -14,3 +14,4 @@ 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';
+export { default as  DeleteModal } from './components/Indicators/DeleteModal';