@gov-cy/govcy-frontend-renderer 1.0.0

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@gov-cy/govcy-frontend-renderer",
+  "version": "1.0.0",
+  "description": "Render html for design elements of the Unified design system using njk or json template.",
+  "author": "DMRID - DSF Team",
+  "license": "MIT",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "exports": {
+    "require": "./dist/index.cjs",
+    "import": "./dist/index.mjs"
+  },
+  "files": [
+    "dist",
+    "src/njk"
+  ],
+  "keywords": [
+    "govcy",
+    "cyprus",
+    "unified design system",
+    "uds",
+    "dsf",
+    "digital service framework",
+    "template",
+    "renderer",
+    "frontend",
+    "builder"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gov-cy/govcy-frontend-renderer.git"
+  },
+  "homepage": "https://github.com/gov-cy/govcy-frontend-renderer",
+  "dependencies": {
+    "express": "^4.19.2",
+    "nunjucks": "^3.2.4",
+    "semver": ">=7.5.2"
+  },
+  "scripts": {
+    "test": "mocha --timeout 60000 ./test/**/*.test.mjs",
+    "build": "rollup -c",
+    "start": "nodemon app.mjs"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "chai": "^5.1.0",
+    "mocha": "^10.4.0",
+    "nodemon": "^3.1.4",
+    "rollup": "^4.21.2"
+  }
+}

package/src/njk/elements/backLink.njk

@@ -0,0 +1,15 @@
+{# Back link 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {object} text The button text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}` 
+ @param {string} classes Additional classes to add to the button. Optional 
+ @param {string} href The URL to navigate when clicked. Optional, default is 'javascript:history.back()' 
+ @returns govcy back link html 
+#}
+{% macro backLink(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{# set default values #}
+{%- set text = govcyLocalizeContent(params.text, params.lang) if params.text  else govcyLocalizeContent({en:'Back',el:'Πίσω'}, params.lang) -%}
+{%- set href = params.href | default('javascript:history.back()') -%}
+<a class="govcy-back-link{% if params.classes %} {{ params.classes }}{% endif %}" href="{{ href }}"{{ govcyLangAttribute(params.lang) }}>{{ text}}</a>
+{%- endmacro %}

package/src/njk/elements/button.njk

@@ -0,0 +1,18 @@
+{# Button 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {object} text The button text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}` 
+ @param {string} variant The button variant. Optional, default is 'primary'. Can be 'primary', 'secondary', 'warning', 'success' 
+ @param {string} id The id of the button. Optional 
+ @param {string} type The button input type. Optional, default is button. Can be button or submit 
+ @param {string} classes Additional classes to add to the button. Optional 
+ @param {string} prototypeNavigate WARNING Only to be used for prototypes. the URL to navigate when clicked Optional 
+ @returns govcy button html 
+#}
+{% macro button(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{# set default values #}
+{%- set variant = params.variant | default('primary') -%}
+{%- set type = params.type | default('button') -%}
+<button type="{{ type }}"{% if params.id %}  id="{{ params.id }}" {% endif %}class="govcy-btn-{{ variant }}{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.prototypeNavigate %} onclick="location.href='{{ params.prototypeNavigate }}'"{% endif %}{{ govcyLangAttribute(params.lang) }}>{{ govcyLocalizeContent(params.text, params.lang) }}</button>
+{%- endmacro %}

package/src/njk/elements/checkboxes.njk

@@ -0,0 +1,143 @@
+{# checkbox item
+ @param {object} params The parent parameters 
+ @param {int} index The index number in the items array
+ @param {string} lang The language used. Can be 'en','el'. 
+ @param {object} item The item object 
+ i.e. 
+ item : {
+        type: "or",
+        altOrText: {en:"If not",el:"Αν όχι"},
+        value: "maybe",
+        hint: {en:"We want you to be absolutely sure",el:"Θέλουμε να είστε απολύτως σίγουροι"},
+        text: {en:"Maybe",el:"Ίσως"}
+    }
+    @param {string} item.type The item type. Can be empty,'or','and'. Optional, default is empty  
+    @param {string} item.value The value of the checkbox.  
+    @param {object} item.text The label of the checkbox. Example `{en:"Content",el:"Περιεχομένο"}`  
+    @param {object} item.hint The hint of the checkbox. Example `{en:"Content",el:"Περιεχομένο"}`  
+    @param {object} item.altAndText The and text. Optional, default is `{en:"And",el:"Και"}
+    @param {object} item.altOrText The or text. Optional, default is `{en:"Or",el:"Ή"}
+ @returns govcy checkbox item html 
+#}
+{%- macro _checkboxItem(params, item, index, lang) %}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{%- from "./hint.njk" import hint -%}
+{%- from "./label.njk" import label -%}
+{#- set language labels -#}
+{#- set 'or' labels -#}
+{%- if item.altOrText -%}
+    {%- set orText -%} {{- govcyLocalizeContent(item.altOrText, lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set orText -%} {{- govcyLocalizeContent({en:'Or',el:'Ή'}, lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set 'and' labels -#}
+{%- if item.altAndText -%}
+    {%- set andText -%} {{- govcyLocalizeContent(item.altAndText, lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set andText -%} {{- govcyLocalizeContent({en:'And',el:'Και'}, lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set option id -#}
+{% set optionId = params.id ~ '-option-' ~ index %}
+{#- set hint id -#}
+{%- if item.hint -%}
+    {%- set hintId = [optionId, "-hint"] | join -%}
+{%- else -%}
+    {%- set hintId = '' -%}
+{%- endif -%}
+{# depending on the type, render html and set label#}
+{%- if item.type == 'or' -%}
+    <p class="govcy-ml-3 govcy-mb-3">{{ orText }}</p>
+    {%- set label -%}
+        <span class="govcy-visually-hidden-error">{{ orText }}, </span> {{- govcyLocalizeContent(item.text, lang) -}}
+    {%- endset -%}
+{%- elif item.type == 'and' -%}
+    <p class="govcy-ml-3 govcy-mb-3">{{ andText }}</p>
+    {%- set label -%}
+        <span class="govcy-visually-hidden-error">{{ andText }}, </span> {{- govcyLocalizeContent(item.text, lang) -}}
+    {%- endset -%}
+{% else %}
+    {%- set label -%}{{- govcyLocalizeContent(item.text, lang) -}}{%- endset -%}
+{%- endif -%}
+{#- render checkbox -#}
+<div class="govcy-checkbox">
+    <input class="govcy-checkbox-input" name="{{ params.name }}" value="{{item.value}}" type="checkbox" id="{{ optionId }}" {% if item.hint%} aria-describedby="{{hintId}}"{% endif %}>
+    <label class="govcy-label" for="{{ optionId }}">{{ label | safe }}</label>
+    {#- {% call govcyLabel({label:label, for:optionId, isPrimary:false, isHTML:true, lang:lang}) %}{% endcall %} -#}
+    {% call hint({hint:item.hint, id:hintId, lang:lang}) %}{% endcall %}
+</div>
+{%- endmacro %}
+{# checkbox 
+ @param {object} legend The legend text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`
+ @param {string} id The id prefix for the options. Will escape text. 
+ @param {string} name The name used in checkbox. Will escape text. 
+ @param {string} hint The hint text. Optional. Will escape text 
+ @param {boolean} isPageHeading Is the label also the page heading? Optional, default is false. Can be true,false 
+ @param {string} classes Additional classes to add to the outer fieldset. Optional 
+ @param {object} error If not empty there is an error message and displays the error variant. Optional, default is ''. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`
+ @param {boolean} hideFormControlError If true, hides the form control error (red line on the left). Mostly used in conditional radio elements. Optional    
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {array} items The array of items to turn onto checkbox 
+    i.e. `[
+            {
+                        value: "yes",
+                        text: {en:"Yes",el:"Ναι"}
+            },
+            {
+                value: "no",
+                text: {en:"No",el:"Όχι"}
+            },
+            {
+                type: "or",
+                altOrText: {en:"If not",el:"Αν όχι"},
+                value: "maybe",
+                hint: {en:"We want you to be absolutely sure",el:"Θέλουμε να είστε απολύτως σίγουροι"},
+                text: {en:"Maybe",el:"Ίσως"}
+            }
+        ]`
+ @returns govcy checkboxes html 
+#}
+{% macro checkboxes(params) -%}
+{#- set default values -#}
+{%- set isPageHeading = params.isPageHeading | default(false) -%}
+{#- legend, id and name are mandatory -#}
+{%- if params.legend and params.id and params.name -%}
+    {%- from "./fieldset.njk" import fieldset -%}
+    {%- from "./hint.njk" import hint -%}
+    {%- from "./legend.njk" import legend -%}
+    {%- from "./errorMessage.njk" import errorMessage -%}
+    {%- from "./formControl.njk" import formControl -%}
+    {#- set hint id -#}
+    {%- if params.hint -%}
+        {%- set hintId = [params.id, "-hint"] | join -%}
+    {%- else -%}
+        {%- set hintId = '' -%}
+    {%- endif -%}
+    {#- set error id -#}
+    {%- if params.error -%}
+        {%- set errorId = [params.id, "-error"] | join -%}
+    {%- else -%}
+        {%- set errorId = '' -%}
+    {%- endif -%}
+    {# set aria described by #}
+    {%- if params.error or params.hint -%}
+        {% set ariaDescribedBy = hintId ~ ' ' ~ errorId %}
+    {%- else -%}
+        {% set ariaDescribedBy = '' %}
+    {%- endif -%}
+    {% call fieldset({ariaDescribedby:ariaDescribedBy,classes:params.classes, lang:params.lang}) %}
+        {% call legend({legend:params.legend, isPageHeading:isPageHeading,lang:params.lang}) %}{% endcall %}
+        {% call formControl({isError: false if params.hideFormControlError else params.error}) %}
+            {% call hint({hint:params.hint, id:hintId,lang:params.lang}) %}{% endcall %}
+            {#- render error message -#}
+            {% call errorMessage({message:params.error,id:errorId,lang:params.lang}) %}{% endcall %}
+            {# for each item render checkbox item #}
+            {%- for item in params.items -%}
+                {%- if item -%}
+                    {{- _checkboxItem(params, item, loop.index, params.lang) -}}
+                {%- endif -%}
+            {%- endfor -%}
+        {% endcall %}
+    {% endcall %}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/errorMessage.njk

@@ -0,0 +1,20 @@
+{# error Message 
+ @param {object} message The error message text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}` 
+ @param {string} id The error message id. Will escape text 
+ @param {string} lang The language used. Can be 'en','el'. Optional, default is 'el'.
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @returns govcy error message html 
+#}
+{% macro errorMessage(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{#- set default values -#}
+{%- set hiddenError -%} 
+    {{- govcyLocalizeContent({en:'Error',el:'Σφάλμα'}, params.lang) -}}
+{%- endset -%}
+{%- if params.message -%}
+<p {% if params.id %}id="{{ params.id }}"{% endif %} class="govcy-input-error-msg{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+    <span class="govcy-visually-hidden-error">{{ hiddenError }}:</span>{{ govcyLocalizeContent(params.message, params.lang) }}
+</p>
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/fieldset.njk

@@ -0,0 +1,27 @@
+{# fieldset 
+ @param {string} id The hint id. Will escape text. Optional
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @param {string} ariaDescribedby Ids of aria-describedby. To be used for hints and errors. Optional 
+ @param {string} lang The language used. Can be 'en','el'. 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"} },
+            {element:"button",params:{text:{en:"Button 2",el:"Κουμπί 2"},variant:'secondary',lang:"en",id:"govcy-test-23c"} },
+        ]`
+ @returns govcy fieldset  html 
+#}
+{% macro fieldset(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+<fieldset {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-fieldset{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.ariaDescribedby %} aria-describedby="{{ params.ariaDescribedby }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
+{{ caller() }}
+    {#- if it has elements to be called -#}
+    {%- if params.elements -%}
+        {#- Import localizer from utilities -#}
+        {%- from "../govcyElement.njk" import govcyElement -%}
+        {%- for element in params.elements -%}
+            {%- call govcyElement(element.element, element.params) %}{% endcall -%}
+        {%- endfor -%}
+    {%- endif -%}
+</fieldset>
+{%- endmacro %}

package/src/njk/elements/fileInput.njk

@@ -0,0 +1,39 @@
+{# file input 
+ @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
+ @param {string} id The input id. Will escape text 
+ @param {string} name The input name. Will escape text. Optional
+ @param {object} hint The hint text. Optional. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`   
+ @param {boolean} isPageHeading Is the label also the page heading? Optional, default is false. Can be true,false 
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @param {object} error If not empty there is an error message and displays the error variant. Optional, default is ''. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`
+ @param {boolean} hideFormControlError If true, hides the form control error (red line on the left). Mostly used in conditional radio elements. Optional     
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @returns govcy file html 
+#}
+{% macro fileInput(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{%- from "./formControl.njk" import formControl -%}
+{%- from "./hint.njk" import hint -%}
+{%- from "./label.njk" import label -%}
+{%- from "./errorMessage.njk" import errorMessage -%}
+{#- set default values -#}
+{%- set isPageHeading = params.isPageHeading | default(false) -%}
+{#- label and id are mandatory -#}
+{%- if params.label and params.id -%}
+    {#- set hint label error ids -#}
+    {%- set hintId = [params.id, "-hint"] | join -%}
+    {%- set labelId = [params.id, "-label"] | join -%}
+    {%- set errorId = [params.id, "-error"] | join -%}
+    {% call formControl({isError: false if params.hideFormControlError else params.error,classes:params.classe, lang:params.langs}) %}
+        {#- render label -#}
+        {% call label({label:params.label, id:labelId, for:params.id, isPageHeading:isPageHeading, lang:params.lang}) %}{% endcall %}
+        {#- render hint -#}
+        {% call hint({hint:params.hint,id:hintId, lang:params.lang}) %}{% endcall %}
+        {#- render error message -#}
+        {% call errorMessage({message:params.error,id:errorId, lang:params.lang}) %}{% endcall %}
+        {#- render input -#}
+        <input id="{{params.id}}"{% if params.name %} name="{{ params.name }}"{% endif %} type="file" class="govcy-file-upload"{% if params.hint or params.error%} aria-describedby="{% if params.hint %}{{hintId}} {% endif %}{% if params.error %}{{errorId}} {% endif %}"{% endif %}>
+    {% endcall %}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/fileView.njk

@@ -0,0 +1,34 @@
+{# file view and delete 
+ @param {object} label The label text. Will escape text. `{en:"Content",el:"Περιεχομένο"}`
+ @param {string} viewHref The view link's href. Will escape text 
+ @param {string} deleteHref The delete link's href. Will escape text 
+ @param {object} visuallyHiddenText The visuallyHiddenText text. Optional. Will escape text. `{en:"Content",el:"Περιεχομένο"}` 
+ @param {object} hint The hint text. Optional. Will escape text. `{en:"Content",el:"Περιεχομένο"}`
+ @param {string} classes Additional classes to add to the outer div. Optional
+ @param {boolean} isPageHeading Is the label also the page heading? Optional, default is false. Can be true,false 
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @returns govcy file view and delete html 
+#}
+{% macro fileView(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{%- from "./formControl.njk" import formControl -%}
+{%- from "./hint.njk" import hint -%}
+{#- set language labels -#}
+{%- set viewLabel -%} {{- govcyLocalizeContent({en:'View',el:'Προβολή'}, params.lang) -}}{%- endset -%}
+{%- set deleteLabel -%} {{- govcyLocalizeContent({en:'Delete',el:'Διαγραφή'}, params.lang) -}}{%- endset -%}
+{#- label, viewHref and deleteHref are mandatory -#}
+{%- if params.label and params.viewHref and params.deleteHref -%}
+    <div class="govcy-form">
+    {% call formControl({classes:params.classes, lang:params.lang}) %}
+        {%- if params.isPageHeading -%}<h1>{%- else -%}<p class="govcy-label govcy-label-primary">{%- endif -%}{{- govcyLocalizeContent(params.label, params.lang) -}}{%- if params.isPageHeading -%}</h1>{%- else -%}</p>{%- endif -%}
+        {#- render hint -#}
+        {% call hint({hint:params.hint, lang:params.lang}) %}{% endcall %}
+        {#- render view -#}
+        <a href="{{ params.viewHref }}">{{viewLabel}}{%if params.visuallyHiddenText%}<span class="govcy-visually-hidden"> {{- govcyLocalizeContent(params.visuallyHiddenText, params.lang) -}}</span>{% endif %}</a>
+        {#- render delete -#}
+        <a class="govcy-ml-3" href="{{ params.deleteHref }}">{{deleteLabel}}{%if params.visuallyHiddenText%}<span class="govcy-visually-hidden"> {{- govcyLocalizeContent(params.visuallyHiddenText, params.lang) -}}</span>{% endif %}</a>
+    {% endcall %}
+    </div>
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/form.njk

@@ -0,0 +1,24 @@
+{# form 
+ @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 {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"} },
+            {element:"button",params:{text:{en:"Button 2",el:"Κουμπί 2"},variant:'secondary',lang:"en",id:"govcy-test-23c"} },
+        ]`
+ @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="">
+    {{ caller() }}
+    {#- if it has elements to be called -#}
+    {%- if params.elements -%}
+        {#- Import localizer from utilities -#}
+        {%- from "../govcyElement.njk" import govcyElement -%}
+        {%- for element in params.elements -%}
+            {%- call govcyElement(element.element, element.params) %}{% endcall -%}
+        {%- endfor -%}
+    {%- endif -%}
+</form>
+{%- endmacro %}

package/src/njk/elements/formControl.njk

@@ -0,0 +1,29 @@
+{# form control 
+ @param {string} id The hint id. Will escape text. Optional
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @param {string} isError Is there a validation error and need to render the errror variant? Optional, default is false. Can be true,false 
+ @param {string} lang The language used. Can be 'en','el'. 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"} },
+            {element:"button",params:{text:{en:"Button 2",el:"Κουμπί 2"},variant:'secondary',lang:"en",id:"govcy-test-23c"} },
+        ]`
+@returns govcy form control html 
+#}
+{% macro formControl(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{# set default values #}
+{%- set isError = params.isError | default(false) -%}
+<div {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-form-control{% if isError %} govcy-form-control-error{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+    {{ caller() }}
+    {#- if it has elements to be called -#}
+    {%- if params.elements -%}
+        {#- Import localizer from utilities -#}
+        {%- from "../govcyElement.njk" import govcyElement -%}
+        {%- for element in params.elements -%}
+            {%- call govcyElement(element.element, element.params) %}{% endcall -%}
+        {%- endfor -%}
+    {%- endif -%}
+</div>
+{%- endmacro %}

package/src/njk/elements/hint.njk

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

package/src/njk/elements/htmlElement.njk

@@ -0,0 +1,13 @@
+{# htmlElement (use with caution - no escaping)
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {object} text The text. Will not escape text, Example `{en:"Content",el:"Περιεχομένο"}` 
+ @returns html Elements with sanitzed html 
+#}
+{% macro htmlElement(params) -%}
+{# text is mandatory #}
+{%- if params.text -%}
+    {#- Import localizer from utilities -#}
+    {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent -%}
+    {{ govcyLocalizeContent(params.text, params.lang, true) }}    
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/label.njk

@@ -0,0 +1,24 @@
+{# label 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}` 
+ @param {string} id The label id. Will escape text 
+ @param {string} for The input id used in `for`. Will escape text 
+ @param {boolean} isPrimary Is the label a primary? Optional, default is true. Can be true,false 
+ @param {boolean} isPageHeading Is the label also the page heading? Optional, default is false. Can be true,false 
+ @param {boolean} isHTML Is the label an HTML and can be reproduced without escaping? Optional, default is false. Can be true,false 
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @returns govcy label html 
+#}
+{% macro label(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{#- set default values -#}
+{%- set isPrimary = params.isPrimary | default(true) -%}
+{%- set isHTML = params.isHTML | default(false) -%}
+{# label and for are mandatory #}
+{%- if params.label and params.for -%}
+{%- if params.isPageHeading -%}<h1>{%- endif -%}
+    <label {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-label{% if isPrimary == true %} govcy-label-primary{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" for="{{ params.for }}"{{ govcyLangAttribute(params.lang) }}>{{ govcyLocalizeContent(params.label, params.lang, isHTML) }}</label>
+{%- if params.isPageHeading -%}</h1>{%- endif -%}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/legend.njk

@@ -0,0 +1,22 @@
+{# legend 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {object} legend The legend text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}` 
+ @param {string} id The legend id. Will escape text 
+ @param {boolean} isPageHeading Is the legend also the page heading? Optional, default is false. Can be true,false 
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @returns govcy legend html 
+#}
+{% macro legend(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{# set default values #}
+{%- set isPageHeading = params.isPageHeading | default(false) -%}
+{# legend is mandatory #}
+{%- if params.legend -%}
+    {%- if isPageHeading -%}
+        <legend {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-legend{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}><h1>{{ govcyLocalizeContent(params.legend , params.lang) }}</h1></legend>
+    {%- else -%}
+        <legend {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-legend{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>{{ govcyLocalizeContent(params.legend , params.lang) }}</legend>
+    {%- endif -%}
+{%- endif -%}
+{%- endmacro %}