feat(examples): new 'Pages' section and new 'Form' example (#1559)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

site/content/docs/5.2/examples/form/form.js

@@ -0,0 +1,24 @@
+(() => {
+  'use strict'
+
+  // Tooltip
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new boosted.Tooltip(tooltipTriggerEl)) // eslint-disable-line no-unused-vars, no-undef
+
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  const forms = document.querySelectorAll('.needs-validation')
+  // Loop over them and prevent submission
+  Array.from(forms).forEach(form => {
+    form.addEventListener('submit', event => {
+      if (!form.checkValidity()) {
+        event.preventDefault()
+        event.stopPropagation()
+        // Focus on first error
+        const invalidItems = form.querySelectorAll(':invalid')
+        invalidItems[0].focus()
+      }
+
+      form.classList.add('was-validated')
+    }, false)
+  })
+})()

site/content/docs/5.2/examples/form/index.html

@@ -0,0 +1,219 @@
+---
+layout: examples
+title: Form example
+extra_js:
+  - src: "form.js"
+---
+
+<header class="sticky-top">
+  <nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra navigation">
+    <div class="container-xxl">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+        <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
+      </ul>
+    </div>
+  </nav>
+  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation">
+    <div class="container-xxl">
+      <div class="navbar-brand me-auto me-lg-4">
+        <a class="stretched-link" href="#">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
+        </a>
+        <h1 class="title">Travel</h1>
+      </div>
+      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header-1" aria-controls="global-header-1.1 global-header-1.2" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div id="global-header-1.1" class="navbar-collapse collapse me-lg-auto global-header-1">
+        <ul class="navbar-nav">
+          <li class="nav-item"><a class="nav-link" href="#">All inclusive cards</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Data only cards</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Top up</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Assistance</a></li>
+        </ul>
+        <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
+        </ul>
+      </div>
+      <div id="global-header-1.2" class="navbar-collapse collapse d-sm-flex global-header-1">
+        <ul class="navbar-nav flex-row">
+          <li class="nav-item">
+            <a href="#" class="nav-link nav-icon">
+              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"></use>
+              </svg>
+              <span class="visually-hidden">Basket</span>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link nav-icon">
+              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#user"></use>
+              </svg>
+              <span class="visually-hidden">My account</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
+<main class="bd-content order-1">
+  <div class="bg-white title-bar">
+    <div class="container-xxl d-block">
+      <div class="row">
+        <div class="col-sm-12 col-lg-5 offset-lg-3">
+          <h1 class="display-1">Become a reseller</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container-xxl pt-4">
+    <div class="row">
+      <div class="col-sm-12 col-lg-5 offset-lg-3">
+        <p class="ll-sm h3 mb-4">
+          You are a professional and wish to resell Orange products to your customers? Please fill the form and we will get back to you shortly.
+        </p>
+        <form class="needs-validation mb-5" novalidate>
+          <div class="row">
+            <div class="col-12">
+              <p class="fw-bold mb-4">
+                <span class="text-primary me-1">*</span>indicates required
+              </p>
+            </div>
+            <div class="col-sm-4 col-md-6 mb-3">
+              <label for="selectTitle" id="selectTitleLabel" class="form-label is-required">Title</label>
+              <select class="form-select" id="selectTitle" aria-labelledby="selectTitleLabel selectTitleFeedback" autocomplete="sex" required>
+                <option selected disabled value="" aria-hidden="true">Select a title</option>
+                <option value="1">Miss</option>
+                <option value="2">Mr.</option>
+                <option value="3">Mrs.</option>
+                <option value="3">Ms.</option>
+                <option value="4">Prefer not to say</option>
+              </select>
+              <div class="valid-feedback">
+                Looks good!
+              </div>
+              <div id="selectTitleFeedback" class="invalid-feedback">
+                Please select a valid title.
+              </div>
+            </div>
+            <div class="col-12">
+              <div class="mb-3">
+                <label for="firstName" id="firstNameLabel" class="form-label is-required">First name</label>
+                <input type="text" class="form-control" id="firstName" aria-labelledby="firstNameLabel firstNameFeedback" autocomplete="given-name" required>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="firstNameFeedback" class="invalid-feedback">
+                  Please enter a valid first name.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="lastName" id="lastNameLabel" class="form-label is-required">Last name</label>
+                <input type="text" class="form-control" id="lastName" aria-labelledby="lastNameLabel lastNameFeedback" autocomplete="family-name" required>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="lastNameFeedback" class="invalid-feedback">
+                  Please enter a valid last name.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="email" id="emailLabel" class="form-label is-required">Email</label>
+                <input type="email" class="form-control" id="email" aria-labelledby="emailLabel emailFeedback" autocomplete="email" required>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="emailFeedback" class="invalid-feedback">
+                  Please provide a valid email.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="country" id="countryLabel" class="form-label is-required">Country</label>
+                <select class="form-select" id="country" aria-labelledby="countryLabel countryFeedback" autocomplete="country-name" required>
+                  <option selected disabled value="" aria-hidden="true">Select a country</option>
+                  <option value="1">Australia</option>
+                  <option value="2">Canada</option>
+                  <option value="3">France</option>
+                  <option value="4">USA</option>
+                </select>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="countryFeedback" class="invalid-feedback">
+                  Please select a valid country.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="company" id="companyLabel" class="form-label is-required">Name of company</label>
+                <input type="text" class="form-control" id="company" aria-labelledby="companyLabel companyFeedback" required>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="companyFeedback" class="invalid-feedback">
+                  Please enter a valid company name.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="business" id="businessLabel" class="form-label is-required">Business type</label>
+                <select class="form-select" id="business" aria-labelledby="businessLabel businessFeedback" required>
+                  <option selected disabled value="" aria-hidden="true">Select a type</option>
+                  <option value="1">Corporation</option>
+                  <option value="2">Limited liability company</option>
+                  <option value="3">Partnership</option>
+                  <option value="4">Sole proprietorship</option>
+                </select>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="businessFeedback" class="invalid-feedback">
+                  Please select a valid business type.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="website" id="websiteLabel" class="form-label">Website</label>
+                <input type="text" class="form-control" id="website" aria-labelledby="websiteLabel websiteFeedback">
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="websiteFeedback" class="invalid-feedback">
+                  Please enter a valid website.
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="message" id="messageLabel" class="form-label is-required">Message</label>
+                <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for text area">
+                  <span class="visually-hidden">Helper for text area</span>
+                </button>
+                <textarea class="form-control" id="message" rows="5" placeholder="Describe your business and your motivation in becoming an Orange reseller" aria-labelledby="messageLabel messageFeedback" required></textarea>
+                <div class="valid-feedback">
+                  Looks good!
+                </div>
+                <div id="messageFeedback" class="invalid-feedback">
+                  Please enter a valid message.
+                </div>
+              </div>
+              <button type="submit" class="btn btn-primary mt-2">Submit</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</main>
+<footer class="footer bg-dark navbar-dark">
+  <h2 class="visually-hidden">Sitemap and information</h2>
+  <div class="container-xxl footer-terms">
+    <ul class="navbar-nav gap-md-3">
+      <li class="fw-bold">© Orange 2022</li>
+      <li><a class="nav-link" href="#">Terms and conditions</a></li>
+      <li><a class="nav-link" href="#">Privacy</a></li>
+      <li><a class="nav-link" href="#">Cookie policy</a></li>
+      <li><a class="nav-link" href="#">Accessibility statement</a></li>
+      <li><a class="nav-link" id="test" href="#" aria-current="page">Become a reseller</a></li>
+    </ul>
+  </div>
+</footer>

site/content/docs/5.2/migration.md

@@ -108,6 +108,10 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
       ```
     </details>
 
+- **Pages**
+  - <span class="badge bg-success">New</span> A new section called 'Pages' has been added where you will find complete and reusable pages that can be found in the Design Guidelines.
+  - <span class="badge bg-success">New</span> A form page example is now available.
+
 ### CSS and Sass variables
 
 - <details class="mb-2">

site/data/examples.yml

@@ -30,6 +30,12 @@
     - name: Navbar sticky
       description: "Single navbar example of a sticky-top navbar along with some additional content."
 
+- category: Pages
+  description: "Complete reusable pages that can be found in the Design Guidelines."
+  examples:
+    - name: Form
+      description: "How to build a form with Boosted."
+
 - category: RTL
   description: "See Boosted's RTL version in action with these modified Custom Components examples."
   examples:

stories/create-stories-from-doc.js

@@ -71,8 +71,8 @@ const files = [
   ['Toasts', '../_site/docs/5.2/components/toasts/index.html'],
   ['Tooltips',
     '../_site/docs/5.2/components/tooltips/index.html',
-    'var tooltipTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="tooltip"]\'));\
-    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\
+    'const tooltipTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="tooltip"]\'));\
+    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\
       return new boosted.Tooltip(tooltipTriggerEl);\
     })']
 ]