Merge pull request #941 from dnum-mi/develop

Develop

demo-app/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
+import { useRoute } from 'vue-router'
 import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
-import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
 
+import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
 import DsfrHeader, { type DsfrHeaderProps } from '../src/components/DsfrHeader/DsfrHeader.vue'
 import DsfrModal from '../src/components/DsfrModal/DsfrModal.vue'
 import DsfrNavigation, { type DsfrNavigationProps } from '../src/components/DsfrNavigation/DsfrNavigation.vue'
@@ -245,21 +245,25 @@ const licenceTo = undefined
 const licenceName = undefined
 const licenceLinkProps = undefined
 const ecosystemLinks = [
-  {
-    label: 'legifrance.gouv.fr',
-    href: 'https://legifrance.gouv.fr',
-  },
   {
     label: 'info.gouv.fr',
     href: 'https://info.gouv.fr',
+    title: 'Informations gouvernementales, nouvelle fenêtre',
   },
   {
     label: 'service-public.fr',
     href: 'https://service-public.fr',
+    title: 'Informations et démarches administratives, nouvelle fenêtre',
+  },
+  {
+    label: 'legifrance.gouv.fr',
+    href: 'https://legifrance.gouv.fr',
+    title: 'Service public de diffusion du droit, nouvelle fenêtre',
   },
   {
     label: 'data.gouv.fr',
     href: 'https://data.gouv.fr',
+    title: 'Plateforme des données publiques, nouvelle fenêtre',
   },
 ]
 
@@ -289,7 +293,7 @@ const currentRoute = computed(() => route.name)
       <h1>Demo VueDsfr</h1>
 
       <DsfrBreadcrumb
-        :links="[{ text: 'Accueil', to: '/' }, { text: currentRoute }]"
+        :links="[{ text: 'Accueil', to: '/' }, { text: (currentRoute as string) }]"
       />
 
       <router-view />
@@ -336,8 +340,4 @@ const currentRoute = computed(() => route.name)
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-.my-1 {
-  margin-block: 0.5rem;
-}
 </style>

src/components/DsfrFooter/DsfrFooter.types.ts

@@ -24,6 +24,7 @@ export type DsfrFooterLinkProps = {
   onClick?: ($event: MouseEvent) => void
   to?: RouteLocationRaw
   href?: string
+  title?: string
 }
 
 export type DsfrFooterLinkListProps = {
@@ -44,15 +45,15 @@ export type DsfrFooterProps = {
   descText?: string
   beforeMandatoryLinks?: DsfrFooterLinkProps[]
   afterMandatoryLinks?: DsfrFooterLinkProps[]
-  mandatoryLinks?: { label: string, to: RouteLocationRaw | undefined }[]
-  ecosystemLinks?: { label: string, href: string }[]
+  mandatoryLinks?: { label: string, to: RouteLocationRaw | undefined, title?: string }[]
+  ecosystemLinks?: { label: string, href: string, title: string, [key: string]: string }[]
   operatorLinkText?: string
   operatorTo?: RouteLocationRaw | undefined
   operatorImgStyle?: StyleValue
   operatorImgSrc?: string
   operatorImgAlt?: string
   licenceTo?: string
-  licenceLinkProps?: { href: string } | { to: RouteLocationRaw | undefined }
+  licenceLinkProps?: ({ href: string } | { to: RouteLocationRaw | undefined }) & Record<string, string>
   licenceText?: string
   licenceName?: string
 }

src/components/DsfrFooter/DsfrFooter.vue

@@ -53,18 +53,22 @@ const props = withDefaults(defineProps<DsfrFooterProps>(), {
     {
       label: 'info.gouv.fr',
       href: 'https://info.gouv.fr',
+      title: 'Informations gouvernementales, nouvelle fenêtre',
     },
     {
       label: 'service-public.fr',
       href: 'https://service-public.fr',
+      title: 'Informations et démarches administratives, nouvelle fenêtre',
     },
     {
       label: 'legifrance.gouv.fr',
       href: 'https://legifrance.gouv.fr',
+      title: 'Service public de diffusion du droit, nouvelle fenêtre',
     },
     {
       label: 'data.gouv.fr',
       href: 'https://data.gouv.fr',
+      title: 'Plateforme des données publiques, nouvelle fenêtre',
     },
   ],
   operatorLinkText: 'Revenir à l’accueil',
@@ -95,6 +99,12 @@ const isExternalLink = computed(() => {
   const to = props.licenceTo || (props.licenceLinkProps as { to: RouteLocationRaw }).to
   return to && typeof to === 'string' && to.startsWith('http')
 })
+
+const licenceLinkAttrs = computed(() => {
+  const { to, href, ...attrs } = props.licenceLinkProps ?? {}
+  return attrs
+})
+
 const routerLinkLicenceTo = computed(() => {
   return isExternalLink.value ? '' : props.licenceTo
 })
@@ -184,17 +194,19 @@ const externalOperatorLink = computed(() => {
           </p>
           <ul class="fr-footer__content-list">
             <li
-              v-for="(link, index) in ecosystemLinks"
+              v-for="({ href, label, title, ...attrs }, index) in ecosystemLinks"
               :key="index"
               class="fr-footer__content-item"
             >
               <a
                 class="fr-footer__content-link"
-                :href="link.href"
+                :href="href"
                 target="_blank"
                 rel="noopener noreferrer"
+                :title="title"
+                v-bind="attrs"
               >
-                {{ link.label }}
+                {{ label }}
               </a>
             </li>
           </ul>
@@ -225,11 +237,11 @@ const externalOperatorLink = computed(() => {
             <component
               :is="isExternalLink ? 'a' : 'RouterLink'"
               class="fr-link-licence  no-content-after"
-              :to="isExternalLink ? null : routerLinkLicenceTo"
-              :href="aLicenceHref"
+              :to="isExternalLink ? undefined : routerLinkLicenceTo"
+              :href="isExternalLink ? aLicenceHref : undefined"
               :target="isExternalLink ? '_blank' : undefined"
               rel="noopener noreferrer"
-              v-bind="licenceLinkProps"
+              v-bind="licenceLinkAttrs"
             >
               {{ licenceName }}
             </component>

src/components/DsfrHeader/DsfrHeader.stories.ts

@@ -186,9 +186,10 @@ EnTeteSimple.args = {
 EnTeteSimple.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
   const links = canvas.getAllByRole('link')
-  expect(links).toHaveLength(4)
+  expect(links).toHaveLength(5)
 
   const knownLinks = [
+    { name: '', href: EnTeteSimple.args.homeTo },
     { name: '', href: EnTeteSimple.args.homeTo },
     ...EnTeteSimple.args.quickLinks.map(({ to }) => ({ href: to })),
   ]

src/components/DsfrHeader/DsfrHeader.types.ts

@@ -12,8 +12,15 @@ export type DsfrHeaderMenuLinkProps = {
   target?: string
   onClick?: ($event: MouseEvent) => void
   to?: RouteLocationRaw
+  /**
+   * @deprecated Use the prop `to` instead
+   */
   href?: string
+  /**
+   * @deprecated Use the prop `to` instead
+   */
   path?: string
+  class?: string | Record<string, string> | Array<string | Record<string, string>>
 }
 
 export type DsfrHeaderProps = {

src/components/DsfrHeader/DsfrHeader.vue

@@ -96,10 +96,15 @@ provide(registerNavigationLinkKey, () => {
           <div class="fr-header__brand  fr-enlarge-link">
             <div class="fr-header__brand-top">
               <div class="fr-header__logo">
-                <DsfrLogo
-                  :logo-text="logoText"
-                  data-testid="header-logo"
-                />
+                <RouterLink
+                  :to="homeTo"
+                  :title="`${homeLabel} - ${serviceTitle}`"
+                >
+                  <DsfrLogo
+                    :logo-text="logoText"
+                    data-testid="header-logo"
+                  />
+                </RouterLink>
               </div>
               <div
                 v-if="isWithSlotOperator"
@@ -268,19 +273,21 @@ provide(registerNavigationLinkKey, () => {
             </div>
           </div>
         </div>
-        <div
-          v-if="isWithSlotNav && !modalOpened"
-          class="fr-hidden fr-unhidden-lg"
-        >
-          <!-- @slot Slot nommé mainnav pour le menu de navigation principal -->
-          <slot
-            name="mainnav"
-            :hidemodal="hideModal"
-          />
-        </div>
         <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-header__body-row">`) -->
         <slot />
       </div>
     </div>
+    <div class="fr-header__menu fr-modal">
+      <div
+        v-if="isWithSlotNav && !modalOpened"
+        class="fr-container"
+      >
+        <!-- @slot Slot nommé mainnav pour le menu de navigation principal -->
+        <slot
+          name="mainnav"
+          :hidemodal="hideModal"
+        />
+      </div>
+    </div>
   </header>
 </template>

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -21,10 +21,14 @@ const isPathString = computed(() => {
   return typeof props.path === 'string'
 })
 const isExternalLink = computed(() => {
-  return props.href?.startsWith('http') || (isPathString.value && (props.path as string).startsWith('http'))
+  return props.href?.startsWith('http') ||
+    (isPathString.value && (props.path as string).startsWith('http')) ||
+    (typeof props.to === 'string' && (props.to as string).startsWith('http'))
 })
 const isMailto = computed(() => {
-  return props.href?.startsWith('mailto') || (isPathString.value && (props.path as string).startsWith('mailto'))
+  return props.href?.startsWith('mailto') ||
+    (isPathString.value && (props.path as string).startsWith('mailto')) ||
+    (typeof props.to === 'string' && (props.to as string).startsWith('mailto'))
 })
 const is = computed(() => {
   if (props.button) {
@@ -37,13 +41,13 @@ const actualHref = computed(() => {
   if (!isExternalLink.value && !isMailto.value) {
     return undefined
   }
-  return props.href !== undefined ? props.href : props.path
+  return props.to ?? props.href ?? props.path
 })
 const actualTo = computed(() => {
   if (isExternalLink.value || isMailto.value) {
     return undefined
   }
-  return props.to || props.path
+  return props.to ?? props.path
 })
 const linkData = computed(() => {
   return actualTo.value ? { to: actualTo.value } : { href: actualHref.value }

src/components/DsfrHeader/docs-demo/DsfrHeaderDemo.vue

@@ -4,14 +4,14 @@ import { createRouter, createWebHistory } from 'vue-router'
 import type { DsfrLanguageSelectorElement } from '@/components/DsfrLanguageSelector/DsfrLanguageSelector.types'
 
 import VIcon from '../../VIcon/VIcon.vue'
-import DsfrHeader from '../DsfrHeader.vue'
+import DsfrHeader, { type DsfrHeaderProps } from '../DsfrHeader.vue'
 
 const logoText = ['Ministère', 'de l’intérieur']
 const serviceTitle = 'Nom du Site/Service'
 const serviceDescription = 'baseline - précisions sur l‘organisation'
 const placeholder = ''
 const homeTo = '/'
-const quickLinks = [
+const quickLinks: DsfrHeaderProps['quickLinks'] = [
   { label: 'Créer un espace', to: '/space/create', icon: 'ri-add-circle-line', iconRight: true },
   { label: 'Se connecter', to: '/login', class: 'fr-icon-user-fill' },
   { label: 'S’enregistrer', to: '/signup', icon: 'ri-account-circle-line', iconRight: true, iconAttrs: { animation: 'spin', speed: 'slow' } },

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -93,7 +93,7 @@ const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages
         role="alert"
       >
         <p
-          class="fr-message--info  flex  items-center"
+          class="fr-message  fr-message--info  flex  items-center"
           :class="additionalMessageClass"
         >
           {{ message }}