@smileid/web-components 1.0.1-beta → 1.4.2

package/components/camera-permission/CameraPermission.js

@@ -5,7 +5,7 @@ import '../navigation/src';
 
 function templateString() {
   return `
-    ${styles}
+    ${styles(this.themeColor)}
     <style>
         .camera-permission-screen {
           padding-block: 2rem;
@@ -32,7 +32,7 @@ function templateString() {
         }
     </style>
     <div class='camera-permission-screen flow center'>
-        <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
         <div class='flow center'>
           <p class='color-red | center' id='error'>
           </p>
@@ -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')) {

package/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: () => `
-        <camera-permission>
+  render: (args) => `
+        <camera-permission theme-color='${args['theme-color']}'>
         </camera-permission>
     `,
 };
 
 export const CameraPermissionAtributes = {
-  render: () => `
-        <camera-permission show-navigation>
+  render: (args) => `
+        <camera-permission theme-color='${args['theme-color']}' show-navigation>
         </camera-permission>
     `,
 };

package/components/document/src/DocumentCaptureScreens.js

@@ -32,20 +32,22 @@ class DocumentCaptureScreens extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-      ${styles}
+      ${styles(this.themeColor)}
       <div>
-      <document-capture-instructions id='document-capture-instructions-front' ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
+      <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
       <document-capture id='document-capture-front' side-of-id='Front'
       ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} 
-      ${this.documentCaptureModes} ${this.documentType}
+      ${this.documentCaptureModes} ${this.documentType} theme-color='${this.themeColor}'
       ></document-capture>
-      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='Submit Back of ID' ${this.documentCaptureModes} ${this.showNavigation} hidden></document-capture-instructions>
+      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='Submit Back of ID'
+       ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' hidden
+       ></document-capture-instructions>
       <document-capture id='document-capture-back' side-of-id='Back' ${this.title} ${this.showNavigation}
-      ${this.documentCaptureModes}
+      ${this.documentCaptureModes} theme-color='${this.themeColor}'
       hidden 
       ></document-capture>
-      <document-capture-review id='front-of-document-capture-review' hidden></document-capture-review>
-      <document-capture-review id='back-of-document-capture-review' hidden></document-capture-review>
+      <document-capture-review id='front-of-document-capture-review' theme-color='${this.themeColor}' hidden></document-capture-review>
+      <document-capture-review id='back-of-document-capture-review' theme-color='${this.themeColor}' hidden></document-capture-review>
       </div>
     `;
 
@@ -187,7 +189,7 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstructionBack.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
-        this.idReview.setAttribute('data-image', event.detail.image);
+        this.backOfIdReview.setAttribute('data-image', event.detail.image);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
           image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
@@ -196,7 +198,7 @@ class DocumentCaptureScreens extends HTMLElement {
       },
     );
     this.idCaptureBack.addEventListener('document-capture.publish', (event) => {
-      this.backOfIdReview.setAttribute('data-image', event.detail.image);
+      this.backOfIdReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
         image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
@@ -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'));
   }

package/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: () => `
-        <document-capture-screens>
+  render: (args) => `
+        <document-capture-screens theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHiddenInstructions = {
-  render: () => `
-        <document-capture-screens hide-instructions>
+  render: (args) => `
+        <document-capture-screens hide-instructions theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHideBackOfId = {
-  render: () => `
-        <document-capture-screens
-            hide-back-of-id
-        >
+  render: (args) => `
+        <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureAllowAttributes = {
-  render: () => `
-        <document-capture-screens document-capture-screens-modes='camera,upload'>
+  render: (args) => `
+        <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHideInstructionNBackOfId = {
-  render: () => `
-        <document-capture-screens hide-back-of-id hide-instructions>
+  render: (args) => `
+        <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };