@gov-cy/govcy-frontend-renderer 1.0.0

package/src/njk/elements/radios.njk

@@ -0,0 +1,182 @@
+{# radio item
+ @param {object} params The parent parameters 
+ @param {boolean} isInline Is the radio inline type? Optional, default is false. Can be true,false 
+ @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 radio.  
+    @param {object} item.text The label of the radio. Example `{en:"Content",el:"Περιεχομένο"}`  
+    @param {object} item.hint The hint of the radio. 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:"Ή"}
+    @param {array} item.conditionalElements The conditional elements for this radio item. Optional. This will be an array of elements.
+    @param {boolean} item.conditionalHasErrors The conditional elements for this radio item has error. Optional.
+    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 radio item html 
+#}
+{%- macro _radioItem(params, item, isInline, index, lang) %}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray -%}
+{%- from "./hint.njk" import hint -%}
+{%- from "./label.njk" import label -%}
+{#- set default values -#}
+{%- set isInline = isInline | default(false) -%}
+{#- 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 -%}
+{#- set conditional id -#}
+{%- if item.conditionalElements -%}
+    {%- set conditionalElementsId = [optionId, "-conditional"] | join -%}
+    {%- set conditionalLabel = govcyLocalizeContent({en:"This option expands and has more questions,",el:"Αυτή η επιλογή επεκτείνεται και έχει περισσότερες ερωτήσεις,"}, lang) -%}
+{%- else -%}
+    {%- set conditionalElementsId = '' -%}
+    {%- set conditionalLabel = '' -%}
+{%- endif -%}
+{# depending on the type, render html and set label#}
+{%- if item.type == 'or' -%}
+    <p class="govcy-ml-3 govcy-mb-3{% if isInline %} govcy-d-sm-inline-block govcy-mr-3{% endif %}">{{ 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{% if isInline %} govcy-d-sm-inline-block govcy-mr-3{% endif %}">{{ 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 radio -#}
+<div class="govcy-radio{% if isInline %} govcy-d-sm-inline-block{% endif %}">
+    <input class="govcy-radio-input" name="{{ params.name }}" value="{{item.value}}" type="radio" id="{{ optionId }}" {% if item.hint%} aria-describedby="{{hintId}}"{% endif %}{% if item.conditionalElements %} data-aria-controls="{{conditionalElementsId}}"{% endif %}>
+    <label class="govcy-label" for="{{ optionId }}">{% if item.conditionalElements %} <span class="govcy-visually-hidden">{{conditionalLabel}}</span>{% endif %}{{ 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>
+{#- conditional elements -#}
+{%- if item.conditionalElements %}
+    {#- Transform conditional elements, add hideFormControlError -#}
+    {%- set updatedConditionalElements = [] -%}
+    {%- for element in item.conditionalElements -%}
+        {%- set updatedElement = element | merge({
+            params: element.params | merge({"hideFormControlError": true})
+        }) -%}
+        {%- set updatedConditionalElements = updatedConditionalElements.concat([updatedElement]) -%}
+    {%- endfor -%}
+        <style>
+            .govcy-radio__conditional label,
+            .govcy-radio__conditional legend {
+                font-size: 1rem !important;
+            }
+        </style>
+        <div class="govcy-form-control{% if item.conditionalHasErrors %} govcy-form-control-error{% else %} govcy-form-control-hint{% endif %} govcy-pl-4 govcy-ml-5 govcy-radio__conditional govcy-radio__conditional--hidden" id="{{conditionalElementsId}}">
+            {{ govcyElementsFromArray(updatedConditionalElements, params.lang) }}
+        </div>
+{%- endif -%}
+{%- endmacro %}
+{# radio 
+ @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 radio. 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 {boolean} isInline Are the radios inline type? 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 radio 
+    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 radios html 
+#}
+{% macro radios(params) -%}
+{#- set default values -#}
+{%- set isPageHeading = params.isPageHeading | default(false) -%}
+{%- set isInline = params.isInline | 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 -%}
+                    {{- _radioItem(params, item, isInline, loop.index, params.lang) -}}
+                {%- endif -%}
+            {%- endfor -%}
+        {% endcall %}
+    {% endcall %}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/select.njk

@@ -0,0 +1,59 @@
+
+{# select 
+ @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
+ @param {string} id The id of the select. Will escape text. 
+ @param {string} name The name of the select. Will escape text. 
+ @param {array} items The array of items to turn onto select options. Array contains object with `text` and `value`. i.e. `{"text":{en:"Cyprus",el:"Κύπρος"},"value":"cy"}` 
+ @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 `govcy-form-control` container. 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 select html 
+#}
+{% macro select(params) -%}
+{#- set default values -#}
+{%- set isPageHeading = params.isPageHeading | default(false) -%}
+{#- legend, id and name are mandatory -#}
+{%- if params.label and params.id and params.name -%}
+    {#- Import localizer from utilities -#}
+    {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+    {%- from "./hint.njk" import hint -%}
+    {%- from "./label.njk" import label -%}
+    {%- 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 formControl({isError: false if params.hideFormControlError else params.error,classes:params.classes}) %}
+        {% call label({label:params.label, id:labelId, for:params.id, isPageHeading:isPageHeading, lang:params.lang}) %}{% endcall %}
+        {% 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 %}
+        <select id="{{ params.id }}" name="{{ params.name }}" class="govcy-select{% if params.error %} govcy-select-error{% endif %}" {%if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}"{% endif%}{{ govcyLangAttribute(params.lang) }}>
+            {# for each item render checkbox item #}
+            {%- for item in params.items -%}
+                {%- if item.text -%}
+                    <option value="{{ item.value }}">{{ govcyLocalizeContent(item.text, params.lang) }}</option>
+                {%- endif -%}
+            {%- endfor -%}
+        </select>
+    {% endcall %}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/summaryList.njk

@@ -0,0 +1,149 @@
+{# summaryList 
+ @param {string} id The id prefix for the options. Will escape text. 
+ @param {string} classes Additional classes to add to the outer fieldset. Optional 
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {int} entryCount (NOT TO BE USED BY USERS) The count of the entry to be used in a visually hidden text for screen readers when the list is an inner list. (used in https://gov-cy.github.io/govcy-design-system-docs/components/summary_list/#making-arrays-screen-reader-friendly). Optional
+ @param {Boolean} isInnerList (NOT TO BE USED BY USERS) Determines if the list is an inner list (used in https://gov-cy.github.io/govcy-design-system-docs/components/summary_list/#showing-complex-information). Optional
+ @param {array} items The array of items which contain elements
+ @param {string} item.key The item key. Will escape text.
+ @param {array} item.value The value. This will be an array of elements.
+ i.e. `
+[
+    {
+        elements: [
+            {element:"htmlElement",params:{text:{en:"January",el:"Ιανουάριος"}} }
+        ]
+    },
+    {
+        elements: [
+            {element:"htmlElement",params:{text:{en:"€85",el:"€85"}} }
+        ],
+        classes: "govcy-text-end",
+    },
+    {
+        elements: [
+            {element:"tag",params:{text:{en:"PAYED",el:"ΠΛΗΡΩΘΗΚΕ"}, classes:"govcy-tag-green"} }
+        ]
+    }
+]
+ `
+ @param {array} item.actions The array of actions objects. 
+ i.e. `
+[
+    {
+        text:{en:"Change",el:"Αλλαγή"},
+        href: "#",
+        classes: "govcy-link",
+        visuallyHiddenText: {en:"Date of birth",el:"Ημερομηνία γέννησης"}
+    },
+    {
+        text:{en:"Remove",el:"Διαγραφή"},
+        href: "#", 
+        visuallyHiddenText: {en:"Date of birth",el:"Ημερομηνία γέννησης"}
+    }
+]
+`
+ @returns govcy summaryList html 
+#}
+{% macro summaryList(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray -%}
+<dl {% if params.id %}id="{{ params.id }}" {% endif %}class="{% if not params.isInnerList %}govcy-summary-list{% else %}govcy-summary-list-row-internal{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+    {#- Render visually hidden text for screen readers the entry number -#}
+    {%- if params.entryCount -%}
+        {%- set entryText = govcyLocalizeContent({en:"Entry",el:"Καταχώρηση"}, params.lang) -%}
+        <dt><span class="govcy-visually-hidden">{{ entryText }} {{ params.entryCount}}</span></dt>
+    {%- endif -%}
+    {%- for item in params.items %}
+    {% if not params.isInnerList %}<div class="govcy-summary-list-row">{% endif %}
+        {#- KEY -#}
+        <dt class="{% if not params.isInnerList %}govcy-summary-list-key{% else %}govcy-summary-list-key-internal{% endif %}">
+            {{ govcyLocalizeContent(item.key, params.lang) }}
+            {#- Render visually hidden text for screen readers the count of inner entries -#}
+            {%- if not params.isInnerList %}{{ _countSummaryListsRenderVisualyHidden(item.value, params.lang) }}{% endif -%}
+        </dt>
+        {#- VALUE -#}
+        <dd class="{% if not params.isInnerList %}govcy-summary-list-value{% else %}govcy-summary-list-value-internal{% endif %}">
+            {%- if item.value -%}
+            {{ _govcySummayListElementsFromArray(item.value, params.lang) }}
+            {%- elif item.actions -%}
+                {{ _summaryListActions(item.actions, params.lang) }}
+            {%- endif -%}
+        </dd>
+        {#- ACTIONS -#}
+        {%- if item.actions and item.value and not params.isInnerList -%}
+        <dd class="govcy-summary-list-actions">
+            {{ _summaryListActions(item.actions, params.lang) }}
+        </dd>
+        {%- endif %}
+    {% if not params.isInnerList %}</div>{% endif %}
+    {%- endfor %}
+</dl>
+{%- endmacro %}
+{# summary list action item
+ @param {array} actions The array of actions objects. 
+ i.e. `
+[
+    {
+        text:{en:"Change",el:"Αλλαγή"},
+        href: "#",
+        visuallyHiddenText: {en:"Date of birth",el:"Ημερομηνία γέννησης"}
+    },
+    {
+        text:{en:"Remove",el:"Διαγραφή"},
+        href: "#", 
+        visuallyHiddenText: {en:"Date of birth",el:"Ημερομηνία γέννησης"}
+    }
+]
+`
+ @param {string} lang The language used. Can be 'en','el'.
+ @returns govcy summary list actions html 
+#}
+{%- macro _summaryListActions(actions,lang) %}
+    <ul class="list-inline govcy-my-0">
+    {%- for action in actions %}
+        <li class="list-inline-item">
+            {#- render href -#}
+            <a href="{% if action.href %}{{ action.href }}{% else %}#{% endif %}">
+                {#- render content -#}
+                {{ govcyLocalizeContent(action.text, lang) }}
+                {#- If visuallyHiddenText is set -#}
+                {%- if action.visuallyHiddenText %}
+                <span class="govcy-visually-hidden"> {{ govcyLocalizeContent(action.visuallyHiddenText, lang) }}</span>
+                {% endif -%}
+            </a>
+        </li>
+    {%- endfor %}
+    </ul>
+{%- endmacro %} 
+{#- --------------------------------------- -#}
+{#- render govcyElements from an array -#}
+{%- macro _govcySummayListElementsFromArray(elements, lang) %}
+{%- from "../govcyElement.njk" import govcyElement -%}
+    {%- set summaryListCount = 0 -%} {# Initialize a counter #}
+    {%- for element in elements -%}
+        {%- if lang and not element.params.lang -%}
+            {%- set params = element.params | merge({lang: lang}) -%}
+        {%- else -%}
+            {%- set params = element.params -%}
+        {%- endif -%}
+        {%- if element.element == "summaryList" %}
+            {%- set summaryListCount = summaryListCount + 1 -%} {# Increment the counter #}
+            {%- set params = params | merge({isInnerList: true}) -%}
+            {%- set params = params | merge({entryCount: summaryListCount}) -%}
+        {% endif -%}
+        {%- call govcyElement(element.element, params) %}{% endcall -%}
+    {%- endfor -%}
+{%- endmacro %}
+{#- --------------------------------------- -#}
+{%- macro _countSummaryListsRenderVisualyHidden(elements, lang) -%}
+        {%- set totalCount = 0 -%}
+        {%- for item in elements -%}
+            {%- if item.element == "summaryList" -%}
+                {%- set totalCount = totalCount + 1 -%}
+            {%- endif -%}
+        {%- endfor -%}
+        {%- set entriesText = govcyLocalizeContent({en:"Entries",el:"Καταχωρήσεις"}, lang) -%}
+        {%- if totalCount > 0 %}<span class="govcy-visually-hidden">{{ totalCount }} {{ entriesText }}</span>{% endif -%}
+{%- endmacro %}
+

package/src/njk/elements/table.njk

@@ -0,0 +1,134 @@
+{# table 
+ @param {string} id The id prefix for the options. Will escape text. 
+ @param {string} classes Additional classes to add to the outer fieldset. Optional 
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {string} responsiveType The responsive type. Can be 'horisontal','vertical-no-headers', 'vertical-headers'. Optional.
+ @param {boolean} firstCellIsHeader Indicates if the first cell is a header. Optional.
+ @param {array} head The array of head
+    i.e. `
+[
+    {
+        text:{en:"Month",el:"Μηνας"}
+    },
+    {
+        text:{en:"Amount",el:"Ποσό"},
+        classes: "govcy-text-end",
+        colspan : 1,
+        rowspan : 1
+    },
+    {
+        text:{en:"Status",el:"Κατάσταση"}
+    }
+]
+`
+ @param {array} rows The array of rows which contain elements
+    i.e. `
+[
+    [
+        {
+            elements: [
+                {element:"htmlElement",params:{text:{en:"January",el:"Ιανουάριος"}} }
+            ]
+        },
+        {
+            elements: [
+                {element:"htmlElement",params:{text:{en:"€85",el:"€85"}} }
+            ],
+            classes: "govcy-text-end",
+            colspan : 1,
+            rowspan : 1
+        },
+        {
+            elements: [
+                {element:"tag",params:{text:{en:"PAYED",el:"ΠΛΗΡΩΘΗΚΕ"}, classes:"govcy-tag-green"} }
+            ]
+        }
+    ],
+    [
+        {
+            elements: [
+                {element:"htmlElement",params:{text:{en:"February",el:"Φεβάριος"}} }
+            ]
+        },
+        {
+            elements: [
+                {element:"htmlElement",params:{text:{en:"€75",el:"€75"}} }
+            ],
+            classes: "govcy-text-end"
+        },
+        {
+            elements: [
+                {element:"tag",params:{text:{en:"PAYED",el:"ΔΕΝ ΠΛΗΡΩΘΗΚΕ"}, classes:"govcy-tag-orange"} }
+            ]
+        }
+    ]
+]`
+ @returns govcy table html 
+#}
+{% macro table(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{%- from "../govcyElement.njk" import govcyElement -%}
+{#- responsiveType horisontal -#}
+{% if params.responsiveType == 'horisontal' %}<div class="govcy-table-responsive">{% endif %}
+<table {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-table{% if params.responsiveType == 'vertical-headers' or params.responsiveType == 'vertical-no-headers' %} govcy-table-responsive-vertical{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+{#- render head -#}
+{%- if params.head %}
+    <thead>
+        <tr>
+            {%- for head in params.head %}
+            <th{{ _cellAttributes(head) | safe }}>
+                {{ govcyLocalizeContent(head.text, params.lang) }}
+            </th>
+            {%- endfor %}
+        </tr>
+    </thead>
+{%- endif %}
+    <tbody>
+{#- render rows -#}
+{%- for row in params.rows %}
+    {%- if row %}
+        <tr>
+            {% for cell in row -%}
+                {#- handle firstCellIsHeader -#}
+                {%- if loop.first and params.firstCellIsHeader -%}
+            <th scope="row"{{ _cellAttributes(cell) | safe }}>
+                {#- handle responsiveType == 'vertical-headers' -#}
+                {%- if params.responsiveType == 'vertical-headers' %}
+                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">{{ govcyLocalizeContent(params.head[loop.index0].text, params.lang) }}</div>
+                {%- endif %}
+                {{ _cellElements(cell.elements,params.lang) }}
+            </th>
+                {%- else %}
+            <td{{ _cellAttributes(cell) | safe }}>
+                {%- if params.responsiveType == 'vertical-headers' %}
+                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">{{ govcyLocalizeContent(params.head[loop.index0].text, params.lang) }}</div>
+                {%- endif %}
+                {{ _cellElements(cell.elements,params.lang) }}
+            </td>
+                {%- endif -%}
+            {%- endfor %}
+        </tr>
+    {%- endif -%}
+{%- endfor %}
+    </tbody>
+</table>
+{% if params.responsiveType == 'horisontal' %}</div>{% endif %}
+{%- endmacro %}
+
+{#- render cell attributes like class colspan or rowspan -#}
+{%- macro _cellAttributes(cell) %}
+{%- if cell.classes %} class="{{ cell.classes }}"{% endif %}{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}
+{%- endmacro %}
+
+{#- render cell elements -#}
+{%- macro _cellElements(elements, lang) %}
+    {%- for element in elements -%}
+        {%- if lang and not element.params.lang -%}
+            {%- set params = element.params | merge({lang: lang}) -%}
+        {%- else -%}
+            {%- set params = element.params -%}
+        {%- endif -%}
+        {%- call govcyElement(element.element, params) %}{% endcall -%}
+    {%- endfor -%}
+{%- endmacro %}

package/src/njk/elements/tag.njk

@@ -0,0 +1,14 @@
+{# Tag 
+ @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 
+ @returns govcy tag html 
+#}
+{% macro tag(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{# text is mandatory #}
+{%- if params.text -%}
+<span class="govcy-tag{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>{{ govcyLocalizeContent(params.text, params.lang) }}</span>
+{%- endif %}
+{%- endmacro %}

package/src/njk/elements/textArea.njk

@@ -0,0 +1,75 @@
+{# text Area 
+ @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 {boolean} isSpellcheck true renders nothing, false renders spellcheck="false"? Optional, default is true. Can be true,false 
+ @param {string} autocomplete The autocomplete attribute. Optional. Can be email, name, ... 
+ @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.
+ @param {string} rows The rows attribute of the textarea. Optional, default is '5' 
+ @param {object} characterCount The character count object. Optional. i.e. {"type":"char","max":150}
+ @param {string} characterCount.type The character count type. Optional, default is 'char'. Can be 'char' or 'word'
+ @param {int} characterCount.max The character count maxchars or maxwords. Default is 100
+ @returns govcy text Area 
+#}
+{% macro textArea(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) -%}
+{%- set isSpellcheck = params.isSpellcheck | default(false) -%}
+{%- set autocomplete = params.autocomplete | default(false) -%}
+{%- set rows = params.rows | default('5') -%}
+{#- 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 -%}
+    {%- set charactercountId = [params.id, "-char-count"] | join -%}
+    {#- set spellcheck to false if not empty -#}
+    {%- if isSpellcheck -%}
+        {%- set inputSpellcheck = 'spellcheck="true"' -%}
+    {%- else -%}
+        {%- set inputSpellcheck = 'spellcheck="false"' -%}
+    {%- endif -%}
+    {#- set autocomplete -#}
+    {%- if autocomplete -%}
+        {%- set inputAutocomplete %}autocomplete="{{ autocomplete | safe }}"{% endset -%}
+    {%- else -%}
+        {%- set inputAutocomplete = '' -%}
+    {%- endif -%}
+    {% call formControl({isError: false if params.hideFormControlError else params.error,classes:params.classes,lang:params.lang}) %}
+        {#- 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 -#}
+        <textarea id="{{params.id}}"{% if params.name %} name="{{ params.name }}"{% endif %} rows="{{rows}}" {{ inputSpellcheck | safe }} {{ inputAutocomplete | safe }} class="govcy-text-area{% if params.error %} govcy-text-area-error{% endif %}"{% if params.hint or params.error or params.characterCount%} aria-describedby="{%- if params.characterCount -%}{{charactercountId}}{% endif %}{% if params.hint %} {{hintId}}{% endif %}{% if params.error %} {{errorId}}{% endif %}"{% endif %}></textarea>
+        {# character count #}
+        {%- if params.characterCount -%}
+            {%- set charactercountType = params.characterCount.type | default('char') -%}
+            {%- set charactercountMax = params.characterCount.max | default(100) -%}
+            {#- set language labels -#}
+            {%- set charRemaining = govcyLocalizeContent({en:"You have <span></span> characters remaining",el:"Έχετε <span></span> χαρακτήρες που απομένουν"}, params.lang, true) -%}
+            {%- set charExceeding = govcyLocalizeContent({en:"You have entered <span></span> characters more",el:"Έχετε περάσει <span></span> χαρακτήρες περισσότερους"}, params.lang, true) -%}
+            {%- set wordRemaining = govcyLocalizeContent({en:"You have <span></span> words remaining",el:"Έχετε <span></span> λέξεις που απομένουν"}, params.lang, true) -%}
+            {%- set wordsExceeding = govcyLocalizeContent({en:"You have entered <span></span> words more",el:"Έχετε περάσει <span></span> λέξεις περισσότερες"}, params.lang, true) -%}
+            <div id="{{ charactercountId }}" class="govcy-character-count" {%- if charactercountType=='word' -%} data-maxwords{%- else -%} data-maxchars{%- endif -%}="{{ charactercountMax }}">
+                <div class="govcy-character-remaining-counter">{%- if charactercountType=='word' -%}{{ wordRemaining | safe }}{%- else -%}{{ charRemaining | safe }}{%- endif -%}</div>
+                <div class="govcy-character-more-counter">{%- if charactercountType=='word' -%}{{ wordsExceeding | safe }}{%- else -%}{{ charExceeding | safe }}{%- endif -%}</div>
+            </div>
+        {%- endif -%}
+    {% endcall %}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/textElement.njk

@@ -0,0 +1,23 @@
+{# 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} 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 
+#}
+{% macro textElement(params) -%}
+{# set default values #}
+{%- set textType = params.type | default('p') -%}
+{# text and type are mandatory #}
+{%- 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' -%}
+        {%- 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) }}
+        </{{ textType }}>
+    {%- endif -%}
+{%- endif -%}
+{%- endmacro %}