Merge pull request #5 from qld-gov-au/QOLOE-530-Breadcrumbs

Breadcrumbs init setup
qld-gov-au · Sep 10, 2024 · bf859b9 · bf859b9
2 parents acc70e8 + 05dd10f
commit bf859b9
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 0 deletions.
diff --git a/src/breadcrumbs/main.cjs b/src/breadcrumbs/main.cjs
@@ -0,0 +1,62 @@
+/**
+ * Blockquote component
+ * Common js module to support DXP Component Service.
+ */
+module.exports = async function (input, info) {
+  const getBreadcrumbData = function () {
+    let breadcrumbHtml = "";
+    const navData = [
+      {
+        link: "#",
+        linktext: "Home",
+      },
+      {
+        link: "#",
+        linktext: "Topic 01",
+      },
+      {
+        link: "#",
+        linktext: "Topic 02",
+      },
+      {
+        link: "#",
+        linktext: "Topic 03",
+      },
+      {
+        link: "#",
+        linktext: "Current page",
+      },
+    ];
+    const breadcrumbLength = Number(navData.length);
+
+    for (const navItems in navData) {
+      if (Number(navItems) + 1 < breadcrumbLength) {
+        breadcrumbHtml += `<li class="breadcrumb-item">
+                            <a href="${navData[navItems].link}">
+                              ${navData[navItems].linktext}                      
+                            </a>
+                          </li>`;
+      } else {
+        breadcrumbHtml += `<li class="breadcrumb-item active" aria-current="page" data-href="${navData[navItems].link}">                  
+                            ${navData[navItems].linktext}
+                          </li>`;
+      }
+    }
+
+    return breadcrumbHtml;
+  };
+  return `
+          <div class="container-fluid ${input.colour}">
+            <div class="container">
+              <div class="row">
+                <div class="container-xl">
+                  <nav aria-label="breadcrumb">
+                    <ol class="breadcrumb">
+                      ${getBreadcrumbData()}
+                    </ol>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>`;
+};
diff --git a/src/breadcrumbs/manifest.json b/src/breadcrumbs/manifest.json
@@ -0,0 +1,75 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json#",
+  "version": "1.0.1",
+  "name": "breadcrumbs",
+  "displayName": "Breadcrumbs Component",
+  "description": "QGDS Bootstrap 5 - Breadcrumbs Component",
+  "namespace": "qgds-bs5-local",
+  "mainFunction": "main",
+  "staticFiles": {
+    "locationRoot": "static"
+  },
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.cjs",
+      "input": {
+        "type": "object",
+        "properties": {
+          "colour": {
+            "type": "string"
+          }
+        },
+        "required": []
+      },
+      "output": {
+        "responseType": "html",
+        "staticFiles": [
+          {
+            "location": "header",
+            "file": {
+              "type": "css",
+              "filepath": "https://static.qgov.net.au/qgds-bootstrap5/v1/v1.x.x-latest/assets/css/qld.bootstrap.css"
+            }
+          },
+          {
+            "location": "header",
+            "file": {
+              "type": "css",
+              "filepath": "breadcrumb.css"
+            }
+          },
+          {
+            "location": "footer",
+            "file": {
+              "type": "js",
+              "filepath": "https://static.qgov.net.au/qgds-bootstrap5/v1/v1.x.x-latest/assets/js/bootstrap.min.js"
+            }
+          },
+          {
+            "location": "footer",
+            "file": {
+              "type": "js",
+              "filepath": "https://static.qgov.net.au/qgds-bootstrap5/v1/v1.x.x-latest/assets/js/qld.bootstrap.min.js"
+            }
+          }
+        ]
+      }
+    }
+  ],
+  "previews": {
+    "default": {
+      "functionData": {
+        "main": {
+          "inputData": {
+            "type": "file",
+            "path": "previews/example.data.json"
+          },
+          "wrapper": {
+            "path": "previews/preview.html"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/breadcrumbs/previews/example.data.json b/src/breadcrumbs/previews/example.data.json
@@ -0,0 +1,3 @@
+{
+  "colour": " alt"
+}
diff --git a/src/breadcrumbs/previews/preview.html b/src/breadcrumbs/previews/preview.html
@@ -0,0 +1,17 @@
+<html>
+
+<head>
+  [component://static-header]
+  <!-- <link rel="stylesheet"
+    href="https://www.forgov.qld.gov.au/__data/assets/git_bridge/0030/498603/assets/css/qld.bootstrap.css">
+  <link rel="stylesheet"
+    href="https://www.forgov.qld.gov.au/__data/assets/css_file_folder/0029/499142/QGDS-forgov-shim.css"> -->
+
+</head>
+
+<body>
+  [component://output]
+  [component://static-footer]
+</body>
+
+</html>
diff --git a/src/breadcrumbs/static/breadcrumb.css b/src/breadcrumbs/static/breadcrumb.css
@@ -0,0 +1,48 @@
+.breadcrumb-item a:before {
+  margin-block-start: 0.4rem;
+  width: 1rem;
+  content: var(--qld-breadcrumb-divider-flipped);
+  float: right;
+  padding-left: var(--qld-breadcrumb-item-padding-x);
+}
+.breadcrumb-item a:after {
+  content: "" !important;
+  content: none !important;
+}
+.breadcrumb {
+  --qld-breadcrumb-padding-y: 2rem;
+}
+.breadcrumb-item {
+  line-height: var(--qld-body-line-height);
+}
+
+@media (max-width: 699px) {
+  .breadcrumb-item:before {
+    margin-block-start: 0.4rem;
+  }
+  .breadcrumb-item a:before {
+    content: "" !important;
+    content: none !important;
+  }
+}
+@media (min-width: 700px) {
+  .breadcrumb-item {
+    display: none;
+    &:before {
+      content: "" !important;
+      content: none !important;
+    }
+  }
+  .breadcrumb-item:nth-last-child(2) {
+    display: list-item;
+  }
+  .breadcrumb-item:last-child {
+    display: list-item;
+  }
+}
+
+@media (min-width: 992px) {
+  .breadcrumb-item {
+    display: list-item;
+  }
+}