From 09173e8b2cd87912d92c5296b920054ac8167aca Mon Sep 17 00:00:00 2001 From: Barnabas A Nsoh Date: Thu, 15 Aug 2024 10:08:11 +0000 Subject: [PATCH] [WebComponents]Updated colour theme (#305) * Add them color to navigation and selfie instruction screens Add theme color control to selfie instruction stories * Add theme color to selfie capture screen * Add theme color to selfie capture review screens * Add theme color to selfie capture flows * Add theme color to document capture instructions * Add theme color to document capture * Add theme to document capture review * Add theme color to document capture flows * Add theme color to new smart camera web * use primary color as default them * Add theme color support to end user consent * Fix theme color not propagating * Fix lint * update change log * Fix lint * Add theme color test --- CHANGELOG.md | 4 + packages/embed/src/js/biometric-kyc.js | 4 + packages/embed/src/js/doc-verification.js | 5 + .../src/js/enhanced-document-verification.js | 4 + packages/embed/src/js/smartselfie-auth.js | 4 + .../camera-permission/CameraPermission.js | 8 +- .../CameraPermission.stories.js | 14 +- .../document/src/DocumentCaptureScreens.js | 20 +- .../src/DocumentCaptureScreens.stories.js | 28 ++- .../DocumentCaptureInstructions.js | 64 ++--- .../DocumentCaptureInstructions.stories.js | 9 +- .../DocumentCaptureReview.js | 6 +- .../DocumentCaptureReview.stories.js | 14 +- .../src/document-capture/DocumentCapture.js | 14 +- .../DocumentCapture.stories.js | 11 +- .../end-user-consent/src/EndUserConsent.js | 5 +- .../src/EndUserConsent.stories.js | 10 +- .../components/navigation/src/Navigation.js | 12 +- .../selfie/src/SelfieCaptureScreens.js | 12 +- .../src/SelfieCaptureScreens.stories.js | 17 +- .../SelfieCaptureInstructions.js | 89 +++---- .../SelfieCaptureInstructions.stories.js | 9 +- .../SelfieCaptureReview.js | 7 +- .../SelfieCaptureReview.stories.js | 9 +- .../src/selfie-capture/SelfieCapture.js | 27 ++- .../selfie-capture/SelfieCapture.stories.js | 10 +- .../signature-pad/src/SignaturePad.js | 6 +- .../signature-pad/src/SignaturePad.stories.js | 12 +- .../smart-camera-web/src/SmartCameraWeb.js | 28 ++- .../src/SmartCameraWeb.stories.js | 26 ++- .../e2e/smart-camera-web-complete-flow.cy.js | 221 ++++++++++++++++++ .../pages/smart-camera-web-complete-flow.html | 42 ++++ packages/web-components/styles/src/styles.js | 17 +- 33 files changed, 600 insertions(+), 168 deletions(-) create mode 100644 packages/web-components/cypress/e2e/smart-camera-web-complete-flow.cy.js create mode 100644 packages/web-components/cypress/pages/smart-camera-web-complete-flow.html diff --git a/CHANGELOG.md b/CHANGELOG.md index fd374209..8da7b215 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- When `theme_color` is provided, it will now be used to style header texts and buttons + ## [1.3.6] - 2024-08-01 ### Changed diff --git a/packages/embed/src/js/biometric-kyc.js b/packages/embed/src/js/biometric-kyc.js index bf28962d..4d3663e1 100644 --- a/packages/embed/src/js/biometric-kyc.js +++ b/packages/embed/src/js/biometric-kyc.js @@ -177,6 +177,10 @@ import { version as sdkVersion } from '../../package.json'; } function initializeSession(generalConstraints, partnerConstraints) { + SmartCameraWeb.setAttribute( + 'theme-color', + config.partner_details.theme_color, + ); const supportedCountries = Object.keys(generalConstraints) .map((countryCode) => ({ code: countryCode, diff --git a/packages/embed/src/js/doc-verification.js b/packages/embed/src/js/doc-verification.js index 46de0e63..22f171c6 100644 --- a/packages/embed/src/js/doc-verification.js +++ b/packages/embed/src/js/doc-verification.js @@ -209,6 +209,11 @@ import { version as sdkVersion } from '../../package.json'; let selectedIdType; let selectedIdName; + SmartCameraWeb.setAttribute( + 'theme-color', + config.partner_details.theme_color, + ); + function loadIdTypes(countryCode) { const countryIdTypes = constraints.find( (item) => item.country.code === countryCode, diff --git a/packages/embed/src/js/enhanced-document-verification.js b/packages/embed/src/js/enhanced-document-verification.js index bf588e61..2abfccfe 100644 --- a/packages/embed/src/js/enhanced-document-verification.js +++ b/packages/embed/src/js/enhanced-document-verification.js @@ -78,6 +78,10 @@ import { version as sdkVersion } from '../../package.json'; ); function initializeSession(constraints) { + SmartCameraWeb.setAttribute( + 'theme-color', + config.partner_details.theme_color, + ); const supportedCountries = Object.keys(constraints) .map((countryCode) => ({ code: countryCode, diff --git a/packages/embed/src/js/smartselfie-auth.js b/packages/embed/src/js/smartselfie-auth.js index 408d66f1..d1ebc5f0 100644 --- a/packages/embed/src/js/smartselfie-auth.js +++ b/packages/embed/src/js/smartselfie-auth.js @@ -59,6 +59,10 @@ import { version as sdkVersion } from '../../package.json'; config = JSON.parse(event.data); partner_params = getPartnerParams(); id_info = {}; + SmartCameraWeb.setAttribute( + 'theme-color', + config.partner_details.theme_color, + ); setActiveScreen(SmartCameraWeb); } }, diff --git a/packages/web-components/components/camera-permission/CameraPermission.js b/packages/web-components/components/camera-permission/CameraPermission.js index f0fd8e25..f9878992 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') || '#001096'; + } } if (window.customElements && !window.customElements.get('camera-permission')) { 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 14c707d6..6a1d6e56 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') || '#001096'; + } + 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..44799211 100644 --- a/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js +++ b/packages/web-components/components/document/src/DocumentCaptureScreens.stories.js @@ -1,44 +1,48 @@ import './index'; const meta = { + args: { + 'theme-color': '#001096', + }, + 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: () => ` - + render: (args) => ` + `, }; export const DocumentCaptureAllowAttributes = { - render: () => ` - + render: (args) => ` + `, }; export const DocumentCaptureHideInstructionNBackOfId = { - render: () => ` - + 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 9a27b26b..7a50a8d6 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 @@ -157,10 +157,10 @@ function templateString() { return `
- +
${this.isFrontOfId ? frontDocumentIcon() : backDocumentIcon()} -

${this.title}

+

${this.title}

We'll use it to verify your identity.

@@ -182,55 +182,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}" /> @@ -262,63 +262,63 @@ function templateString() { @@ -370,7 +370,7 @@ function templateString() { ${this.hideAttribution ? '' : ''}
- ${styles} + ${styles(this.themeColor)} `; } @@ -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 9ff39bf6..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 @@ -1,16 +1,23 @@ import './index'; const meta = { + argTypes: { + 'theme-color': { control: 'color' }, + }, component: 'document-capture-instructions', }; export default meta; export const DocumentInstruction = { - render: () => ` + args: { + 'theme-color': '#001096', + }, + render: (args) => ` `, 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 ee44e8bd..547d6e77 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 @@ -285,7 +285,7 @@ class IdReview 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-review/DocumentCaptureReview.stories.js b/packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.stories.js index b8aaa802..b76cef32 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': '#001096', + }, + render: (args) => ` + `, }; diff --git a/packages/web-components/components/document/src/document-capture/DocumentCapture.js b/packages/web-components/components/document/src/document-capture/DocumentCapture.js index 5dbba97b..93290ea8 100644 --- a/packages/web-components/components/document/src/document-capture/DocumentCapture.js +++ b/packages/web-components/components/document/src/document-capture/DocumentCapture.js @@ -16,7 +16,6 @@ function hasMoreThanNColors(data, n = 16) { function templateString() { return ` - ${styles} + ${styles(this.themeColor)}

- -

${this.documentName}

+ +

${this.documentName}

${this.cameraError ? '' : ''} ${this.cameraError ? `

${this.cameraError}

` : '

Checking permissions

'} @@ -173,12 +173,12 @@ function templateString() {
-

${this.title}

-

Make sure all corners are visible and there is no glare.

+

${this.title}

+

Make sure all corners are visible and there is no glare.