DRAFT: Updates Inpage-Navigation component

prettier.json

@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "bracketSameLine": true,
   "arrowParens": "always",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "quoteProps": "as-needed"
 }

src/components/back_to_top/index.js

@@ -1,20 +1,20 @@
 /**
  * @file index.js
- * @description Example Component entry file (index.js).
- * @module example
+ * @description BackToTop Component entry file (index.js).
+ * @module BackToTop
  */
 
 // Imports QGDS Component utility:
 import QGDSComponent from "./../../js/QGDSComponent.js";
 
-// Imports resources needed to nake our "Example" component:
+// Imports resources needed to make our "BackToTop" component:
 import hbstemplate from "./back-to-top.hbs?raw";
 import logic from "./back-to-top.js";
 import meta from "./version.json";
 
 /**
  * @function BackToTop
- * @description The Example component.
+ * @description The BackToTop component.
  * @param {object} data - The data to be used in the template.
  * @param {string} template - The template to render.
  * @returns {object} - A new instance of the QGDSComponent class, contained properties: template, meta, htmlstring, node.

src/components/in_page_navigation/index.js

@@ -0,0 +1,49 @@
+/**
+ * @file index.js
+ * @module InpageNavigation
+ * @description Inpage Navigation Component file.
+ *
+ * @function InpageNavigation
+ * @description The Inpage Navigation component.
+ * @param {object} data - The data to be used by the template.
+ * @param {string} template - The handlebars template to render.
+ * @returns {object} - A new instance of the QGDSComponent class, containing properties: template, meta, htmlstring, node.
+ */
+
+// Imports QGDS Component utility:
+import QGDSComponent from "./../../js/QGDSComponent.js";
+
+// Imports resources needed to make our "Inpage Navigation" component:
+import hbstemplate from "./inpage-navigation.hbs?raw";
+import logic from "./inpage-navigation.js";
+import meta from "./version.json";
+
+export default function InpageNavigation({ data, template = hbstemplate }) {
+  // Initialise Inpage Navigation JS on page load (if data.dynamiclinks is true)
+  document.addEventListener("DOMContentLoaded", () => {
+    try {
+      if (data.source === "dynamic") {
+        /**
+         * Initialize the logic for Inpage Navigation.
+         * @function init
+         * @memberof logic
+         */
+        logic.init();
+      }
+    } catch (error) {
+      console.error(`InpageNavigation error in function 'init': ${error.message}`, {
+        functionName: "init",
+        errorDetails: error,
+      });
+    }
+  });
+
+  //Minimum required fields for the component to function
+  const props = {
+    data: data,
+    template: template,
+    meta: meta || {},
+  };
+
+  return new QGDSComponent("InpageNavigation", props);
+}

src/components/in_page_navigation/inpage-navigation.data.json

@@ -0,0 +1,25 @@
+{
+  "id": "in-page-navigation",
+  "component": "inpage-navigation",
+  "title": "On this page",
+  "headingType": "h2",
+  "source": "static",
+  "links": [
+    {
+      "href": "#section-1",
+      "title": "Static Link Section 1"
+    },
+    {
+      "href": "#section-2",
+      "title": "Static Link Section 2"
+    },
+    {
+      "href": "#section-3",
+      "title": "Static Link Section 3"
+    },
+    {
+      "href": "#section-4",
+      "title": "Static Link Section 4"
+    }
+  ]
+}

src/components/in_page_navigation/inpage-navigation.hbs

@@ -0,0 +1,22 @@
+<nav class="qld__inpage-nav-links" aria-label="In page navigation" data-headingType="{{headingType}}" id="{{id}}"
+    data-component="{{component}}">
+
+    <h2 class="qld__inpage-nav-links__heading">
+        {{{title}}}
+    </h2>
+
+    <ul class="qld__link-list">
+        {{#ifCond source '==' 'static'}}
+        {{#each links}}
+        <li class="qld__link-list__item">
+            <a href="{{href}}">{{{title}}}</a>
+        </li>
+        {{/each}}
+        {{/ifCond}}
+
+        {{#ifCond source '==' 'dynamic'}}
+        {{!-- LI > A links will be injected by the component's JS --}}
+        {{/ifCond}}
+
+    </ul>
+</nav>

src/components/in_page_navigation/inpage-navigation.js

@@ -0,0 +1,36 @@
+export default {
+  init() {
+    var navs = document.querySelectorAll(".qld__inpage-nav-links");
+    var mainEl = document.querySelector("main.main");
+    var isLandingPage = mainEl && mainEl.classList.contains("landing");
+
+    // For all In-Page Nav components
+    navs.forEach(function (nav) {
+      var headingSelector = nav.getAttribute("data-headingType") ? nav.getAttribute("data-headingType") : "h2";
+      var pageContent = isLandingPage ? mainEl : document.getElementById("content");
+      var headings = pageContent.querySelectorAll(
+        headingSelector + ":not(.qld__inpage-nav-links__heading):not(.banner__heading)",
+      );
+      var list = nav.querySelector(".qld__link-list");
+      list.innerHTML = "";
+
+      if (headings.length === 0) {
+        nav.style.display = "none";
+      }
+
+      // For all headings (with matching data-headingType) in page content
+      headings.forEach(function (heading) {
+        var title = heading.innerText;
+        var id = "section__" + title.toLowerCase().replace(/\s+/g, "-");
+        heading.setAttribute("id", id);
+        heading.setAttribute("tabindex", -1);
+        var link = '<li><a href="#' + id + '">' + title + "</a></li>";
+
+        // Append link item if it doesn't already exist in list
+        if (list.querySelector('a[href="#' + id + '"') === null) {
+          list.insertAdjacentHTML("beforeend", link);
+        }
+      });
+    });
+  },
+};

src/components/in_page_navigation/css/component.scss → src/components/in_page_navigation/inpage-navigation.scss

@@ -18,34 +18,37 @@
     line-height: $typographyDesktopH6LineHeight;
   }
 
-  * + & {
+  *+& {
     @include QLD-space(margin-top, 2.3125unit);
   }
+
   a {
     @include QLD-underline("light", "underline", "default", "noVisited");
   }
 
-  .qld__body & > ul,
-  .qld__body & > ol {
-    @include QLD-space(margin-top, 0.75unit);
+  .qld__body &>ul,
+  .qld__body &>ol {
+    @include QLD-space(margin-top, 0.75unit); // Consider using a variable for 0.75unit
     list-style-type: none;
     padding: 0;
 
     li {
       margin: 0;
     }
 
-    * + li {
+    *+li {
       margin-left: 0;
     }
-    li + li {
-      @include QLD-space(margin-top, 0.5unit);
+
+    li+li {
+      @include QLD-space(margin-top, 0.5unit); // Consider using a variable for 0.5unit
     }
   }
 
   .qld__body--dark &,
   .qld__body--dark-alt & {
     border-color: var(--QLD-color-dark__action--primary);
+
     a {
       @include QLD-underline("dark", "underline", "default", "noVisited");
     }
@@ -74,4 +77,4 @@
   .qld__inpage-nav-links {
     display: none !important;
   }
-}
+}

src/components/in_page_navigation/inpage-navigation.stories.js

@@ -0,0 +1,120 @@
+/**
+ * @file inpage-navigation.stories.js
+ * @description Storybook configuration file for the Inpage Navigation component.
+ * @module inpage-navigation.stories
+ */
+
+// Imports:
+// - the QGDS object containing all components
+// - data you need to populate the component for rendering
+import { QGDS } from "../../js/index.js";
+import mockupData from "./inpage-navigation.data.json";
+
+/* ========= STORIES 👇 ===== */
+
+export default {
+  title: "Components/Navigation (In-page navigation)",
+  render: (args) => {
+    try {
+      return new QGDS.InpageNavigation({ data: args }).htmlstring;
+    } catch (e) {
+      return JSON.stringify(e) + JSON.stringify(args);
+    }
+  },
+  args: mockupData,
+
+  decorators: [
+    (Story) => {
+      return `
+      <section class="qld__body" style="margin: 1rem 1rem;">
+        <div class="container-fluid">
+        ${Story()}
+        </div>
+    </section>`;
+    },
+  ],
+
+  /**
+   * Additional parameters for the story.
+   *
+   * @type {Object}
+   * @property {Object} design - Configuration for the design parameter.
+   * @property {string} design.name - Name of the design parameter.
+   * @property {string} design.type - Type of the design parameter. figma | link
+   * @property {string} design.url - URL of the design parameter.
+   */
+  parameters: {
+    design: [
+      {
+        name: "Link",
+        type: "link",
+        url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=7229-112138",
+      },
+      {
+        name: "QGDS Figma Reference",
+        type: "figma",
+        url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=7229-112138",
+      },
+      {
+        name: "dark xl",
+        type: "figma",
+        url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=10865-242473",
+      },
+    ],
+  },
+};
+
+/**
+ * In-page Navigation with Static links (Default)
+ */
+
+export const WithStaticLinks = {
+  args: {
+    ...mockupData,
+    source: "static",
+  },
+};
+
+/**
+ * In-page Navigation with dynamic links
+ */
+
+export const WithDynamicLinks = {
+  args: {
+    ...mockupData,
+    source: "dynamic",
+  },
+  decorators: [
+    (Story) => {
+      return `
+        <div id="content" style="margin-top: 4rem;">
+
+        <h1>Page title</h1>
+
+        <!-- Dynamic In-page navigation -->
+        ${Story()}
+
+        <h2>Section 1</h2>
+            <p>
+            This inpage navigation list was generated with Javascript that looped over all H2 tags within the #content container.
+            </p>
+
+        <h2>Section 2</h2>
+            <p>This is a paragraph under section 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies.</p>
+
+            <h3>Sub-section</h3>
+            <p>This is a sub-section under section 2.</p>
+
+            <h3>Sub-section</h3>
+            <p>This is a sub-section under section 2.</p>
+
+        <h2>Section 3</h2>
+            <p>
+                This is a paragraph under section 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies.
+            </p>
+
+        </div>`;
+    },
+  ],
+};