@gov-cy/govcy-frontend-renderer 1.12.0 → 1.13.0

package/package.json

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

@@ -20,6 +20,8 @@
  @returns govcy checkbox item html 
 #}
 {%- macro _checkboxItem(params, item, index, lang) %}
+{#- Normalize value as array -#}
+{%- set checkboxValues = [] if params.value is not defined else (params.value if params.value is iterable else [params.value]) -%}
 {#- Import localizer from utilities -#}
 {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
 {%- from "./hint.njk" import hint -%}
@@ -61,7 +63,7 @@
 {%- 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 %}>
+    <input class="govcy-checkbox-input" name="{{ params.name }}"{% if item.value in checkboxValues %} checked{% endif %} 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 %}
@@ -70,7 +72,8 @@
 {# 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} name The name used in checkbox. Will escape text.
+ @param {array|string} value The pre-selected values for checkboxes. If a string is passed, it means only one checkbox is selected, otherwise it needs to be an array of strings. Optional
  @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 

package/src/njk/elements/dateInput.njk

@@ -3,6 +3,9 @@
  @param {object} legend The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
  @param {string} id The id of the dateInput parts. For example `id_day`, `id_month` and `id_year`. Will escape text. 
  @param {string} name The name of the dateInput parts. For example `name_day`, `name_month` and `name_year` . Will escape text. 
+ @param {string} dayValue The pre-filled day value. Will escape text. Optional.
+ @param {string} monthValue The pre-filled month value. Must be one of 1,2,3,4,5,6,7,8,9,10,11,12. Optional.
+ @param {string} yearValue The pre-filled year value. 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 `govcy-form-control` container. Optional 
@@ -73,29 +76,29 @@
             <div class="govcy-d-flex govcy-flex-wrap"{{ govcyLangAttribute(params.lang) }}>    
                 <div class="govcy-d-block govcy-mr-3">
                     <label class="govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2" for="{{ params.id }}_day">{{ dayLabel }}</label>
-                    <input id="{{ params.id }}_day" name="{{ params.name }}_day" class="govcy-text-input govcy-text-input-char_3{% if params.hasDayError %} govcy-text-input-error{% endif %}" maxlength="2" type="text" pattern="[0-9]*" inputmode="numeric"{% if params.isBirthday %} autocomplete="bday-day"{% endif %}>
+                    <input id="{{ params.id }}_day" name="{{ params.name }}_day"{% if params.dayValue is defined %} value="{{ params.dayValue | default('') }}"{% endif %} class="govcy-text-input govcy-text-input-char_3{% if params.hasDayError %} govcy-text-input-error{% endif %}" maxlength="2" type="text" pattern="[0-9]*" inputmode="numeric"{% if params.isBirthday %} autocomplete="bday-day"{% endif %}>
                 </div>
                 <div class="govcy-d-block govcy-mr-3">
                     <label class="govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2" for="{{ params.id }}_month">{{ monthLabel }}</label>
                     <select id="{{ params.id }}_month" name="{{ params.name }}_month" class="govcy-select{% if params.hasMonthError %} govcy-select-error{% endif %}"{% if params.isBirthday %} autocomplete="bday-month"{% endif %}>
-                        <option value="" selected=""></option>
-                        <option value="1">{% if variant=="mobile" %}1{% else %}{{ monthValue1 }}{% endif %}</option>
-                        <option value="2">{% if variant=="mobile" %}2{% else %}{{ monthValue2 }}{% endif %}</option>
-                        <option value="3">{% if variant=="mobile" %}3{% else %}{{ monthValue3 }}{% endif %}</option>
-                        <option value="4">{% if variant=="mobile" %}4{% else %}{{ monthValue4 }}{% endif %}</option>
-                        <option value="5">{% if variant=="mobile" %}5{% else %}{{ monthValue5 }}{% endif %}</option>
-                        <option value="6">{% if variant=="mobile" %}6{% else %}{{ monthValue6 }}{% endif %}</option>
-                        <option value="7">{% if variant=="mobile" %}7{% else %}{{ monthValue7 }}{% endif %}</option>
-                        <option value="8">{% if variant=="mobile" %}8{% else %}{{ monthValue8 }}{% endif %}</option>
-                        <option value="9">{% if variant=="mobile" %}9{% else %}{{ monthValue9 }}{% endif %}</option>
-                        <option value="10">{% if variant=="mobile" %}10{% else %}{{ monthValue10 }}{% endif %}</option>
-                        <option value="11">{% if variant=="mobile" %}11{% else %}{{ monthValue11 }}{% endif %}</option>
-                        <option value="12">{% if variant=="mobile" %}12{% else %}{{ monthValue12 }}{% endif %}</option>
+                        <option value=""></option>
+                        <option value="1"{% if params.monthValue == "1" %} selected{% endif %}>{% if variant=="mobile" %}1{% else %}{{ monthValue1 }}{% endif %}</option>
+                        <option value="2"{% if params.monthValue == "2" %} selected{% endif %}>{% if variant=="mobile" %}2{% else %}{{ monthValue2 }}{% endif %}</option>
+                        <option value="3"{% if params.monthValue == "3" %} selected{% endif %}>{% if variant=="mobile" %}3{% else %}{{ monthValue3 }}{% endif %}</option>
+                        <option value="4"{% if params.monthValue == "4" %} selected{% endif %}>{% if variant=="mobile" %}4{% else %}{{ monthValue4 }}{% endif %}</option>
+                        <option value="5"{% if params.monthValue == "5" %} selected{% endif %}>{% if variant=="mobile" %}5{% else %}{{ monthValue5 }}{% endif %}</option>
+                        <option value="6"{% if params.monthValue == "6" %} selected{% endif %}>{% if variant=="mobile" %}6{% else %}{{ monthValue6 }}{% endif %}</option>
+                        <option value="7"{% if params.monthValue == "7" %} selected{% endif %}>{% if variant=="mobile" %}7{% else %}{{ monthValue7 }}{% endif %}</option>
+                        <option value="8"{% if params.monthValue == "8" %} selected{% endif %}>{% if variant=="mobile" %}8{% else %}{{ monthValue8 }}{% endif %}</option>
+                        <option value="9"{% if params.monthValue == "9" %} selected{% endif %}>{% if variant=="mobile" %}9{% else %}{{ monthValue9 }}{% endif %}</option>
+                        <option value="10"{% if params.monthValue == "10" %} selected{% endif %}>{% if variant=="mobile" %}10{% else %}{{ monthValue10 }}{% endif %}</option>
+                        <option value="11"{% if params.monthValue == "11" %} selected{% endif %}>{% if variant=="mobile" %}11{% else %}{{ monthValue11 }}{% endif %}</option>
+                        <option value="12"{% if params.monthValue == "12" %} selected{% endif %}>{% if variant=="mobile" %}12{% else %}{{ monthValue12 }}{% endif %}</option>
                     </select>
                 </div>
                 <div class="govcy-d-block govcy-mr-3">
                     <label class="govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2" for="{{ params.id }}_year">{{ yearLabel }}</label>
-                    <input id="{{ params.id }}_year" name="{{ params.name }}_year" class="govcy-text-input govcy-text-input-char_6{% if params.hasYearError %} govcy-text-input-error{% endif %}" maxlength="4" type="text" pattern="[0-9]*" inputmode="numeric"{% if params.isBirthday %} autocomplete="bday-year"{% endif %}>
+                    <input id="{{ params.id }}_year" name="{{ params.name }}_year"{% if params.yearValue is defined %} value="{{ params.yearValue | default('') }}"{% endif %} class="govcy-text-input govcy-text-input-char_6{% if params.hasYearError %} govcy-text-input-error{% endif %}" maxlength="4" type="text" pattern="[0-9]*" inputmode="numeric"{% if params.isBirthday %} autocomplete="bday-year"{% endif %}>
                 </div>
             </div>
         {% endcall %}

package/src/njk/elements/datePicker.njk

@@ -3,6 +3,7 @@
  @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
  @param {string} id The id of the datePicker. Will escape text. 
  @param {string} name The name of the datePicker. Will escape text. 
+ @param {string} value The value of the input. Will set this value if it is a valid date. The date should be in the format `YYYY-MM-DD`. 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 `govcy-form-control` container. Optional 
@@ -47,7 +48,7 @@
         {% 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 %}
-        <div class="govcy-date-picker"{% if params.dataMinDate %} data-min-date="{{ params.dataMinDate }}"{% endif %}{% if params.dataMaxDate %} data-max-date="{{ params.dataMaxDate }}"{% endif %}>
+        <div class="govcy-date-picker"{% if params.dataMinDate %} data-min-date="{{ params.dataMinDate }}"{% endif %}{% if params.dataMaxDate %} data-max-date="{{ params.dataMaxDate }}"{% endif %}{% if params.value %} data-default-value="{{ params.value | default('') }}"{% endif %}>
             <input type="text" class="govcy-text-input {% if params.error %} govcy-text-input-error{% endif %}" 
                     id="{{ params.id }}"
                     name="{{ params.name }}"

package/src/njk/elements/radios.njk

@@ -78,7 +78,7 @@
 {%- 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 %}>
+    <input class="govcy-radio-input" name="{{ params.name }}"{% if params.value == item.value %} checked{% endif %} 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 %}
@@ -98,10 +98,11 @@
         </div>
 {%- endif -%}
 {%- endmacro %}
-{# radio 
+{# radios
  @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} value The selected radio option. Optional.
  @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 

package/src/njk/elements/select.njk

@@ -3,6 +3,7 @@
  @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 {string} value The value of the input. The matching value in the `items` array will be selected. Optional
  @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 
@@ -50,7 +51,7 @@
             {# for each item render checkbox item #}
             {%- for item in params.items -%}
                 {%- if item.text -%}
-                    <option value="{{ item.value }}">{{ govcyLocalizeContent(item.text, params.lang) }}</option>
+                    <option value="{{ item.value }}"{% if params.value == item.value %} selected{% endif %}>{{ govcyLocalizeContent(item.text, params.lang) }}</option>
                 {%- endif -%}
             {%- endfor -%}
         </select>

package/src/njk/elements/textArea.njk

@@ -2,6 +2,8 @@
  @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 {string} value The value of the input. Whether to escape the value depends on `params.isValueEscaped`. Optional
+ @param {string} isValueEscaped Whether the value will be escaped. Optional, default is true.
  @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 
@@ -24,6 +26,7 @@
 {%- from "./label.njk" import label -%}
 {%- from "./errorMessage.njk" import errorMessage -%}
 {#- set default values -#}
+{%- set isValueEscaped = params.isValueEscaped | default(true) -%}
 {%- set isPageHeading = params.isPageHeading | default(false) -%}
 {%- set isSpellcheck = params.isSpellcheck | default(false) -%}
 {%- set autocomplete = params.autocomplete | default(false) -%}
@@ -55,7 +58,7 @@
         {#- 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>
+        <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 %}>{% if params.value is defined %}{{ params.value | default('') if isValueEscaped else params.value | safe }}{% endif %}</textarea>
         {# character count #}
         {%- if params.characterCount -%}
             {%- set charactercountType = params.characterCount.type | default('char') -%}

package/src/njk/elements/textInput.njk

@@ -2,6 +2,8 @@
  @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 {string} value The value of the input. Whether to escape the value depends on `params.isValueEscaped`. Optional
+ @param {string} isValueEscaped Whether the value will be escaped. Optional, default is true.
  @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 
@@ -22,6 +24,7 @@
 {%- from "./label.njk" import label -%}
 {%- from "./errorMessage.njk" import errorMessage -%}
 {#- set default values -#}
+{%- set isValueEscaped = params.isValueEscaped | default(true) -%}
 {%- set isPageHeading = params.isPageHeading | default(false) -%}
 {%- set isSpellcheck = params.isSpellcheck | default(false) -%}
 {%- set type = params.type | default("text") -%}
@@ -66,7 +69,7 @@
         {#- 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 %}>
+        <input id="{{params.id}}"{% if params.value is defined %} value="{{ params.value | default('') if isValueEscaped else params.value | safe }}"{% endif %} {% 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 %}