@datagouv/components-next 0.0.7 → 0.0.9

package/src/components/DatasetQuality.vue

@@ -1,52 +1,55 @@
 <template>
-  <div class="fr-grid-row fr-grid-row--middle fr-ml-n1v">
-    <Toggletip>
-      {{ $t('Metadata quality:') }}
+  <div class="flex items-center">
+    <Toggletip
+      class="-ml-2 mt-px"
+      size="2xs"
+    >
+      {{ $t('Qualité des métadonnées:') }}
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>
     </Toggletip>
-    <p class="fr-m-0 fr-mr-1v">
-      {{ $t('Metadata quality:') }}
-    </p>
+    <div class="text-sm text-gray-plain font-bold">
+      {{ $t('Qualité des métadonnées:') }}
+    </div>
   </div>
   <DatasetQualityScore
     :score="quality.score"
-    class="w-100"
+    class="w-full"
   />
-  <template v-if="showItemWarnings">
+  <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
       <DatasetQualityItemWarning
         :quality-item="quality.dataset_description_quality"
-        :message="$t('Data description empty')"
+        :message="$t('Description des données non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.resources_documentation"
-        :message="$t('Files documentation missing')"
+        :message="$t('Documentation des fichiers manquante')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.license"
-        :message="$t('No license set')"
+        :message="$t('Licence non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
-        :message="quality.update_frequency ? $t('Update frequency not followed') : $t('Update frequency not set')"
+        :message="quality.update_frequency ? $t('Fréquence de mise à jour non respectée') : $t('Fréquence de mise à jour non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.has_open_format"
-        :message="$t('File formats are closed')"
+        :message="$t('Formats de fichiers non standards')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.temporal_coverage"
-        :message="$t('Temporal coverage not set')"
+        :message="$t('Couverture temporelle non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.spatial"
-        :message="$t('Spatial coverage not set')"
+        :message="$t('Couverture spatiale non renseignée')"
       />
       <DatasetQualityItemWarning
         :quality-item="quality.all_resources_available"
-        :message="$t('Some files are unavailable')"
+        :message="$t('Certains fichiers ne sont pas disponibles')"
       />
     </ul>
   </template>
@@ -61,8 +64,8 @@ import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 
 withDefaults(defineProps<{
   quality: Quality
-  showItemWarnings?: boolean
+  hideWarnings?: boolean
 }>(), {
-  showItemWarnings: true,
+  hideWarnings: true,
 })
 </script>

package/src/components/DatasetQualityInline.vue

@@ -10,7 +10,7 @@
         </template>
       </Toggletip>
       <p class="my-0 mr-1 text-gray-medium text-sm">
-        {{ $t('Metadata :') }}
+        {{ $t('Métadonnées :') }}
       </p>
       <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
         <DatasetQualityScore :score="quality.score" />

package/src/components/DatasetQualityItem.vue

@@ -2,7 +2,7 @@
   <li>
     <p
       v-if="passed"
-      class="fr-my-0"
+      class="fr-my-0 text-sm"
     >
       <span
         class="fr-icon-check-line"
@@ -12,7 +12,7 @@
     </p>
     <p
       v-else
-      class="my-0 text-gray-medium"
+      class="my-0 text-gray-medium text-sm"
     >
       <span
         class="fr-icon-warning-line"
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 defineProps<{
-  passed: boolean | null
+  passed?: boolean | null
   messagePassed: string
   messageFailed: string
 }>()

package/src/components/DatasetQualityItemWarning.vue

@@ -1,9 +1,9 @@
 <template>
   <li
     v-if="!qualityItem"
-    class="text-warning-dark flex flex-wrap items-center m-1"
+    class="text-warning-dark flex flex-wrap items-center"
   >
-    <p class="fr-my-0 fr-text--sm">
+    <p class="!m-0 text-sm">
       <span
         class="fr-icon-warning-line fr-icon--sm"
         aria-hidden="true"

package/src/components/DatasetQualityScore.vue

@@ -10,10 +10,10 @@
     :value="score"
   >
     <template v-if="score >= high">
-      {{ t('Good') }}
+      {{ t('Bon') }}
     </template>
     <template v-else>
-      {{ t('To improve') }}
+      {{ t('À améliorer') }}
     </template>({{ calculatedScore }})
   </meter>
 </template>

package/src/components/DatasetQualityTooltipContent.vue

@@ -1,55 +1,55 @@
 <template>
-  <h5 class="fr-text--sm fr-my-0">
-    {{ t("Metadata quality:") }}
+  <h5 class="text-sm text-gray-plain font-bold">
+    {{ t("Qualité des métadonnées:") }}
   </h5>
-  <ul class="list-none pl-0">
+  <ul class="list-none pl-0 space-y-2">
     <DatasetQualityItem
       :passed="quality.dataset_description_quality"
-      :message-passed="t('Data description filled')"
-      :message-failed="t('Data description empty')"
-      class="fr-my-1w"
+      :message-passed="t('Description des données renseignée')"
+      :message-failed="t('Description des données non renseignée')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.resources_documentation"
-      :message-passed="t('Files documented')"
-      :message-failed="t('Files documentation missing')"
-      class="fr-my-1w"
+      :message-passed="t('Fichiers documentés')"
+      :message-failed="t('Documentation des fichiers manquante')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.license"
-      :message-passed="t('License filled')"
-      :message-failed="t('No license set')"
-      class="fr-my-1w"
+      :message-passed="t('Licence renseignée')"
+      :message-failed="t('Licence non renseignée')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.update_frequency && !!quality.update_fulfilled_in_time"
-      :message-passed="t('Update frequency followed')"
-      :message-failed="quality.update_frequency ? t('Update frequency not followed') : t('Update frequency not set')"
-      class="fr-my-1w"
+      :message-passed="t('Fréquence de mise à jour respectée')"
+      :message-failed="quality.update_frequency ? t('Fréquence de mise à jour non respectée') : t('Fréquence de mise à jour non renseignée')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.has_open_format"
-      :message-passed="t('File formats are open')"
-      :message-failed="t('File formats are closed')"
-      class="fr-my-1w"
+      :message-passed="t('Formats de fichiers standards')"
+      :message-failed="t('Formats de fichiers non standards')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.temporal_coverage"
-      :message-passed="t('Temporal coverage filled')"
-      :message-failed="t('Temporal coverage not set')"
-      class="fr-my-1w"
+      :message-passed="t('Couverture temporelle renseignée')"
+      :message-failed="t('Couverture temporelle non renseignée')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.spatial"
-      :message-passed="t('Spatial coverage filled')"
-      :message-failed="t('Spatial coverage not set')"
-      class="fr-my-1w"
+      :message-passed="t('Couverture spatiale renseignée')"
+      :message-failed="t('Couverture spatiale non renseignée')"
+      class="pb-0"
     />
     <DatasetQualityItem
       :passed="quality.all_resources_available"
-      :message-passed="t('All files are available')"
-      :message-failed="t('Some files are unavailable')"
-      class="fr-my-1w"
+      :message-passed="t('Tous les fichiers sont disponibles')"
+      :message-failed="t('Certains fichiers ne sont pas disponibles')"
+      class="pb-0"
     />
   </ul>
   <div class="fr-grid-row fr-grid-row--right not-enlarged">
@@ -57,9 +57,9 @@
       :href="config.datasetQualityGuideUrl"
       target="_blank"
       rel="noopener"
-      :title="t('Learn more about this indicator - opens a new window')"
+      :title="t('En savoir plus sur cet indicateur - ouvre une nouvelle fenêtre')"
     >
-      {{ t("Learn more about this indicator") }}
+      {{ t("En savoir plus sur cet indicateur") }}
     </a>
   </div>
 </template>

package/src/components/DescriptionDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <dd
-    class="text-sm ml-0 mt-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
   >
     <div
       v-if="withEllipsis"
-      class="text-overflow-ellipsis"
+      class="truncate"
     >
       <slot />
     </div>

package/src/components/ExtraAccordion.vue

@@ -14,19 +14,22 @@
           {{ titleText }}
         </component>
       </div>
-      <div class="fr-col-auto">
+      <div class="fr-col-auto space-x-4">
+        <slot name="buttons" />
         <DisclosureButton
           :as="BrandedButton"
           color="secondary-softer"
           keep-margins-even-without-borders
           :icon="open ? RiArrowUpSLine : RiArrowDownSLine"
         >
-          <template v-if="open">
-            {{ $t('Close details') }}
-          </template>
-          <template v-else>
-            {{ buttonText }}
-          </template>
+          {{ buttonText }}
+
+          <span
+            v-if="open"
+            class="sr-only"
+          >
+            {{ $t('Fermer les détails') }}
+          </span>
         </DisclosureButton>
       </div>
     </header>

package/src/components/OrganizationCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border border-gray-default relative fr-enlarge-link">
+  <div class="border border-gray-default bg-white relative fr-enlarge-link">
     <div class="h-[4.5rem] pt-4 px-4 bg-blue-lighter" />
     <div class="px-4 pb-4 pt-5 mt-2">
       <div class="inline-flex border border-gray-default p-1.5 absolute top-4 left-4 bg-white">
@@ -12,14 +12,15 @@
         >
       </div>
       <p class="mb-0.5 font-bold">
-        <NuxtLinkLocale
+        <AppLink
           :to="`/organizations/${organization.slug}`"
+          class="overflow-hidden"
         >
           <OrganizationNameWithCertificate
             :show-type="false"
             :organization
           />
-        </NuxtLinkLocale>
+        </AppLink>
       </p>
       <div class="mb-2 flex flex-wrap items-center">
         <OwnerType
@@ -28,7 +29,10 @@
           :type
         />
         <div>
-          <div class="text-gray-medium flex items-center text-sm gap-0.5">
+          <div
+            v-if="organization.metrics"
+            class="text-gray-medium flex items-center text-sm gap-0.5"
+          >
             <RiDatabase2Line class="size-4 -mt-1" /> {{ organization.metrics.datasets }}
             <RiTerminalLine class="size-4 -mt-1 ml-1" /> {{ organization.metrics.dataservices }}
             <RiLineChartLine class="size-4 -mt-1 ml-1" /> {{ organization.metrics.reuses }}
@@ -54,6 +58,7 @@ import { getOrganizationType } from '../functions/organizations'
 import type { Organization } from '../types/organizations'
 import OwnerType from './OwnerType.vue'
 import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+import AppLink from './AppLink.vue'
 
 const props = defineProps<{
   organization: Organization

package/src/components/OrganizationNameWithCertificate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-1 items-center truncate">
+  <div class="min-w-0 flex gap-1 items-center">
     <OwnerTypeIcon
       v-if="showType"
       :type="getOrganizationType(organization)"
@@ -9,17 +9,29 @@
       :class="{ 'text-sm': size === 'sm' }"
     >
       {{ organization.name }}
+      <small
+        v-if="organization.acronym && showAcronym"
+        class="text-xs text-gray-title font-extrabold align-super"
+      >
+        {{ organization.acronym }}
+      </small>
     </div>
-    <RiCheckboxCircleLine
-      v-if="isOrganizationCertified(organization)"
-      class="flex-none"
-      :class="{
-        'size-4': size === 'sm',
-        'size-5': size === 'base',
-      }"
-      :title="t('The identity of this public service is certified by {certifier}', { certifier: config.name })"
-      aria-hidden="true"
-    />
+    <Tooltip v-if="isOrganizationCertified(organization)">
+      <RiCheckboxCircleLine
+        class="flex-none"
+        :class="{
+          'size-4': size === 'sm',
+          'size-5': size === 'base',
+        }"
+        :aria-label="t(`L'identité de ce service public est certifiée par {certifier}`, { certifier: config.name })"
+        aria-hidden="true"
+      />
+      <template #tooltip>
+        <p class="text-sm font-normal mb-0">
+          {{ t(`L'identité de ce service public est certifiée par {certifier}`, { certifier: config.name }) }}
+        </p>
+      </template>
+    </Tooltip>
   </div>
 </template>
 
@@ -36,9 +48,11 @@ const config = useComponentsConfig()
 const { t } = useI18n()
 withDefaults(defineProps<{
   organization: Organization
+  showAcronym?: boolean
   showType?: boolean
   size?: 'base' | 'sm'
 }>(), {
+  showAcronym: false,
   showType: true,
   size: 'base',
 })

package/src/components/Pagination.vue

@@ -1,6 +1,7 @@
 <template>
   <nav
     v-if="totalResults > pageSize"
+    ref="navRef"
     role="navigation"
     class="fr-pagination fr-pagination--centered"
     :aria-label="t('Pagination')"
@@ -11,9 +12,9 @@
           :href="getHref(1)"
           class="fr-pagination__link fr-pagination__link--first"
           data-testid="first-page"
-          @click.prevent="onClick(1)"
+          @click.prevent.stop="onClick(1)"
         >
-          {{ t('First page') }}
+          {{ t('Première page') }}
         </a>
       </li>
       <li>
@@ -21,9 +22,9 @@
           :href="getHref(page - 1)"
           class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
           data-testid="previous-page"
-          @click.prevent="previousPage"
+          @click.prevent.stop="previousPage"
         >
-          {{ t('Previous page') }}
+          {{ t('Page précédente') }}
         </a>
       </li>
       <li>
@@ -34,7 +35,7 @@
           :class="{ 'fr-hidden fr-unhidden-sm': page > 1 }"
           :title="t('Page {nb}', { nb: 1 })"
           :data-testid="1"
-          @click.prevent="onClick(1)"
+          @click.prevent.stop="onClick(1)"
         >
           1
         </a>
@@ -51,7 +52,7 @@
           :href="getHref(index)"
           :title="t('Page {nb}', { nb: index })"
           :data-testid="index"
-          @click.prevent="onClick(index)"
+          @click.prevent.stop="onClick(index)"
         >
           {{ index }}
         </a>
@@ -69,7 +70,7 @@
           :href="getHref(pageCount)"
           :title="t('Page {nb}', { nb: pageCount })"
           :data-testid="pageCount"
-          @click.prevent="onClick(pageCount)"
+          @click.prevent.stop="onClick(pageCount)"
         >
           {{ pageCount }}
         </a>
@@ -79,9 +80,9 @@
           class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
           :href="getHref(page + 1)"
           data-testid="next-page"
-          @click.prevent="nextPage"
+          @click.prevent.stop="nextPage"
         >
-          {{ t('Next page') }}
+          {{ t('Page suivante') }}
         </a>
       </li>
       <li>
@@ -89,9 +90,9 @@
           class="fr-pagination__link fr-pagination__link--last"
           :href="getHref(pageCount)"
           data-testid="last-page"
-          @click.prevent="onClick(pageCount)"
+          @click.prevent.stop="onClick(pageCount)"
         >
-          {{ t('Last page') }}
+          {{ t('Dernière page') }}
         </a>
       </li>
     </ul>
@@ -99,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 type Props = {
@@ -176,23 +177,33 @@ const { t } = useI18n()
 const pageCount = computed(() => Math.ceil(props.totalResults / props.pageSize))
 const visiblePages = computed(() => getVisiblePages(props.page, pageCount.value))
 
+const nav = useTemplateRef('navRef')
+function change(index: number) {
+  emit('change', index)
+
+  if (!nav.value || !nav.value.parentElement) return
+
+  nav.value.parentElement.style.scrollMarginTop = '100px'
+  nav.value.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
 function onClick(index: number) {
   if (index !== props.page) {
-    return emit('change', index)
+    change(index)
   }
 }
 
 function nextPage() {
   const index = props.page + 1
   if (index <= pageCount.value) {
-    return emit('change', index)
+    change(index)
   }
 }
 
 function previousPage() {
   const index = props.page - 1
   if (index > 0) {
-    return emit('change', index)
+    change(index)
   }
 }
 

package/src/components/ReadMore.vue

@@ -23,10 +23,10 @@
         @click.stop="toggle"
       >
         <template v-if="expanded">
-          {{ $t("Read less") }}
+          {{ $t("Lire moins") }}
         </template>
         <template v-else>
-          {{ $t("Read more") }}
+          {{ $t("Lire plus") }}
         </template>
       </BrandedButton>
     </div>

package/src/components/ResourceAccordion/DataStructure.vue

@@ -8,7 +8,7 @@
         class="fr-icon-warning-line"
         aria-hidden="true"
       />
-      {{ $t("The data structure of this file failed to load.") }}
+      {{ $t("La structure de données de ce fichier n'a pas pu être chargée.") }}
     </p>
   </div>
   <PreviewLoader v-else-if="loading" />
@@ -25,7 +25,7 @@
           class="fr-icon-warning-line"
           aria-hidden="true"
         />
-        {{ $t("No data structure found for this file.") }}
+        {{ $t("Aucune structure de données détectée pour ce fichier.") }}
       </p>
     </div>
     <template v-if="hasColumnInfo">

package/src/components/ResourceAccordion/EditButton.vue

@@ -6,14 +6,14 @@
     color="warning"
     data-testid="edit-button"
   >
-    {{ t("Edit file") }}
+    {{ t("Éditer le fichier") }}
   </BrandedButton>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RiPencilLine } from '@remixicon/vue'
-import { useComponentsConfig } from '../../config'
+import { computed } from 'vue'
 import BrandedButton from '../BrandedButton.vue'
 
 type Props = {
@@ -26,9 +26,13 @@ const props = withDefaults(defineProps<Props>(), {
   isCommunityResource: false,
 })
 
-const config = useComponentsConfig()
-
 const { t } = useI18n()
-const resourceType = props.isCommunityResource ? 'community-resource' : 'resource'
-const adminUrl = `${config.baseUrl}/dataset/${props.datasetId}/${resourceType}/${props.resourceId}`
+
+const adminUrl = computed(() => {
+  if (props.isCommunityResource) {
+    return `/admin/site/community-resources/?resource_id=${props.resourceId}`
+  }
+
+  return `/admin/datasets/${props.datasetId}/files/?resource_id=${props.resourceId}`
+})
 </script>