Highilght filter when active

etalab · May 4, 2023 · cceaba9 · cceaba9
1 parent a06b3aa
commit cceaba9
Show file tree

Hide file tree

Showing 25 changed files with 319 additions and 118 deletions.
diff --git a/client/src/app.css b/client/src/app.css
@@ -7,6 +7,10 @@ mark {
   background-color: var(--background-contrast-info);
 }
 
+.bottom_line {
+  border-bottom: 1px solid var(--border-default-grey);
+}
+
 :root {
   /*
   Breakpoints in DSFR. This is for reference only. The @media CSS spec does not

diff --git a/client/src/constants.ts b/client/src/constants.ts
@@ -4,7 +4,7 @@ import type {
 } from "./definitions/datasets";
 import type { TrustedHtml } from "./lib/util/html";
 
-export const SITE_TITLE = "catalogue.data.gouv.fr";
+export const SITE_TITLE = "Catalogue";
 
 export const SITE_DESCRIPTION =
   "Un service pour aider les administrations à créer, gérer et ouvrir leurs catalogues.";

diff --git a/client/src/definitions/datasetFilters.ts b/client/src/definitions/datasetFilters.ts
@@ -26,7 +26,8 @@ export type DatasetFiltersValue = {
   license: string | null;
   extraFieldValues: ExtraFieldValue[] | null;
 };
-type BasicMap = {
+export type BasicMap = {
+  id?: string;
   key: string;
   value: string | number;
 };
@@ -39,7 +40,7 @@ export type ActiveDatasetFiltersMap = {
   technicalSource?: BasicMap;
   tagId?: BasicMap;
   license?: BasicMap;
-  extraFieldValues?: BasicMap;
+  extraFieldValues?: BasicMap[];
 };
 
 export type DatasetFiltersOptions = {

diff --git a/client/src/lib/components/DatasetListItem/DatasetListItem.svelte b/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
@@ -33,7 +33,7 @@
     data-test-id="dataset-list-item"
     class="item"
     href={paths.datasetDetail({ id: dataset.id })}
-    title="Consulter cette fiche de données"
+    title={`Consulter la fiche de données ${dataset.catalogRecord.organization.name} : ${dataset.title}`}
   >
     <div class="item__logo">
       {#if dataset.catalogRecord.organization.logoUrl}

diff --git a/client/src/lib/components/Header/Header.svelte b/client/src/lib/components/Header/Header.svelte
@@ -22,7 +22,7 @@
         <div class="fr-header__brand fr-enlarge-link">
           <div class="fr-header__brand-top">
             <div class="fr-header__logo">
-              <a href="/" aria-label="Accueil - Etalab">
+              <a href="/" title="vers Accueil - Etalab">
                 <p class="fr-logo">
                   République
                   <br />Française
@@ -47,8 +47,8 @@
           </div>
 
           <div class="fr-header__service">
-            <a href="/" title={`Accueil - ${SITE_TITLE}- Etalab`}>
-              <p class="fr-header__service-title">{SITE_TITLE}</p>
+            <a href="/" title={` vers page d'accueil - catalogue.data.gouv.fr`}>
+              <p class="fr-header__service-title">catalogue.data.gouv.fr</p>
             </a>
           </div>
         </div>

diff --git a/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte b/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
@@ -5,21 +5,25 @@
   export let label: string;
   export let isOverlayOpen = false;
   export let higlighted = false;
+  export let selected = true;
 
   $: slug = slugify(label);
 </script>
 
 <div class="container">
   <span
     class:fr-h5={higlighted}
+    class:label--selected={selected}
     data-testId={`${slug}-label`}
     id={`${slug}-label`}>{label}</span
   >
   <button
     aria-labelledby={`${slug}-label`}
     class="fr-select"
+    class:button--selected={selected}
     data-testId={`${slug}-button`}
-    on:mousedown>{buttonText}</button
+    on:mousedown
+    on:click>{buttonText}</button
   >
 
   {#if isOverlayOpen}
@@ -55,4 +59,14 @@
     position: absolute;
     border: 1px solid var(--background-contrast-grey);
   }
+
+  .button--selected {
+    background-color: var(--blue-france-925-125-active) !important;
+    color: var(--blue-france-sun-113-625-active);
+  }
+
+  .label--selected {
+    font: bold;
+    color: var(--blue-france-sun-113-625-active);
+  }
 </style>
diff --git a/client/src/lib/components/SearchFilter/TextSearchFilter.svelte b/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
@@ -9,11 +9,12 @@
   export let label: string;
   export let options: SelectOption<any>[];
   export let higlighted = false;
+  export let selected = false;
 
   $: options = [
     {
       label: "Réinistialiser le filtre",
-      value: undefined,
+      value: "",
     },
     ...options,
   ];
@@ -39,7 +40,8 @@
   buttonText={buttonText || "Rechercher..."}
   isOverlayOpen={showOverLay}
   {higlighted}
-  on:mousedown={handleShowOverLay}
+  {selected}
+  on:click={handleShowOverLay}
 >
   <Basic
     on:selectOption

diff --git a/client/src/lib/components/SearchForm/SearchForm.svelte b/client/src/lib/components/SearchForm/SearchForm.svelte
@@ -15,6 +15,7 @@
 >
   <label for="q" class="fr-label">Rechercher</label>
   <input
+    id="q"
     type="search"
     class="fr-input"
     name="q"