@gov-cy/govcy-frontend-renderer 1.0.0

package/src/njk/elements/textInput.njk

@@ -0,0 +1,72 @@
+{# text 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 {boolean} isSpellcheck true renders nothing, false renders spellcheck="false"? Optional, default is true. Can be true,false 
+ @param {string} type The text input type. Optional, default is text. Can be text,numeric,email,name,tel 
+ @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} fixedWidth width If not empty will add the fixed width class variant. Optional, default is ''. Can be 50,35,20,10,5,4,3,2 
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @returns govcy input html 
+#}
+{% macro textInput(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 type = params.type | default("text") -%}
+{%- set autocomplete = params.autocomplete | default('') -%}
+{#- 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 fixed width class  -#}
+    {%- set fixedWidthClass = ["govcy-text-input-char_" , params.fixedWidth] | join -%}
+    {#- set the type of the input. Also overwrites autocomplete and spellcheck if needed -#}
+    {%- if type=='text' -%}
+        {%- set inputType = 'type="text"' -%}
+    {%- elif type=='email' -%}
+        {%- set inputType = 'type="email"' %}{% set isSpellcheck = false %}{% set autocomplete = 'email' -%}
+    {%- elif type=='tel' -%}
+        {%- set inputType = 'type="tel"' %}{% set isSpellcheck = false %}{% set autocomplete = 'tel' -%}
+    {%- elif type=='name' -%}
+        {%- set inputType = 'type="text"' %}{% set isSpellcheck = false %}{% set autocomplete = 'name' -%}
+    {%- elif type=='numeric' -%}
+        {%- set inputType = 'type="text" pattern="[0-9]*" inputmode="numeric"' %}{% set isSpellcheck = false -%}
+    {%- endif -%}
+    {#- 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 -#}
+        <input id="{{params.id}}"{% if params.name %} name="{{ params.name }}"{% endif %} {{ inputType | safe }} {{ inputSpellcheck | safe }} {{ inputAutocomplete | safe }} class="govcy-text-input{% if params.fixedWidth %} {{ fixedWidthClass }}{% endif %}{% if params.error %} govcy-text-input-error{% endif %}"{% 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/govcyElement.njk

@@ -0,0 +1,46 @@
+{# Define the macro blocks to be imported for each component. 
+
+These macros imported must:
+- be in the directory `elements`
+- have the same name for file and macro
+- be added in the  `macroBlocks` or `callMacroBlocks` arrays
+
+To use:
+1. Import the macro for example `{% from "govcyElement.njk" import govcyElement %}`
+2. call the macro using the name of the element and it's parameters. For example
+```
+{{ govcyElement(
+    'hint',
+    {
+        hint:{en:"Content",el:"Περιεχομένο"},  
+        classes:'govcy-test-class', 
+        id:'govcy-test-2'
+        lang: 'el'
+    }
+) 
+}}
+```
+
+ #}
+{%- set macroSimpleBlocks = ['label', 'legend', 'hint', 'button', 
+    'errorMessage','select','textElement','htmlElement','textInput','radios','checkboxes',
+    'fileInput','fileView','backLink','tag','table', 'summaryList', 'textArea'] -%}
+{%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
+{%- macro govcyElement(component, params) -%}
+    {#- Simple blocks -#}
+    {%- for c in macroSimpleBlocks -%}
+        {%- if c == component -%}
+            {%- import "./elements/" + c + ".njk" as comp -%}
+            {{ comp[c](params) }}
+        {%- endif -%}
+    {%- endfor -%}
+    {#- Caller blocks -#}
+    {%- for c in macroCallerBlocks -%}
+        {%- if c == component -%}
+            {%- import "./elements/" + c + ".njk" as compm -%}
+            {%- call compm[c](params) -%}
+                {{ caller() }}
+            {%- endcall -%}
+        {%- endif -%}
+    {%- endfor -%}
+{%- endmacro -%}

package/src/njk/layouts/govcyBase.njk

@@ -0,0 +1,143 @@
+{# Page template as defined in UDS
+To use this template you need to pass the following data:
+
+```
+{
+  site: {
+    "lang": "en",
+    "title" : {"en":"Service title", "el":"Τιτλός υπηρεσίας"}, 
+    "headerTitle" : {"en":"Header title", "el":"Τιτλός επικεφαλιδας"},
+    "description" : {"en":"Service description", "el":"Περιγραφή υπηρεσίας"},
+    "isTesting" : true,
+    "url": "https://gov.cy",
+    "cdn": {
+      "dist": "https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@3.0.0/dist",
+      "cssIntegrity": 'sha384-1zLHWOtnS0hOIz5mVEPZp0UH5gUE6eo0CQcCGA3sF2TyYhHyKOd3Ni8Iy/NjEASU",
+      "jsIntegrity": "sha384-zOuDuogVaaTveh/Ou2iYwCk14zFiSmMk7Ax8yRnXDtOJMyKZH5+ZNibNVwZSKtw+"
+    }
+  },
+  "pageData": {
+    "title": {"en": "Page title", "el": "Τιτλός σελιδας"},
+    "layout": "layouts/govcyBase.njk",
+    "mainLayout": "max-width"
+  }
+}
+```
+#}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+<!doctype html>
+<html lang="{{ site.lang }}">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Social -->
+    <meta property="og:description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
+    <meta property="og:title" content="{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy">
+    <meta property="og:url" content="{{ site.url }}">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="{{ site.cdn.dist }}/img/icons-512.png">
+    <meta property="og:site_name" content="gov.cy">
+ 
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="{{ site.url }}">
+    <meta property="twitter:title" content="{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy">
+    <meta property="twitter:description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
+    <meta property="twitter:image" content="{{ site.cdn.dist }}/img/icons-512.png">
+ 
+    <!-- Theme --> 
+    {# <link rel="manifest" href="manifest.json"> #}
+    <meta name="theme-color" content="#31576F">
+    <link rel="icon" type="image/png" sizes="48x48" href="{{ site.cdn.dist }}/img/favicon-48x48.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.cdn.dist }}/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.cdn.dist }}/img/favicon-16x16.png">
+ 
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.cdn.dist }}/img/apple-touch-icon-144x144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ site.cdn.dist }}/img/apple-touch-icon-120x120-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.cdn.dist }}/img/apple-touch-icon-114x114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.cdn.dist }}/img/apple-touch-icon-72x72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="{{ site.cdn.dist }}/img/apple-touch-icon-57x57-precomposed.png">
+ 
+    <!-- CSS -->
+    <link rel="stylesheet" href="{{ site.cdn.dist }}/css/govcy.uds.min.css" integrity="{{ site.cdn.cssIntegrity }}" crossorigin="anonymous">
+    
+    <title>{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy</title>
+    <meta name="description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
+
+  </head>
+  <body>
+    <!--bodyStart-->
+    <section class="govcy-container-fluid" id="bodyStartContainer">
+        <a href="#mainContainer" class="govcy-skip-link">{%- if site.lang=='el' -%}Μεταφορά στο κεντρικό περιεχόμενο{%- else -%}Skip to main content{%- endif -%}</a>
+        {% block bodyStart %}{% endblock %}
+    </section>
+
+    <!--Header-->
+    <header class="govcy-header govcy-d-print-none" id="headerContainer">
+        {% block header %}
+        <div class="govcy-header-main-area">
+            <div class="govcy-container govcy-main-area-items">
+                <div class="govcy-navigation-container">
+                    <div class="govcy-service-container">
+                        <a href="https://gov.cy" class="govcy-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"></a>
+                        <span class="govcy-service-name">{{ govcyLocalizeContent(site.headerTitle, site.lang) }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endblock %}
+    </header>
+
+    <!--beforeMain-->
+    <section class="govcy-container" id="beforeMainContainer">
+        {% block beforeMain %}{% endblock %}
+        {% if site.isTesting %}
+            <div class="govcy-phase-banner">
+                <span class="govcy-tag">TESTING</span>
+                <span class="govcy-ml-2">{{ govcyLocalizeContent({"en": "This is not a real service. It is only used for testing purposes. Any submissions made through this service will be ignored", "el": "Αυτή δεν είναι πραγματική υπηρεσία. Χρησιμοποιείται μόνο για σκοπούς δοκιμών. Οποιεσδήποτε υποβολές γίνουν μέσω της υπηρεσίας αυτής θα αγνοηθούν."}, site.lang) }}</span>
+            </div>
+        {% endif %}
+    </section>
+
+    <!--main-->
+    <main class="govcy-container" id="mainContainer">
+        <div class="govcy-row">
+            <article class="govcy-col-{% if pageData.mainLayout=='max-width' %}12{% else %}8{% endif %}">
+                {% block main %}{% endblock %}
+            </article>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="govcy-footer govcy-d-print-none" id="footerContainer">
+        {% block footer %}
+                <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">
+                            <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>
+                            </ul>
+                            <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>
+                            </div>
+                        </div>
+                        <div class="govcy-my-4">
+                            <a href="https://gov.cy" class="govcy-footer-logo" title="Go to the gov.cy homepage"><img alt="gov.cy Logo"/></a>
+                        </div>
+                    </div>
+                </div>
+        {% endblock %}
+    </footer>
+
+    <!--bodyEnd-->
+    <section  class="govcy-container-fluid" id="bodyEndContainer">
+        {% block bodyEnd %}{% endblock %}
+    </section>    
+    <script src="{{ site.cdn.dist }}/js/govcy.uds.min.js" integrity="{{ site.cdn.jsIntegrity }}" crossorigin="anonymous"></script>
+  </body>
+</html>

package/src/njk/utilities/govcyUtilities.njk

@@ -0,0 +1,36 @@
+{#- govcyLocalizeContent 
+ @param {string} content The content
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {boolean} isHTML Is the content an HTML and can be reproduced without escaping? Optional, default is false. Can be true,false 
+ @returns localized content 
+-#}
+{% macro govcyLocalizeContent(content,lang,isHTML) -%}
+{#- set default values -#}
+{#- Set the language with priority: lang > globalData.site.lang > 'el' -#}
+{%- set inlang = lang | default(globalData.site.lang) | default('el') -%}
+{# {%- set inlang = lang | default('el') -%} #}
+{%- set inIsHTML = isHTML | default(false) -%}
+{% if inIsHTML %}{{- content[inlang] | safe -}}{% else %}{{- content[inlang] -}}{% endif %}
+{%- endmacro %}
+{#- --------------------------------------- -#}
+{#- govcyLangAttribute 
+ @param {string} lang The language used. Can be 'en','el'
+ @returns lang attribute if lang is defined 
+-#}
+{% macro govcyLangAttribute(lang) -%}
+{# If lang is defined, use it #}
+{%- if lang %} lang="{{ lang }}"{%- endif %} 
+{%- endmacro %}
+{#- --------------------------------------- -#}
+{#- render govcyElements from an array -#}
+{%- macro govcyElementsFromArray(elements, lang) %}
+{%- from "../govcyElement.njk" import govcyElement -%}
+    {%- 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 %}