@gov-cy/dsf-email-templates 2.0.4 → 2.1.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v2.1.0] - 2025-04-08
+
+### Added
+- `bodyKeyValue` component
+
+## [v2.0.5] - 2025-04-05
+
+### Changed
+- Fix vulnerability issue
+
 ## [v2.0.4] - 2024-07-24
 
 ### Changed

package/README.md

@@ -28,6 +28,11 @@ Compatibility with clients based on mailtrap test on 2024-04-10
 | Yahoo Mail | 100%    |  80%   | 80%  |
 | Other      | 100%    |  89%   | 89%  |
 
+Though the project is not intended to be used for production purposes and does provide any guaranties, your welcome to try it.
+
+> [!WARNING]  
+> The project allows you to input un-escaped HTML in your emails, so use it with care.
+
 ## Features
 
 `DSF-email-templates` can:
@@ -285,6 +290,28 @@ Usage example:
 ```
 </details>
 
+<details>
+  <summary>bodyKeyValue</summary>
+  
+Returns govcy an ordered or un-ordered list with key and value. It should be used in the `body` block. 
+
+**Parameters** 
+- {string} `type` The list type. Optional, default is 'ul'. Can be 'ul', 'ol' 
+- {array} `items` The array of items to turn onto list items. 
+  i.e. items: 
+    [
+        {key:'key1', value:'value 1'}, 
+        {key:'key2', value:'value 2'}
+    ]
+- {string} `lang` The language used. Can be 'en','el'. Optional.
+
+Usage example: 
+
+```njk
+{{ govcyEmailElement ('bodyKeyValue',{type:'ul', items: [ {key:'key1', value:'value 1'}, {key:'key2', value:'value 2'} ]}) }}
+```
+</details>
+
 ---------
 
 Here's a complete example of a nunjucks template using DSF assets:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/dsf-email-templates",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "This project can be used to produce html email templates to be used by DSF.",
   "author": "DMRID - DSF Team",
   "license": "MIT",

package/src/njk/components/bodyKeyValue.njk

@@ -0,0 +1,34 @@
+{# body key value list
+ @param {string} type The list type. Optional, default is 'ul'. Can be 'ul', 'ol' 
+ @param {array} items The array of items to turn onto list items. 
+  i.e. items: 
+    [
+        {key:'key1', value:'value 1'}, 
+        {key:'key2', value:'value 2'}
+    ]
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @returns govcy body key value list for emails html 
+#}
+{% macro gocvyEmailBodyKeyValue(params) -%}
+{%- from "./bodyParagraph.njk" import gocvyEmailBodyParagraph -%}
+{#- set default values -#}
+{%- set type = params.type | default('ul') -%}
+{# depending on the heading level set the font-size #}
+{%- if type == 'ol' -%}
+    {%- set openHTML = '<ol style="margin:0; margin-left: 16px; padding:0; line-height:22px;" align="left">' -%}
+    {%- set closeHTML = '</ol>' -%}
+{%- else -%}
+    {%- set openHTML = '<ul style="margin:0; margin-left: 16px; padding:0; line-height:22px;" align="left" type="disc">' -%}
+    {%- set closeHTML = '</ul>' -%}
+{%- endif -%}
+{% call gocvyEmailBodyParagraph({lang:params.lang}) %}
+    {{ openHTML | safe }}
+        {# for each item render list item #}
+        {%- for item in params.items -%}
+            {%- if item -%}
+                <li><b>{{ item.key }}:</b> {{ item.value }}</li>
+            {%- endif -%}
+        {%- endfor -%}
+    {{ closeHTML | safe }}
+{% endcall %}
+{%- endmacro %}

package/src/njk/govcyEmailElement.njk

@@ -15,6 +15,10 @@
     {%- elif component == 'bodyList' -%}
         {%- from "./components/bodyList.njk" import gocvyEmailBodyList -%}
         {{ gocvyEmailBodyList(params) }}
+    {#- bodyKeyValue -#}
+    {%- elif component == 'bodyKeyValue' -%}
+        {%- from "./components/bodyKeyValue.njk" import gocvyEmailBodyKeyValue -%}
+        {{ gocvyEmailBodyKeyValue(params) }}
     {#- footer -#}
     {%- elif component == 'footer' -%}
         {%- from "./components/footer.njk" import gocvyEmailFooter -%}

package/src/njk/templates/submission-email.njk

@@ -56,6 +56,7 @@
             {%- endcall %}
             {{ govcyEmailElement ('bodyList',{type:'ol', items: ["xero -", "go", "kouvente"]}) }}
             {{ govcyEmailElement ('bodyList',{type:'ul', items: ['<a href="#">xero</a>', "go", "kouvente"]}) }}
+            {{ govcyEmailElement ('bodyKeyValue',{type:'ul', items: [ {key:'key1', value:'value 1'}, {key:'key2', value:'value 2'} ]}) }}
         {%- endcall%}
     {%- endblock %}
     {# footer block #}

package/test/moca/unit.test.js

@@ -23,6 +23,7 @@ describe('1. Testing `DSFEmailRenderer.renderFromString`, use of `govcyBase.njk`
                 {% call govcyEmailElement('bodyHeading',{headingLevel:4}) -%}Heading 4{%- endcall %}
                 {{ govcyEmailElement ('bodyList',{type:'ol', items: ["item 1", "item 2", "item 3"]}) }}
                 {{ govcyEmailElement ('bodyList',{type:'ul', items: ["item 1", "item 2", "item 3"]}) }}
+                {{ govcyEmailElement ('bodyKeyValue',{type:'ul', items: [ {key:'key1', value:'value 1'}, {key:'key2', value:'value 2'} ]}) }}
                 {% endcall %}
         {% endblock %}
         {% block footer -%}
@@ -49,6 +50,7 @@ describe('2. Testing `DSFEmailRenderer.renderFromJson`', () => {
             {"component": "bodyHeading",params: {"headingLevel":4},body:"Heading 4"},
             {"component": "bodyList", params:{type:'ol', items: ["item 1", "item 2", "item 3"]}},
             {"component": "bodyList", params:{type:'ul', items: ["item 1", "item 2", "item 3"]}},
+            {"component": "bodyKeyValue", params:{type:'ul', items: [{key:'key1', value:'value 1'}, {key:'key2', value:'value 2'} ]}},
         ],
         footer: {
             footerText: "Name of service"
@@ -186,5 +188,11 @@ function renderChecks(renderedHTML, checksNum){
         expectedRegex = /<body>([\s\S]*?)<ul([\s\S]*?)>\s*<li>([\s\S]*?)item 1\s*<\/li>\s*<li>([\s\S]*?)item 2\s*<\/li>\s*<li>([\s\S]*?)item 3\s*<\/li>\s*<\/ul>/;
         expect(renderedHTML).to.match(expectedRegex);
     })
+    //check for bodyKeyValue.njk macro render as expected
+    it(checksNum+'13 `bodyKeyValue` macro render as expected', async () => {
+        //check for structure of `ol` block
+        let expectedRegex =  /<body>([\s\S]*?)<ul([\s\S]*?)>\s*<li>\s*<b>\s*key1:<\/b> value 1\s*<\/li>\s*<li>\s*<b>\s*key2:<\/b> value 2\s*<\/li>\s*<\/ul>/;
+        expect(renderedHTML).to.match(expectedRegex);        
+    })
     
 }