[Simplifions] Ajout de composants complémentaires au layout d'article

src/custom/simplifions/components/SimplifionsCasDusageCard.vue

@@ -9,38 +9,82 @@
         <h3 class="title-topic fr-text--lead">
           {{ topic.name }}
         </h3>
-        <p class="fr-mb-1w">
+        <p v-if="showDescription" class="fr-mb-1w">
           {{ stripFromMarkdown(topic.description.split('\n')[0]) }}
         </p>
         <div class="date-topic fr-grid-row fr-grid-row--right fr-mt-1w">
           <DraftTag v-if="topic.private" class="fr-mr-1v" />
-          <div class="fr-ml-auto fr-mb-0 fr-text--xs">
-            Mis à jour {{ formatRelativeIfRecentDate(topic.last_modified) }}
-          </div>
+        </div>
+        <div
+          v-if="showArrow && !hasDetails"
+          class="card-arrow"
+          aria-hidden="true"
+        >
+          <span class="fr-icon-arrow-right-line" />
         </div>
       </div>
       <!--Texte pour préciser les usagers et les fournisseurs de service-->
-      <div class="description-topic">
-        <SimplifionsTags :topic="topic" :page-key="pageKey" />
+      <div v-if="hasDetails" class="description-topic">
+        <SimplifionsTags
+          :topic="topic"
+          :page-key="pageKey"
+          :show-target-users="showTargetUsers"
+          :show-fournisseurs="showFournisseurs"
+          :hide-simplification="!showSimplificationTags"
+          :show-categorie-de-solution="showCategorieDeSolution"
+        />
+        <div v-if="showArrow" class="card-arrow" aria-hidden="true">
+          <span class="fr-icon-arrow-right-line" />
+        </div>
       </div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
-import { useCurrentPageConf } from '@/router/utils'
 import { stripFromMarkdown } from '@/utils'
-import { useFormatDate } from '@datagouv/components-next'
+import { useRoute } from 'vue-router'
 import type { TopicCasUsage } from '../model/topics'
 import DraftTag from './DraftTag.vue'
 import SimplifionsTags from './SimplifionsTags.vue'
 
-defineProps<{
-  topic: TopicCasUsage
-}>()
+const props = withDefaults(
+  defineProps<{
+    topic: TopicCasUsage
+    pageKey?: string
+    showDescription?: boolean
+    showTargetUsers?: boolean
+    showFournisseurs?: boolean
+    showSimplificationTags?: boolean
+    showCategorieDeSolution?: boolean
+    showArrow?: boolean
+  }>(),
+  {
+    pageKey: undefined,
+    showDescription: true,
+    showTargetUsers: true,
+    showFournisseurs: true,
+    showSimplificationTags: true,
+    showCategorieDeSolution: true,
+    showArrow: false
+  }
+)
 
-const { pageKey } = useCurrentPageConf()
-const { formatRelativeIfRecentDate } = useFormatDate()
+const route = useRoute()
+const pageKey = computed(
+  () =>
+    props.pageKey ??
+    (route.meta.pageKey as string | undefined) ??
+    'cas-d-usages'
+)
+
+const hasDetails = computed(
+  () =>
+    props.showTargetUsers ||
+    props.showFournisseurs ||
+    props.showSimplificationTags ||
+    props.showCategorieDeSolution
+)
 </script>
 
 <style scoped>
@@ -50,45 +94,26 @@ const { formatRelativeIfRecentDate } = useFormatDate()
   background: none;
 }
 
-.owner-avatar {
-  margin-bottom: -6px;
-  display: inline-block;
-}
-.fr-card__detail,
-:deep(h3) {
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  line-height: inherit;
-}
-.description p {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
+
 .topic-card {
-  border: 1px solid #ebebeb;
+  border: 1px solid var(--border-default-grey);
 }
 .topic-card:hover {
-  background-color: #f6f6f6;
-  opacity: 50;
+  background-color: var(--background-alt-grey);
 }
 .header-topic {
   background-color: rgba(209, 221, 244, 0.5);
   color: #465f9d;
   padding: 16px;
   gap: 10px;
-  opacity: 0px;
   min-height: 60px;
 }
 .topic-card:hover .header-topic {
   background-color: rgba(188, 199, 219, 0.5);
 }
+.topic-card:hover .description-topic {
+  background-color: var(--background-alt-grey);
+}
 .title-topic {
   font-family: Marianne;
   color: #465f9d;
@@ -110,21 +135,28 @@ const { formatRelativeIfRecentDate } = useFormatDate()
   font-size: 14px;
   font-weight: 400;
   line-height: 21px;
+  color: var(--text-mention-grey);
 }
 .description-topic {
-  margin: 16px;
+  padding: 16px;
   min-height: 80px;
+  background-color: var(--background-default-grey);
 }
-.date-topic {
-  color: #6b7280; /* gris moyen */
+
+
+.card-arrow {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem 1rem 0.5rem;
+  color: var(--text-action-high-blue-france);
 }
 
 .topic-card--private .header-topic {
-  background-color: #f6f6f6;
-  color: #666; /* gris moyen */
+  background-color: var(--background-alt-grey);
+  color: var(--text-mention-grey); /* gris moyen */
 }
 .topic-card--private:hover .header-topic {
-  background-color: #e7e7e7 !important;
-  color: #666; /* gris moyen */
+  background-color: var(--background-alt-grey);
+  color: var(--text-mention-grey);
 }
 </style>

src/custom/simplifions/components/SimplifionsSolutionCard.vue

@@ -8,34 +8,48 @@
       :class="{ 'topic-card--private': topic.private }"
     >
       <div class="fr-card__body">
-        <div class="fr-card__content">
+        <div class="fr-card__content fr-px-2w fr-pt-3w">
           <div class="fr-grid-row">
             <SimplifionsSolutionOperateurTag
-              v-if="!imageUrl"
+              v-if="showOperateurTag && (!imageUrl || !showImage)"
               :topic-solution="topic"
             />
             <DraftTag v-if="topic.private" class="fr-ml-auto" />
           </div>
           <h3 class="fr-card__title fr-text--lead fr-mb-0">{{ topic.name }}</h3>
 
-          <p class="fr-card__desc">
+          <p v-if="showDescription" class="fr-card__desc">
             {{ stripFromMarkdown(topic.description.split('\n')[0]) }}
           </p>
 
           <div class="fr-card__end">
-            <SimplifionsTags :topic="topic" :page-key="pageKey" />
+            <SimplifionsTags
+              :topic="topic"
+              :page-key="pageKey"
+              :show-target-users="showTargetUsers"
+              :show-fournisseurs="showFournisseurs"
+              :hide-simplification="!showSimplificationTags"
+              :show-categorie-de-solution="showCategorieDeSolution"
+            />
+            <div v-if="showArrow" class="card-arrow" aria-hidden="true">
+              <span class="fr-icon-arrow-right-line" />
+            </div>
           </div>
         </div>
       </div>
       <div class="fr-card__header">
-        <div v-if="imageUrl" class="fr-card__img topic-image-container fr-mx-0">
+        <div
+          v-if="showImage && imageUrl"
+          class="fr-card__img topic-image-container fr-mx-0"
+        >
           <img
             :src="imageUrl"
             :alt="topic.name"
             class="card-image fr-responsive-img fr-ratio-16x9"
           />
           <div class="topic-image-overlay"></div>
           <SimplifionsSolutionOperateurTag
+            v-if="showOperateurTag"
             :topic-solution="topic"
             class="badge-absolute"
           />
@@ -46,25 +60,47 @@
 </template>
 
 <script setup lang="ts">
-import { useCurrentPageConf } from '@/router/utils'
 import { stripFromMarkdown } from '@/utils'
+import { useRoute } from 'vue-router'
 import { grist } from '../grist.ts'
 import type { TopicSolution } from '../model/topics'
 import DraftTag from './DraftTag.vue'
 import SimplifionsSolutionOperateurTag from './SimplifionsSolutionOperateurTag.vue'
 import SimplifionsTags from './SimplifionsTags.vue'
 
-const { pageKey } = useCurrentPageConf()
-
-const props = defineProps({
-  topic: {
-    type: Object as () => TopicSolution,
-    required: true
+const props = withDefaults(
+  defineProps<{
+    topic: TopicSolution
+    pageKey?: string
+    showDescription?: boolean
+    showImage?: boolean
+    showOperateurTag?: boolean
+    showTargetUsers?: boolean
+    showFournisseurs?: boolean
+    showSimplificationTags?: boolean
+    showCategorieDeSolution?: boolean
+    showArrow?: boolean
+  }>(),
+  {
+    pageKey: undefined,
+    showDescription: true,
+    showImage: true,
+    showOperateurTag: true,
+    showTargetUsers: true,
+    showFournisseurs: true,
+    showSimplificationTags: true,
+    showCategorieDeSolution: true,
+    showArrow: false
   }
-})
+)
 
-const solution = props.topic.extras['simplifions-v2-solutions']
+const route = useRoute()
+const pageKey = computed(
+  () =>
+    props.pageKey ?? (route.meta.pageKey as string | undefined) ?? 'solutions'
+)
 
+const solution = props.topic.extras['simplifions-v2-solutions']
 const imageUrl = solution?.Image?.[0] ? grist.imageUrl(solution.Image[0]) : ''
 </script>
 
@@ -104,8 +140,8 @@ const imageUrl = solution?.Image?.[0] ? grist.imageUrl(solution.Image[0]) : ''
 }
 
 .topic-card--private {
-  background-color: #f6f6f6;
-  color: #6b7280; /* gris moyen */
+  background-color: var(--background-alt-grey);
+  color: var(--text-mention-grey);
 }
 
 .fr-card__title {
@@ -115,4 +151,11 @@ const imageUrl = solution?.Image?.[0] ? grist.imageUrl(solution.Image[0]) : ''
   color: var(--text-default-grey);
   font-size: 1rem;
 }
+
+.card-arrow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+  color: var(--text-action-high-blue-france);
+}
 </style>

src/custom/simplifions/components/SimplifionsSolutionDescription.vue

@@ -19,7 +19,7 @@
         <SimplifionsTags
           :topic="topic"
           :page-key="pageKey"
-          :show-simplification="false"
+          :hide-simplification="true"
         />
 
         <ul class="fr-mt-4w">

src/custom/simplifions/components/SimplifionsTags.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     <!--Texte pour préciser les usagers et les fournisseurs de service-->
-    <div v-if="groupedTags['target-users']" class="fr-card__detail">
+    <div
+      v-if="showTargetUsers && groupedTags['target-users']"
+      class="fr-card__detail"
+    >
       <p class="fr-mb-1w white-space-normal">
         Pour simplifier les démarches des
         <HumanReadableList
@@ -10,7 +13,7 @@
       </p>
     </div>
     <div
-      v-if="orderedFournisseursDeService.length > 0"
+      v-if="showFournisseurs && orderedFournisseursDeService.length > 0"
       class="fr-card__detail fr-text--right"
     >
       <p class="fr-mb-1w white-space-normal">
@@ -21,7 +24,7 @@
     </div>
     <!-- Tags indiquant le type de simplification et de budget -->
     <div
-      v-if="!hideSimplification && groupedTags['types-de-simplification']"
+      v-if="!props.hideSimplification && groupedTags['types-de-simplification']"
       class="simplification-group fr-mt-2w"
     >
       <ul class="fr-badges-group">
@@ -55,9 +58,13 @@ const props = withDefaults(
     pageKey: string
     showCategorieDeSolution?: boolean
     hideSimplification?: boolean
+    showTargetUsers?: boolean
+    showFournisseurs?: boolean
   }>(),
   {
-    showCategorieDeSolution: true
+    showCategorieDeSolution: true,
+    showTargetUsers: true,
+    showFournisseurs: true
   }
 )
 
@@ -75,8 +82,6 @@ const groupedTags = computed(() => {
   return groups
 })
 
-const hideSimplification = computed(() => props.hideSimplification)
-
 const orderedFournisseursDeService = computed(() => {
   const extras = props.topic.extras
   const extrasForObject =