@gov-cy/govcy-frontend-renderer 1.20.0 → 1.22.0

package/README.md

@@ -503,6 +503,8 @@ If your using the `pageData.layout`, you can render html in each of the followin
 - **main**: the main content
 - **footer**: the footer section
 - **bodyEnd**: the end of the body
+- **afterBody**: the section after the body. Usually reserved for overlay elements
+- **afterJS**: the section after the JS. Usually reserved for JS scripts
 
 Use the `govcyElement` macro inside the blocks to render the design elements defined in the `govcyElement.njk` template. More details in defining design elements see in the [design elements](DESIGN_ELEMENTS.md) section.
 
@@ -559,6 +561,8 @@ If your using the `pageData.layout`, you can render html in each of the followin
 - **main**: the main content
 - **footer**: the footer section
 - **bodyEnd**: the end of the body
+- **afterBody**: the section after the body. Usually reserved for overlay elements
+- **afterJS**: the section after the JS. Usually reserved for JS scripts
 
 Define your design elements for each `sections` under the `elements` array. These elements use the same `govcyElement` macro to render the design elements. Do that by defining the `element` and `params` objects. For example:
 

package/dist/govcyCompiledTemplates.browser.js

@@ -2691,7 +2691,7 @@ context.setVariable("hint", t_16);
 var t_17;
 t_17 = (function() {
 var output = "";
-output += runtime.suppressValue((lineno = 21, colno = 41, runtime.callWrap(t_8, "govcyGetContent", context, ["fileView_view",runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+output += runtime.suppressValue((lineno = 23, colno = 41, runtime.callWrap(t_8, "govcyGetContent", context, ["fileView_view",runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
 ;
 return output;
 })()
@@ -2706,7 +2706,7 @@ context.addExport("viewLabel", t_17);
 var t_18;
 t_18 = (function() {
 var output = "";
-output += runtime.suppressValue((lineno = 22, colno = 43, runtime.callWrap(t_8, "govcyGetContent", context, ["fileView_delete",runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+output += runtime.suppressValue((lineno = 24, colno = 43, runtime.callWrap(t_8, "govcyGetContent", context, ["fileView_delete",runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
 ;
 return output;
 })()
@@ -2727,7 +2727,7 @@ t_2 += "-view-control\" ";
 ;
 }
 t_2 += "class=\"govcy-form\">\n    ";
-t_2 += runtime.suppressValue((lineno = 26, colno = 23, runtime.callWrap(t_12, "formControl", context, [{"classes": runtime.memberLookup((l_params),"classes"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_19 = runtime.makeMacro(
+t_2 += runtime.suppressValue((lineno = 28, colno = 23, runtime.callWrap(t_12, "formControl", context, [{"classes": runtime.memberLookup((l_params),"classes"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_19 = runtime.makeMacro(
 [], 
 [], 
 function (kwargs) {
@@ -2744,7 +2744,7 @@ else {
 t_20 += "<p class=\"govcy-label govcy-label-primary\">";
 ;
 }
-t_20 += runtime.suppressValue((lineno = 27, colno = 135, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"label"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_20 += runtime.suppressValue((lineno = 29, colno = 135, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"label"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
 if(runtime.memberLookup((l_params),"isPageHeading")) {
 t_20 += "</h1>";
 ;
@@ -2753,7 +2753,7 @@ else {
 t_20 += "</p>";
 ;
 }
-t_20 += runtime.suppressValue((lineno = 29, colno = 20, runtime.callWrap(t_16, "hint", context, [{"hint": runtime.memberLookup((l_params),"hint"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_21 = runtime.makeMacro(
+t_20 += runtime.suppressValue((lineno = 31, colno = 20, runtime.callWrap(t_16, "hint", context, [{"hint": runtime.memberLookup((l_params),"hint"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_21 = runtime.makeMacro(
 [], 
 [], 
 function (kwargs) {
@@ -2769,27 +2769,41 @@ return new runtime.SafeString(t_22);
 return macro_t_21;})()})])), env.opts.autoescape);
 t_20 += "<a href=\"";
 t_20 += runtime.suppressValue(runtime.memberLookup((l_params),"viewHref"), env.opts.autoescape);
-t_20 += "\">";
+t_20 += "\"";
+if(runtime.memberLookup((l_params),"viewTarget")) {
+t_20 += " target=\"";
+t_20 += runtime.suppressValue(runtime.memberLookup((l_params),"viewTarget"), env.opts.autoescape);
+t_20 += "\"";
+;
+}
+t_20 += ">";
 t_20 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "viewLabel"), env.opts.autoescape);
 if(runtime.memberLookup((l_params),"visuallyHiddenText")) {
 t_20 += "<span class=\"govcy-visually-hidden\">";
-t_20 += runtime.suppressValue((lineno = 31, colno = 146, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"visuallyHiddenText"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_20 += runtime.suppressValue((lineno = 33, colno = 214, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"visuallyHiddenText"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
 t_20 += "</span>";
 ;
 }
 t_20 += "</a>";
 t_20 += "<a class=\"govcy-ml-3\" href=\"";
 t_20 += runtime.suppressValue(runtime.memberLookup((l_params),"deleteHref"), env.opts.autoescape);
-t_20 += "\">";
+t_20 += "\"";
+if(runtime.memberLookup((l_params),"deleteTarget")) {
+t_20 += " target=\"";
+t_20 += runtime.suppressValue(runtime.memberLookup((l_params),"deleteTarget"), env.opts.autoescape);
+t_20 += "\"";
+;
+}
+t_20 += ">";
 t_20 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "deleteLabel"), env.opts.autoescape);
 if(runtime.memberLookup((l_params),"visuallyHiddenText")) {
 t_20 += "<span class=\"govcy-visually-hidden\">";
-t_20 += runtime.suppressValue((lineno = 33, colno = 169, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"visuallyHiddenText"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_20 += runtime.suppressValue((lineno = 35, colno = 241, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"visuallyHiddenText"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
 t_20 += "</span>";
 ;
 }
 t_20 += "</a>\n        ";
-if(runtime.memberLookup((l_params),"name") && runtime.memberLookup((l_params),"fileId") && runtime.memberLookup((l_params),"sha256")) {
+if(runtime.memberLookup((l_params),"name")) {
 t_20 += "<input type=\"hidden\" name=\"";
 t_20 += runtime.suppressValue(runtime.memberLookup((l_params),"name"), env.opts.autoescape);
 t_20 += "Attachment[fileId]\" value=\"";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.20.0",
+  "version": "1.22.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/fileView.njk

@@ -2,7 +2,9 @@
  @param {object} label The label text. Will escape text. `{en:"Content",el:"Περιεχομένο"}`
  @param {string} id The input id. Will append '-view-control', for example 'id-card-proof-view-control'. Optional
  @param {string} viewHref The view link's href. Will escape text 
+ @param {string} viewTarget The view link's target. Optional. Will escape text 
  @param {string} deleteHref The delete link's href. Will escape text 
+ @param {string} deleteTarget The delete link's target. Optional. 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
@@ -29,9 +31,9 @@
         {#- 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>
+        <a href="{{ params.viewHref }}"{%if params.viewTarget%} target="{{ params.viewTarget }}"{% endif %}>{{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>
+        <a class="govcy-ml-3" href="{{ params.deleteHref }}"{%if params.deleteTarget%} target="{{ params.deleteTarget }}"{% endif %}>{{deleteLabel}}{%if params.visuallyHiddenText%}<span class="govcy-visually-hidden"> {{- govcyLocalizeContent(params.visuallyHiddenText, params.lang) -}}</span>{% endif %}</a>
         {% if params.name -%}
         <input type="hidden" name="{{ params.name }}Attachment[fileId]" value="{{ params.fileId }}">
         <input type="hidden" name="{{ params.name }}Attachment[sha256]" value="{{ params.sha256 }}">

package/src/njk/layouts/govcyBase.njk

@@ -162,115 +162,122 @@ To use this template you need to pass the following data:
     {% endif %}
   </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>
+    <div id="govcy--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 userName %}{% endblock %}
-        {% 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>
+        <!--Header-->
+        <header class="govcy-header govcy-d-print-none" id="headerContainer">
+            {% block userName %}{% endblock %}
+            {% 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>
+                        {%- 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>
-                    {%- 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>
+            {%- 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>
+
+        <!--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>
-            </nav>
-        </div>
-        {%- endif %}
-        {% endblock %}
-    </header>
+            {% endif %}
+        </section>
 
-    <!--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>
+        <!--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>
-        {% 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>
+        </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">
-                            {%- if site.footerLinks %}
-                            <ul>
-                                {%- 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">&copy; {{ govcyLocalizeContent(site.copyrightText, site.lang) }}</span>
-                                {%- if site.footerIcons %}
-                                {% for footerIcon in site.footerIcons %}
-                                {#- src, alt and href are mandatory -#}
-                                {%- if footerIcon.src and footerIcon.alt and footerIcon.href -%}
-                                <a href="{{ govcyLocalizeContent(footerIcon.href, site.lang, true) }}"{% if footerIcon.target %} target="{{ footerIcon.target }}"{% endif %}{% if footerIcon.title %} title="{{ govcyLocalizeContent(footerIcon.title, site.lang) }}"{% endif %}>
-                                    <img class="govcy-eu-logo govcy-mb-2{% if footerIcon.classes %} {{ footerIcon.classes }}{% endif %}" src="{{ govcyLocalizeContent(footerIcon.src, site.lang, true) }}" alt="{{ govcyLocalizeContent(footerIcon.alt, site.lang, true) }}"{% if footerIcon.style %} style="{{ govcyLocalizeContent(footerIcon.style, site.lang, true) }}"{% endif %}>
-                                </a>
-                                {%- endif %}
-                                {% endfor %}
+        <!-- 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">
+                                {%- if site.footerLinks %}
+                                <ul>
+                                    {%- 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">&copy; {{ govcyLocalizeContent(site.copyrightText, site.lang) }}</span>
+                                    {%- if site.footerIcons %}
+                                    {% for footerIcon in site.footerIcons %}
+                                    {#- src, alt and href are mandatory -#}
+                                    {%- if footerIcon.src and footerIcon.alt and footerIcon.href -%}
+                                    <a href="{{ govcyLocalizeContent(footerIcon.href, site.lang, true) }}"{% if footerIcon.target %} target="{{ footerIcon.target }}"{% endif %}{% if footerIcon.title %} title="{{ govcyLocalizeContent(footerIcon.title, site.lang) }}"{% endif %}>
+                                        <img class="govcy-eu-logo govcy-mb-2{% if footerIcon.classes %} {{ footerIcon.classes }}{% endif %}" src="{{ govcyLocalizeContent(footerIcon.src, site.lang, true) }}" alt="{{ govcyLocalizeContent(footerIcon.alt, site.lang, true) }}"{% if footerIcon.style %} style="{{ govcyLocalizeContent(footerIcon.style, site.lang, true) }}"{% endif %}>
+                                    </a>
+                                    {%- endif %}
+                                    {% endfor %}
+                                    {%- endif %}
+                                </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 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>
+            {% endblock %}
+        </footer>
 
-    <!--bodyEnd-->
-    <section  class="govcy-container-fluid" id="bodyEndContainer">
-        {% block bodyEnd %}{% endblock %}
-    </section>
+        <!--bodyEnd-->
+        <section  class="govcy-container-fluid" id="bodyEndContainer">
+            {% block bodyEnd %}{% endblock %}
+        </section>
+    </div>
+    <div id="govcy--afterBody">
+        {% block afterBody %}{% endblock %}
+    </div>
+    <!-- JS -->
     {%- if site.lang == 'en' -%}<script src="{{ site.cdn.dist }}/js/locales/govcy.datepicker.en.min.js"></script>{%- elseif site.lang == 'el' -%}<script src="{{ site.cdn.dist }}/js/locales/govcy.datepicker.el.min.js"></script>{%- endif -%}
     <script src="{{ site.cdn.dist }}/js/govcy.uds.min.js"{% if site.cdn.jsIntegrity %} integrity="{{ site.cdn.jsIntegrity }}" crossorigin="anonymous"{% endif %}></script>
+    {% block afterJS %}{% endblock %}
   </body>
 </html>