Merge pull request #3 from qld-gov-au/QOLOE-515-GlobalAlertLayout

QOLOE-515: Include layout globalAlert CS component (also restructure template vs content)

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/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"
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+{
+	"alertItems": [
+		{
+			"variant": "critical",
+			"content": "<strong>Testing:</strong> This website is currently undergoing testing",
+			"action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
+		},
+		{
+			"variant": "warning",
+			"content": "<strong>Testing:</strong> This website is currently undergoing testing",
+			"action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
+		},
+		{
+			"variant": "info",
+			"content": "<strong>Testing:</strong> This website is currently undergoing testing",
+			"action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
+		}
+	]
+}

src/layout/globalAlert/previews/preview.html

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