Fix tooltip (#512)

This PR solves the same z-index error we had with DatasetCard so we can remove our ugly z-index hack. Fixes datagouv/data.gouv.fr#1475 too
datagouv · Sep 12, 2024 · 28ecf73 · 28ecf73
1 parent 317b0f7
commit 28ecf73
Show file tree

Hide file tree

Showing 23 changed files with 148 additions and 137 deletions.
diff --git a/.storybook/msw/mockServiceWorker.js b/.storybook/msw/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.1'
+const PACKAGE_VERSION = '2.4.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

diff --git a/udata_front/theme/gouvfr/assets/less/components/tooltip.less b/udata_front/theme/gouvfr/assets/less/components/tooltip.less
@@ -1,17 +1,3 @@
-.toggletip__wrapper, .tooltip__wrapper {
-    position: relative;
-    display: flex;
-    z-index: 3;
-}
-
-.toggletip__wrapper, .tooltip__wrapper {
-    cursor: help;
-
-    button:focus + .tooltip {
-        display: block;
-    }
-}
-
 .toggletip, .tooltip {
     font-size: @font-size-sm;
     margin-top: 0;
@@ -49,11 +35,3 @@
     position: absolute;
     width: 100%;
 }
-
-.tooltip {
-    display: none;
-}
-
-.tooltip__wrapper:hover .tooltip {
-    display: block;
-}
diff --git a/udata_front/theme/gouvfr/assets/less/layout/grid.less b/udata_front/theme/gouvfr/assets/less/layout/grid.less
@@ -18,6 +18,10 @@
     position: absolute;
 }
 
+.align-middle {
+    vertical-align: middle;
+}
+
 .left-0 {
     left: 0;
 }

diff --git a/udata_front/theme/gouvfr/datagouv-components/CHANGELOG.md b/udata_front/theme/gouvfr/datagouv-components/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Current (in progress)
 
-- Nothing yet
+- Fix toggletip and use summarize for metrics
 
 ## 1.3.0 (2024-09-10)
 

diff --git a/udata_front/theme/gouvfr/datagouv-components/demo/App.vue b/udata_front/theme/gouvfr/datagouv-components/demo/App.vue
@@ -105,11 +105,7 @@ const resource = ref<Resource>({
     "analysis:parsing:started_at": "2024-06-04T20:05:17.151069+00:00"
   },
   preview_url: "https://explore.data.gouv.fr/fr/resources/cf3cc17f-955a-42bb-a4ef-77f59e703940",
-  "schema": {
-    "name": null,
-    "version": null,
-    "url": null
-  },
+  schema: {name: "etalab/schema-indice-reparabilite", version: "0.1.2"},
   internal: {
     "created_at_internal": "2022-07-13T02:11:56.414000+00:00",
     "last_modified_internal": "2024-01-09T06:59:37.726000+00:00"
@@ -400,6 +396,7 @@ const dataservice: Dataservice = {
     data.gouv.fr Components
   </h1>
   <div>
+    <ResourceAccordion dataset-id="someId" :resource="resource" :expanded-on-mount="false" class="fr-mb-2v" />
     <ResourceAccordion dataset-id="someId" :resource="resource" :expanded-on-mount="false" class="fr-mb-2v" />
     <ResourceAccordion dataset-id="someId" :resource="resourceWithoutSchema" :expanded-on-mount="false" />
   </div>
@@ -447,25 +444,21 @@ const dataservice: Dataservice = {
       :dataset="dataset"
       dataset-url="/datasets/6571faa17f46a65ee05c4d17"
       organization-url=""
-      style="z-index: 3;"
     />
     <DatasetCard
       :dataset="dataset"
       dataset-url="/datasets/6571faa17f46a65ee05c4d17"
       organization-url="/organizations/another-url-easier-to-distinguish"
-      style="z-index: 2;"
     />
     <DatasetCard
       :dataset="dataset"
       dataset-url="/datasets/6571faa17f46a65ee05c4d17"
       organization-url=""
-      style="z-index: 1;"
     />
     <DatasetCard
       :dataset="dataset"
       dataset-url="/datasets/6571faa17f46a65ee05c4d17"
       organization-url=""
-      style="z-index: 1;"
     />
   </div>
   <div class="fr-grid-row">

diff --git a/udata_front/theme/gouvfr/datagouv-components/src/components/DatasetCard/DatasetCard.vue b/udata_front/theme/gouvfr/datagouv-components/src/components/DatasetCard/DatasetCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="fr-my-2w fr-p-2w border border-default-grey fr-enlarge-link" :style="props.style">
+  <div class="fr-my-2w fr-p-2w border border-default-grey fr-enlarge-link" :style="props.style">
     <div class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v fr-ml-n1v" v-if="dataset.private || dataset.archived">
       <p class="fr-badge fr-badge--sm fr-badge--mention-grey text-grey-380 fr-mr-1w" v-if="dataset.private">
         <span class="fr-icon-lock-line fr-icon--sm" aria-hidden="true"></span>
@@ -54,42 +54,42 @@
             <span class="text-mention-grey dash-before-sm whitespace-nowrap">{{ $t('Updated {date}', {date: formatRelativeIfRecentDate(dataset.last_update)}) }}</span>
           </div>
         <div class="fr-mx-0 fr-mb-n1v fr-grid-row fr-grid-row--middle fr-text--sm text-mention-grey">
-          <div class="fr-hidden flex-sm dash-after-sm text-grey-500 not-enlarged">
+          <div class="fr-hidden flex-sm dash-after-sm text-grey-500">
             <QualityComponentInline :quality="dataset.quality"/>
           </div>
           <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
-            <p class="fr-text--sm fr-my-0">
-              <span class="fr-icon-download-line fr-icon--sm fr-px-1v" aria-hidden="true"></span>{{ dataset.metrics.resources_downloads }}
+            <p class="fr-text--sm fr-my-0" :aria-label="t('{n} resources downloads', dataset.metrics.resources_downloads)">
+              <span class="fr-icon-download-line fr-icon--sm fr-px-1v" aria-hidden="true"></span>{{ summarize(dataset.metrics.resources_downloads) }}
             </p>
-            <p class="fr-text--sm fr-my-0">
-              <span class="fr-icon-star-line fr-icon--sm fr-px-1v" aria-hidden="true"></span>{{ dataset.metrics.followers }}
+            <p class="fr-text--sm fr-my-0" :aria-label="t('{n} followers', dataset.metrics.followers)">
+              <span class="fr-icon-star-line fr-icon--sm fr-px-1v" aria-hidden="true"></span>{{ summarize(dataset.metrics.followers) }}
             </p>
-            <p class="fr-text--sm fr-my-0">
-              <span class="fr-icon-line-chart-line fr-icon--sm fr-px-1v" aria-hidden="true"></span>{{ dataset.metrics.reuses }}
+            <p class="fr-text--sm fr-my-0" :aria-label="t('{n} reuses', dataset.metrics.reuses)">
+              <span class="fr-icon-line-chart-line fr-icon--sm fr-px-1v" aria-hidden="true"></span>{{ summarize(dataset.metrics.reuses) }}
             </p>
           </div>
         </div>
         <TextClamp
           v-if="showDescription"
           class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere"
           :auto-resize="true"
-          :text="dataset.description"
+          :text="RemoveMarkdown(dataset.description)"
           :max-lines='2'
         />
       </div>
     </div>
-  </article>
+  </div>
 </template>
 
 <script setup lang="ts">
+import RemoveMarkdown from "remove-markdown";
 import { useI18n } from "vue-i18n";
 import type { RouteLocationRaw } from "vue-router";
 import TextClamp from 'vue3-text-clamp';
 import AppLink from "../AppLink/AppLink.vue";
 import Avatar from "../Avatar/Avatar.vue";
 import type { Dataset, DatasetV2 } from "../../types/datasets";
-import { excerpt } from "../../helpers";
-import { formatRelativeIfRecentDate } from "../../helpers";
+import { formatRelativeIfRecentDate, summarize } from "../../helpers";
 import OrganizationNameWithCertificate from "../Organization/OrganizationNameWithCertificate.vue";
 import { Placeholder } from "../utils/";
 import { QualityComponentInline } from "../QualityComponentInline";

diff --git a/...ont/theme/gouvfr/datagouv-components/src/components/QualityComponent/QualityComponent.vue b/...ont/theme/gouvfr/datagouv-components/src/components/QualityComponent/QualityComponent.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="fr-grid-row fr-grid-row--middle fr-ml-n1v">
   <Toggletip
-    class="fr-btn fr-btn--tertiary-no-outline fr-btn--secondary-grey-500 fr-icon-info-line"
+    class="fr-btn--secondary-grey-500"
+    icon="fr-icon-info-line"
+    size="md"
   >
     {{$t('Metadata quality:')}}
     <template #toggletip>

diff --git a/...uvfr/datagouv-components/src/components/QualityComponentInline/QualityComponentInline.vue b/...uvfr/datagouv-components/src/components/QualityComponentInline/QualityComponentInline.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="fr-m-0 fr-grid-row fr-grid-row--middle fr-text--sm text-mention-grey">
         <div class="fr-grid-row fr-grid-row--middle">
-          <Toggletip
-              class="fr-btn fr-btn--tertiary-no-outline fr-btn--xs text-grey-380 fr-btn--darker-hover fr-icon-information-line fr-icon--sm"
-          >
+          <Toggletip class="relative z-2">
               <template #toggletip>
                   <h5 class="fr-text--sm fr-my-0">{{$t("Metadata quality:")}}</h5>
                   <QualityItem

diff --git a/.../gouvfr/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.stories.ts b/.../gouvfr/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.stories.ts
@@ -57,12 +57,12 @@ test.. test... test..... test?..... test!....
 
 !!!!!! ???? ,,  -- ---
  and 'single quotes'
- 
+
 | Item | Price | Quantity |
 |————–|——-|———-|
 | Apple | $1 | 5 |
 | Bread | $2 | 2 |
- 
+
  `,
     extras: {},
     filesize: 9167,
@@ -98,7 +98,7 @@ const argsWithSchema = {
     internal: {created_at_internal: "2023-11-15T10:40:22.288000+00:00", last_modified_internal: "2023-11-15T10:40:22.461000+00:00"},
     last_modified: "2023-11-15T10:40:22.461000+00:00",
     latest: "https://www.data.gouv.fr/fr/datasets/r/e2bc9b7c-4598-4bdb-92c3-9109a16f288c",
-    metrics: {views: 0},
+    metrics: {views: 15000000},
     mime: "text/csv",
     preview_url: "https://explore.data.gouv.fr/?url=https%3A%2F%2Fwww.data.gouv.fr%2Ffr%2Fdatasets%2Fr%2Fe2bc9b7c-4598-4bdb-92c3-9109a16f288c",
     schema: {name: "etalab/schema-indice-reparabilite", version: "0.1.2"},

diff --git a/...t/theme/gouvfr/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue b/...t/theme/gouvfr/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="border border-default-grey" :class="{ 'fr-pb-4v': open }">
+  <div class="border border-default-grey" :class="{ 'fr-pb-4v': open }">
     <header
       class="fr-p-4v flex items-center justify-between relative"
       :id="resourceHeaderId"
@@ -14,7 +14,7 @@
 
             <span class="absolute inset-0 z-1"></span>
           </button>
-          <CopyButton :label="$t('Copy link')" :copied-label="$t('Link copied!')" :text="resourceExternalUrl" class="relative z-2" />
+          <CopyButton :label="$t('Copy link')" :copied-label="$t('Link copied!')" :text="resourceExternalUrl" class="z-2" />
         </h4>
         <div class="text-grey-380 subheaders-infos">
           <SchemaBadge :resource class="dash-after" />
@@ -24,9 +24,9 @@
             {{ resource.format.trim().toLowerCase() }}
             <span v-if="resource.filesize">({{ filesize(resource.filesize) }})</span>
           </span>
-          <span class="inline-flex items-center fr-text--xs fr-mb-0">
+          <span class="inline-flex items-center fr-text--xs fr-mb-0" :aria-label="t('{n} downloads', resource.metrics.views)">
             <span class="fr-icon-download-line fr-icon--xs fr-mr-1v"></span>
-            <span>{{ resource.metrics.views || 0 }} <span class="hidden show-on-small">{{ t("downloads") }}</span></span>
+            <span>{{ summarize(resource.metrics.views) }} <span class="hidden show-on-small">{{ t("downloads") }}</span></span>
           </span>
         </div>
         <p class="fr-mb-0 fr-mt-1v fr-text--xs text-grey-380" v-if="communityResource">
@@ -129,7 +129,7 @@
         </TabPanels>
       </TabGroup>
     </section>
-  </article>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -141,7 +141,7 @@ import EditButton from "./EditButton.vue";
 import OrganizationNameWithCertificate from "../Organization/OrganizationNameWithCertificate.vue";
 import useOwnerName from "../../composables/organizations/useOwnerName";
 import { config } from "../../config";
-import { filesize, formatRelativeIfRecentDate, markdown } from "../../helpers";
+import { filesize, formatRelativeIfRecentDate, markdown, summarize } from "../../helpers";
 import type { CommunityResource, Resource } from "../../types/resources";
 import ResourceIcon from "./ResourceIcon.vue";
 import SchemaBadge from "./SchemaBadge.vue";
@@ -156,10 +156,6 @@ import { trackEvent } from "../../helpers/matomo";
 import CopyButton from "../CopyButton/CopyButton.vue";
 import { getResourceFormatIconSvg } from "../../helpers/resources";
 
-defineOptions({
-  inheritAttrs: false,
-});
-
 const props = withDefaults(defineProps<{
   datasetId: string,
   expandedOnMount?: boolean,
@@ -204,7 +200,7 @@ const tabsOptions = computed(() => {
   if (props.resource.description) {
     options.push({ key: "description", label: t("Description") })
   }
-  
+
   if (hasPreview.value) {
     options.push({ key: "data-structure", label: t("Data structure") })
   }
@@ -217,7 +213,7 @@ const tabsOptions = computed(() => {
 const switchTab = (index: number) => {
   const option = tabsOptions.value[index];
   trackEvent(['View resource tab', props.resource.id, option.label])
-  
+
   if (option.key === 'data') {
     trackEvent(['Show preview', props.resource.id])
   }
@@ -262,6 +258,10 @@ If we do not put z-index, the header is fully clickable except for the DSFR icon
   z-index: 2;
 }
 
+.z-3 {
+  z-index: 3;
+}
+
 article {
   container-type: inline-size;
 }
@@ -276,7 +276,7 @@ article {
     margin-top: 1.25rem;
     margin-left: auto !important;
   }
-/* 
+/*
   If we want to put subheaders info in column on mobile…
   article header .subheaders-infos {
     display: flex;

diff --git a/...a_front/theme/gouvfr/datagouv-components/src/components/ResourceAccordion/SchemaBadge.vue b/...a_front/theme/gouvfr/datagouv-components/src/components/ResourceAccordion/SchemaBadge.vue
@@ -1,11 +1,10 @@
 <template>
     <span class="inline-flex fr-mb-0 align-items-baseline fr-text--xs" v-if="title">
-        <Toggletip noMargin class="fr-p-0">
-            <span class="z-2 fr-icon-information-line fr-icon--sm fr-mr-1v text-grey-380"></span>
-            <template #toggletip="{ hide }">
+        <Toggletip noMargin class="relative z-2">
+            <template #toggletip="{ close }">
                 <div class="flex justify-between border-bottom">
                     <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{$t("Data schema")}}</h5>
-                    <button type="button" @click="hide" class="border-left close-button flex items-center justify-center">&times;</button>
+                    <button type="button" @click="close" :title="t('Close')" class="border-left close-button flex items-center justify-center">&times;</button>
                 </div>
                 <div class="fr-p-3v">
                     <div v-if="validataStatus === 'ok'">
@@ -102,4 +101,4 @@ const validataStatus = computed<'ok' | 'warnings' | 'ko'>(() => {
 .padding-sm {
     padding: .125rem .5rem .125rem .25rem;
 }
-</style>
+</style>
diff --git a/udata_front/theme/gouvfr/datagouv-components/src/components/ReuseCard/ReuseCard.vue b/udata_front/theme/gouvfr/datagouv-components/src/components/ReuseCard/ReuseCard.vue
@@ -23,10 +23,10 @@
               {{ reuseType }}
             </p>
             <p class="fr-text--sm fr-my-0" :aria-label="t('{n} views', reuse.metrics.views)">
-              <span class="fr-icon-eye-line fr-icon--xs fr-px-1v" aria-hidden="true"></span>{{ reuse.metrics.views }}
+              <span class="fr-icon-eye-line fr-icon--xs fr-px-1v" aria-hidden="true"></span>{{ summarize(reuse.metrics.views) }}
             </p>
             <p class="fr-text--sm fr-my-0" :aria-label="t('{n} followers', reuse.metrics.followers)">
-              <span class="fr-icon-star-line fr-icon--xs fr-px-1v" aria-hidden="true"></span>{{ reuse.metrics.followers }}
+              <span class="fr-icon-star-line fr-icon--xs fr-px-1v" aria-hidden="true"></span>{{ summarize(reuse.metrics.followers) }}
             </p>
           </div>
         </div>
@@ -85,7 +85,7 @@ import { useI18n } from 'vue-i18n';
 import TextClamp from 'vue3-text-clamp';
 import Placeholder from '../utils/Placeholder.vue';
 import { OrganizationNameWithCertificate } from "../Organization";
-import { truncate } from "../../helpers";
+import { summarize, truncate } from "../../helpers";
 import type { Reuse } from '../../types/reuses';
 import { formatRelativeIfRecentDate } from '../../helpers';
 import { useOwnerName } from '../../composables';