npm - @gov-cy/govcy-frontend-renderer - Versions diffs - 1.10.0 → 1.12.0 - Mend

@gov-cy/govcy-frontend-renderer 1.10.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +25 -0
package/dist/govcyCompiledTemplates.browser.js +338 -7
package/package.json +1 -1
package/src/njk/elements/form.njk +2 -1
package/src/njk/elements/progressList.njk +185 -0
package/src/njk/elements/textElement.njk +2 -2
package/src/njk/govcyElement.njk +2 -1
package/src/njk/layouts/govcyBase.njk +42 -4

package/README.md CHANGED Viewed

@@ -67,6 +67,17 @@ const inputData =
 {
     "site" : {
         "lang" : "en",
+        "languages": [
+            {"code": "el", "label": "EL", "alt": "Ελληνική γλώσσα", "href": "?lang=el"},
+            {"code": "en", "label": "EN", "alt": "English language", "href": "?lang=en"}
+        ],
+        "footerLinks": [
+            {"label": {"en":"Privacy statement", "el":"Δήλωση απορρήτου"}, "href": "#"},
+            {"label": {"en":"Cookies", "el":"Cookies"}, "href": "#"},
+            {"label": {"en":"Accessibility", "el":"Προσβασιμότητα"}, "href": "#"},
+            {"label": {"en":"Help us improve this service", "el":"Βοηθήστε μας να βελτιώσουμε αυτή την υπηρεσία"}, "href": "#"}
+        ],
+        "menu" : {"en":"Menu", "el":"Μενου"},
         "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"},
         "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
         "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
@@ -145,6 +156,17 @@ const inputData =
 {
     "site" : {
         "lang" : "en",
+        "languages": [
+            {"code": "el", "label": "EL", "alt": "Ελληνική γλώσσα", "href": "?lang=el"},
+            {"code": "en", "label": "EN", "alt": "English language", "href": "?lang=en"}
+        ],
+        "footerLinks": [
+            {"label": {"en":"Privacy statement", "el":"Δήλωση απορρήτου"}, "href": "#"},
+            {"label": {"en":"Cookies", "el":"Cookies"}, "href": "#"},
+            {"label": {"en":"Accessibility", "el":"Προσβασιμότητα"}, "href": "#"},
+            {"label": {"en":"Help us improve this service", "el":"Βοηθήστε μας να βελτιώσουμε αυτή την υπηρεσία"}, "href": "#"}
+        ],
+        "menu" : {"en":"Menu", "el":"Μενου"},
         "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"},
         "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
         "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
@@ -279,6 +301,9 @@ In the examples above an `inputData` object is defined and it is used to pass th
 The `inputData` object has the following structure:
 - **site.lang**: the language of the site. It is used both in the `<html lang` attribute and to define the default language to be used by the individual design elements defined in the template.
+- **site.languages**: the languages in the language menu.
+- **site.footerLinks**: the links of the footer.
+- **site.menu**: the menu label.
 - **site.title**: the title of the site. It is used in the `<title>`, `<meta property="og:title"` and `<meta property="twitter:title"` tags of the head.
 - **site.description**: the description of the site. It is used in the `<meta name="description"`, `<meta property="og:description"` and `<meta property="twitter:description"` tags of the head.
 - **site.url**: the URL of the site. It is used in the `<meta property="og:url"` and `<meta property="twitter:url"` tags of the head.

package/dist/govcyCompiledTemplates.browser.js CHANGED Viewed

@@ -2634,6 +2634,12 @@ t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.aut
 t_2 += "\" ";
 ;
 }
+if(runtime.memberLookup((l_params),"method")) {
+t_2 += " method=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"method"), env.opts.autoescape);
+t_2 += "\" ";
+;
+}
 t_2 += "action=\"";
 t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"action"), env.opts.autoescape);
 t_2 += "\" class=\"govcy-form";
@@ -2643,7 +2649,7 @@ t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opt
 ;
 }
 t_2 += "\" novalidate=\"\">\n    ";
-t_2 += runtime.suppressValue((lineno = 13, colno = 13, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "caller"), "caller", context, [])), env.opts.autoescape);
+t_2 += runtime.suppressValue((lineno = 14, colno = 13, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "caller"), "caller", context, [])), env.opts.autoescape);
 if(runtime.memberLookup((l_params),"elements")) {
 env.getTemplate("govcyElement.njk", false, "elements/form.njk", false, function(t_4,t_3) {
 if(t_4) { cb(t_4); return; }
@@ -2669,7 +2675,7 @@ frame.set("loop.revindex0", t_8 - t_7 - 1);
 frame.set("loop.first", t_7 === 0);
 frame.set("loop.last", t_7 === t_8 - 1);
 frame.set("loop.length", t_8);
-t_2 += runtime.suppressValue((lineno = 19, colno = 33, runtime.callWrap(t_6, "govcyElement", context, [runtime.memberLookup((t_10),"element"),runtime.memberLookup((t_10),"params"),runtime.makeKeywordArgs({"caller": (function (){var macro_t_11 = runtime.makeMacro(
+t_2 += runtime.suppressValue((lineno = 20, colno = 33, runtime.callWrap(t_6, "govcyElement", context, [runtime.memberLookup((t_10),"element"),runtime.memberLookup((t_10),"params"),runtime.makeKeywordArgs({"caller": (function (){var macro_t_11 = runtime.makeMacro(
 [],
 [],
 function (kwargs) {
@@ -3425,6 +3431,331 @@ root: root
 })();
 })();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/progressList.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/progressList.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);
+var t_8;
+t_8 = env.getFilter("default").call(context, runtime.memberLookup((l_params),"showSteps"),false);
+frame.set("showSteps", t_8, true);
+if(frame.topLevel) {
+context.setVariable("showSteps", t_8);
+}
+if(frame.topLevel) {
+context.addExport("showSteps", t_8);
+}
+var t_9;
+t_9 = env.getFilter("int").call(context, runtime.memberLookup((l_params),"current"));
+frame.set("current", t_9, true);
+if(frame.topLevel) {
+context.setVariable("current", t_9);
+}
+if(frame.topLevel) {
+context.addExport("current", t_9);
+}
+var t_10;
+t_10 = env.getFilter("int").call(context, runtime.memberLookup((l_params),"total"));
+frame.set("total", t_10, true);
+if(frame.topLevel) {
+context.setVariable("total", t_10);
+}
+if(frame.topLevel) {
+context.addExport("total", t_10);
+}
+if(runtime.memberLookup((l_params),"completedLabel")) {
+var t_11;
+t_11 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 30, colno = 55, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"completedLabel"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("completedLabel", t_11, true);
+if(frame.topLevel) {
+context.setVariable("completedLabel", t_11);
+}
+if(frame.topLevel) {
+context.addExport("completedLabel", t_11);
+}
+;
+}
+else {
+var t_12;
+t_12 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 32, colno = 55, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Completed","el": "Ολοκληρώθηκε"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("completedLabel", t_12, true);
+if(frame.topLevel) {
+context.setVariable("completedLabel", t_12);
+}
+if(frame.topLevel) {
+context.addExport("completedLabel", t_12);
+}
+;
+}
+if(runtime.memberLookup((l_params),"notCompletedLabel")) {
+var t_13;
+t_13 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 36, colno = 58, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"notCompletedLabel"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("notCompletedLabel", t_13, true);
+if(frame.topLevel) {
+context.setVariable("notCompletedLabel", t_13);
+}
+if(frame.topLevel) {
+context.addExport("notCompletedLabel", t_13);
+}
+;
+}
+else {
+var t_14;
+t_14 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 38, colno = 58, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Not completed","el": "Δεν ολοκληρώθηκε"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("notCompletedLabel", t_14, true);
+if(frame.topLevel) {
+context.setVariable("notCompletedLabel", t_14);
+}
+if(frame.topLevel) {
+context.addExport("notCompletedLabel", t_14);
+}
+;
+}
+if(runtime.memberLookup((l_params),"stepLabel")) {
+var t_15;
+t_15 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 42, colno = 50, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"stepLabel"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("stepLabel", t_15, true);
+if(frame.topLevel) {
+context.setVariable("stepLabel", t_15);
+}
+if(frame.topLevel) {
+context.addExport("stepLabel", t_15);
+}
+;
+}
+else {
+var t_16;
+t_16 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 44, colno = 50, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Step","el": "Βήμα"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("stepLabel", t_16, true);
+if(frame.topLevel) {
+context.setVariable("stepLabel", t_16);
+}
+if(frame.topLevel) {
+context.addExport("stepLabel", t_16);
+}
+;
+}
+if(runtime.memberLookup((l_params),"ofLabel")) {
+var t_17;
+t_17 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 48, colno = 48, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"ofLabel"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("ofLabel", t_17, true);
+if(frame.topLevel) {
+context.setVariable("ofLabel", t_17);
+}
+if(frame.topLevel) {
+context.addExport("ofLabel", t_17);
+}
+;
+}
+else {
+var t_18;
+t_18 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 50, colno = 48, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "of","el": "από"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("ofLabel", t_18, true);
+if(frame.topLevel) {
+context.setVariable("ofLabel", t_18);
+}
+if(frame.topLevel) {
+context.addExport("ofLabel", t_18);
+}
+;
+}
+if(runtime.contextOrFrameLookup(context, frame, "current") && runtime.contextOrFrameLookup(context, frame, "total")) {
+t_2 += "<style>\r\n.govcy-step-indicator {\r\n    margin-left: 0px;\r\n    margin-right: 0px;\r\n    margin-bottom: .5rem !important;\r\n}\r\n.govcy-step-indicator__segments {\r\n    display: flex;\r\n    list-style: none;\r\n    margin: 0px;\r\n    padding: 0px;\r\n}\r\n\r\n.govcy-step-indicator__segment {\r\n    flex: 1 1 0%;\r\n    margin-left: 1px;\r\n    margin-right: 1px;\r\n    max-width: 15rem;\r\n    min-height: 0.5rem;\r\n    position: relative;\r\n}\r\n\r\n.govcy-step-indicator__segment::after {\r\n    background-color: #A6A8AA;\r\n    content: \"\";\r\n    display: block;\r\n    height: 0.5rem;\r\n    left: 0px;\r\n    position: absolute;\r\n    right: 0px;\r\n    top: 0px;\r\n}\r\n.govcy-step-indicator__segment--complete::after {\r\n    background-color: #254355;\r\n}\r\n.govcy-step-indicator__segment--current::after {\r\n    background-color: #1D70B8;\r\n}\r\n\r\n/* Label */\r\n.govcy-step-indicator__label {\r\n    padding-left: 0.5rem;\r\n    padding-right: 0.5rem;\r\n    text-align: center;\r\n    color: #6d6e70;\r\n    line-height:1.1rem;\r\n    margin-top: calc(0.75rem);\r\n}\r\n\r\n.govcy-step-indicator__segment--complete .govcy-step-indicator__label {\r\n    color: #254355;\r\n}\r\n\r\n.govcy-step-indicator__segment--current .govcy-step-indicator__label {\r\n    color: #1D70B8;\r\n    font-weight: 700;\r\n}\r\n\r\n@media (min-width: 0px) {\r\n    .govcy-step-indicator__counter {\r\n        margin-bottom: .5rem !important;\r\n    }\r\n    .govcy-step-indicator__current-counter {\r\n        width: 24px;\r\n        height: 24px;\r\n        border:1px solid #1D70B8;\r\n        background: #1D70B8;\r\n        color:#fff;\r\n        border-radius: 9999px;\r\n        font-weight: 600;\r\n        display:inline-block;\r\n        text-align:center;\r\n    }\r\n    /* Hide label on small screens */\r\n    .govcy-step-indicator__label {\r\n        display:none;\r\n    }\r\n}\r\n@media (min-width: 768px) {\r\n    .govcy-step-indicator__counter {\r\n        font-size:20px;\r\n        line-height:19px;\r\n        margin-bottom: .5rem !important;\r\n    }\r\n    .govcy-step-indicator__current-counter {\r\n        border-radius:9999px;\r\n        border:1px solid #1D70B8;\r\n        background: #1D70B8;\r\n        color:#fff;\r\n        padding:10px;\r\n        line-height:19px;\r\n        font-weight:600;\r\n        font-size:20px;\r\n        display:inline-block;\r\n        width:40px;\r\n        height:40px;\r\n        text-align:center;\r\n    }\r\n    /* Show label on big screens */\r\n    .govcy-step-indicator__label {\r\n        display:block;\r\n    }\r\n}\r\n</style>";
+if(runtime.contextOrFrameLookup(context, frame, "showSteps")) {
+t_2 += "\r\n        <div ";
+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-step-indicator";
+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 = 160, colno = 167, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">\r\n            <ol class=\"govcy-step-indicator__segments\">";
+frame = frame.push();
+var t_21 = (lineno = 162, colno = 26, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "range"), "range", context, [1,runtime.contextOrFrameLookup(context, frame, "total") + 1]));
+if(t_21) {t_21 = runtime.fromIterator(t_21);
+var t_20 = t_21.length;
+for(var t_19=0; t_19 < t_21.length; t_19++) {
+var t_22 = t_21[t_19];
+frame.set("i", t_22);
+frame.set("loop.index", t_19 + 1);
+frame.set("loop.index0", t_19);
+frame.set("loop.revindex", t_20 - t_19);
+frame.set("loop.revindex0", t_20 - t_19 - 1);
+frame.set("loop.first", t_19 === 0);
+frame.set("loop.last", t_19 === t_20 - 1);
+frame.set("loop.length", t_20);
+t_2 += "\r\n                <li class=\"govcy-step-indicator__segment";
+if(t_22 < runtime.contextOrFrameLookup(context, frame, "current")) {
+t_2 += " govcy-step-indicator__segment--complete";
+;
+}
+if(t_22 == runtime.contextOrFrameLookup(context, frame, "current")) {
+t_2 += " govcy-step-indicator__segment--current";
+;
+}
+t_2 += "\"";
+if(t_22 == runtime.contextOrFrameLookup(context, frame, "current")) {
+t_2 += " aria-current=\"step\"";
+;
+}
+t_2 += ">";
+if(runtime.memberLookup((l_params),"steps") && runtime.memberLookup((runtime.memberLookup((l_params),"steps")),t_22 - 1) && runtime.memberLookup((runtime.memberLookup((runtime.memberLookup((l_params),"steps")),t_22 - 1)),"text")) {
+t_2 += "<span class=\"govcy-step-indicator__label\">\r\n                        ";
+t_2 += runtime.suppressValue((lineno = 166, colno = 47, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((runtime.memberLookup((runtime.memberLookup((l_params),"steps")),t_22 - 1)),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+if(t_22 < runtime.contextOrFrameLookup(context, frame, "current")) {
+t_2 += "\r\n                                <span class=\"govcy-visually-hidden\">";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "completedLabel"), env.opts.autoescape);
+t_2 += "</span>";
+;
+}
+else {
+if(t_22 > runtime.contextOrFrameLookup(context, frame, "current")) {
+t_2 += "\r\n                                <span class=\"govcy-visually-hidden\">";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "notCompletedLabel"), env.opts.autoescape);
+t_2 += "</span>";
+;
+}
+;
+}
+t_2 += "\r\n                    </span>";
+;
+}
+t_2 += "\r\n                </li>";
+;
+}
+}
+frame = frame.pop();
+t_2 += "\r\n            </ol>\r\n        </div>";
+;
+}
+t_2 += "\r\n    <div ";
+if(runtime.memberLookup((l_params),"id")) {
+t_2 += "id=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_2 += "-counter\" ";
+;
+}
+t_2 += "class=\"govcy-step-indicator__counter\"";
+t_2 += runtime.suppressValue((lineno = 179, colno = 125, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">\r\n        <span class=\"govcy-visually-hidden\">";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "stepLabel"), env.opts.autoescape);
+t_2 += " </span>\r\n        <span class=\"govcy-step-indicator__current-counter\">";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "current"), env.opts.autoescape);
+t_2 += "</span> ";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "ofLabel"), env.opts.autoescape);
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "total"), env.opts.autoescape);
+t_2 += "\r\n    </div>";
+;
+}
+})});
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("progressList");
+context.setVariable("progressList", 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/radios.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -6132,7 +6463,7 @@ var t_8 = t_4.govcyLangAttribute;
 cb(new Error("cannot import 'govcyLangAttribute'")); return;
 }
 context.setVariable("govcyLangAttribute", t_8);
-if(runtime.contextOrFrameLookup(context, frame, "textType") == "p" || runtime.contextOrFrameLookup(context, frame, "textType") == "h1" || runtime.contextOrFrameLookup(context, frame, "textType") == "h2" || runtime.contextOrFrameLookup(context, frame, "textType") == "h3" || runtime.contextOrFrameLookup(context, frame, "textType") == "h4") {
+if(runtime.contextOrFrameLookup(context, frame, "textType") == "p" || runtime.contextOrFrameLookup(context, frame, "textType") == "h1" || runtime.contextOrFrameLookup(context, frame, "textType") == "h2" || runtime.contextOrFrameLookup(context, frame, "textType") == "h3" || runtime.contextOrFrameLookup(context, frame, "textType") == "h4" || runtime.contextOrFrameLookup(context, frame, "textType") == "span") {
 var t_9;
 t_9 = runtime.contextOrFrameLookup(context, frame, "textType");
 frame.set("textTag", t_9, true);
@@ -6658,7 +6989,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"];
+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"];
 frame.set("macroSimpleBlocks", t_1, true);
 if(frame.topLevel) {
 context.setVariable("macroSimpleBlocks", t_1);
@@ -6706,7 +7037,7 @@ if(t_10) { cb(t_10); return; }
 t_9.getExported(function(t_11,t_9) {
 if(t_11) { cb(t_11); return; }
 frame.set("comp", t_9);
-t_4 += runtime.suppressValue((lineno = 34, colno = 22, runtime.callWrap(runtime.memberLookup((t_9),t_8), "comp[\"c\"]", context, [l_params])), env.opts.autoescape);
+t_4 += runtime.suppressValue((lineno = 35, colno = 22, runtime.callWrap(runtime.memberLookup((t_9),t_8), "comp[\"c\"]", context, [l_params])), env.opts.autoescape);
 })});
 }
 ;
@@ -6733,7 +7064,7 @@ if(t_17) { cb(t_17); return; }
 t_16.getExported(function(t_18,t_16) {
 if(t_18) { cb(t_18); return; }
 frame.set("compm", t_16);
-t_4 += runtime.suppressValue((lineno = 41, colno = 29, runtime.callWrap(runtime.memberLookup((t_16),t_15), "compm[\"c\"]", context, [l_params,runtime.makeKeywordArgs({"caller": (function (){var macro_t_19 = runtime.makeMacro(
+t_4 += runtime.suppressValue((lineno = 42, colno = 29, runtime.callWrap(runtime.memberLookup((t_16),t_15), "compm[\"c\"]", context, [l_params,runtime.makeKeywordArgs({"caller": (function (){var macro_t_19 = runtime.makeMacro(
 [],
 [],
 function (kwargs) {
@@ -6742,7 +7073,7 @@ frame = frame.push(true);
 kwargs = kwargs || {};
 if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
 frame.set("caller", kwargs.caller); }
-var t_20 = "";t_20 += runtime.suppressValue((lineno = 42, colno = 25, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "caller"), "caller", context, [])), env.opts.autoescape);
+var t_20 = "";t_20 += runtime.suppressValue((lineno = 43, colno = 25, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "caller"), "caller", context, [])), env.opts.autoescape);
 ;
 frame = frame.pop();
 return new runtime.SafeString(t_20);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.10.0",
+  "version": "1.12.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/form.njk CHANGED Viewed

@@ -2,6 +2,7 @@
  @param {string} action. Will escape text
  @param {string} id The hint id. Will escape text
  @param {string} classes Additional classes to add to the outer div. Optional
+ @param {string} method The form method. Will escape text. Optional
  @param {array} elements If defined will be rendered elements inside the form.
     i.e. `[
             {element:"button",params:{text:{en:"Button 1",el:"Κουμπί 1"},lang:"en",id:"govcy-test-23b"} },
@@ -10,7 +11,7 @@
  @returns govcy form html
 #}
 {% macro form(params) -%}
-<form {% if params.id %}id="{{ params.id }}" {% endif %}action="{{ params.action }}" class="govcy-form{% if params.classes %} {{ params.classes }}{% endif %}" novalidate="">
+<form {% if params.id %}id="{{ params.id }}" {% endif %}{% if params.method %} method="{{ params.method }}" {% endif %}action="{{ params.action }}" class="govcy-form{% if params.classes %} {{ params.classes }}{% endif %}" novalidate="">
     {{ caller() }}
     {#- if it has elements to be called -#}
     {%- if params.elements -%}

package/src/njk/elements/progressList.njk ADDED Viewed

@@ -0,0 +1,185 @@
+{# progressList
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {int} current The current step number.
+ @param {int} total The total number of steps.
+ @param {array} labels if defined, will render the labels inside the progress list. Optional.
+    i.e. `[
+            {"text":{"en":"Step 1","el":"Βήμα 1"} },
+            {"text":{"en":"Step 2","el":"Βήμα 2"} },
+            {"text":{"en":"Step 3","el":"Βήμα 3"} },
+            {"text":{"en":"Step 4","el":"Βήμα 4"} },
+            {"text":{"en":"Step 5","el":"Βήμα 5"} }
+        ]`
+ @param {boolean} showSteps. Whether to show the steps or not. Optional, default is false. Can be true,false
+ @param {string} completedLabel The completed label text. Optional. Will escape text. Example `{en:"Completed",el:"Ολοκληρώθηκε"}`
+ @param {string} notCompletedLabel The not completed label text. Optional. Will escape text. Example `{en:"Not completed",el:"Δεν ολοκληρώθηκε"}`
+ @param {string} stepLabel The step label text. Optional. Will escape text. Example `{en:"Step",el:"Βήμα"}`
+ @param {string} ofLabel The of label text. Optional. Will escape text. Example `{en:"of",el:"από"}`
+ @param {string} id The label id. Will escape text
+ @param {string} classes Additional classes to add to the outer div. Optional
+ @returns govcy progressList html
+#}
+{% macro progressList(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{#- set default values -#}
+{%- set showSteps = params.showSteps | default(false) -%}
+{%- set current = params.current | int -%}
+{%- set total = params.total | int -%}
+{#- set completed label -#}
+{%- if params.completedLabel -%}
+    {%- set completedLabel -%} {{- govcyLocalizeContent(params.completedLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set completedLabel -%} {{- govcyLocalizeContent({en:"Completed",el:"Ολοκληρώθηκε"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set not completed label -#}
+{%- if params.notCompletedLabel -%}
+    {%- set notCompletedLabel -%} {{- govcyLocalizeContent(params.notCompletedLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set notCompletedLabel -%} {{- govcyLocalizeContent({en:"Not completed",el:"Δεν ολοκληρώθηκε"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set step label -#}
+{%- if params.stepLabel -%}
+    {%- set stepLabel -%} {{- govcyLocalizeContent(params.stepLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set stepLabel -%} {{- govcyLocalizeContent({en:"Step",el:"Βήμα"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set of label -#}
+{%- if params.ofLabel -%}
+    {%- set ofLabel -%} {{- govcyLocalizeContent(params.ofLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set ofLabel -%} {{- govcyLocalizeContent({en:"of",el:"από"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- current and total are mandatory -#}
+{%- if current and total %}
+{#- style to be removed after included in the UDS -#}
+<style>
+.govcy-step-indicator {
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-bottom: .5rem !important;
+}
+.govcy-step-indicator__segments {
+    display: flex;
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+}
+.govcy-step-indicator__segment {
+    flex: 1 1 0%;
+    margin-left: 1px;
+    margin-right: 1px;
+    max-width: 15rem;
+    min-height: 0.5rem;
+    position: relative;
+}
+.govcy-step-indicator__segment::after {
+    background-color: #A6A8AA;
+    content: "";
+    display: block;
+    height: 0.5rem;
+    left: 0px;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
+.govcy-step-indicator__segment--complete::after {
+    background-color: #254355;
+}
+.govcy-step-indicator__segment--current::after {
+    background-color: #1D70B8;
+}
+/* Label */
+.govcy-step-indicator__label {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    text-align: center;
+    color: #6d6e70;
+    line-height:1.1rem;
+    margin-top: calc(0.75rem);
+}
+.govcy-step-indicator__segment--complete .govcy-step-indicator__label {
+    color: #254355;
+}
+.govcy-step-indicator__segment--current .govcy-step-indicator__label {
+    color: #1D70B8;
+    font-weight: 700;
+}
+@media (min-width: 0px) {
+    .govcy-step-indicator__counter {
+        margin-bottom: .5rem !important;
+    }
+    .govcy-step-indicator__current-counter {
+        width: 24px;
+        height: 24px;
+        border:1px solid #1D70B8;
+        background: #1D70B8;
+        color:#fff;
+        border-radius: 9999px;
+        font-weight: 600;
+        display:inline-block;
+        text-align:center;
+    }
+    /* Hide label on small screens */
+    .govcy-step-indicator__label {
+        display:none;
+    }
+}
+@media (min-width: 768px) {
+    .govcy-step-indicator__counter {
+        font-size:20px;
+        line-height:19px;
+        margin-bottom: .5rem !important;
+    }
+    .govcy-step-indicator__current-counter {
+        border-radius:9999px;
+        border:1px solid #1D70B8;
+        background: #1D70B8;
+        color:#fff;
+        padding:10px;
+        line-height:19px;
+        font-weight:600;
+        font-size:20px;
+        display:inline-block;
+        width:40px;
+        height:40px;
+        text-align:center;
+    }
+    /* Show label on big screens */
+    .govcy-step-indicator__label {
+        display:block;
+    }
+}
+</style>
+    {%- if showSteps %}
+        <div {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-step-indicator{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+            <ol class="govcy-step-indicator__segments">
+        {%- for i in range(1, total + 1) %}
+                <li class="govcy-step-indicator__segment{% if i < current %} govcy-step-indicator__segment--complete{% endif %}{% if i == current %} govcy-step-indicator__segment--current{% endif %}"{% if i == current %} aria-current="step"{% endif %}>
+                    {%- if params.steps and params.steps[i - 1] and params.steps[i - 1].text -%}
+                    <span class="govcy-step-indicator__label">
+                        {{ govcyLocalizeContent(params.steps[i - 1].text, params.lang) }}
+                            {%- if i < current %}
+                                <span class="govcy-visually-hidden">{{ completedLabel }}</span>
+                            {%- elif i > current %}
+                                <span class="govcy-visually-hidden">{{ notCompletedLabel }}</span>
+                            {%- endif %}
+                    </span>
+                    {%- endif %}
+                </li>
+        {%- endfor %}
+            </ol>
+        </div>
+    {%- endif %}
+    <div {% if params.id %}id="{{ params.id }}-counter" {% endif %}class="govcy-step-indicator__counter"{{ govcyLangAttribute(params.lang) }}>
+        <span class="govcy-visually-hidden">{{ stepLabel }} </span>
+        <span class="govcy-step-indicator__current-counter">{{ current }}</span> {{ ofLabel }} {{ total }}
+    </div>
+{%- endif %}
+{%- endmacro %}

package/src/njk/elements/textElement.njk CHANGED Viewed

@@ -1,7 +1,7 @@
 {# textElement
  @param {string} lang The language used. Can be 'en','el'. Optional.
  @param {object} text The text. Will escape text, Example `{en:"Content",el:"Περιεχομένο"}`
- @param {string} type The type of the element. Can be `p`,`h1`,`h2`,`h3`,`h4`. Default is `p`
+ @param {string} type The type of the element. Can be `p`,`h1`,`h2`,`h3`,`h4`,`span`. Default is `p`
  @param {string} id The elemen't id. Will escape text. Optional
  @param {string} classes Additional classes to add to the outer div. Optional
  @returns html Elements with sanitzed html
@@ -13,7 +13,7 @@
 {%- if params.text -%}
     {#- Import localizer from utilities -#}
     {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
-    {%- if textType == 'p' or textType == 'h1' or textType == 'h2' or textType == 'h3' or textType == 'h4' -%}
+    {%- if textType == 'p' or textType == 'h1' or textType == 'h2' or textType == 'h3' or textType == 'h4' or textType == 'span' -%}
         {%- set textTag = textType -%}
         <{{ textType }}{% if params.id %} id="{{ params.id }}"{% endif %}{% if params.classes %} class="{{ params.classes }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
             {{ govcyLocalizeContent(params.text, params.lang) }}

package/src/njk/govcyElement.njk CHANGED Viewed

@@ -25,7 +25,8 @@ To use:
 {%- set macroSimpleBlocks = ['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'] -%}
+    'panel', 'datePicker','dateInput', 'taskList', 'errorSummary', 'details', 'stepByStepStatic',
+    'progressList'] -%}
 {%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
 {%- macro govcyElement(component, params) -%}
     {#- Simple blocks -#}

package/src/njk/layouts/govcyBase.njk CHANGED Viewed

@@ -5,6 +5,18 @@ To use this template you need to pass the following data:
 {
   site: {
     "lang": "en",
+    "languages": [
+        {"code": "el", "label": "EL", "alt": "Ελληνική γλώσσα", "href": "?lang=el"},
+        {"code": "en", "label": "EN", "alt": "English language", "href": "?lang=en"},
+        {"code": "tr", "label": "TR", "alt": "Türkçe", "href": "?lang=tr"}
+    ],
+    "footerLinks": [
+        {"label": {"en":"Privacy statement", "el":"Δήλωση απορρήτου"}, "href": "#"},
+        {"label": {"en":"Cookies", "el":"Cookies"}, "href": "#"},
+        {"label": {"en":"Accessibility", "el":"Προσβασιμότητα"}, "href": "#"},
+        {"label": {"en":"Help us improve this service", "el":"Βοηθήστε μας να βελτιώσουμε αυτή την υπηρεσία"}, "href": "#"},
+    ],
+    "menu" : {"en":"Menu", "el":"Μενου"},
     "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"},
     "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
     "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
@@ -83,9 +95,34 @@ To use this template you need to pass the following data:
                         <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>
                     </div>
+                    {%- if site.languages -%}
+                    <ul class="govcy-menu-items">
+                        {%- for iLang in site.languages %}
+                        <li class="govcy-desktop-menu-only"><span><a href="{{ iLang.href }}"
+                            class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}"
+                            {% if iLang.code == site.lang %} aria-current="true"{% endif %}
+                            aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></span>
+                        </li>{%- endfor %}
+                        <li class="govcy-mobile-menu govcy-mobile-menu-only govcy-dropdown govcy-ms-auto"><span><a href="#" class="govcy-menu-item govcy-expand-btn">{{ govcyLocalizeContent(pageData.menu, site.lang) }}</a></span></li>
+                    </ul>
+                    {%- endif %}
                 </div>
             </div>
         </div>
+        {%- if site.languages -%}
+        <div class="govcy-header-menu-area">
+            <nav class="govcy-mainmenu" aria-label="{{ govcyLocalizeContent(pageData.menu, site.lang) }}">
+                <div class="govcy-container">
+                    <ul class="govcy-menu-items govcy-header-language-area govcy-mobile-menu-only">
+                        {%- for iLang in site.languages %}
+                        <li><a href="{{ iLang.href }}" class="govcy-menu-item{% if iLang.code == site.lang %} active{% endif %}" {% if iLang.code == site.lang %} aria-current="true"{% endif %} aria-label="{{ iLang.alt }}" lang="{{ iLang.code }}">{{ iLang.label }}</a></li>
+                        {%- endfor %}
+                    </ul>
+                </div>
+            </nav>
+        </div>
+        {%- endif %}
         {% endblock %}
     </header>
@@ -115,12 +152,13 @@ To use this template you need to pass the following data:
                 <div class="govcy-container">
                     <div class="govcy-d-flex govcy-justify-content-between govcy-align-items-end govcy-flex-wrap">
                         <div class="govcy-my-4">
+                            {%- if site.footerLinks %}
                             <ul>
-                                <li><a href="#">Privacy statement</a></li>
-                                <li><a href="#">Cookies</a></li>
-                                <li><a href="#">Accessibility</a></li>
-                                <li><a href="#">Help us improve this service</a></li>
+                                {%- for iLink in site.footerLinks %}
+                                <li><a href="{{ iLink.href }}">{{ govcyLocalizeContent(iLink.label, site.lang) }}</a></li>
+                                {%- endfor %}
                             </ul>
+                            {%- endif %}
                             <div class="govcy-d-flex govcy-align-items-center govcy-flex-wrap">
                                 <span class="govcy-fs-2 govcy-fw-bold govcy-mr-6">gov.cy</span>
                                 <span class="govcy-mr-6 govcy-mt-2 govcy-mb-2">&copy; Republic of Cyprus, 2023</span>