@gouvfr/dsfr-roller 1.0.81 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "description": "Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR",
   "keywords": [
     "Système de Design de l'État",
@@ -60,8 +60,8 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.81",
-    "@gouvfr/dsfr-kit": "=1.0.81",
+    "@gouvfr/dsfr-forge": "=1.0.83",
+    "@gouvfr/dsfr-kit": "=1.0.83",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.4",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/component/components/search.js

@@ -0,0 +1,24 @@
+import { Component } from '../component.js';
+
+class Search extends Component {
+  constructor (data) {
+    super(data, 'search');
+  }
+
+  get ejsPath () {
+    return 'src/dsfr/component/search/template/ejs/search.ejs';
+  }
+
+  async format () {
+    const title = this.data.title || this.data.label;
+    const search = {
+      id: this.data.id,
+      input: { id: this.data.inputId, placeholder: this.data.label, classes: this.data.inputClasses, label: this.data.label },
+      button: { id: this.data.buttonId, label: this.data.label, classes: this.data.buttonClasses, title: title, markup: 'button' }
+    };
+
+    return search;
+  }
+}
+
+export { Search };

package/src/node/directive/components/search/search-leaf-directive.js

@@ -0,0 +1,18 @@
+import { Node } from '../../../node.js';
+import { Search } from '../../../../component/components/search.js';
+
+class SearchLeafDirective extends Node {
+  constructor (data) {
+    super(data);
+    this.search = new Search({...this.data.properties, ...this.data.attributes});
+  }
+
+  async render () {
+    const data = { label: await this.renderChildren() };
+    return this.search.render(data);
+  }
+}
+
+SearchLeafDirective.NAME = 'fr-search';
+
+export { SearchLeafDirective };

package/src/node/directive/doc/filter-leaf-directive.js

@@ -0,0 +1,82 @@
+import { Node } from '../../node.js'
+
+class FilterLeafDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    return {
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-filter'],
+      attributes: {
+        'data-fr-filter': data.properties.id,
+        'data-fr-filter-subitem': data.properties.subItem || '',
+      },
+      children: [
+        {
+          type: 'leafDirective',
+          name: 'fr-search',
+          properties: {
+            id: `filter-${data.properties.id}`,
+            inputId: `filter-${data.properties.id}-input`,
+            inputClasses: ['dsfr-doc-filter-input'],
+            buttonId: `filter-${data.properties.id}-button`,
+            buttonClasses: ['dsfr-doc-filter-button'],
+            label: data.properties.label,
+            title: data.properties.title,
+          }
+        },
+        ...(data.properties.select ? [
+          {
+            type: 'htmlContainer',
+            tagName: 'div',
+            classes: ['dsfr-doc-filter-select', 'fr-select-group'],
+            children: [
+              {
+                type: 'htmlContainer',
+                tagName: 'label',
+                classes: ['fr-label'],
+                attributes: {
+                  for: `filter-${data.properties.select}-select`
+                },
+                children: [
+                  {
+                    type: 'text',
+                    value: data.properties.selectLabel
+                  }
+                ]
+              },
+              {
+                type: 'htmlContainer',
+                tagName: 'select',
+                classes: ['fr-select'],
+                attributes: {
+                  id: `filter-${data.properties.select}-select`,
+                  name: `filter-${data.properties.select}-select`,
+                  'data-fr-filter-select': data.properties.select
+                },
+                children: data.properties.selectOptions.map(option => ({
+                  type: 'htmlContainer',
+                  tagName: 'option',
+                  attributes: {
+                    value: option.value
+                  },
+                  children: [{
+                    type: 'text',
+                    value: option.label
+                  }]
+                }))
+              }
+            ]
+          }
+        ] : [])
+      ],
+    };
+  }
+}
+
+FilterLeafDirective.NAME = 'dsfr-doc-filter';
+
+export { FilterLeafDirective };

package/src/node/node-factory.js

@@ -61,7 +61,8 @@ import { VideoLeafDirective } from  './directive/doc/video-leaf-directive.js';
 import { ImageTextDirective } from './directive/doc/image-text-directive.js'
 import { ChangelogLeafDirective } from './directive/doc/changelog-leaf-directive.js'
 import { PreventPermalinksContainerDirective } from './directive/doc/prevent-permalinks-container-directive.js';
-
+import { FilterLeafDirective } from './directive/doc/filter-leaf-directive.js';
+import { SearchLeafDirective } from './directive/components/search/search-leaf-directive.js';
 
 const NODES = [
   NodeRoot,
@@ -131,7 +132,9 @@ const DIRECTIVE_LEAFS = [
   ChangelogLeafDirective,
   PinLeafDirective,
   VideoLeafDirective,
-  PageItemListLeafDirective
+  PageItemListLeafDirective,
+  SearchLeafDirective,
+  FilterLeafDirective
 ];
 const DIRECTIVE_TEXTS = [
   ImageTextDirective

package/src/page/head/resource.js

@@ -7,7 +7,8 @@ class Resource extends Renderable {
             search: this._data.resource.search,
             pagination: this._data.resource.pagination,
             consent: this._data.resource.consent,
-            badge: this._data.resource.badge
+            badge: this._data.resource.badge,
+            filter: this._data.resource.filter
         };
         return `<script>
             window.resource = ${JSON.stringify(resource)};

package/src/script/main/core/get-query.js

@@ -2,12 +2,22 @@ const paramsString = window.location.search;
 const searchParams = new URLSearchParams(paramsString);
 import { normalizeTerm } from '@gouvfr/dsfr-kit';
 
-const getQuery = () => {
-    return normalizeTerm(searchParams.get('query'));
+const getQuery = (query = 'query') => {
+    return searchParams.get(query) ? normalizeTerm(searchParams.get(query)) : '';
+};
+
+const setQuery = (query, value) => {
+  if (value) {
+    searchParams.set(query, value);
+  } else {
+    searchParams.delete(query);
+  }
+  const queryString = searchParams.toString();
+  window.history.pushState({}, '', queryString ? `?${queryString}` : window.location.pathname);
 };
 
 const getCurrentPagination = () => {
   return parseInt(searchParams.get('page'));
 };
 
-export { getQuery, getCurrentPagination };
+export { getQuery, setQuery, getCurrentPagination };

package/src/script/main/elements/copy-snippet.js

@@ -4,13 +4,22 @@ class CopySnippet extends Element {
   get button () {
     return this.element;
   }
+
   init() {
     this._copyLabel = this.button.innerText;
     this._copiedLabel = this.button.getAttribute('data-label-copied');
-    this._code = this.button.previousElementSibling.innerText;
+    this._code = this.getCodeToCopy();
     this.listenClick(this.button);
   }
 
+  getCodeToCopy () {
+    const card = this.button.closest('.fr-card');
+    const pictogramPreview = card?.querySelector('.pictogram-preview');
+    if (pictogramPreview) return pictogramPreview.innerHTML.trim();
+
+    return this.button.getAttribute('data-copy-value') || this.button.previousElementSibling?.innerText || '';
+  }
+
   get isCopied () {
     return this._isCopied;
   }
@@ -22,6 +31,7 @@ class CopySnippet extends Element {
   }
 
   handleClick () {
+    if (!this._code) return;
     navigator.clipboard.writeText(this._code);
     this.isCopied = true;
     setTimeout(this._handleTimeout.bind(this), 1500);

package/src/script/main/elements/filter-bar/index.js

@@ -0,0 +1,95 @@
+import { Element } from '../../core/element.js';
+import { ResultsFilterList } from './results/results-filter-list.js';
+import { getQuery, setQuery } from '../../core/get-query.js';
+import { normalizeTerm } from '@gouvfr/dsfr-kit';
+
+class FilterBar extends Element {
+  constructor (element) {
+    super(element, 'filterBar');
+    this._filterType = this.element.getAttribute('data-fr-filter');
+    this._filterInput = this.element.querySelector('.dsfr-doc-filter-input');
+    this._filterButton = this.element.querySelector('.dsfr-doc-filter-button');
+    this._select = this.element.querySelector('select');
+    this._query = normalizeTerm(this._filterInput.value);
+  }
+
+  async init () {
+    this._resultsList = new ResultsFilterList(this._filterType, this._select && this._select.value !== '' ? { [this._select.getAttribute('data-fr-filter-select')]: this._select.value } : {});
+    this.element.after(this._resultsList.element);
+    await this._resultsList.init();
+
+    const queryFromUrl = getQuery();
+    const filterFromUrl = getQuery('filter');
+
+    if (this._select && filterFromUrl) {
+      this._select.value = filterFromUrl;
+    }
+
+    const hasQueryFromUrl = !!queryFromUrl;
+    const hasFilterFromUrl = this._select && !!filterFromUrl && this._select.value === filterFromUrl;
+
+    if (hasQueryFromUrl) {
+      this._filterInput.value = queryFromUrl;
+    }
+
+    if (hasQueryFromUrl || hasFilterFromUrl) {
+      this.update(hasQueryFromUrl ? queryFromUrl : this._query, this._select && this._select.value !== '' ? { [this._select.getAttribute('data-fr-filter-select')]: this._select.value } : {});
+    }
+
+    if (this._select) {
+      this._select.addEventListener('change', this.handleChange.bind(this));
+    }
+
+    this._filterInput.addEventListener(
+      'keyup',
+      this.handleKeyup.bind(this)
+    );
+
+    // Handle filter input clear
+    this._filterInput.addEventListener(
+      'search', () => {
+        setQuery('query', '');
+        this.update('');
+      }
+    );
+
+    this._filterButton.addEventListener(
+      'click',
+      this.handleFilterSubmit.bind(this)
+    );
+  }
+
+  update (query, filters = {}) {
+    this._query = query;
+    this._resultsList.update(query, filters);
+  }
+
+  handleFilterSubmit () {
+    setQuery('query', normalizeTerm(this._filterInput.value));
+    if (this._select && this._select.value !== '') {
+      setQuery('filter', normalizeTerm(this._select.value));
+    } else {
+      setQuery('filter', null);
+    }
+    this.update(normalizeTerm(this._filterInput.value), this._select && this._select.value !== '' ? { [this._select.getAttribute('data-fr-filter-select')]: this._select.value } : {});
+  }
+
+  handleKeyup (event) {
+    if (event.key === 'Enter') {
+      this.handleFilterSubmit(event);
+    } else {
+      if (this._select && this._select.value !== '') {
+        this.update(normalizeTerm(event.target.value), { [this._select.getAttribute('data-fr-filter-select')]: this._select.value });
+      } else {
+        this.update(normalizeTerm(event.target.value));
+      }
+    }
+  }
+
+  handleChange (event) {
+    const value = event.target.value;
+    this._resultsList.update(this._query, value !== '' ? { [this._select.getAttribute('data-fr-filter-select')]: value } : {});
+  }
+}
+
+export { FilterBar };

package/src/script/main/elements/filter-bar/results/cards/result-color-card.js

@@ -0,0 +1,80 @@
+class ResultColorCard {
+  constructor (data) {
+    this._colorClass = data.colorClass;
+    this._tint = data.tint;
+    this._usage = data.usage;
+    this._context = data.context;
+    this._family = data.family;
+    this._hover = data.hover;
+  }
+
+  getHeader () {
+    if (!this._colorClass) return '';
+
+    let content = '';
+    switch (this._context) {
+      case 'text':
+        content = `<div class="color-preview" ${this._usage === 'inverted' ? 'style="background-color: var(--background-flat-' + this._tint + ')"' : ''}><p class="fr-h1 ${this._colorClass}">Aa</p></div>`;
+        break;
+
+      case 'artwork':
+        content = `<div class="color-preview ${this._colorClass}" style="background-color: var(--artwork-${this._usage}-${this._tint})"></div>`;
+        break;
+
+      default:
+        content = `<div class="color-preview ${this._colorClass} ${this._context === 'border' ? 'fr-border-width-1v' : ''}"></div>`;
+    }
+
+    return `<div class="fr-card__header">
+      <div class="fr-card__img">
+        ${content}
+      </div>
+    </div>`;
+  }
+
+  getFooter () {
+    return `<div class="fr-card__footer">
+      <ul class="fr-btns-group fr-btns-group--sm">
+        <li>
+          <button data-fr-analytics-action="reduce" data-copy-value="${this._colorClass}" data-label-copied="${window.resource?.filter?.copy?.classCopied}" class="fr-btn fr-btn--secondary dsfr-doc-copy-snippet">${window.resource?.filter?.copy?.class}</button>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getTags () {
+    if (!this._context) return '';
+    return `<ul class="fr-tags-group fr-tags-group--sm">
+        <li>
+          <p class="fr-tag">${this._context}</p>
+        </li>
+        <li>
+          <p class="fr-tag">${this._usage}</p>
+        </li>
+      </ul>`;
+  }
+
+  getBody () {
+    return `<div class="fr-card__body">
+    <div class="fr-card__content">
+      <h3 class="fr-card__title">${this._tint}</h3>
+      <div class="fr-card__start">
+        ${this.getTags()}
+      </div>
+      <div class="fr-card__end">
+        <p class="fr-card__detail">${this._colorClass}</p>
+      </div>
+    </div>
+    ${this.getFooter()}
+  </div>`;
+  }
+
+  render () {
+    return `<div class="fr-card fr-card--shadow">
+    ${this.getBody()}
+    ${this.getHeader()}
+</div>`;
+  }
+}
+
+export { ResultColorCard };

package/src/script/main/elements/filter-bar/results/cards/result-icon-card.js

@@ -0,0 +1,69 @@
+class ResultIconCard {
+  constructor (data) {
+    this._data = data;
+    this._iconName = data.name;
+    this._category = data.category;
+    this._family = data.family;
+    this._path = data.path;
+    this._class = 'fr-icon-' + this._iconName;
+  }
+
+  getHeader () {
+    if (!this._iconName) return '';
+    return `<div class="fr-card__header">
+      <div class="fr-card__img">
+        <div class="icon-preview">
+          <span class="fr-icon fr-icon--lg ${this._class}" aria-hidden="true"></span>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  getFooter () {
+    return `<div class="fr-card__footer">
+      <ul class="fr-btns-group fr-btns-group--sm">
+        <li>
+          <button data-fr-analytics-action="reduce" data-copy-value="${this._class}" data-label-copied="${window.resource?.filter?.copy?.classCopied}" class="fr-btn fr-btn--secondary dsfr-doc-copy-snippet">${window.resource?.filter?.copy?.class}</button>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getTags () {
+    if (!this._category || !this._family) return '';
+    return `<div class="fr-card__start">
+      <ul class="fr-tags-group fr-tags-group--sm">
+        <li>
+          <p class="fr-tag">${this._category}</p>
+        </li>
+        <li>
+          <p class="fr-tag">${this._family}</p>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getBody () {
+    return `<div class="fr-card__body">
+      <div class="fr-card__content">
+        <h3 class="fr-card__title">${this._iconName}</h3>
+        <div class="fr-card__start">
+          ${this.getTags()}
+        </div>
+        <div class="fr-card__end">
+          <p class="fr-card__detail">${this._class}</p>
+        </div>
+      </div>
+      ${this.getFooter()}
+    </div>`;
+  }
+
+  render () {
+    return `<div class="fr-card fr-card--shadow">
+  ${this.getBody()}
+  ${this.getHeader()}
+</div>`;
+  }
+}
+
+export { ResultIconCard };

package/src/script/main/elements/filter-bar/results/cards/result-pictogram-card.js

@@ -0,0 +1,65 @@
+class ResultPictogramCard {
+ constructor (data) {
+    this._data = data;
+    this._name = data.name;
+    this._category = data.category;
+    this._path = data.path;
+    this._code = `<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
+  <use class="fr-artwork-decorative" href="/dist/${this._path}#artwork-decorative"></use>
+  <use class="fr-artwork-minor" href="/dist/${this._path}#artwork-minor"></use>
+  <use class="fr-artwork-major" href="/dist/${this._path}#artwork-major"></use>
+</svg>`;
+  }
+
+  getHeader () {
+    return `<div class="fr-card__header">
+      <div class="fr-card__img">
+        <div class="pictogram-preview">
+          ${this._code}
+        </div>
+      </div>
+    </div>`;
+  }
+
+  getFooter () {
+    return `<div class="fr-card__footer">
+      <ul class="fr-btns-group fr-btns-group--sm">
+        <li>
+          <button data-fr-analytics-action="reduce" data-label-copied="${window.resource?.filter?.copy?.codeCopied}" class="fr-btn fr-btn--secondary dsfr-doc-copy-snippet">${window.resource?.filter?.copy?.code}</button>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getTags () {
+    if (!this._category) return '';
+    return `<div class="fr-card__start">
+      <ul class="fr-tags-group fr-tags-group--sm">
+        <li>
+          <p class="fr-tag">${this._category}</p>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getBody () {
+    return `<div class="fr-card__body">
+      <div class="fr-card__content">
+        <h3 class="fr-card__title">${this._name}</h3>
+        <div class="fr-card__start">
+          ${this.getTags()}
+        </div>
+      </div>
+      ${this.getFooter()}
+    </div>`;
+  }
+
+  render () {
+    return `<div class="fr-card fr-card--shadow">
+  ${this.getBody()}
+  ${this.getHeader()}
+</div>`;
+  }
+}
+
+export { ResultPictogramCard };

package/src/script/main/elements/filter-bar/results/result-filter-item.js

@@ -0,0 +1,27 @@
+import { ResultIconCard } from './cards/result-icon-card.js';
+import { ResultColorCard } from './cards/result-color-card.js';
+import { ResultPictogramCard } from './cards/result-pictogram-card.js';
+
+class ResultFilterItem {
+  constructor (type, data) {
+    this._data = data;
+    this._type = type;
+  }
+
+  render () {
+    switch (this._type) {
+      case 'icon':
+        return new ResultIconCard(this._data).render();
+
+      case 'colors':
+        // console.log(this._data);
+        // if (this._data.context === 'artwork' && this._data.usage !== 'minor') return;
+        return new ResultColorCard(this._data).render();
+
+      case 'pictogram':
+        return new ResultPictogramCard(this._data).render();
+    }
+  }
+}
+
+export { ResultFilterItem };

package/src/script/main/elements/filter-bar/results/results-filter-empty.js

@@ -0,0 +1,21 @@
+import { replaceFragment } from '../../../core/replace-fragments.js';
+
+class ResultsFilterEmpty {
+  constructor (query) {
+    this._query = query;
+  }
+  render () {
+    const noResults = window.resource?.search?.noresults;
+    return `
+    <p class="fr-mb-2v">
+        <strong>${replaceFragment(noResults?.title, this._query)}</strong>
+    </p>
+    <p class="fr-mb-2v">${noResults?.subtitle}</p>
+    <ul class="dsfr-doc-filter-results-list--no-results">
+        <li>${noResults?.suggestions1}</li>
+        <li>${noResults?.suggestions2}</li>
+    </ul>`;
+  }
+}
+
+export { ResultsFilterEmpty };

package/src/script/main/elements/filter-bar/results/results-filter-list.js

@@ -0,0 +1,129 @@
+import { ResultFilterItem } from './result-filter-item.js';
+import { ResultsFilterEmpty } from './results-filter-empty.js';
+import { Element } from '../../../core/element.js';
+import { capitalize } from '@gouvfr/dsfr-kit';
+import CopySnippet from '../../copy-snippet.js';
+
+class ResultsFilterList extends Element {
+  constructor (type, filters = {}) {
+    const element = document.createElement('div');
+    element.classList.add('dsfr-doc-filter-results');
+    element.setAttribute('aria-live', 'polite');
+    super(element);
+    this._type = type;
+    this._filters = filters;
+  }
+
+  async init() {
+    await window.filterEngine.init(this._type);
+    this.update('');
+  }
+
+  search (query, filters = {}) {
+    this._results = window.filterEngine.search(query, { ...this._filters, ...filters });
+    this._resultsArray = Array.isArray(this._results) ? this._results : Object.values(this._results || {});
+    return this._resultsArray;
+  }
+
+  update (query, filters = {}) {
+    this._results = this.search(query, filters);
+
+    switch (true) {
+      case !this._results:
+      case this._results.length === 0:
+        const empty = new ResultsFilterEmpty(query);
+        this._content = empty.render();
+        break;
+
+      default:
+        this._items = this._results.map(result => new ResultFilterItem(this._type, result));
+        this._content = this.render();
+    }
+
+    this.element.innerHTML = this._content;
+    this.initCopyButtons();
+  }
+
+  initCopyButtons () {
+    const buttons = this.element.querySelectorAll('.dsfr-doc-copy-snippet');
+    buttons.forEach(button => {
+      const copySnippet = new CopySnippet(button);
+      copySnippet.init();
+    });
+  }
+
+  groupByCategory(categoryField = 'category', subcategoryField = null) {
+    const grouped = {};
+    this._items.forEach(item => {
+      const category = item._data[categoryField] || 'Non catégorisé';
+
+      if (!grouped[category]) {
+        grouped[category] = subcategoryField ? {} : [];
+      }
+
+      if (subcategoryField) {
+        const subcategory = item._data[subcategoryField] || 'Autre';
+        if (!grouped[category][subcategory]) {
+          grouped[category][subcategory] = [];
+        }
+        grouped[category][subcategory].push(item);
+      } else {
+        grouped[category].push(item);
+      }
+    });
+    return grouped;
+  }
+
+  sortByCategory(grouped) {
+    const sorted = {};
+    Object.keys(grouped).sort().forEach(category => {
+      sorted[category] = grouped[category];
+    });
+    return sorted;
+  }
+
+  render() {
+    switch (this._type) {
+      case 'colors':
+        this._grouped = this.groupByCategory('context', 'usage');
+        break;
+      default:
+        this._grouped = this.sortByCategory(this.groupByCategory());
+    }
+
+    return Object.entries(this._grouped).map(([category, itemsOrSubcategories]) => {
+      // Si c'est un tableau, on a une structure simple sans sous-catégories
+      if (Array.isArray(itemsOrSubcategories)) {
+        return `<div class="fr-grid-row fr-grid-row--gutters fr-mb-6v">
+  <div class="fr-col-12">
+    <h3 class="fr-mb-0">${capitalize(category)}</h3>
+  </div>
+  ${itemsOrSubcategories.map(item => `<div class="fr-col-12 fr-col-sm-6 fr-col-lg-4">
+    ${item.render()}
+  </div>`).join('')}
+</div>`;
+      }
+
+      // Si c'est un objet, on a des sous-catégories
+      return `<div class="fr-mb-8v">
+  <div class="fr-col-12">
+    <h3>${capitalize(category)}</h3>
+    ${category === 'artwork' ? `<p class="fr-text--sm fr-mt-1v">${window.resource?.filter?.artworkDescription}</p>` : ''}
+  </div>
+  ${Object.entries(itemsOrSubcategories).map(([subcategory, items]) => {
+    return `<div class="fr-grid-row fr-grid-row--gutters fr-mb-6v">
+  <div class="fr-col-12">
+    <h4 class="fr-mb-0">${subcategory}</h4>
+  </div>
+  ${items.map(item => `<div class="fr-col-12 fr-col-sm-6 fr-col-lg-4">
+    ${item.render()}
+  </div>`).join('')}
+</div>`;
+  }).join('')}
+</div>`;
+    }).join('');
+  }
+
+}
+
+export { ResultsFilterList };

package/src/script/main/index.js

@@ -5,6 +5,7 @@ import CopyLink from './elements/copy-link.js';
 import ConsentCGU from './elements/consent-cgu.js';
 import Storybook from './elements/storybook.js';
 import { SearchBar } from './elements/search-bar/index.js';
+import { FilterBar } from './elements/filter-bar/index.js';
 import { ConsentManagementPlatform } from './cmp/index.js';
 
 window.onload = async () => {
@@ -13,6 +14,7 @@ window.onload = async () => {
   await instantiateElements('.dsfr-doc-anchor-heading__button', CopyLink);
   await instantiateElements('.dsfr-doc-storybook-leaf iframe', Storybook);
   await instantiateElements('#search', SearchBar);
+  await instantiateElements('.dsfr-doc-filter', FilterBar);
 };
 
 const consentResource = window.resource?.consent || {};

package/src/script/main/minisearch/filter-engine.js

@@ -0,0 +1,53 @@
+import MiniSearch from 'minisearch';
+import { normalizeTerm } from '@gouvfr/dsfr-kit';
+
+const ROOT_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>[a-zA-Z-]+))/;
+
+class FilterEngine {
+  async init (type) {
+    const response = await fetch(this.getFilterIndex(type));
+    this._documentJSON = await response.json();
+    this._document = JSON.stringify(this._documentJSON);
+    this._miniSearch = MiniSearch.loadJSON(this._document, {fields: this.getFields(), storeFields: this.getFields()});
+  }
+
+  getFilterIndex = (type) => {
+    const { groups: { root, version, locale } } = window.location.pathname.match(ROOT_REGEX);
+    return `${root}/${type}.json`;
+  }
+
+  getFields = () => {
+    const fields = Object.keys(this._documentJSON.fieldIds || {});
+    return fields;
+  }
+
+  getOptions = (filter = null) => {
+    const options = {
+      prefix: true,
+      fuzzy: 0.1,
+      processTerm: (term) => normalizeTerm(term.toLowerCase()),
+      tokenize: (string) => string.split(/\s+/)
+    };
+
+    if (filter) {
+      options.filter = (result) => {
+        return Object.entries(filter).every(([key, value]) => result[key] === value);
+      };
+    }
+
+    return options;
+  }
+
+  search (query, filter) {
+    if (query === '' || query == null || query.trim().length === 0) {
+      return Object.values(this._documentJSON.storedFields).filter(result => {
+        return Object.entries(filter).every(([key, value]) => result[key] === value);
+      });
+    } else {
+      const results = this._miniSearch.search(query, this.getOptions(filter));
+      return results;
+    }
+  }
+}
+
+export { FilterEngine };

package/src/script/main/minisearch/index.js

@@ -1,53 +1,5 @@
-import MiniSearch from 'minisearch';
-import { normalizeTerm } from '@gouvfr/dsfr-kit';
-
-const LOAD_OPTIONS = {
-  fields: ['title', 'keywords', 'summary', 'excerpt', 'text'],
-  storeFields: ['title', 'url', 'boost', 'summary', 'excerpt', 'cover', 'section'],
-};
-
-const SEARCH_OPTIONS = {
-  boost: { title: 2.5, keywords: 2, summary: 1.5, text: 1 },
-  boostDocument: (documentId, query, storedFields) =>
-    storedFields?.boost ?? 1,
-}
-
-const getOptions = (type) => {
-  const options = {
-    prefix: true,
-    fuzzy: 0.2,
-    processTerm: (term) => normalizeTerm(term.toLowerCase())
-  };
-
-  switch (type) {
-    case 'search':
-      return { ...options, ...SEARCH_OPTIONS };
-
-    default:
-      return { ...options, ...LOAD_OPTIONS };
-  }
-}
-
-const ROOT_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>[a-zA-Z-]+))/;
-const CURRENT_VERSION_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>\w+)\/(?<search>v\d+\.\d+|[\w-]+))/
-
-const getSearchIndex = (type) => {
-  const searchIndexRegex = type === 'searchPage' ? CURRENT_VERSION_REGEX : ROOT_REGEX;
-  const { groups: { root, version, locale } } = window.location.pathname.match(searchIndexRegex);
-  return `${root}/index.json`;
-}
-
-class SearchEngine {
-  async init (type) {
-    const response = await fetch(getSearchIndex(type));
-    const json = JSON.stringify(await response.json());
-    const options = getOptions('load');
-    this._miniSearch = MiniSearch.loadJSON(json, options);
-  }
-
-  search (query) {
-    return this._miniSearch.search(query, getOptions('search'));
-  }
-}
+import { SearchEngine } from './search-engine.js';
+import { FilterEngine } from './filter-engine.js';
 
 window.searchEngine = new SearchEngine();
+window.filterEngine = new FilterEngine();

package/src/script/main/minisearch/search-engine.js

@@ -0,0 +1,53 @@
+import MiniSearch from 'minisearch';
+import { normalizeTerm } from '@gouvfr/dsfr-kit';
+
+const LOAD_OPTIONS = {
+  fields: ['title', 'keywords', 'summary', 'excerpt', 'text'],
+  storeFields: ['title', 'url', 'boost', 'summary', 'excerpt', 'cover', 'section'],
+};
+
+const SEARCH_OPTIONS = {
+  boost: { title: 2.5, keywords: 2, summary: 1.5, text: 1 },
+  boostDocument: (documentId, query, storedFields) =>
+    storedFields?.boost ?? 1,
+}
+
+const ROOT_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>[a-zA-Z-]+))/;
+const CURRENT_VERSION_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>\w+)\/(?<search>v\d+\.\d+|[\w-]+))/
+
+class SearchEngine {
+  async init (type) {
+    const response = await fetch(this.getIndex(type));
+    const json = JSON.stringify(await response.json());
+    const options = this.getOptions('load');
+    this._miniSearch = MiniSearch.loadJSON(json, options);
+  }
+
+  getOptions = (type) => {
+    const options = {
+      prefix: true,
+      fuzzy: 0.2,
+      processTerm: (term) => normalizeTerm(term.toLowerCase())
+    };
+
+    switch (type) {
+      case 'search':
+        return { ...options, ...SEARCH_OPTIONS };
+
+      default:
+        return { ...options, ...LOAD_OPTIONS };
+    }
+  }
+
+  getIndex = (type) => {
+    const searchIndexRegex = type === 'searchPage' ? CURRENT_VERSION_REGEX : ROOT_REGEX;
+    const { groups: { root, version, locale } } = window.location.pathname.match(searchIndexRegex);
+    return `${root}/index.json`;
+  }
+
+  search (query) {
+    return this._miniSearch.search(query, getOptions('search'));
+  }
+}
+
+export { SearchEngine };

package/src/style/main/components/_dsfr-doc-filter.scss

@@ -0,0 +1,53 @@
+.dsfr-doc-filter-results {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+
+  p + ul.dsfr-doc-filter-results-list--no-results {
+    margin-top: 0;
+  }
+
+  .fr-card__content {
+    padding: 1rem;
+
+    .fr-card__end {
+      margin-top: 0;
+    }
+
+    .fr-card__start {
+      .fr-tags-group>li {
+        line-height: 1.25rem;
+      }
+    }
+  }
+
+  .fr-card__footer {
+    padding: 0 1rem 1rem;
+  }
+
+  .fr-card__img {
+    .icon-preview, .pictogram-preview, .color-preview {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 120px;
+      border-bottom: 1px solid var(--background-alt-grey);
+
+      & > * {
+        margin: 0;
+      }
+    }
+
+    .icon-preview {
+      height: 80px;
+    }
+  }
+}
+
+.dsfr-doc-filter-select {
+  margin-top: 1rem;
+
+  .fr-select {
+    max-width: 200px;
+  }
+}

package/src/style/main/components/_index.scss

@@ -9,4 +9,5 @@
 @use 'dsfr-doc-edit';
 @use 'dsfr-doc-storybook-leaf';
 @use 'dsfr-doc-modal-cgu';
+@use 'dsfr-doc-filter';
 @use 'fr-tile';

package/src/style/search/index.scss

@@ -1 +0,0 @@
-@use 'search-page';