Add global nanoid and use in accordionsgroup component

IGNF · Feb 22, 2024 · c124385 · c124385
1 parent c51d1a1
commit c124385
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/_includes/components/accordionsgroup.njk b/_includes/components/accordionsgroup.njk
@@ -1,13 +1,16 @@
 {% if not accordionItems %}{% set accordionItems = params.items %}{% endif %}
+
+{% set groupId = nanoid() %}
+
 <div class="fr-accordions-group">
   {% for accordionItem in accordionItems %}
     <section class="fr-accordion">
       <h3 class="fr-accordion__title">
-        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-{{ loop.index }}">
+        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-{{ groupId }}-{{ loop.index }}">
           {{ accordionItem.title }}
         </button>
       </h3>
-      <div class="fr-collapse" id="accordion-{{ loop.index }}">
+      <div class="fr-collapse" id="accordion-{{ groupId }}-{{ loop.index }}">
         {{ accordionItem.content | safe }}
       </div>
     </section>

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -1,4 +1,6 @@
 const {DateTime} = require("luxon");
+const {nanoid} = require ("nanoid");
+
 const markdownItAnchor = require("markdown-it-anchor");
 const markdownItAttrs = require("markdown-it-attrs");
 const markdownItContainer = require("markdown-it-container");
@@ -193,6 +195,8 @@ module.exports = function (eleventyConfig) {
         lstripBlocks: true,
     });
 
+    eleventyConfig.addNunjucksGlobal("nanoid", () => nanoid());
+
     // Features to make your build faster (when you need them)
 
     // If your passthrough copy gets heavy and cumbersome, add this line