Feature : bouton "Copier le lien" sur la fiche dispositif

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

@@ -268,11 +268,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

@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CatalogBanner: typeof import('./components/catalog/element/CatalogBanner.vue')['default']
-    CatalogList: typeof import('./components/catalog/CatalogList.vue')['default']
     CatalogPrograms: typeof import('./components/catalog/CatalogPrograms.vue')['default']
     CatalogProjects: typeof import('./components/catalog/CatalogProjects.vue')['default']
     ContactButton: typeof import('./components/contact/ContactButton.vue')['default']
@@ -21,7 +20,6 @@ declare module 'vue' {
     DsfrButton: typeof import('@gouvminint/vue-dsfr')['DsfrButton']
     DsfrCheckboxSet: typeof import('@gouvminint/vue-dsfr')['DsfrCheckboxSet']
     DsfrHighlight: typeof import('@gouvminint/vue-dsfr')['DsfrHighlight']
-    DsfrNavigation: typeof import('@gouvminint/vue-dsfr')['DsfrNavigation']
     DsfrSelect: typeof import('@gouvminint/vue-dsfr')['DsfrSelect']
     DsfrSideMenu: typeof import('@gouvminint/vue-dsfr')['DsfrSideMenu']
     DsfrTabContent: typeof import('@gouvminint/vue-dsfr')['DsfrTabContent']
@@ -34,19 +32,16 @@ declare module 'vue' {
     ProgramFilterByAidType: typeof import('./components/program/list/filters/ProgramFilterByAidType.vue')['default']
     ProgramFilterByOperator: typeof import('./components/program/list/filters/ProgramFilterByOperator.vue')['default']
     ProgramFilterByRegion: typeof import('./components/program/list/filters/ProgramFilterByRegion.vue')['default']
-    ProgramFilterByTheme: typeof import('./components/program/list/filters/ProgramFilterByTheme.vue')['default']
     ProgramFiltersAccordion: typeof import('./components/program/list/filters/ProgramFiltersAccordion.vue')['default']
     ProgramForm: typeof import('./components/program/detail/ProgramForm.vue')['default']
     ProgramHeader: typeof import('./components/program/detail/ProgramHeader.vue')['default']
     ProgramList: typeof import('./components/program/list/ProgramList.vue')['default']
     ProgramListHeaderResult: typeof import('./components/program/list/ProgramListHeaderResult.vue')['default']
-    ProgramListNoResults: typeof import('./components/program/list/ProgramListNoResults.vue')['default']
     ProgramLongDescription: typeof import('./components/program/detail/ProgramLongDescription.vue')['default']
     ProgramModalFilter: typeof import('./components/program/list/filters/ProgramModalFilter.vue')['default']
     ProgramObjective: typeof import('./components/program/detail/ProgramObjective.vue')['default']
     ProgramTile: typeof import('./components/program/detail/ProgramTile.vue')['default']
     ProjectCard: typeof import('./components/project/list/ProjectCard.vue')['default']
-    ProjectCounter: typeof import('./components/project/list/ProjectCounter.vue')['default']
     ProjectDescription: typeof import('./components/project/details/ProjectDescription.vue')['default']
     ProjectDetail: typeof import('./components/project/details/ProjectDetail.vue')['default']
     ProjectForm: typeof import('./components/project/details/ProjectForm.vue')['default']
@@ -66,14 +61,14 @@ 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']
     TeeDsfrBreadcrumb: typeof import('./components/element/TeeDsfrBreadcrumb.vue')['default']
     TeeDsfrButton: typeof import('./components/element/button/TeeDsfrButton.vue')['default']
     TeeDsfrHeader: typeof import('./components/header/TeeDsfrHeader.vue')['default']
     TeeDsfrHeaderMenuLinks: typeof import('./components/header/TeeDsfrHeaderMenuLinks.vue')['default']
-    TeeDsfrNavigationMenu: typeof import('./components/header/TeeDsfrNavigationMenu.vue')['default']
     TeeDsfrSearchBar: typeof import('./components/element/TeeDsfrSearchBar.vue')['default']
     TeeDsfrTag: typeof import('./components/element/tag/TeeDsfrTag.vue')['default']
     TeeDsfrTags: typeof import('./components/element/tag/TeeDsfrTags.vue')['default']
@@ -87,7 +82,6 @@ declare module 'vue' {
     TeeHomeSteps: typeof import('./components/home/TeeHomeSteps.vue')['default']
     TeeMatomo: typeof import('./components/TeeMatomo.vue')['default']
     TeeNoResult: typeof import('./components/element/TeeNoResult.vue')['default']
-    TeeObjectiveCard: typeof import('./components/element/TeeObjectiveCard.vue')['default']
     TeeQuestionnaire: typeof import('./components/questionnaire/TeeQuestionnaire.vue')['default']
     TeeQuestionnaireResult: typeof import('./components/questionnaire/TeeQuestionnaireResult.vue')['default']
     TeeSpinner: typeof import('./components/element/TeeSpinner.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'
 }