Feature : Ajout de liens directs vers les projets sur les cartes Thématiques du parcours 'j'ai un projet en tete'

apps/web/src/components.d.ts

@@ -41,6 +41,7 @@ declare module 'vue' {
     ProgramObjective: typeof import('./components/program/detail/ProgramObjective.vue')['default']
     ProgramProjects: typeof import('./components/program/detail/ProgramProjects.vue')['default']
     ProgramTile: typeof import('./components/program/detail/ProgramTile.vue')['default']
+    ProjectButton: typeof import('./components/project/ProjectButton.vue')['default']
     ProjectCard: typeof import('./components/project/list/ProjectCard.vue')['default']
     ProjectDescription: typeof import('./components/project/details/ProjectDescription.vue')['default']
     ProjectDetail: typeof import('./components/project/details/ProjectDetail.vue')['default']
@@ -88,11 +89,11 @@ declare module 'vue' {
     TeeQuestionnaireResult: typeof import('./components/questionnaire/TeeQuestionnaireResult.vue')['default']
     TeeSpinner: typeof import('./components/element/TeeSpinner.vue')['default']
     TeeTabs: typeof import('./components/element/TeeTabs.vue')['default']
-    ThemeCard: typeof import('./components/theme/ThemeCard.vue')['default']
+    ThemeCard: typeof import('./components/theme/select/ThemeCard.vue')['default']
     ThemeFilter: typeof import('./components/theme/ThemeFilter.vue')['default']
     ThemeFiltersAndCard: typeof import('./components/questionnaire/result/list/ThemeFiltersAndCard.vue')['default']
     ThemeHeaderCard: typeof import('./components/theme/ThemeHeaderCard.vue')['default']
-    ThemeSelect: typeof import('./components/theme/ThemeSelect.vue')['default']
+    ThemeSelect: typeof import('./components/theme/select/ThemeSelect.vue')['default']
     TrackButton: typeof import('./components/track/form/TrackButton.vue')['default']
     TrackButtonInput: typeof import('./components/track/form/TrackButtonInput.vue')['default']
     TrackCallout: typeof import('./components/track/detail/TrackCallout.vue')['default']

apps/web/src/components/theme/ThemeCard.vue → apps/web/src/components/theme/select/ThemeCard.vue

@@ -1,9 +1,10 @@
 <template>
   <div
+    tabindex="0"
     class="fr-card fr-mx-md-0 fr-mx-2v theme-card"
     :class="`fr-bg-xs--${option.color}--light`"
   >
-    <div class="fr-card__body fr-py-1v">
+    <div class="fr-card__body theme-card-body fr-py-1v">
       <div class="fr-card__content fr-p-2v">
         <div class="fr-card__title theme-card-title">
           <div
@@ -37,10 +38,10 @@
       </div>
     </div>
     <div
-      class="fr-hidden fr-unhidden-sm fr-card__header"
+      class="fr-hidden fr-unhidden-sm fr-card__header theme-card-header"
       :class="`fr-card__header--${option.color}`"
     >
-      <div class="fr-card__img fr-card__img--contain">
+      <div class="fr-card__img fr-card__img--contain fr-m-auto">
         <img
           class="fr-responsive-img"
           height="200px"
@@ -70,7 +71,17 @@ defineProps<Props>()
   height: 100%;
 }
 
-.theme-card:hover {
+.theme-card-body {
+  height: 75%;
+}
+
+.theme-card-header {
+  height: 35%;
+}
+
+.theme-card:hover,
+.theme-card:active,
+.highlighted-project:active {
   box-shadow: 1px 2px 8px 2px rgb(0 0 0 / 10%);
 }
 

apps/web/src/components/theme/ThemeSelect.vue → apps/web/src/components/theme/select/ThemeSelect.vue

@@ -5,6 +5,7 @@
       :key="opt.value"
       class="fr-col-4 fr-col-sm-6 fr-col-md-4 fr-col-xs-12 fr-p-1v"
       @click="selectOption(opt.value)"
+      @keydown.enter="selectOption(opt.value)"
     >
       <ThemeCard :option="opt" />
     </div>