FAQ section in Contact page

README.md

@@ -127,3 +127,7 @@ Fill in the meta information :
 1. `name:` the brand name of the partner
 2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder
 3. `url:` the partner website
+
+### FAQ section
+
+Edit `_data/faq.json` file to add a new Q/A couple object. Plain html e.g. `<br>` or `<a href="">link</a>` is supported

src/_data/faq.json

@@ -0,0 +1,14 @@
+{
+ "items": [{
+    "q": "Question 1 ?",
+    "a": "Réponse 1. <br> Avec retour à la ligne"
+  },
+  {
+    "q": "Question 2 ?",
+    "a": "Réponse 2 avec une url : https://www.astrolabe.coop/nous-rejoindre/"
+  },
+  {
+    "q": "Question 3 ?",
+    "a": "Réponse 3 avec un <a href=\"/comprendre-la-cae/\">lien</a>"
+  }]
+}

src/_data/navigation.json

@@ -26,8 +26,8 @@
       "external": false
     },
     {
-      "text": "Nous contacter",
+      "text": "FAQ / Nous contacter",
-      "url": "#contact-form",
+      "url": "/faq+contact/",
       "external": false
     }
   ]

src/_includes/layouts/contact.njk

@@ -1,17 +1,9 @@
 {% extends 'layouts/base.njk' %}
 
-{# Intro content #}
-{% set introHeading = title %}
-
 {% block content %}
   <main id="main-content" tabindex="-1">
-    <article class="[ post ] [ h-entry ]">
+    {% include "partials/components/faq.njk" %}
-      {% include "partials/components/intro.njk" %}
+    {% include "partials/components/contact-form.njk" %}
-      <div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
-        {{ content | safe }}
-        {% include "partials/components/contact-form.njk" %}
-      </div>
-    </article>
   </main>
 {% endblock %}
 

src/_includes/partials/components/faq.njk

@@ -0,0 +1,24 @@
+<section class="[ faq ]">
+  {% if faq.items %}
+  <div class="[ inner-wrapper ]">
+    <h1 class="faq__heading">{{ faqHeading }}</h1>
+    {{ content | safe }}
+    <div class="accordion accordion-flush" id="accordionFlushExample">
+      {% for item in faq.items %}
+        <div class="accordion-item">
+          <h3 class="accordion-header" id="flush-heading{{ loop.index }}">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{ loop.index }}" aria-expanded="false" aria-controls="flush-collapse{{ loop.index }}">
+              {{ item.q }}
+            </button>
+          </h3>
+          <div id="flush-collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ loop.index }}" data-bs-parent="#accordionFlushExample">
+            <div class="accordion-body">
+              {{ item.a | urlize | safe }}
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+</section>

src/pages/contact.md

@@ -1,10 +0,0 @@
----
-title: 'Contact'
-permalink: '/contact/index.html'
-layout: 'layouts/contact.njk'
-eleventyExcludeFromCollections: true
----
-
-You can have a contact page which uses a basic form. The [code with the form fields lives here](https://github.com/hankchizljaw/hylia/blob/master/src/_includes/layouts/contact.njk). 
-
-To delete the contact form for this site, delete this page in the CMS or at `src/pages/contact.md`. You probably will also want to delete `src/pages/thank-you.md`.

src/pages/faq-contact.md

@@ -0,0 +1,9 @@
+---
+title: 'FAQ / Contact'
+permalink: '/faq+contact/index.html'
+layout: 'layouts/contact.njk'
+eleventyExcludeFromCollections: true
+faqHeading: 'Foire Aux Questions'
+---
+
+[A REFORMULER ?] Avant de nous contacter, peut-être avons déjà réponse à certaines de vos questions ?

src/scss/components/_faq.scss

@@ -0,0 +1,30 @@
+.faq {
+  &__heading {
+    margin: 8rem 0 4rem;
+  }
+
+  .accordion {
+    margin-top: 2rem;
+  }
+
+  .accordion-button {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 1rem 0;
+  }
+
+  .accordion-button:not(.collapsed) {
+    color: var(--color-text);
+    background-color: var(--color-white);
+    box-shadow: none;
+  }
+
+  .accordion-button:focus {
+    border: 0;
+    box-shadow: 0 0 0 1px var(--color-text);
+  }
+
+  .accordion-button:not(.collapsed)::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  }
+}

src/scss/components/_post.scss

@@ -151,13 +151,13 @@
 
         &::after {
           content: '';
-          background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
           background-repeat: no-repeat;
-          width: 1rem;
+          width: 1.25rem;
-          height: .625rem;
+          height: 1.25rem;
           position: absolute;
           right: 0;
-          top: calc(50% - .3125rem);
+          top: calc(50% - .625rem);
         }
       }
 

src/scss/global.scss

@@ -60,6 +60,7 @@ img {
 
 // Components
 @import 'components/button';
+@import 'components/faq';
 @import 'components/form';
 @import 'components/heading-permalink';
 @import 'components/intro';