Release: 1.25.0 (#75)

d4l-data4life · Feb 17, 2021 · 5469dfe · 5469dfe
1 parent adf6148
commit 5469dfe
Show file tree

Hide file tree

Showing 24 changed files with 375 additions and 749 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "infection-risk-assessment-app",
   "private": true,
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "Assessing the risk of contagious viral infections (COVID-19)",
   "scripts": {
     "analyze": "stencil build",
@@ -22,7 +22,7 @@
     "@lokalise/node-api": "^2.1.0",
     "@stencil/core": "^1.9.2",
     "@stencil/router": "^1.0.1",
-    "@types/jest": "24.0.20",
+    "@types/jest": "25.2.3",
     "@types/puppeteer": "1.19.0",
     "deep-assign": "^3.0.0",
     "dotenv": "^8.2.0",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -63,12 +63,18 @@ export namespace Components {
     }
     interface IaInputMultipleChoice {
         "question": Question;
+        "value"?: string[];
+    }
+    interface IaInputNumber {
+        "question": Question;
+        "value": string;
     }
     interface IaInputPostalCode {
         "question": Question;
+        "value": string;
     }
     interface IaInputRadio {
-        "currentSelection": any;
+        "currentSelection": string;
         "question": Question;
     }
     interface IaLegal {
@@ -224,6 +230,12 @@ declare global {
         prototype: HTMLIaInputMultipleChoiceElement;
         new (): HTMLIaInputMultipleChoiceElement;
     };
+    interface HTMLIaInputNumberElement extends Components.IaInputNumber, HTMLStencilElement {
+    }
+    var HTMLIaInputNumberElement: {
+        prototype: HTMLIaInputNumberElement;
+        new (): HTMLIaInputNumberElement;
+    };
     interface HTMLIaInputPostalCodeElement extends Components.IaInputPostalCode, HTMLStencilElement {
     }
     var HTMLIaInputPostalCodeElement: {
@@ -361,6 +373,7 @@ declare global {
         "ia-imprint": HTMLIaImprintElement;
         "ia-input-date": HTMLIaInputDateElement;
         "ia-input-multiple-choice": HTMLIaInputMultipleChoiceElement;
+        "ia-input-number": HTMLIaInputNumberElement;
         "ia-input-postal-code": HTMLIaInputPostalCodeElement;
         "ia-input-radio": HTMLIaInputRadioElement;
         "ia-legal": HTMLIaLegalElement;
@@ -445,13 +458,20 @@ declare namespace LocalJSX {
     interface IaInputMultipleChoice {
         "onUpdateFormData"?: (event: CustomEvent<any>) => void;
         "question"?: Question;
+        "value"?: string[];
+    }
+    interface IaInputNumber {
+        "onUpdateFormData"?: (event: CustomEvent<any>) => void;
+        "question"?: Question;
+        "value"?: string;
     }
     interface IaInputPostalCode {
         "onUpdateFormData"?: (event: CustomEvent<any>) => void;
         "question"?: Question;
+        "value"?: string;
     }
     interface IaInputRadio {
-        "currentSelection"?: any;
+        "currentSelection"?: string;
         "onUpdateFormData"?: (event: CustomEvent<any>) => void;
         "question"?: Question;
     }
@@ -532,6 +552,7 @@ declare namespace LocalJSX {
         "ia-imprint": IaImprint;
         "ia-input-date": IaInputDate;
         "ia-input-multiple-choice": IaInputMultipleChoice;
+        "ia-input-number": IaInputNumber;
         "ia-input-postal-code": IaInputPostalCode;
         "ia-input-radio": IaInputRadio;
         "ia-legal": IaLegal;
@@ -574,6 +595,7 @@ declare module "@stencil/core" {
             "ia-imprint": LocalJSX.IaImprint & JSXBase.HTMLAttributes<HTMLIaImprintElement>;
             "ia-input-date": LocalJSX.IaInputDate & JSXBase.HTMLAttributes<HTMLIaInputDateElement>;
             "ia-input-multiple-choice": LocalJSX.IaInputMultipleChoice & JSXBase.HTMLAttributes<HTMLIaInputMultipleChoiceElement>;
+            "ia-input-number": LocalJSX.IaInputNumber & JSXBase.HTMLAttributes<HTMLIaInputNumberElement>;
             "ia-input-postal-code": LocalJSX.IaInputPostalCode & JSXBase.HTMLAttributes<HTMLIaInputPostalCodeElement>;
             "ia-input-radio": LocalJSX.IaInputRadio & JSXBase.HTMLAttributes<HTMLIaInputRadioElement>;
             "ia-legal": LocalJSX.IaLegal & JSXBase.HTMLAttributes<HTMLIaLegalElement>;

diff --git a/src/components/answers-table/answers-table.tsx b/src/components/answers-table/answers-table.tsx
@@ -29,7 +29,7 @@ export class AnswersTable {
 
     if (question.inputType === 'date') {
       return (
-        <tr class="answers-tabl__row">
+        <tr class="answers-table__row">
           <td>{i18next.t(question.text)}</td>
           <td>
             {this.answers[id]
@@ -47,6 +47,13 @@ export class AnswersTable {
           <td>{i18next.t(response)}</td>
         </tr>
       );
+    } else if (question.inputType === 'decimal') {
+      return (
+        <tr class="answers-table__row">
+          <td>{i18next.t(question.text)}</td>
+          <td>{this.answers[id]}</td>
+        </tr>
+      );
     } else if (question.inputType === 'checkbox') {
       return (
         <tr class="answers-table__row">

diff --git a/src/components/input-multiple-choice/input-multiple-choice.tsx b/src/components/input-multiple-choice/input-multiple-choice.tsx
@@ -17,6 +17,7 @@ import { Question, CheckboxOption } from '../../global/questions';
 })
 export class InputMultipleChoice {
   @Prop() question: Question;
+  @Prop() value?: string[];
 
   @State() language?: string;
   @State() checkedAnswers: string[] = [];
@@ -39,6 +40,15 @@ export class InputMultipleChoice {
     this.checkedAnswers = [];
   }
 
+  @Watch('value')
+  onValueChange() {
+    this.checkedAnswers = this.value ?? [];
+  }
+
+  componentWillLoad() {
+    this.checkedAnswers = this.value ?? [];
+  }
+
   componentDidLoad() {
     this.updateFormDataHandler(this.question.id, this.checkedAnswers);
   }
@@ -86,7 +96,7 @@ export class InputMultipleChoice {
                   key={question.id}
                   checkbox-id={`${question.id}-option${index}`}
                   name={question.id}
-                  checked={this.checkedAnswers.indexOf(option.id) > -1}
+                  checked={this.checkedAnswers.indexOf(String(index)) > -1}
                   label={i18next.t(option.label)}
                   value={index.toString()}
                   handleChange={(event: Event) => onInputChange(event, null)}

diff --git a/src/components/input-number/input-number.css b/src/components/input-number/input-number.css
@@ -0,0 +1,9 @@
+.input-number input {
+  appearance: textfield;
+}
+
+.input-number input::-webkit-outer-spin-button,
+.input-number input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
diff --git a/src/components/input-number/input-number.e2e.ts b/src/components/input-number/input-number.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('input-number', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ia-input-number />');
+
+    const element = await page.find('ia-input-number');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/input-number/input-number.spec.tsx b/src/components/input-number/input-number.spec.tsx
@@ -0,0 +1,14 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { QUESTIONS } from '../../global/questions';
+import { InputNumber } from './input-number';
+import { h } from '@stencil/core';
+
+describe('input-number', () => {
+  it('builds', async () => {
+    const page = await newSpecPage({
+      components: [InputNumber],
+      template: () => <ia-input-number question={QUESTIONS[0]} />,
+    });
+    expect(page.rootInstance).toBeTruthy();
+  });
+});
diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx
@@ -0,0 +1,62 @@
+import {
+  Component,
+  Event,
+  EventEmitter,
+  h,
+  Listen,
+  Prop,
+  State,
+} from '@stencil/core';
+import i18next from '../../global/utils/i18n';
+import { Question } from '../../global/questions';
+
+@Component({
+  styleUrl: 'input-number.css',
+  tag: 'ia-input-number',
+})
+export class InputNumber {
+  @Prop() question: Question;
+  @Prop() value: string;
+
+  @State() language?: string;
+
+  @Listen('changedLanguage', {
+    target: 'window',
+  })
+  async changedLanguageHandler(event: CustomEvent) {
+    const { detail: language } = event;
+    this.language = language;
+  }
+
+  @Event() updateFormData: EventEmitter;
+  updateFormDataHandler(key: string, value: string) {
+    this.updateFormData.emit({ key, value });
+  }
+
+  render() {
+    const { question, value } = this;
+
+    const onInputChange = (event: Event) => {
+      const target = event.target as HTMLInputElement;
+      this.updateFormDataHandler(this.question.id, target.value);
+    };
+
+    return (
+      <span>
+        <d4l-input
+          class="input-number"
+          name={question.id}
+          inputmode="numeric"
+          type="number"
+          required={!question.optional}
+          label={i18next.t('input_number_label')}
+          step={question.inputStep ?? 1}
+          min={question.inputMin ?? 0}
+          max={question.inputMax}
+          value={value}
+          onInput={(event: Event) => onInputChange(event)}
+        ></d4l-input>
+      </span>
+    );
+  }
+}
diff --git a/src/components/input-postal-code/input-postal-code.tsx b/src/components/input-postal-code/input-postal-code.tsx
@@ -15,6 +15,7 @@ import { Question } from '../../global/questions';
 })
 export class InputPostalCode {
   @Prop() question: Question;
+  @Prop() value: string;
 
   @State() language?: string;
 
@@ -32,7 +33,7 @@ export class InputPostalCode {
   }
 
   render() {
-    const { question } = this;
+    const { question, value } = this;
 
     const onInputChange = (event: Event) => {
       const target = event.target as HTMLInputElement;
@@ -47,6 +48,7 @@ export class InputPostalCode {
           inputmode="numeric"
           required
           label={i18next.t('input_postal_code_label')}
+          value={value}
           onInput={(event: Event) => onInputChange(event)}
         ></d4l-input>
       </span>

diff --git a/src/components/input-radio/input-radio.tsx b/src/components/input-radio/input-radio.tsx
@@ -16,7 +16,7 @@ import { Question } from '../../global/questions';
 })
 export class InputRadio {
   @Prop() question: Question;
-  @Prop() currentSelection: any;
+  @Prop() currentSelection: string;
 
   @State() language?: string;
 

diff --git a/src/components/logo-component/logo-component.css b/src/components/logo-component/logo-component.css
@@ -39,7 +39,7 @@
 }
 
 .logo-component--collaboration .card {
-  --border-radius-medium: 0;
+  --border-radius-m: 0;
   --shadow-soft: none;
 }
 

diff --git a/src/components/qr-code/qr-code.spec.tsx b/src/components/qr-code/qr-code.spec.tsx
@@ -41,6 +41,9 @@ const mockQuestionAnswers = (
       case 'postal':
         answer = postalAnswer;
         break;
+      case 'decimal':
+        answer = 150;
+        break;
     }
     answers[QUESTIONS[i].id] = answer;
     score = updateScoreData(i, answers[QUESTIONS[i].id], score);
@@ -94,15 +97,15 @@ describe('qr-code', () => {
 
   describe('xml generation', () => {
     it('works', async () => {
-      let answers = { P0: '2' };
+      let answers = { P1: '2' };
       expect(qrCode.generateXML(answers)).toEqual(
-        `${XMLPrefix}<P0>3</P0>${XMLSuffix}`
+        `${XMLPrefix}<P1>3</P1>${XMLSuffix}`
       );
     });
 
     it('works for the "no" case', async () => {
       let answers = mockQuestionAnswers(false, '', '14482');
-      const expected = `${XMLPrefix}<P0>2</P0><P2>2</P2><P3>2</P3><P4>2</P4><P5>2</P5><P6>2</P6><C0>2</C0><S0>2</S0><S1>2</S1><S3>2</S3><S4>2</S4><S5>2</S5><S6>2</S6><S7>2</S7><S8>2</S8><S9>2</S9><SA>2</SA><SB>2</SB><SC>2</SC><D0>2</D0><D1>2</D1><D2>2</D2><D3>2</D3><M0>2</M0><M1>2</M1><M2>2</M2>${XMLSuffix}`;
+      const expected = `${XMLPrefix}<P1>2</P1><P2>2</P2><P3>2</P3><P4>4</P4><P5>2</P5><P6>2</P6><C0>2</C0><S0>2</S0><S3>2</S3><S4>2</S4><S5>2</S5><S6>2</S6><S7>2</S7><S8>2</S8><S9>2</S9><SA>2</SA><SB>2</SB><SC>2</SC><D0>2</D0><D1>2</D1><D2>2</D2><D4>2</D4><D5>150</D5><D6>150</D6><D7>67</D7><M0>2</M0><M1>2</M1><M2>2</M2>${XMLSuffix}`;
       expect(qrCode.generateXML(answers)).toEqual(expected);
     });
 
@@ -112,7 +115,7 @@ describe('qr-code', () => {
         getStorageString(new Date('2020-03-31')),
         '14482'
       );
-      const expected = `${XMLPrefix}<P0>1</P0><P2>1</P2><P3>1</P3><P4>1</P4><P5>1</P5><P6>1</P6><C0>1</C0><CZ>20200331</CZ><S0>1</S0><S2>1</S2><S3>1</S3><S4>1</S4><S5>1</S5><S6>1</S6><S7>1</S7><S8>1</S8><S9>1</S9><SA>1</SA><SB>1</SB><SC>1</SC><SZ>20200331</SZ><D0>1</D0><D1>1</D1><D2>1</D2><D3>1</D3><M0>1</M0><M1>1</M1><M2>1</M2>${XMLSuffix}`;
+      const expected = `${XMLPrefix}<P1>1</P1><P2>1</P2><P3>1</P3><P4>1</P4><P5>1</P5><P6>1</P6><C0>1</C0><CZ>20200331</CZ><S0>1</S0><S3>1</S3><S4>1</S4><S5>1</S5><S6>1</S6><S7>1</S7><S8>1</S8><S9>1</S9><SA>1</SA><SB>1</SB><SC>1</SC><SZ>20200331</SZ><D0>1</D0><D1>1</D1><D2>1</D2><D4>1</D4><D5>150</D5><D6>150</D6><D7>67</D7><M0>1</M0><M1>1</M1><M2>1</M2>${XMLSuffix}`;
       expect(qrCode.generateXML(answers)).toEqual(expected);
     });