@gov-cy/govcy-frontend-renderer 1.23.0 → 1.25.0

package/README.md

@@ -142,7 +142,17 @@ const inputData =
         "copyrightText" : {"en":"Republic of Cyprus, 2025", "el":"Κυπριακή Δημοκρατία, 2025"},
         "menu" : {"en":"Menu", "el":"Μενου"},
         "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"}, 
-        "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
+        "headerTitle" : 
+        {
+            "title": {
+                "en":"Header title", 
+                "el":"Τιτλός επικεφαλιδας"
+            },
+            "href": {
+                "en":"/service-id",
+                "el":"/service-id"
+            }
+        },
         "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
         "url" : "https://gov.cy",
         "manifest": "/manifest.json",
@@ -297,7 +307,17 @@ const inputData =
         "copyrightText" : {"en":"Republic of Cyprus, 2025", "el":"Κυπριακή Δημοκρατία, 2025"},
         "menu" : {"en":"Menu", "el":"Μενου"},
         "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"}, 
-        "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
+        "headerTitle" : 
+        {
+            "title": {
+                "en":"Header title", 
+                "el":"Τιτλός επικεφαλιδας"
+            },
+            "href": {
+                "en":"/service-id",
+                "el":"/service-id"
+            }
+        },
         "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
         "url" : "https://gov.cy",
         "manifest": "manifest.json",

package/dist/govcyCompiledTemplates.browser.js

@@ -3284,6 +3284,96 @@ root: root
 })();
 })();
 
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/inset.njk"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "\r\n";
+var macro_t_1 = runtime.makeMacro(
+["params"], 
+[], 
+function (l_params, kwargs) {
+var callerFrame = frame;
+frame = new runtime.Frame();
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+frame.set("params", l_params);
+var t_2 = "";env.getTemplate("utilities/govcyUtilities.njk", false, "elements/inset.njk", false, function(t_4,t_3) {
+if(t_4) { cb(t_4); return; }
+t_3.getExported(function(t_5,t_3) {
+if(t_5) { cb(t_5); return; }
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyLocalizeContent")) {
+var t_6 = t_3.govcyLocalizeContent;
+} else {
+cb(new Error("cannot import 'govcyLocalizeContent'")); return;
+}
+context.setVariable("govcyLocalizeContent", t_6);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyLangAttribute")) {
+var t_7 = t_3.govcyLangAttribute;
+} else {
+cb(new Error("cannot import 'govcyLangAttribute'")); return;
+}
+context.setVariable("govcyLangAttribute", t_7);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyElementsFromArray")) {
+var t_8 = t_3.govcyElementsFromArray;
+} else {
+cb(new Error("cannot import 'govcyElementsFromArray'")); return;
+}
+context.setVariable("govcyElementsFromArray", t_8);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyGetContent")) {
+var t_9 = t_3.govcyGetContent;
+} else {
+cb(new Error("cannot import 'govcyGetContent'")); return;
+}
+context.setVariable("govcyGetContent", t_9);
+if(runtime.memberLookup((l_params),"text")) {
+t_2 += "\r\n<blockquote ";
+if(runtime.memberLookup((l_params),"id")) {
+t_2 += "id=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_2 += "\" ";
+;
+}
+t_2 += "class=\"govcy-inset-text";
+if(runtime.memberLookup((l_params),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\"";
+t_2 += runtime.suppressValue((lineno = 12, colno = 162, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">\r\n    <p>";
+t_2 += runtime.suppressValue((lineno = 13, colno = 30, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</p>\r\n</blockquote>";
+;
+}
+})});
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("inset");
+context.setVariable("inset", macro_t_1);
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+
 (function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/label.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -3560,6 +3650,165 @@ root: root
 })();
 })();
 
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/multipleThingsTable.njk"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "\r\n";
+var macro_t_1 = runtime.makeMacro(
+["params"], 
+[], 
+function (l_params, kwargs) {
+var callerFrame = frame;
+frame = new runtime.Frame();
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+frame.set("params", l_params);
+var t_2 = "";env.getTemplate("utilities/govcyUtilities.njk", false, "elements/multipleThingsTable.njk", false, function(t_4,t_3) {
+if(t_4) { cb(t_4); return; }
+t_3.getExported(function(t_5,t_3) {
+if(t_5) { cb(t_5); return; }
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyLocalizeContent")) {
+var t_6 = t_3.govcyLocalizeContent;
+} else {
+cb(new Error("cannot import 'govcyLocalizeContent'")); return;
+}
+context.setVariable("govcyLocalizeContent", t_6);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyLangAttribute")) {
+var t_7 = t_3.govcyLangAttribute;
+} else {
+cb(new Error("cannot import 'govcyLangAttribute'")); return;
+}
+context.setVariable("govcyLangAttribute", t_7);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyElementsFromArray")) {
+var t_8 = t_3.govcyElementsFromArray;
+} else {
+cb(new Error("cannot import 'govcyElementsFromArray'")); return;
+}
+context.setVariable("govcyElementsFromArray", t_8);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyGetContent")) {
+var t_9 = t_3.govcyGetContent;
+} else {
+cb(new Error("cannot import 'govcyGetContent'")); return;
+}
+context.setVariable("govcyGetContent", t_9);
+if(runtime.memberLookup((l_params),"items") && runtime.memberLookup((runtime.memberLookup((l_params),"items")),"length") > 0) {
+t_2 += "\r\n  <table ";
+if(runtime.memberLookup((l_params),"id")) {
+t_2 += "id=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_2 += "\" ";
+;
+}
+t_2 += "class=\"govcy-table govcy-table-responsive-vertical";
+if(runtime.memberLookup((l_params),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\"";
+t_2 += runtime.suppressValue((lineno = 44, colno = 186, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">\r\n    <tbody>";
+frame = frame.push();
+var t_12 = runtime.memberLookup((l_params),"items");
+if(t_12) {t_12 = runtime.fromIterator(t_12);
+var t_11 = t_12.length;
+for(var t_10=0; t_10 < t_12.length; t_10++) {
+var t_13 = t_12[t_10];
+frame.set("item", t_13);
+frame.set("loop.index", t_10 + 1);
+frame.set("loop.index0", t_10);
+frame.set("loop.revindex", t_11 - t_10);
+frame.set("loop.revindex0", t_11 - t_10 - 1);
+frame.set("loop.first", t_10 === 0);
+frame.set("loop.last", t_10 === t_11 - 1);
+frame.set("loop.length", t_11);
+t_2 += "\r\n        <tr class=\"govcy-summary-list-row-internal\">\r\n          <td>";
+t_2 += "<span class=\"govcy-visually-hidden\">";
+t_2 += runtime.suppressValue((lineno = 51, colno = 66, runtime.callWrap(t_9, "govcyGetContent", context, ["common_entry",runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+t_2 += " </span>";
+t_2 += runtime.suppressValue((lineno = 53, colno = 35, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_13),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</td>\r\n          <td class=\"govcy-text-sm-start govcy-text-md-end\">\r\n            <ul class=\"list-inline govcy-my-0\">";
+frame = frame.push();
+var t_16 = runtime.memberLookup((t_13),"actions");
+if(t_16) {t_16 = runtime.fromIterator(t_16);
+var t_15 = t_16.length;
+for(var t_14=0; t_14 < t_16.length; t_14++) {
+var t_17 = t_16[t_14];
+frame.set("action", t_17);
+frame.set("loop.index", t_14 + 1);
+frame.set("loop.index0", t_14);
+frame.set("loop.revindex", t_15 - t_14);
+frame.set("loop.revindex0", t_15 - t_14 - 1);
+frame.set("loop.first", t_14 === 0);
+frame.set("loop.last", t_14 === t_15 - 1);
+frame.set("loop.length", t_15);
+t_2 += "\r\n                <li class=\"list-inline-item";
+if(runtime.memberLookup((t_17),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((t_17),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\">\r\n                  <a href=\"";
+if(runtime.memberLookup((t_17),"href")) {
+t_2 += runtime.suppressValue(runtime.memberLookup((t_17),"href"), env.opts.autoescape);
+;
+}
+else {
+t_2 += "#";
+;
+}
+t_2 += "\">";
+t_2 += runtime.suppressValue((lineno = 62, colno = 43, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_17),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+if(runtime.memberLookup((t_17),"visuallyHiddenText")) {
+t_2 += "<span class=\"govcy-visually-hidden\">";
+t_2 += runtime.suppressValue((lineno = 65, colno = 79, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_17),"visuallyHiddenText"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</span>";
+;
+}
+t_2 += "</a>\r\n                </li>";
+;
+}
+}
+frame = frame.pop();
+t_2 += "\r\n            </ul>\r\n          </td>\r\n        </tr>";
+;
+}
+}
+frame = frame.pop();
+t_2 += "\r\n    </tbody>\r\n  </table>";
+;
+}
+})});
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("multipleThingsTable");
+context.setVariable("multipleThingsTable", macro_t_1);
+output += "\r\n";
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+
 (function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/panel.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -7577,7 +7826,7 @@ var output = "";
 try {
 var parentTemplate = null;
 var t_1;
-t_1 = ["label","legend","hint","button","errorMessage","select","textElement","htmlElement","textInput","radios","checkboxes","fileInput","fileView","backLink","tag","table","summaryList","textArea","markdown","panel","datePicker","dateInput","taskList","errorSummary","details","stepByStepStatic","progressList","userName","warning"];
+t_1 = ["label","legend","hint","button","errorMessage","select","textElement","htmlElement","textInput","radios","checkboxes","fileInput","fileView","backLink","tag","table","summaryList","textArea","markdown","panel","datePicker","dateInput","taskList","errorSummary","details","stepByStepStatic","progressList","userName","warning","multipleThingsTable","inset"];
 frame.set("macroSimpleBlocks", t_1, true);
 if(frame.topLevel) {
 context.setVariable("macroSimpleBlocks", t_1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "description": "Render html for design elements of the Unified design system using njk or json template.",
   "author": "DMRID - DSF Team",
   "license": "MIT",

package/src/njk/elements/inset.njk

@@ -0,0 +1,17 @@
+{# inset 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {string} id The id of the inset. Will escape text. Optional 
+ @param {object} text The text. Will escape text, Example `{en:"Content",el:"Περιεχομένο"}` 
+ @param {string} classes Additional classes to add to the outer `<details>`. Optional 
+ @returns govcy inset html 
+#}
+{% macro inset(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray, govcyGetContent -%}
+{#- text is mandatory -#}
+{%- if params.text %}
+<blockquote {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-inset-text{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+    <p>{{ govcyLocalizeContent(params.text, params.lang) }}</p>
+</blockquote>
+{%- endif %}
+{%- endmacro %}

package/src/njk/elements/multipleThingsTable.njk

@@ -0,0 +1,78 @@
+{# multipleThingsTable 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {string} id The id of the element. Will escape text. Optional 
+ @param {string} classes Additional classes to add to the outer `<details>`. Optional 
+ @param {array} items The array of items which contain elements 
+    i.e. `[
+            {
+                "text": { "en": "+35799123456", "el": "+35799123456" },
+                "actions": [
+                {
+                    "text": { "en": "Change", "el": "Αλλαγή" },
+                    "href": "#",
+                    classes: "govcy-link",
+                    "visuallyHiddenText": { "en": "+35799123456", "el": "+35799123456" }
+                },
+                {
+                    "text": { "en": "Remove", "el": "Διαγραφή" },
+                    "href": "#",
+                    "visuallyHiddenText": { "en": "+35799123456", "el": "+35799123456" }
+                }
+                ]
+            },
+            {
+                "text": { "en": "+35799654321", "el": "+35799654321" },
+                "actions": [
+                {
+                    "text": { "en": "Change", "el": "Αλλαγή" },
+                    "href": "#",
+                    "visuallyHiddenText": { "en": "+35799654321", "el": "+35799654321" }
+                },
+                {
+                    "text": { "en": "Remove", "el": "Διαγραφή" },
+                    "href": "#",
+                    "visuallyHiddenText": { "en": "+35799654321", "el": "+35799654321" }
+                }
+                ]
+            }
+        ]`
+ @returns govcy multipleThingsTable html 
+#}
+{% macro multipleThingsTable(params) %}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray, govcyGetContent -%}
+{%- if params.items and params.items.length > 0 %}
+  <table {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-table govcy-table-responsive-vertical{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+    <tbody>
+      {#- Loop through each row in items -#}
+      {%- for item in params.items %}
+        <tr class="govcy-summary-list-row-internal">
+          <td>
+            {#- Screen reader hidden label, increments by row index -#}
+            <span class="govcy-visually-hidden">{{ govcyGetContent('common_entry', params.lang) }} {{ loop.index }} </span>
+            {#- Display the localized text value (later could support govcyElementsFromArray) -#}
+            {{ govcyLocalizeContent(item.text, params.lang) -}}
+          </td>
+          <td class="govcy-text-sm-start govcy-text-md-end">
+            <ul class="list-inline govcy-my-0">
+              {#- Loop through actions for this row -#}
+              {%- for action in item.actions %}
+                <li class="list-inline-item{% if action.classes %} {{ action.classes }}{% endif %}">
+                  <a href="{% if action.href %}{{ action.href }}{% else %}#{% endif %}">
+                    {#- Visible action text (e.g. Change / Remove) -#}
+                    {{ govcyLocalizeContent(action.text, params.lang) }}
+                    {#- Hidden text for accessibility (e.g. +35799123456) -#}
+                    {%- if action.visuallyHiddenText -%}
+                    <span class="govcy-visually-hidden">{{ govcyLocalizeContent(action.visuallyHiddenText, params.lang) }}</span>
+                    {%- endif -%}
+                  </a>
+                </li>
+              {%- endfor %}
+            </ul>
+          </td>
+        </tr>
+      {%- endfor %}
+    </tbody>
+  </table>
+{%- endif -%}
+{% endmacro %}

package/src/njk/elements/warning.njk

@@ -3,7 +3,7 @@
  @param {string} id The id of the warning. Will escape text. Optional 
  @param {object} text The text. Will escape text, Example `{en:"Content",el:"Περιεχομένο"}` 
  @param {string} classes Additional classes to add to the outer `<details>`. Optional 
- @returns govcy details html 
+ @returns govcy warning html 
 #}
 {% macro warning(params) -%}
 {#- Import localizer from utilities -#}

package/src/njk/govcyElement.njk

@@ -26,7 +26,7 @@ To use:
     'errorMessage','select','textElement','htmlElement','textInput','radios','checkboxes',
     'fileInput','fileView','backLink','tag','table', 'summaryList', 'textArea','markdown', 
     'panel', 'datePicker','dateInput', 'taskList', 'errorSummary', 'details', 'stepByStepStatic',
-    'progressList', 'userName', 'warning'] -%}
+    'progressList', 'userName', 'warning','multipleThingsTable', 'inset'] -%}
 {%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
 {%- macro govcyElement(component, params) -%}
     {#- Simple blocks -#}

package/src/njk/layouts/govcyBase.njk

@@ -79,7 +79,17 @@ To use this template you need to pass the following data:
     "copyrightText" : {"en":"Republic of Cyprus, 2025", "el":"Κυπριακή Δημοκρατία, 2025"},
     "menu" : {"en":"Menu", "el":"Μενου"},
     "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"}, 
-    "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
+    "headerTitle" : 
+    {
+        "title": {
+            "en":"Header title", 
+            "el":"Τιτλός επικεφαλιδας"
+        },
+        "href": {
+            "en":"/service-id",
+            "el":"/service-id"
+        }
+    },
     "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
     "isTesting" : true,
     "url": "https://gov.cy",
@@ -145,6 +155,14 @@ To use this template you need to pass the following data:
         dl.govcy-summary-list-row-internal:not(:first-of-type) {
             margin-top: 0.5rem !important;
         }
+        
+        .list-inline-item:not(:last-child) {
+            margin-right: 0 !important;
+        }
+        .list-inline-item:not(:first-child) {
+            margin-left: .5rem;
+        }
+
     </style>
     <title>{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy</title>
     <meta name="description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
@@ -182,7 +200,19 @@ To use this template you need to pass the following data:
                     <div class="govcy-navigation-container">
                         <div class="govcy-service-container">
                             <a href="https://gov.cy" class="govcy-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"></a>
-                            <span class="govcy-service-name">{{ govcyLocalizeContent(site.headerTitle, site.lang) }}</span>
+                            <span class="govcy-service-name">
+                                {%- if site.headerTitle.href -%}
+                                <a class="govcy-pl-0" href="{{ govcyLocalizeContent(site.headerTitle.href, site.lang, true) }}">
+                                {%- endif -%}
+                                {%- if site.headerTitle.title -%}
+                                {{ govcyLocalizeContent(site.headerTitle.title, site.lang) }}
+                                {%- else -%}
+                                {{ govcyLocalizeContent(site.headerTitle, site.lang) }}
+                                {%- endif -%}
+                                {%- if site.headerTitle.href -%}
+                                </a>
+                                {%- endif -%}
+                                </span>
                         </div>
                         {%- if site.languages -%}
                         <ul class="govcy-menu-items">