Merge branch 'main' into allow-hiding-attribution

smileidentity · Aug 28, 2024 · 82795fb · 82795fb
2 parents 38feb09 + 18ea6cd
commit 82795fb
Show file tree

Hide file tree

Showing 17 changed files with 51 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,10 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.9] - 2024-08-28
+
 ### Added
 
 - Added new designs to smart selfie authentication
 
+### Changed
+
+- Fix theme color not affecting biometric and smart selfie authentication
+
 ## [1.3.8] - 2024-08-15
 
 ### Changed

diff --git a/example/package.json b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "1.3.8",
+  "version": "1.3.9",
   "type": "module",
   "main": "server.js",
   "scripts": {

diff --git a/example/style.css b/example/style.css
@@ -422,7 +422,7 @@ button[data-type='icon'] {
 
 .back-button-text {
   line-height: 1;
-  color: rgb(21, 31, 114);
+  color: var(--color-default, rgb(21, 31, 114));
 }
 
 .user-details {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "A collection of SmileID browser clients and components",
   "main": "index.js",
   "private": true,

diff --git a/packages/embed/package.json b/packages/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smileid/embed",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "Self Hosted Integration for Smile Identity on the Web",
   "private": true,
   "main": "inline.js",

diff --git a/packages/embed/src/basic-kyc.html b/packages/embed/src/basic-kyc.html
@@ -270,12 +270,14 @@ <h1 class="center font-size-500 max-width:100ch">Select ID Type</h1>
                   opacity=".4"
                 />
                 <path
-                  fill="#001096"
+                  fill="var(--color-default, #001096)"
                   d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
                 />
               </svg>
             </button>
-            <div class="back-button-text">Back</div>
+            <div class="back-button-text" style="color: var(--color-default)">
+              Back
+            </div>
           </div>
           <button data-type="icon" type="button" class="close-iframe">
             <svg

diff --git a/packages/embed/src/biometric-kyc.html b/packages/embed/src/biometric-kyc.html
@@ -274,7 +274,7 @@ <h1 class="center font-size-500 max-width:100ch">Select ID Type</h1>
                   opacity=".4"
                 />
                 <path
-                  fill="#001096"
+                  fill="var(--color-default, #001096)"
                   d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
                 />
               </svg>

diff --git a/packages/embed/src/css/styles.css b/packages/embed/src/css/styles.css
@@ -327,6 +327,7 @@ button[data-type='icon'] {
 
 .back-button-text {
   line-height: 1;
+  font-size: 14px;
   color: rgb(21, 31, 114);
 }
 

diff --git a/packages/embed/src/ekyc.html b/packages/embed/src/ekyc.html
@@ -270,7 +270,7 @@ <h1 class="center font-size-500 max-width:100ch">Select ID Type</h1>
                   opacity=".4"
                 />
                 <path
-                  fill="#001096"
+                  fill="var(--color-default, #001096)"
                   d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
                 />
               </svg>

diff --git a/packages/smart-camera-web/package.json b/packages/smart-camera-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smile_identity/smart-camera-web",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "WebComponent for smartly capturing images on the web, for use with SmileIdentity",
   "main": "smart-camera-web.js",
   "scripts": {

diff --git a/packages/web-components/components/end-user-consent/src/EndUserConsent.js b/packages/web-components/components/end-user-consent/src/EndUserConsent.js
@@ -164,8 +164,8 @@ function templateString() {
       
       .back-button-text {
         font-size: 11px;
-        line-height: 11px;
-        color: rgb(21, 31, 114);
+        line-height: 1;
+        color: ${this.themeColor} !important;
       }
 
       img {
@@ -231,7 +231,7 @@ function templateString() {
         gap: 0.5rem;
       }
       .processing-list__item__title {
-        color: #151F72;
+        color: var(--color-theme);
       }
 
       .processing-list__items-item__description {
@@ -323,7 +323,7 @@ function templateString() {
             <button type='button' data-type='icon' id="back-button" class="back-button">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                 <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
-                <path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
+                <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
               </svg>
             </button>
             <div class="back-button-text">Back</div>

diff --git a/...components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js b/...components/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js
@@ -577,6 +577,7 @@ class SelfieCaptureInstructions extends HTMLElement {
 
     this.allowButton = this.shadowRoot.querySelector('#allow');
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
+    this.cancelButton = this.shadowRoot.querySelector('#cancel');
 
     this.navigation.addEventListener('navigation.back', () => {
       this.handleBackEvents();
@@ -597,6 +598,10 @@ class SelfieCaptureInstructions extends HTMLElement {
       },
       false,
     );
+
+    this.cancelButton.addEventListener('click', () => {
+      this.handleBackEvents();
+    });
   }
 
   get hideBack() {

diff --git a/packages/web-components/components/signature-pad/package.json b/packages/web-components/components/signature-pad/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "private": "true",
   "exports": {
     ".": "./index.js"

diff --git a/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js b/packages/web-components/components/smart-camera-web/src/SmartCameraWeb.js
@@ -67,7 +67,6 @@ class SmartCameraWeb extends HTMLElement {
       'hide-back-of-id',
       'hide-back-to-host',
       'show-navigation',
-      'hide-back-of-id',
       'theme-color',
       'hide-attribution',
     ];
@@ -82,6 +81,7 @@ class SmartCameraWeb extends HTMLElement {
       case 'hide-back-of-id':
       case 'hide-back-to-host':
       case 'show-navigation':
+      case 'theme-color':
         this.disconnectedCallback();
         this.shadowRoot.innerHTML = this.render();
         this.setUpEventListeners();

diff --git a/packages/web-components/components/totp-consent/src/TotpConsent.js b/packages/web-components/components/totp-consent/src/TotpConsent.js
@@ -196,7 +196,7 @@ function markup() {
             .back-button-text {
                 font-size: 11px;
                 line-height: 11px;
-                color: rgb(21, 31, 114);
+                color: ${this.themeColor || 'rgb(21, 31, 114)'};
             }
 
             #error,
@@ -290,7 +290,7 @@ function markup() {
                     <button type='button' data-type='icon' id="back-button" class="back-button">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                             <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
-                            <path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
+                            <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
                         </svg>
                     </button>
                     <div class="back-button-text">Back</div>
@@ -337,7 +337,7 @@ function markup() {
                     <button type='button' data-type='icon' id="back-to-entry-button" class="back-button">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                             <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
-                            <path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
+                            <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
                         </svg>
                     </button>
                     <div class="back-button-text">Back</div>
@@ -893,6 +893,18 @@ class TotpConsent extends HTMLElement {
     return this.getAttribute('token');
   }
 
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
+  get hideBack() {
+    return this.hasAttribute('hide-back');
+  }
+
+  get showNavigation() {
+    return this.hasAttribute('show-navigation');
+  }
+
   handleTotpConsentGrant() {
     const customEvent = new CustomEvent('end-user-consent.totp.granted', {
       detail: {

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "private": "true",
   "exports": {
     ".": "./index.js",