Release: 1.23.0 (#64)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "infection-risk-assessment-app",
   "private": true,
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Assessing the risk of contagious viral infections (COVID-19)",
   "scripts": {
     "analyze": "stencil build",
@@ -37,7 +37,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@d4l/web-components-library": "^1.28.10",
+    "@d4l/web-components-library": "^2.2.1",
     "@sentry/browser": "^5.15.4",
     "i18next": "^19.3.2",
     "i18next-browser-languagedetector": "^4.0.2",

src/components.d.ts

@@ -15,10 +15,24 @@ export namespace Components {
     interface ConnectTranslations {
         "changedLanguageHandler": (language: Language) => Promise<void>;
     }
+    interface IaAccordion {
+        "buttonProps"?: {
+            [key: string]: string;
+        };
+        "elementId"?: string;
+        "handleToggle"?: (boolean) => void;
+        "headline": string;
+        "open"?: boolean;
+        "slotContent"?: string;
+    }
+    interface IaAnswersOverview {
+        "history": RouterHistory;
+    }
     interface IaAnswersTable {
         "answers": any;
     }
     interface IaAppRecommendations {
+        "history": RouterHistory;
         "isFromData4Life": boolean;
     }
     interface IaCallToAction {
@@ -98,13 +112,13 @@ export namespace Components {
     }
     interface IaQrCode {
         "answers": any;
+        "history": RouterHistory;
         "resultCase": number;
     }
     interface IaQuestionnaire {
         "history": RouterHistory;
     }
     interface IaRecommendation {
-        "resultCase": number;
     }
     interface IaStart {
         "history": RouterHistory;
@@ -126,6 +140,18 @@ declare global {
         prototype: HTMLConnectTranslationsElement;
         new (): HTMLConnectTranslationsElement;
     };
+    interface HTMLIaAccordionElement extends Components.IaAccordion, HTMLStencilElement {
+    }
+    var HTMLIaAccordionElement: {
+        prototype: HTMLIaAccordionElement;
+        new (): HTMLIaAccordionElement;
+    };
+    interface HTMLIaAnswersOverviewElement extends Components.IaAnswersOverview, HTMLStencilElement {
+    }
+    var HTMLIaAnswersOverviewElement: {
+        prototype: HTMLIaAnswersOverviewElement;
+        new (): HTMLIaAnswersOverviewElement;
+    };
     interface HTMLIaAnswersTableElement extends Components.IaAnswersTable, HTMLStencilElement {
     }
     var HTMLIaAnswersTableElement: {
@@ -321,6 +347,8 @@ declare global {
     interface HTMLElementTagNameMap {
         "app-root": HTMLAppRootElement;
         "connect-translations": HTMLConnectTranslationsElement;
+        "ia-accordion": HTMLIaAccordionElement;
+        "ia-answers-overview": HTMLIaAnswersOverviewElement;
         "ia-answers-table": HTMLIaAnswersTableElement;
         "ia-app-recommendations": HTMLIaAppRecommendationsElement;
         "ia-call-to-action": HTMLIaCallToActionElement;
@@ -362,10 +390,24 @@ declare namespace LocalJSX {
     interface ConnectTranslations {
         "onChangedLanguage"?: (event: CustomEvent<any>) => void;
     }
+    interface IaAccordion {
+        "buttonProps"?: {
+            [key: string]: string;
+        };
+        "elementId"?: string;
+        "handleToggle"?: (boolean) => void;
+        "headline"?: string;
+        "open"?: boolean;
+        "slotContent"?: string;
+    }
+    interface IaAnswersOverview {
+        "history"?: RouterHistory;
+    }
     interface IaAnswersTable {
         "answers"?: any;
     }
     interface IaAppRecommendations {
+        "history"?: RouterHistory;
         "isFromData4Life"?: boolean;
     }
     interface IaCallToAction {
@@ -455,6 +497,7 @@ declare namespace LocalJSX {
     }
     interface IaQrCode {
         "answers"?: any;
+        "history"?: RouterHistory;
         "resultCase"?: number;
     }
     interface IaQuestionnaire {
@@ -463,7 +506,6 @@ declare namespace LocalJSX {
         "onShowLogoHeader"?: (event: CustomEvent<any>) => void;
     }
     interface IaRecommendation {
-        "resultCase"?: number;
     }
     interface IaStart {
         "history"?: RouterHistory;
@@ -476,6 +518,8 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "app-root": AppRoot;
         "connect-translations": ConnectTranslations;
+        "ia-accordion": IaAccordion;
+        "ia-answers-overview": IaAnswersOverview;
         "ia-answers-table": IaAnswersTable;
         "ia-app-recommendations": IaAppRecommendations;
         "ia-call-to-action": IaCallToAction;
@@ -516,6 +560,8 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
             "connect-translations": LocalJSX.ConnectTranslations & JSXBase.HTMLAttributes<HTMLConnectTranslationsElement>;
+            "ia-accordion": LocalJSX.IaAccordion & JSXBase.HTMLAttributes<HTMLIaAccordionElement>;
+            "ia-answers-overview": LocalJSX.IaAnswersOverview & JSXBase.HTMLAttributes<HTMLIaAnswersOverviewElement>;
             "ia-answers-table": LocalJSX.IaAnswersTable & JSXBase.HTMLAttributes<HTMLIaAnswersTableElement>;
             "ia-app-recommendations": LocalJSX.IaAppRecommendations & JSXBase.HTMLAttributes<HTMLIaAppRecommendationsElement>;
             "ia-call-to-action": LocalJSX.IaCallToAction & JSXBase.HTMLAttributes<HTMLIaCallToActionElement>;

src/components/accordion/accordion.css

@@ -0,0 +1,25 @@
+.accordion {
+  background: #fff;
+}
+
+.accordion p {
+  margin: 0;
+}
+
+.accordion ul,
+.accordion ol {
+  margin: 0;
+  padding-left: var(--padding-main);
+}
+
+.accordion a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.accordion ia-call-to-action + ia-call-to-action {
+  display: block;
+  border-top: 1px solid var(--c-tertiary);
+  margin-top: var(--padding-main);
+  padding-top: var(--padding-main);
+}

src/components/accordion/accordion.tsx

@@ -0,0 +1,57 @@
+import { Component, h, Listen, Prop, State } from '@stencil/core';
+import { getRootCSSPropertyValue } from '../../global/utils/css-properties';
+
+@Component({
+  styleUrl: 'accordion.css',
+  tag: 'ia-accordion',
+})
+export class Accordion {
+  @Prop() elementId?: string;
+  @Prop() headline: string;
+  @Prop() slotContent?: string;
+  @Prop() buttonProps?: { [key: string]: string };
+  @Prop() open?: boolean = false;
+  @Prop() handleToggle?: (boolean) => void;
+  @State() language: string;
+
+  @Listen('changedLanguage', {
+    target: 'window',
+  })
+  changedLanguageHandler(event: CustomEvent) {
+    this.language = event.detail.code;
+  }
+
+  render() {
+    return (
+      <d4l-accordion
+        id={this.elementId}
+        classes="accordion"
+        open={this.open}
+        buttonProps={this.buttonProps}
+        handleToggle={this.handleToggle}
+        headerBackgroundColor={getRootCSSPropertyValue('--c-gray')}
+      >
+        <h3
+          class="o-accordion-headline u-padding-horizontal--extra-small u-text-align--left"
+          slot="accordion-header"
+        >
+          {this.headline}
+        </h3>
+        {this.slotContent?.length > 0 ? (
+          <div
+            class="u-padding-vertical--normal u-padding-horizontal--extra-small"
+            slot="accordion-panel"
+            innerHTML={this.slotContent}
+          />
+        ) : (
+          <div
+            class="u-padding-vertical--normal u-padding-horizontal--extra-small"
+            slot="accordion-panel"
+          >
+            <slot name="accordion-children" />
+          </div>
+        )}
+      </d4l-accordion>
+    );
+  }
+}

src/components/answers-table/answers-table.tsx

@@ -1,8 +1,6 @@
 import { Component, h, Listen, Prop, State } from '@stencil/core';
 import { QUESTIONS } from '../../global/questions';
 import i18next from '../../global/utils/i18n';
-import { trackEvent, TRACKING_EVENTS } from '../../global/utils/track';
-import { getRootCSSPropertyValue } from '../../global/utils/css-properties';
 
 @Component({
   styleUrl: 'answers-table.css',
@@ -72,39 +70,9 @@ export class AnswersTable {
   render() {
     const { answers, generateQuestionRow } = this;
 
-    const props = {
-      'data-test': 'toggleAnswersButton',
-    };
-
-    const canPrint = window && typeof window.print === 'function';
-
     return (
       <div class="answers-table">
-        <d4l-accordion
-          open={false}
-          headerBackgroundColor={getRootCSSPropertyValue('--c-gray')}
-          classes="accordion--no-panel-border accordion--no-panel-padding"
-          buttonProps={props}
-        >
-          <p class="o-accordion-headline" slot="accordion-header">
-            {i18next.t('answers_table_headline')}
-          </p>
-          <div slot="accordion-panel">
-            <table>{Object.keys(answers).map(id => generateQuestionRow(id))}</table>
-            {canPrint && (
-              <d4l-button
-                type="button"
-                classes="button--block answers-table__button"
-                data-test="printButton"
-                text={i18next.t('answers_table_print')}
-                handleClick={() => {
-                  trackEvent(TRACKING_EVENTS.SUMMARY_PRINT);
-                  window.print();
-                }}
-              />
-            )}
-          </div>
-        </d4l-accordion>
+        <table>{Object.keys(answers).map(generateQuestionRow)}</table>
       </div>
     );
   }

src/components/app-recommendations/app-recommendations.css

@@ -5,20 +5,6 @@
   justify-content: space-between;
 }
 
-.app-recommendation--full-width {
-  width: 100%;
-}
-
-.app-recommendation--half-width {
-  width: 100%;
-}
-
-@media screen and (min-width: 768px) {
-  .app-recommendation--half-width {
-    width: calc(50% - 0.5em);
-  }
-}
-
 .app-recommendation__wrapper > * {
   margin: 0.5em 0;
 }
@@ -47,12 +33,18 @@
   color: var(--c-gray-light);
 }
 
+.app-recommendation__paragraph {
+  color: var(--c-gray);
+  font-weight: 400;
+  padding-top: var(--padding-main);
+}
+
 .app-recommendation__icon {
   height: 56px;
   width: 56px;
   background: white;
   border-radius: 12px;
-  box-shadow: 0px 0px 24px -2px rgba(191, 191, 191, 0.6);
+  box-shadow: 0 0 24px -2px rgba(191, 191, 191, 0.6);
 }
 
 .app-recommendation__logo__wrapper {