QOLOE-515 - refactor: Cleaner dev structure

README.md

@@ -2,10 +2,13 @@
 
 This library is for dxp.squiz.cloud to generate the required html structure to use the QGDS Bootstrap5 css/javascript.
 
+There is two namespaces
+* **qgds-bs5 (-dev)**: Used for WYSIWYG editor drag and drop components
+* **qgds-bs5-layout (-dev)**: Used for page template embeds 
 
 ### Quick start
 
-Use namespace and version on each component. 
+Use namespace and version on each component.
 
 ```bash
 npm install

esbuild.js

@@ -68,14 +68,20 @@ function updateManifestVersion(manifestPath) {
   const oldVersion = manifest.version;
   const version = isDevBuild ? `${packageVersion}${getTimestamp()}` : `${packageVersion}`;
   const namespace = isDevBuild ? `qgds-bs5-dev` : `qgds-bs5`;
+  const namespaceLayout = isDevBuild ? `qgds-bs5-layout-dev` : `qgds-bs5-layout`;
 
   if (!isLocalBuild) {
     manifest.version = version;
+  }
+
+  if (manifestPath.includes("dist/layout/")){
+    manifest.namespace = namespaceLayout;
+  } else {
     manifest.namespace = namespace;
   }
+
   fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf-8');
   console.log(`Updated version in ${manifestPath} to ${version} with namespace ${namespace}`);
-
 }
 
 function processFile(file) {

spec/README.md

@@ -1,4 +1,6 @@
 
 This is the dxp spec as of 2024 Sept
 
-http://localhost:3000/schemas/v1.json
+http://localhost:3000/schemas/v1.json
+
+Current icon set to choose from can be see here: https://fonts.google.com/icons?icon.size=24&icon.color=%23EA3323&icon.set=Material+Icons&icon.style=Two+tone 

src/layout/breadcrumbs/main.cjs

@@ -0,0 +1,33 @@
+/**
+ * Blockquote component
+ * Common js module to support DXP Component Service.
+ */
+module.exports = async function (input, info) {
+  const itemLength = input.breadcrumbs.length;
+  const items = input.breadcrumbs
+    .map(
+      (item, i) => `
+      <li class="breadcrumb-item">
+        ${i + 1 < itemLength ? `<a href="${item.link}">` : ""}
+          ${item.linktext}
+        ${i + 1 < itemLength ? `</a>` : ""}
+      </li>
+    `
+    )
+    .join("");
+  return `
+      <div class="container-fluid ${input.brandOverride ? input.brandOverride : ""}">
+        <div class="container">
+          <div class="row">
+            <div class="container-xl">
+              <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                  ${items}
+                </ol>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+};

src/breadcrumbs/manifest.json → src/layout/breadcrumbs/manifest.json

@@ -4,7 +4,7 @@
   "name": "breadcrumbs",
   "displayName": "Breadcrumbs Component",
   "description": "QGDS Bootstrap 5 - Breadcrumbs Component",
-  "namespace": "qgds-bs5-local",
+  "namespace": "qgds-bs5-layout-local",
   "mainFunction": "main",
   "staticFiles": {
     "locationRoot": "static"
@@ -16,11 +16,29 @@
       "input": {
         "type": "object",
         "properties": {
-          "colour": {
-            "type": "string"
+          "brandOverride": {
+            "title": "brand override",
+            "type": "string",
+            "enum": ["", "light", "dark", "alt", "dark-alt"]
+          },
+          "breadcrumbs": {
+            "title": "Breadchrumb items array",
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "link": {
+                  "type": "string"
+                },
+                "linktext": {
+                  "type": "string"
+                }
+              },
+              "required": ["link", "linktext"]
+            }
           }
         },
-        "required": []
+        "required": ["breadcrumbs"]
       },
       "output": {
         "responseType": "html",

src/layout/breadcrumbs/previews/example.data.json

@@ -0,0 +1,29 @@
+{
+  "brandOverride": "alt",
+  "breadcrumbs": [
+    {
+      "link": "https://www.forgov.qld.gov.au",
+      "linktext": "For government"
+    },
+    {
+      "link": "https://www.forgov.qld.gov.au/information-and-communication-technology",
+      "linktext": "Information and communication technology"
+    },
+    {
+      "link": "https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing",
+      "linktext": "Communication and publishing"
+    },
+    {
+      "link": "https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing",
+      "linktext": "Website and digital publishing"
+    },
+    {
+      "link": "https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates",
+      "linktext": "Website standards, guidelines and templates"
+    },
+    {
+      "link": "https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/swe",
+      "linktext": "Single Website Experience"
+    }
+  ]
+}

src/layout/breadcrumbs/previews/preview.html

@@ -0,0 +1,12 @@
+<html>
+
+<head>
+  [component://static-header]
+</head>
+
+<body>
+  [component://output]
+  [component://static-footer]
+</body>
+
+</html>

src/layout/globalAlert/main.cjs

@@ -0,0 +1,34 @@
+/**
+ * Accordion component
+ * Common js module to support DXP Component Service.
+ */
+module.exports = async function (input, info) {
+    const items = input.alertItems.map(item => `
+<section class="global-alert global-alert-${item.variant}">
+    <div class="container-fluid">
+      <div class="qld-global-alert-main">
+        <div class="global-alert-icon"></div>
+        <div class="global-alert-content">
+          <div class="global-alert-message">
+            ${item.content}
+          </div>
+          <div class="global-alert-action">
+            ${item.action?item.action:""}
+          </div>
+        </div>
+        <div class="global-alert-close">
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">Close</button>
+        </div>
+      </div>
+    </div>
+</section>
+`).join('');
+
+    return `
+<!-- QGDS Component: Global Alert -->
+<div class="global-alert-include">
+  ${items}
+</div>
+`
+};
+

src/layout/globalAlert/manifest.json

@@ -0,0 +1,95 @@
+{
+    "$schema": "http://localhost:3000/schemas/v1.json#",
+    "version": "1.0.1",
+    "name": "global-alert",
+    "displayName": "Global Alert",
+    "description": "QGDS Bootstrap 5 - Global Alert",
+    "icon": {
+        "id": "notification_important",
+        "color": {
+            "type": "hex",
+            "value": "#EA3323"
+        }
+    },
+    "namespace": "qgds-bs5-layout-local",
+    "mainFunction": "main",
+    "functions": [
+        {
+            "name": "main",
+            "entry": "main.cjs",
+            "input": {
+                "type": "object",
+                "properties": {
+                    "alertItems": {
+                        "title": "Global Alert items array",
+                        "type": "array",
+                        "items": { 
+                            "type": "object",
+                            "properties": {
+                                "variant": {
+                                    "type": "string",
+                                    "enum": [
+                                        "critical",
+                                        "warning",
+                                        "info"
+                                    ]
+                                },
+                                "content": {
+                                    "type": "string",
+                                    "format": "multi-line"
+                                },
+                                "action": {
+                                    "type": "string",
+                                    "format": "multi-line"
+                                }
+                            },
+                            "required": ["variant", "content"]
+                        }
+                    }
+                },
+                "required": ["alertItems"]
+            },
+            "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": "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"
+                    }
+                }
+            }
+        }
+    }
+}