From 687f7e41d6e3b2bebdc9023d022d97598ac093c1 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 7 Aug 2024 20:52:57 +0000 Subject: [PATCH 01/16] Add them color to navigation and selfie instruction screens Add theme color control to selfie instruction stories --- .../components/navigation/src/Navigation.js | 12 ++- .../SelfieCaptureInstructions.js | 95 ++++++++++--------- .../SelfieCaptureInstructions.stories.js | 9 +- packages/web-components/styles/src/styles.js | 4 +- 4 files changed, 72 insertions(+), 48 deletions(-) diff --git a/packages/web-components/components/navigation/src/Navigation.js b/packages/web-components/components/navigation/src/Navigation.js index f339caed..9ae155ad 100644 --- a/packages/web-components/components/navigation/src/Navigation.js +++ b/packages/web-components/components/navigation/src/Navigation.js @@ -51,7 +51,7 @@ button[data-type="icon"] { :host::part(back-button-text) { line-height: 1; - color: rgb(21, 31, 114) !important; + color: ${this.hasThemeColor ? this.themeColor : 'rgb(21, 31, 114)'} !important; } :host::part(close-button) { @@ -87,7 +87,7 @@ button[data-type="icon"] { opacity=".4" /> @@ -151,6 +151,14 @@ button[data-type="icon"] { get showBackButton() { return !this.hasAttribute('hide-back'); } + + get themeColor() { + return this.getAttribute('theme-color') || '#001096'; + } + + get hasThemeColor() { + return this.getAttribute('theme-color')?.trim(); + } } if ('customElements' in window) { diff --git a/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js b/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js index 2ee20bfd..543ddc37 100644 --- a/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js +++ b/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js @@ -10,6 +10,7 @@ function templateString() { /> - ${styles} + ${styles(this.themeColor)}
- +
@@ -330,7 +339,7 @@ function templateString() { -

Next, we'll take a quick selfie

+

Next, we'll take a quick selfie

@@ -346,55 +355,55 @@ function templateString() { fill-rule="evenodd" clip-rule="evenodd" d="M31.8569 19C31.8569 21.5428 31.1029 24.0285 29.6902 26.1428C28.2774 28.2571 26.2695 29.9049 23.9203 30.878C21.571 31.8511 18.986 32.1057 16.492 31.6096C13.9981 31.1136 11.7072 29.8891 9.90919 28.091C8.11115 26.293 6.88668 24.0022 6.3906 21.5082C5.89452 19.0143 6.14913 16.4292 7.12222 14.08C8.09531 11.7307 9.74318 9.72279 11.8574 8.31008C13.9717 6.89737 16.4574 6.14334 19.0002 6.14334C22.41 6.14334 25.6802 7.49788 28.0913 9.90897C30.5024 12.3201 31.8569 15.5902 31.8569 19Z" - fill="#001096" + fill="${this.themeColor}" /> @@ -409,7 +418,7 @@ function templateString() {
-

Good Light

+

Good Light

Make sure you are in a well-lit environment where your face is clear and visible @@ -427,63 +436,63 @@ function templateString() { @@ -498,7 +507,7 @@ function templateString() {

-

Clear Image

+

Clear Image

Hold your phone steady so the selfie is clear and sharp. Don't take blurry images. @@ -515,23 +524,23 @@ function templateString() { >

-

Remove Obstructions

+

Remove Obstructions

Remove anything that covers your face, such glasses, masks, hats and scarves @@ -539,7 +548,7 @@ function templateString() {

- diff --git a/packages/web-components/components/document/src/document-capture/DocumentCapture.stories.js b/packages/web-components/components/document/src/document-capture/DocumentCapture.stories.js index 0959a62c..576da184 100644 --- a/packages/web-components/components/document/src/document-capture/DocumentCapture.stories.js +++ b/packages/web-components/components/document/src/document-capture/DocumentCapture.stories.js @@ -2,14 +2,21 @@ import SmartCamera from '../../../../domain/camera/src/SmartCamera'; import './index'; const meta = { + args: { + 'theme-color': '#d72c2c', + }, + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'document-capture', - render: ({ documentType }) => ` + render: (args) => ` `, From 5c5416e35dc2ad8844b33b8ad452dc5067e8fbfe Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 7 Aug 2024 21:33:17 +0000 Subject: [PATCH 07/16] Add theme to document capture review --- .../DocumentCaptureReview.js | 4 ++-- .../DocumentCaptureReview.stories.js | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js index 96e7bf12..189976b8 100644 --- a/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js +++ b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js @@ -3,7 +3,6 @@ import '../../../navigation/src'; function templateString() { return ` - ${styles} + ${styles(this.themeColor)}
-

+

Is the document clear and readable?

Make sure all corners of the document diff --git a/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.stories.js b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.stories.js index b8aaa802..6efeb3b0 100644 --- a/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.stories.js +++ b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.stories.js @@ -1,14 +1,24 @@ import './index'; const meta = { + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'document-capture-review', }; export default meta; export const IdReview = { - render: () => ` - + args: { + 'theme-color': '#d72c2c', + }, + render: (args) => ` + `, }; From 5ab2cbbff64cbb8a3531c85cb5248d3638859864 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 7 Aug 2024 21:37:35 +0000 Subject: [PATCH 08/16] Add theme color to document capture flows --- .../document/src/DocumentCaptureScreens.js | 20 +++++++++----- .../src/DocumentCaptureScreens.stories.js | 26 ++++++++++++------- 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/packages/web-components/components/document/src/DocumentCaptureScreens.js b/packages/web-components/components/document/src/DocumentCaptureScreens.js index ee869d4e..57c6ef51 100644 --- a/packages/web-components/components/document/src/DocumentCaptureScreens.js +++ b/packages/web-components/components/document/src/DocumentCaptureScreens.js @@ -32,20 +32,22 @@ class DocumentCaptureScreens extends HTMLElement { connectedCallback() { this.innerHTML = ` - ${styles} + ${styles(this.themeColor)}

- + - + - - + +
`; @@ -292,6 +294,10 @@ class DocumentCaptureScreens extends HTMLElement { : ''; } + get themeColor() { + return this.getAttribute('theme-color') || '#043C93'; + } + handleBackEvents() { this.dispatchEvent(new CustomEvent('document-capture-screens.cancelled')); } diff --git a/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js b/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js index 3611caf4..5f03c5e6 100644 --- a/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js +++ b/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js @@ -1,28 +1,34 @@ import './index'; const meta = { + args: { + 'theme-color': '#d72c2c', + }, + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'document-capture-screens', }; export default meta; export const DocumentCapture = { - render: () => ` - + render: (args) => ` + `, }; export const DocumentCaptureHiddenInstructions = { - render: () => ` - + render: (args) => ` + `, }; export const DocumentCaptureHideBackOfId = { - render: () => ` - ` + @@ -30,15 +36,15 @@ export const DocumentCaptureHideBackOfId = { }; export const DocumentCaptureAllowAttributes = { - render: () => ` - + render: (args) => ` + `, }; export const DocumentCaptureHideInstructionNBackOfId = { - render: () => ` - + render: (args) => ` + `, }; From 9482328365651659f54c50e2af95dc809de2f481 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 7 Aug 2024 21:45:53 +0000 Subject: [PATCH 09/16] Add theme color to new smart camera web --- .../camera-permission/CameraPermission.js | 8 ++++-- .../signature-pad/src/SignaturePad.js | 6 ++++- .../signature-pad/src/SignaturePad.stories.js | 12 +++++++-- .../smart-camera-web/src/SmartCameraWeb.js | 14 ++++++---- .../src/SmartCameraWeb.stories.js | 26 ++++++++++++------- 5 files changed, 46 insertions(+), 20 deletions(-) diff --git a/packages/web-components/components/camera-permission/CameraPermission.js b/packages/web-components/components/camera-permission/CameraPermission.js index f0fd8e25..429e5d6e 100644 --- a/packages/web-components/components/camera-permission/CameraPermission.js +++ b/packages/web-components/components/camera-permission/CameraPermission.js @@ -5,7 +5,7 @@ import '../navigation/src'; function templateString() { return ` - ${styles} + ${styles(this.themeColor)}
- +

@@ -127,6 +127,10 @@ class CameraPermission extends HTMLElement { get hideBack() { return this.hasAttribute('hide-back'); } + + get themeColor() { + return this.getAttribute('theme-color') || '#043C93'; + } } if (window.customElements && !window.customElements.get('camera-permission')) { diff --git a/packages/web-components/components/signature-pad/src/SignaturePad.js b/packages/web-components/components/signature-pad/src/SignaturePad.js index e70ff806..28f2c109 100644 --- a/packages/web-components/components/signature-pad/src/SignaturePad.js +++ b/packages/web-components/components/signature-pad/src/SignaturePad.js @@ -177,7 +177,7 @@ button[data-variant="text"] { } button[data-variant="solid"] { - --button-color: var(--color-default); + --button-color: ${this.themeColor}; border-radius: 2.5rem; border: 0; background-color: transparent; @@ -468,6 +468,10 @@ button:disabled { get allowUpload() { return this.hasAttribute('allow-upload'); } + + get themeColor() { + return this.getAttribute('theme-color') || '#043C93'; + } } if ('customElements' in window) { diff --git a/packages/web-components/components/signature-pad/src/SignaturePad.stories.js b/packages/web-components/components/signature-pad/src/SignaturePad.stories.js index e8686d05..3057e1ef 100644 --- a/packages/web-components/components/signature-pad/src/SignaturePad.stories.js +++ b/packages/web-components/components/signature-pad/src/SignaturePad.stories.js @@ -1,23 +1,31 @@ import './SignaturePad'; const meta = { + args: { + 'theme-color': '#d72c2c', + }, + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'smileid-signature-pad', }; export default meta; export const SignaturePad = { - render: () => ` + render: (args) => ` `, }; export const SignaturePadWithUploads = { - render: () => ` + render: (args) => ` `, diff --git a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js index 3ef47cea..5a912bf4 100644 --- a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js +++ b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js @@ -9,14 +9,14 @@ import { version as COMPONENTS_VERSION } from '../../../package.json'; function scwTemplateString() { return ` - ${styles} + ${styles(this.themeColor)}
- -
`; } @@ -240,6 +240,10 @@ class SmartCameraWeb extends HTMLElement { return this.hasAttribute('hide-attribution') ? 'hide-attribution' : ''; } + get themeColor() { + return this.getAttribute('theme-color') || '#043C93'; + } + setActiveScreen(screen) { this.activeScreen?.setAttribute('hidden', ''); screen.removeAttribute('hidden'); diff --git a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js index 3b98d259..d60de24f 100644 --- a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js +++ b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js @@ -1,42 +1,48 @@ import './SmartCameraWeb'; const meta = { + args: { + 'theme-color': '#d72c2c', + }, + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'smart-camera-web', }; export default meta; export const SmartCameraWeb = { - render: () => ` - + render: (args) => ` + `, }; export const SmartCameraWebWithOutInstructions = { - render: () => ` - + render: (args) => ` + `, }; export const SmartCameraWebWithOutNavigation = { - render: () => ` - + render: (args) => ` + `, }; export const SmartCameraWebWithOutBackToHost = { - render: () => ` - + render: (args) => ` + `, }; export const SmartCameraWebWithOutBackId = { - render: () => ` - + render: (args) => ` + `, }; From 635a26fd7fdf213dfdaaac8d9ce25c9cb554d8b8 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 7 Aug 2024 21:57:10 +0000 Subject: [PATCH 10/16] use primary color as default them --- .../camera-permission/CameraPermission.js | 2 +- .../camera-permission/CameraPermission.stories.js | 14 ++++++++++---- .../document/src/DocumentCaptureScreens.js | 2 +- .../document/src/DocumentCaptureScreens.stories.js | 6 ++---- .../DocumentCaptureInstructions.js | 2 +- .../DocumentCaptureInstructions.stories.js | 2 +- .../DocumentCaptureReview.js | 2 +- .../DocumentCaptureReview.stories.js | 2 +- .../src/document-capture/DocumentCapture.js | 2 +- .../document-capture/DocumentCapture.stories.js | 2 +- .../components/selfie/src/SelfieCaptureScreens.js | 2 +- .../selfie/src/SelfieCaptureScreens.stories.js | 4 ++-- .../SelfieCaptureInstructions.js | 2 +- .../SelfieCaptureInstructions.stories.js | 2 +- .../selfie-capture-review/SelfieCaptureReview.js | 2 +- .../SelfieCaptureReview.stories.js | 2 +- .../selfie/src/selfie-capture/SelfieCapture.js | 2 +- .../src/selfie-capture/SelfieCapture.stories.js | 2 +- .../components/signature-pad/src/SignaturePad.js | 2 +- .../signature-pad/src/SignaturePad.stories.js | 2 +- .../smart-camera-web/src/SmartCameraWeb.js | 2 +- .../smart-camera-web/src/SmartCameraWeb.stories.js | 2 +- 22 files changed, 33 insertions(+), 29 deletions(-) diff --git a/packages/web-components/components/camera-permission/CameraPermission.js b/packages/web-components/components/camera-permission/CameraPermission.js index 429e5d6e..f9878992 100644 --- a/packages/web-components/components/camera-permission/CameraPermission.js +++ b/packages/web-components/components/camera-permission/CameraPermission.js @@ -129,7 +129,7 @@ class CameraPermission extends HTMLElement { } get themeColor() { - return this.getAttribute('theme-color') || '#043C93'; + return this.getAttribute('theme-color') || '#001096'; } } diff --git a/packages/web-components/components/camera-permission/CameraPermission.stories.js b/packages/web-components/components/camera-permission/CameraPermission.stories.js index 9c940724..3df21a24 100644 --- a/packages/web-components/components/camera-permission/CameraPermission.stories.js +++ b/packages/web-components/components/camera-permission/CameraPermission.stories.js @@ -1,21 +1,27 @@ import './CameraPermission'; const meta = { + args: { + 'theme-color': '#001096', + }, + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'camera-permission', }; export default meta; export const CameraPermission = { - render: () => ` - + render: (args) => ` + `, }; export const CameraPermissionAtributes = { - render: () => ` - + render: (args) => ` + `, }; diff --git a/packages/web-components/components/document/src/DocumentCaptureScreens.js b/packages/web-components/components/document/src/DocumentCaptureScreens.js index 57c6ef51..193b4ccd 100644 --- a/packages/web-components/components/document/src/DocumentCaptureScreens.js +++ b/packages/web-components/components/document/src/DocumentCaptureScreens.js @@ -295,7 +295,7 @@ class DocumentCaptureScreens extends HTMLElement { } get themeColor() { - return this.getAttribute('theme-color') || '#043C93'; + return this.getAttribute('theme-color') || '#001096'; } handleBackEvents() { diff --git a/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js b/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js index 5f03c5e6..44799211 100644 --- a/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js +++ b/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js @@ -2,7 +2,7 @@ import './index'; const meta = { args: { - 'theme-color': '#d72c2c', + 'theme-color': '#001096', }, argTypes: { 'theme-color': { control: 'color' }, @@ -28,9 +28,7 @@ export const DocumentCaptureHiddenInstructions = { export const DocumentCaptureHideBackOfId = { render: (args) => ` - + `, }; diff --git a/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js b/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js index 944b76f6..f554109a 100644 --- a/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js +++ b/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js @@ -443,7 +443,7 @@ class DocumentInstruction extends HTMLElement { } get themeColor() { - return this.getAttribute('theme-color') || '#043C93'; + return this.getAttribute('theme-color') || '#001096'; } get hideAttribution() { diff --git a/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js b/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js index 7d5cc819..01bb76f7 100644 --- a/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js +++ b/packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js @@ -11,7 +11,7 @@ export default meta; export const DocumentInstruction = { args: { - 'theme-color': '#d72c2c', + 'theme-color': '#001096', }, render: (args) => ` ` ` @@ -21,7 +21,7 @@ export const SelfieCaptureFlow = { export const SelfieCaptureFlowHiddenInstructions = { args: { - 'theme-color': '#d72c2c', + 'theme-color': '#001096', }, render: (args) => ` diff --git a/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js b/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js index 1edeab71..44cd1021 100644 --- a/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js +++ b/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js @@ -604,7 +604,7 @@ class SelfieCaptureInstructions extends HTMLElement { } get themeColor() { - return this.getAttribute('theme-color') || '#043C93'; + return this.getAttribute('theme-color') || '#001096'; } get hideAttribution() { diff --git a/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js b/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js index 2ac0ab4d..54559595 100644 --- a/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js +++ b/packages/web-components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js @@ -11,7 +11,7 @@ export default meta; export const SelfieInstruction = { args: { - 'theme-color': '#d72c2c', + 'theme-color': '#001096', }, render: (args) => ` ` ({ diff --git a/packages/web-components/components/signature-pad/src/SignaturePad.js b/packages/web-components/components/signature-pad/src/SignaturePad.js index 28f2c109..66d3bbf5 100644 --- a/packages/web-components/components/signature-pad/src/SignaturePad.js +++ b/packages/web-components/components/signature-pad/src/SignaturePad.js @@ -470,7 +470,7 @@ button:disabled { } get themeColor() { - return this.getAttribute('theme-color') || '#043C93'; + return this.getAttribute('theme-color') || '#001096'; } } diff --git a/packages/web-components/components/signature-pad/src/SignaturePad.stories.js b/packages/web-components/components/signature-pad/src/SignaturePad.stories.js index 3057e1ef..f36acd03 100644 --- a/packages/web-components/components/signature-pad/src/SignaturePad.stories.js +++ b/packages/web-components/components/signature-pad/src/SignaturePad.stories.js @@ -2,7 +2,7 @@ import './SignaturePad'; const meta = { args: { - 'theme-color': '#d72c2c', + 'theme-color': '#001096', }, argTypes: { 'theme-color': { control: 'color' }, diff --git a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js index 5a912bf4..f838e8b1 100644 --- a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js +++ b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js @@ -241,7 +241,7 @@ class SmartCameraWeb extends HTMLElement { } get themeColor() { - return this.getAttribute('theme-color') || '#043C93'; + return this.getAttribute('theme-color') || '#001096'; } setActiveScreen(screen) { diff --git a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js index d60de24f..8a572396 100644 --- a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js +++ b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.stories.js @@ -2,7 +2,7 @@ import './SmartCameraWeb'; const meta = { args: { - 'theme-color': '#d72c2c', + 'theme-color': '#001096', }, argTypes: { 'theme-color': { control: 'color' }, From 84fedbdab469a716889fd908951aa93bb1a988b5 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Thu, 8 Aug 2024 09:33:55 +0000 Subject: [PATCH 11/16] Add theme color support to end user consent --- .../components/end-user-consent/src/EndUserConsent.js | 5 +++-- .../end-user-consent/src/EndUserConsent.stories.js | 10 ++++++++-- packages/web-components/styles/src/styles.js | 5 ++++- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/web-components/components/end-user-consent/src/EndUserConsent.js b/packages/web-components/components/end-user-consent/src/EndUserConsent.js index 87396b30..cc555a62 100644 --- a/packages/web-components/components/end-user-consent/src/EndUserConsent.js +++ b/packages/web-components/components/end-user-consent/src/EndUserConsent.js @@ -124,7 +124,7 @@ function templateString() { button:hover, button:focus, button:active { - --button-color: var(--color-active); + --button-color: var(--theme-color); } button:disabled { @@ -314,7 +314,7 @@ function templateString() { color: var(--color-danger); } - ${styles} + ${styles(this.themeColor)}