Merge pull request #12 from adjust/v102

Version 1.0.2

CHANGELOG.md

@@ -1,3 +1,11 @@
+### Version 1.0.2 (13th December 2023)
+
+#### Fixed
+- Fixed issue with wrong banner position among other sibling elements when attached to a custom `bannerParent`.
+- Fixed banner styles to avoid unintentional override by client styles.
+
+---
+
 ### Version 1.0.1 (5th December 2023)
 
 #### Fixed

README.md

@@ -32,7 +32,7 @@ To <a id="loading-snippet">load Smart Banner SDK through CDN</a> paste the follo
 </script>
 ```
 
-When loading the sdk through CDN we suggest using minified version. You can target specific version like `https://cdn.adjust.com/adjust-smart-banner-1.0.1.min.js`, or you can target latest version `https://cdn.adjust.com/adjust-smart-banner-latest.min.js` if you want automatic updates without need to change the target file. The sdk files are cached so they are served as fast as possible, and the cache is refreshed every half an hour. If you want updates immediately make sure to target specific version.
+When loading the sdk through CDN we suggest using minified version. You can target specific version like `https://cdn.adjust.com/adjust-smart-banner-1.0.2.min.js`, or you can target latest version `https://cdn.adjust.com/adjust-smart-banner-latest.min.js` if you want automatic updates without need to change the target file. The sdk files are cached so they are served as fast as possible, and the cache is refreshed every half an hour. If you want updates immediately make sure to target specific version.
 
 
 ## <a id="initialization">Initialization</a>

demo/package.json

@@ -10,7 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@adjustcom/smart-banner-sdk": "^1.0.1",
+    "@adjustcom/smart-banner-sdk": "^1.0.2",
     "lorem-ipsum": "^2.0.8"
   },
   "author": "Adjust GmbH",

layout/assets/reset-styles.scss

@@ -0,0 +1,12 @@
+@import 'assets/fonts.scss';
+
+@mixin reset-styles($backgroundColor: transparent) {
+  min-width: auto;
+  min-height: auto;
+  padding: 0;
+  margin: 0;
+  background-color: $backgroundColor;
+  font-family: $fontsFamily;
+  font-size: 16px;
+  line-height: normal;
+}

layout/src/action-button/styles.module.scss

@@ -1,7 +1,11 @@
 @import 'assets/colors.scss';
 @import 'assets/fonts.scss';
 
+@import 'assets/reset-styles.scss';
+
 .action {
+  @include reset-styles;
+
   color: $ctaColor;
   background: $ctaBackgroundColor;
   border: 1px solid rgba(205, 208, 224, 0.3);

layout/src/app-icon/styles.module.scss

@@ -4,8 +4,11 @@
 
 @import 'assets/colors.scss';
 @import 'assets/fonts.scss';
+@import 'assets/reset-styles.scss';
 
 .app-icon {
+  @include reset-styles;
+
   min-width: 56px;
   width: 56px;
   height: 56px;

layout/src/banner-body/styles.module.scss

@@ -4,8 +4,11 @@
 
 @import 'assets/colors.scss';
 @import 'assets/fonts.scss';
+@import 'assets/reset-styles.scss';
 
 .banner-body {
+  @include reset-styles;
+
   display: flex;
   box-sizing: border-box;
   height: 100%;
@@ -40,6 +43,8 @@
   }
 
   .container {
+    @include reset-styles;
+
     display: flex;
     flex: 1;
     height: 100%;
@@ -69,6 +74,8 @@
     }
 
     .text-container {
+      @include reset-styles;
+
       flex: 0 1 auto;
       min-height: 0;
       min-width: 0;

layout/src/dismiss-button/styles.module.scss

@@ -3,8 +3,11 @@
 @use 'assets/size-large.scss' as large;
 
 @import 'assets/colors.scss';
+@import 'assets/reset-styles.scss';
 
 .dismiss {
+  @include reset-styles;
+
   flex-shrink: 0;
   padding: 0;
   border: none;

layout/src/smart-banner-view.ts

@@ -42,7 +42,7 @@ export class SmartBannerView implements SmartBannerLayout {
   }
 
   private attachBannerToParent(parent: HTMLElement) {
-    const attach = (child: HTMLElement, parent: HTMLElement, position?: Position) => {
+    const attach = (child: HTMLElement, parent: HTMLElement, position: Position) => {
       if (position === Position.Top) {
         parent.insertBefore(child, parent.firstChild);
       } else {
@@ -55,10 +55,10 @@ export class SmartBannerView implements SmartBannerLayout {
     }
 
     if (this.wrapper) {
-      attach(this.root, this.wrapper);
-      attach(this.wrapper, parent);
+      attach(this.root, this.wrapper, this.data.position);
+      attach(this.wrapper, parent, this.data.position);
     } else {
-      attach(this.root, parent);
+      attach(this.root, parent, this.data.position);
     }
   }
 

layout/src/styles.module.scss

@@ -2,6 +2,8 @@
 @use 'assets/size-medium.scss' as medium;
 @use 'assets/size-large.scss' as large;
 
+@import 'assets/reset-styles.scss';
+
 .banner-placeholder {
   height: small.$bannerHeight;
 }
@@ -12,6 +14,8 @@
 }
 
 .banner {
+  @include reset-styles;
+
   pointer-events: none;
   position: fixed;
   left: 0;

layout/src/text/styles.module.scss

@@ -4,8 +4,11 @@
 
 @import 'assets/colors.scss';
 @import 'assets/fonts.scss';
+@import 'assets/reset-styles.scss';
 
 .banner-text {
+  @include reset-styles;
+
   overflow: hidden;
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adjustcom/smart-banner-sdk-project",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Adjust Smart Banner SDK",
   "scripts": {
     "build": "npm run build --workspace=layout && npm run build --workspace=sdk && npm run build:snippet && npm run copy",

sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adjustcom/smart-banner-sdk",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Adjust Smart Banner SDK",
   "scripts": {
     "build:sdk": "webpack --config ./webpack.config.js",