npm - @gov-cy/govcy-frontend-renderer - Versions diffs - 1.9.0 → 1.11.0 - Mend

@gov-cy/govcy-frontend-renderer 1.9.0 → 1.11.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 +285 -1
package/package.json +1 -1
package/src/njk/elements/form.njk +2 -1
package/src/njk/elements/stepByStepStatic.njk +71 -0
package/src/njk/elements/textElement.njk +2 -2
package/src/njk/govcyElement.njk +1 -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

@@ -4406,6 +4406,290 @@ root: root
 })();
 })();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/stepByStepStatic.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/stepByStepStatic.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);
+var t_9;
+t_9 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 40, colno = 43, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Or","el": "Ή"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("orText", t_9, true);
+if(frame.topLevel) {
+context.setVariable("orText", t_9);
+}
+if(frame.topLevel) {
+context.addExport("orText", t_9);
+}
+var t_10;
+t_10 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 41, colno = 44, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "And","el": "Και"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("andText", t_10, true);
+if(frame.topLevel) {
+context.setVariable("andText", t_10);
+}
+if(frame.topLevel) {
+context.addExport("andText", t_10);
+}
+var t_11;
+t_11 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 42, colno = 46, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Step","el": "Βήμα"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("stepText", t_11, true);
+if(frame.topLevel) {
+context.setVariable("stepText", t_11);
+}
+if(frame.topLevel) {
+context.addExport("stepText", t_11);
+}
+if(runtime.memberLookup((l_params),"items")) {
+t_2 += "\r\n<div class=\"govcy-accordion govcy-accordion-steps govcy-mb-0";
+if(runtime.memberLookup((l_params),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\"";
+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 += runtime.suppressValue((lineno = 45, colno = 187, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">";
+frame = frame.push();
+var t_14 = runtime.memberLookup((l_params),"items");
+if(t_14) {t_14 = runtime.fromIterator(t_14);
+var t_13 = t_14.length;
+for(var t_12=0; t_12 < t_14.length; t_12++) {
+var t_15 = t_14[t_12];
+frame.set("item", t_15);
+frame.set("loop.index", t_12 + 1);
+frame.set("loop.index0", t_12);
+frame.set("loop.revindex", t_13 - t_12);
+frame.set("loop.revindex0", t_13 - t_12 - 1);
+frame.set("loop.first", t_12 === 0);
+frame.set("loop.last", t_12 === t_13 - 1);
+frame.set("loop.length", t_13);
+if(runtime.memberLookup((t_15),"type") == "or") {
+var t_16;
+t_16 = (function() {
+var output = "";
+output += "<div class=\"govcy-accordion-step govcy-accordion-step-conditional\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "orText"), env.opts.autoescape);
+output += "</div>";
+;
+return output;
+})()
+;
+frame.set("itemStep", t_16, true);
+if(frame.topLevel) {
+context.setVariable("itemStep", t_16);
+}
+if(frame.topLevel) {
+context.addExport("itemStep", t_16);
+}
+var t_17;
+t_17 = (function() {
+var output = "";
+output += "<span class=\"govcy-visually-hidden\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "orText"), env.opts.autoescape);
+output += ", </span>";
+;
+return output;
+})()
+;
+frame.set("itemStepVisallyHidden", t_17, true);
+if(frame.topLevel) {
+context.setVariable("itemStepVisallyHidden", t_17);
+}
+if(frame.topLevel) {
+context.addExport("itemStepVisallyHidden", t_17);
+}
+;
+}
+else {
+if(runtime.memberLookup((t_15),"type") == "and") {
+var t_18;
+t_18 = (function() {
+var output = "";
+output += "<div class=\"govcy-accordion-step govcy-accordion-step-conditional\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "andText"), env.opts.autoescape);
+output += "</div>";
+;
+return output;
+})()
+;
+frame.set("itemStep", t_18, true);
+if(frame.topLevel) {
+context.setVariable("itemStep", t_18);
+}
+if(frame.topLevel) {
+context.addExport("itemStep", t_18);
+}
+var t_19;
+t_19 = (function() {
+var output = "";
+output += "<span class=\"govcy-visually-hidden\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "andText"), env.opts.autoescape);
+output += ", </span>";
+;
+return output;
+})()
+;
+frame.set("itemStepVisallyHidden", t_19, true);
+if(frame.topLevel) {
+context.setVariable("itemStepVisallyHidden", t_19);
+}
+if(frame.topLevel) {
+context.addExport("itemStepVisallyHidden", t_19);
+}
+;
+}
+else {
+var t_20;
+t_20 = (function() {
+var output = "";
+output += "<div class=\"govcy-accordion-step\">";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+output += "</div>";
+;
+return output;
+})()
+;
+frame.set("itemStep", t_20, true);
+if(frame.topLevel) {
+context.setVariable("itemStep", t_20);
+}
+if(frame.topLevel) {
+context.addExport("itemStep", t_20);
+}
+var t_21;
+t_21 = (function() {
+var output = "";
+output += "<span class=\"govcy-visually-hidden\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "stepText"), env.opts.autoescape);
+output += " ";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+output += ", </span>";
+;
+return output;
+})()
+;
+frame.set("itemStepVisallyHidden", t_21, true);
+if(frame.topLevel) {
+context.setVariable("itemStepVisallyHidden", t_21);
+}
+if(frame.topLevel) {
+context.addExport("itemStepVisallyHidden", t_21);
+}
+;
+}
+;
+}
+t_2 += "\r\n        <div class=\"govcy-accordion-item";
+if(runtime.memberLookup((t_15),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((t_15),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\"";
+if(runtime.memberLookup((l_params),"id")) {
+t_2 += " id=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_2 += "-item-";
+t_2 += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+t_2 += "\"";
+;
+}
+t_2 += ">\r\n            ";
+t_2 += runtime.suppressValue(env.getFilter("safe").call(context, runtime.contextOrFrameLookup(context, frame, "itemStep")), env.opts.autoescape);
+t_2 += "\r\n            <h3 class=\"govcy-pt-4\">\r\n                ";
+t_2 += runtime.suppressValue(env.getFilter("safe").call(context, runtime.contextOrFrameLookup(context, frame, "itemStepVisallyHidden")), env.opts.autoescape);
+t_2 += runtime.suppressValue((lineno = 61, colno = 75, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_15),"heading"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</h3> \r\n            <div>\r\n                ";
+t_2 += runtime.suppressValue((lineno = 64, colno = 41, runtime.callWrap(t_8, "govcyElementsFromArray", context, [runtime.memberLookup((t_15),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "\r\n            </div>\r\n        </div>";
+;
+}
+}
+frame = frame.pop();
+t_2 += "\r\n</div>";
+;
+}
+})});
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("stepByStepStatic");
+context.setVariable("stepByStepStatic", 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/summaryList.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -6374,7 +6658,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"];
+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"];
 frame.set("macroSimpleBlocks", t_1, true);
 if(frame.topLevel) {
 context.setVariable("macroSimpleBlocks", t_1);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.9.0",
+  "version": "1.11.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/stepByStepStatic.njk ADDED Viewed

@@ -0,0 +1,71 @@
+{# stepByStepStatic
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {string} id The id of the step by step. Will escape text. Optional
+ @param {array} items The array of items to turn into steps
+    @param {string} item.heading The heading of the item.  Will escape text. Example `{"en":"Content","el":"Περιεχομένο"}`.
+    @param {array} item.elements, govcy-elements to be rendered inside the item's body.
+    @param {string} item.type The item type. Can be ''(which is incremental steps) ,'or','and'. Optional, default is ''
+    @param {string} item.classes Additional classes to add to the item. Optional
+    i.e. ` [
+            {
+                "heading":{"en":"Step 1","el":"Βήμα 1"},
+                "elements":[
+                    {"element":"textElement",
+                        "params":{
+                            "text":{"en":"Content","el":"Περιεχομένο"}
+                        }
+                    },
+                    {"element":"markdown",
+                        "params":{
+                            "text":{"en":"- item1\n- item2","el":"- item1 el\n- item2 el"}
+                        }
+                    }
+                ]
+            },
+            {
+                "heading":{"en":"Step 2","el":"Βήμα 2"},
+                "elements":[
+                    {"element":"textElement","params":{"text":{"en":"Content 2","el":"Περιεχομένο 2"} } }
+                ],
+                "type":"or",
+                "classes":"govcy-test-class"
+            }
+        ]`
+ @param {string} classes Additional classes to add to the outer `<details>`. Optional
+ @returns govcy stepByStepStatic html
+#}
+{% macro stepByStepStatic(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray -%}
+{#- set default values -#}
+{%- set orText -%} {{- govcyLocalizeContent({en:'Or',el:'Ή'}, params.lang) -}}{%- endset -%}
+{%- set andText -%} {{- govcyLocalizeContent({en:'And',el:'Και'}, params.lang) -}}{%- endset -%}
+{%- set stepText  -%} {{- govcyLocalizeContent({en:'Step',el:'Βήμα'}, params.lang) -}}{%- endset -%}
+{#- items are mandatory -#}
+{%- if params.items %}
+<div class="govcy-accordion govcy-accordion-steps govcy-mb-0{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
+{#- for each item render checkbox item -#}
+    {%- for item in params.items %}
+        {%- if item.type == 'or' -%}
+            {%- set itemStep -%}<div class="govcy-accordion-step govcy-accordion-step-conditional">{{ orText }}</div>{%- endset -%}
+            {%- set itemStepVisallyHidden -%}<span class="govcy-visually-hidden">{{ orText }}, </span>{%- endset -%}
+        {%- elif item.type == 'and' -%}
+            {%- set itemStep -%}<div class="govcy-accordion-step govcy-accordion-step-conditional">{{ andText }}</div>{%- endset -%}
+            {%- set itemStepVisallyHidden -%}<span class="govcy-visually-hidden">{{ andText }}, </span>{%- endset -%}
+        {%- else -%}
+            {%- set itemStep -%}<div class="govcy-accordion-step">{{ loop.index }}</div>{%- endset -%}
+            {%- set itemStepVisallyHidden -%}<span class="govcy-visually-hidden">{{ stepText }} {{ loop.index}}, </span>{%- endset -%}
+        {%- endif %}
+        <div class="govcy-accordion-item{% if item.classes %} {{ item.classes }}{% endif %}"{% if params.id %} id="{{ params.id }}-item-{{ loop.index }}"{% endif %}>
+            {{ itemStep | safe }}
+            <h3 class="govcy-pt-4">
+                {{ itemStepVisallyHidden | safe }} {{- govcyLocalizeContent(item.heading, params.lang) -}}
+            </h3>
+            <div>
+                {{ govcyElementsFromArray(item.elements, params.lang) }}
+            </div>
+        </div>
+    {%- endfor %}
+</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,7 @@ 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'] -%}
+    'panel', 'datePicker','dateInput', 'taskList', 'errorSummary', 'details', 'stepByStepStatic'] -%}
 {%- 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>