Feature : bouton "Copier le lien" sur la fiche dispositif (#958)

- Ajout de la couleur noir dans le scss et dans le fichier de typage
- Création d'un composant générique TeeCopyLinkButton utilisé dans la
fiche dispositif et dans la fiche projet
- Adaptation du composant pour correspondre aux maquettes de la fiche
dispositif et de la fiche projet

Author: oumeimaelisbihani

apps/web/public/css/custom.css

@@ -267,11 +267,6 @@ button.fr-link:hover, .tee-router-link:hover {
 }
 
 /* RESULTS LIST */
-.tee-program-title {
-  color: #6A6AF4;
-  font-size: 1.2rem;
-  font-weight: bold;
-}
 .tee-program-resume {
   color: #000091;
   font-size: 1.7rem;

apps/web/src/assets/custom.css

@@ -264,11 +264,6 @@ button.fr-link:hover, .tee-router-link:hover {
 }
 
 /* RESULTS LIST */
-.tee-program-title {
-  color: #6A6AF4;
-  font-size: 1.2rem;
-  font-weight: bold;
-}
 .tee-program-resume {
   color: #000091;
   font-size: 1.7rem;

apps/web/src/assets/scss/setting/_color.scss

@@ -16,6 +16,7 @@ $base-yellow: #facf35;
 $base-yellow-light: #fef7da;
 $colors: (
   "white": color.$white,
+  "black": color.$black,
   "yellow": (
     "color": $base-yellow,
     "color-with-background": var(--text-action-high-blue-france)

apps/web/src/components.d.ts

@@ -61,6 +61,7 @@ declare module 'vue' {
     TeeButtonExternalLink: typeof import('./components/element/button/TeeButtonExternalLink.vue')['default']
     TeeButtonLink: typeof import('./components/element/button/TeeButtonLink.vue')['default']
     TeeCallout: typeof import('./components/element/TeeCallout.vue')['default']
+    TeeCopyLinkButton: typeof import('./components/element/TeeCopyLinkButton.vue')['default']
     TeeCounterResult: typeof import('./components/element/TeeCounterResult.vue')['default']
     TeeCredits: typeof import('./components/TeeCredits.vue')['default']
     TeeCta: typeof import('./components/home/TeeCta.vue')['default']

apps/web/src/components/element/TeeCopyLinkButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <DsfrButton
+    :label="linkCopied ? 'Lien copié' : 'Copier le lien'"
+    :size="size"
+    :tertiary="tertiary"
+    :no-outline="noOutline"
+    class="fr-radius-a--2v"
+    :class="`${linkCopied ? copyClass : ''} ${textClass}`"
+    icon="fr-icon-link"
+    @click="copyUrl"
+  />
+</template>
+<script setup lang="ts">
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+  noOutline?: boolean
+  tertiary?: boolean
+  copyClass?: string
+  textClass?: string
+}
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  noOutline: false,
+  tertiary: false,
+  copyClass: 'fr-bg--green',
+  textClass: ''
+})
+const linkCopied = ref<boolean>(false)
+
+const copyUrl = async () => {
+  const pageUrl = window.location.href
+  await navigator.clipboard.writeText(pageUrl)
+  linkCopied.value = true
+  setTimeout(() => {
+    linkCopied.value = false
+  }, 2000)
+}
+</script>

apps/web/src/components/program/detail/ProgramDetail.vue

@@ -51,9 +51,16 @@
           <!-- TITLE & RESUME -->
           <div class="fr-col">
             <!-- PROGRAM TITLE -->
-            <p class="tee-program-title fr-mb-5v">
-              {{ program?.titre }}
-            </p>
+            <div class="program-title fr-text--purple fr-h6 fr-text--bold fr-mb-5v">
+              <div class="program-title-text">{{ program?.titre }}</div>
+              <TeeCopyLinkButton
+                class="fr-ml-6v"
+                :tertiary="true"
+                :no-outline="true"
+                copy-class="fr-text--green"
+                text-class="fr-text--black"
+              />
+            </div>
 
             <!-- PROGRAM RESUME / TEXT-->
             <h2
@@ -310,3 +317,13 @@ const scrollToProgramForm = () => {
   }
 }
 </script>
+<style lang="scss" scoped>
+.program-title {
+  display: flex;
+  align-items: center;
+}
+
+.program-title-text {
+  height: 32px;
+}
+</style>

apps/web/src/components/program/list/ProgramCard.vue

@@ -3,7 +3,7 @@
     <div class="fr-card__content">
       <!-- TITLE -->
       <div class="fr-card__start fr-mb-2v">
-        <p class="tee-program-title">
+        <p class="fr-text--purple fr-h6 fr-text--bold">
           {{ program.titre }}
         </p>
       </div>

apps/web/src/components/project/details/ProjectDetail.vue

@@ -11,14 +11,7 @@
     <div class="fr-container">
       <div class="fr-grid-row fr-pt-4v">
         <div class="fr-col-3 fr-col-sm-3 fr-hidden-xs">
-          <DsfrButton
-            :label="linkCopied ? 'Lien copié' : 'Copier le lien'"
-            size="sm"
-            class="fr-m-4v fr-radius-a--2v"
-            :class="linkCopied ? 'fr-bg--green' : ''"
-            icon="fr-icon-link"
-            @click="copyUrl"
-          />
+          <TeeCopyLinkButton class="fr-m-4v" />
           <ProjectSideNav :project="project" />
         </div>
         <div class="fr-col-8 fr-col-xs-12 fr-col-sm-9">
@@ -42,13 +35,11 @@
 <script setup lang="ts">
 import { ThemeType, Project, Color } from '@/types'
 import { Theme } from '@/utils/theme'
-import { DsfrButton } from '@gouvminint/vue-dsfr'
 import { useProjectStore } from '@/stores/project'
 import { onBeforeMount } from 'vue'
 
 const projectStore = useProjectStore()
 
-const linkCopied = ref<boolean>(false)
 const project = ref<Project>()
 const theme = ref<ThemeType>()
 
@@ -59,15 +50,6 @@ const props = defineProps<Props>()
 
 const themeColor = computed<Color | undefined>(() => theme.value?.color)
 
-const copyUrl = async () => {
-  const pageUrl = window.location.href
-  await navigator.clipboard.writeText(pageUrl)
-  linkCopied.value = true
-  setTimeout(() => {
-    linkCopied.value = false
-  }, 2000)
-}
-
 onBeforeMount(async () => {
   if (props.projectSlug !== projectStore.currentProject?.slug) {
     await projectStore.getProjectBySlug(props.projectSlug)

apps/web/src/types/color.ts

@@ -28,5 +28,6 @@ export enum Color {
   yellowLighted = 'yellow--light',
   yellowLightnessed = 'yellow--lightness',
 
-  white = 'white'
+  white = 'white',
+  black = 'black'
 }