Openmail · potench · May 17, 2021 · May 18, 2021 · Jun 7, 2021 · Jun 8, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [2.1.8](https://github.com/openmail/system1-cmp/compare/2.1.7...2.1.8) (2021-05-17)
+
+### Feat
+
+- [x] Upgrade vendor list and script to download vendor list 
+- [ ] Add relative position modal solution
+- [ ] Pass theme colors through to anchors
+
+
 ## [2.1.7](https://github.com/openmail/system1-cmp/compare/2.1.6...2.1.7) (2021-03-05)
 
 ### Feat

diff --git a/README.md b/README.md
@@ -224,6 +224,8 @@ __tcfapi('init', 2, () => {}, {
 | `shouldUseStacks`      | optional boolean | `true`                                  | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant                      |
 | `isSlimMode`           | optional boolean | `false`                                 | If `true`, initial banner is low profile, full width banner <sup>v2.1.4+</sup>                                    |
 | `shouldShowCloseX`     | optional boolean | `false`                                 | If `true`, a &times; icon will appear in the upper right on layers to accept-all and close <sup>v2.1.4+</sup>     |
+| `isInlineMode`         | optional boolean | `false`                                 | If `true`, banner will be relative positioned instead of overlay <sup>v2.1.8+</sup>                               |
+| `insertionNode` 	   	 | optional string  | `<body>`                                | UI will be appended to this element using `querySelector`. Default behavior appends to body <sup>v2.1.8+</sup>    |
 
 ### theme
 

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "system1-cmp",
-	"version": "2.1.7",
-	"cmpVersion": 5,
+	"version": "2.1.8",
+	"cmpVersion": 6,
 	"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
 	"scripts": {
 		"clean": "rimraf ./dist",
 		"dev": "yarn dev:s1",
-		"dev:s1": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress --config config/s1.webpack.config.babel.js",
+		"dev:s1": "cross-env PORT=3030 NODE_ENV=development webpack-dev-server --inline --hot --progress --config config/s1.webpack.config.babel.js",
 		"dev:original": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress --config config/webpack.config.babel.js",
 		"start": "serve dist -c 1",
 		"prestart": "npm run build",

diff --git a/scripts/run.js b/scripts/run.js
@@ -8,7 +8,7 @@ const fs = require('fs');
 const https = require('https');
 const { LANGUAGES } = require('../src/s1/constants.js');
 
-const VENDOR_LIST_URL = 'https://vendorlist.consensu.org/v2/vendor-list.json';
+const VENDOR_LIST_URL = 'https://vendor-list.consensu.org/v2/vendor-list.json';
 
 const externalFiles = [
 	{
@@ -50,7 +50,7 @@ const processFiles = () => {
 		LANGUAGES.filter(({ shouldDisablePurposesFetch = false }) => !shouldDisablePurposesFetch).forEach(
 			({ display, code }) => {
 				downloadFile(
-					`https://vendorlist.consensu.org/v2/purposes-${code}.json`,
+					`https://vendor-list.consensu.org/v2/purposes-${code}.json`,
 					`src/s1/config/2.0/purposes/purposes-${code}.json`
 				)
 					.then(() => {

diff --git a/src/s1/components/banner/banner.less b/src/s1/components/banner/banner.less
@@ -17,26 +17,16 @@
 	color: @color-textLight;
 	background: #fff;
 	font-size: 16px;
-	transition: transform 350ms ease-in-out, opacity 350ms linear;		
+	transition: transform 350ms ease-in-out, opacity 350ms linear;
 	margin: auto;
 
 	&.bannerShadow {
 		box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.12), 0 -4px 4px rgba(0, 0, 0, 0.12),
 		0 -8px 8px rgba(0, 0, 0, 0.12), 0 -16px 16px rgba(0, 0, 0, 0.12);	
 	}
 
-	&.bannerRounded {
-		border-top-left-radius: 25px;
-		border-top-right-radius: 25px;
-		border-bottom-left-radius: 10px;
-		border-bottom-right-radius: 10px;
-		width: calc(100% - 50px);
-		max-width: 1024px;
-	}
-
 	@media @smartphone {
 		padding: 15px 10px;
-		width: calc(100% - 20px);
 	}
 
 	&.hidden {
@@ -46,11 +36,6 @@
 		transition-delay: 250ms;
 	}
 
-	&.bannerInline {
-		position: relative;
-		box-shadow: none;
-	}
-
 	&.bannerModal {
 		top: 0;
 		display: flex;
@@ -104,6 +89,10 @@
 			margin-bottom: 0;
 			padding: 0 30px 30px;
 
+			.message {
+				padding-bottom: 0;
+			}
+
 			@media @smartphone {
 				padding: 12px 20px 0;
 
@@ -139,6 +128,51 @@
 		}
 	}
 
+	&.bannerInline {
+		position: relative;
+		// max-height: 680px;
+
+		&.hidden {
+			pointer-events: none;
+			transform: translateY(0px);
+			opacity: 0;
+			transition-delay: 250ms;
+			padding-top: 0;
+			max-height: 0px;
+			transition: transform 350ms ease-in-out, opacity 350ms linear, max-height 350ms ease-in-out, padding 350ms ease-in-out;
+			overflow: hidden;
+		}
+
+		.content {
+			margin-bottom: 0px;
+
+			.message {
+				padding-bottom: 60px;
+			}
+		}
+
+		&.bannerSlim {
+			.content {
+				.message {
+					padding-bottom: 0;
+				}
+			}
+		}
+	}
+
+	&.bannerRounded {
+		border-top-left-radius: 25px;
+		border-top-right-radius: 25px;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		width: calc(100% - 50px);
+		max-width: 1024px;
+
+		@media @smartphone {
+			width: calc(100% - 20px);
+		}
+	}
+
 	.content {
 		max-height: 60vh;
 		padding-left: 30px;
@@ -150,6 +184,14 @@
 		-webkit-overflow-scrolling: touch;
 		transition: max-height 350ms ease-in-out;
 
+		&.animated {
+			overflow: auto;
+			animation: hide-scroll 500ms backwards;
+			@keyframes hide-scroll {
+				from, to { overflow: hidden; } 
+			}
+		}
+
 		@media @smartphone {
 			padding-top: 0px;
 			padding-left: 5px;
@@ -200,6 +242,7 @@
 
 			@media @smartphone {
 				display: block;
+				padding-bottom: 50px;
 			}
 
 			.info {

diff --git a/src/s1/components/banner/bannerSlim.jsx b/src/s1/components/banner/bannerSlim.jsx
@@ -138,14 +138,17 @@ export default class BannerSlim extends Component {
 		const {
 			config: { theme, shouldShowCloseX, },
 			translations,
-			maxHeightModal,			
+			maxHeightModal,
+			minHeightModal
 		} = store;
 
 		const {
 			isBannerModal,
 			isBannerInline,
+			isFullWidth,
 			maxWidthModal,
 			// maxHeightModal, // handled in store
+			// minHeightModal, // handled in store
 			primaryColor,
 			primaryTextColor,
 			backgroundColor,
@@ -158,7 +161,10 @@ export default class BannerSlim extends Component {
 		if (!isShowing) {
 			bannerClasses.push(style.hidden);
 		}
-		if( shouldShowDropShadow ) {
+		if (!isFullWidth) {
+			bannerClasses.push(style.bannerRounded);
+		}
+		if (shouldShowDropShadow) {
 			bannerClasses.push(style.bannerShadow);
 		}
 		if (isBannerModal) {
@@ -174,13 +180,15 @@ export default class BannerSlim extends Component {
 					backgroundColor,
 					color: textLightColor,
 					...(maxWidthModal ? { maxWidth: maxWidthModal } : {}),
+					// ...(minHeightModal ? { minHeight: minHeightModal } : {}),
 				}}
 			>
 				<div
-					class={[style.content, style.layer1, hasScrolled ? style.scrolling : ''].join(' ')}
+					class={[style.content, style.layer1, style.animated, hasScrolled ? style.scrolling : ''].join(' ')}
 					ref={(el) => (this.scrollRef = el)}
 					style={{
 						maxHeight: maxHeightModal,
+						minHeight: minHeightModal
 					}}
 				>
 					{ shouldShowCloseX && <div class={style.closeX} onClick={this.handleClose}>&times;</div>}

diff --git a/src/s1/components/banner/bannerStacks.jsx b/src/s1/components/banner/bannerStacks.jsx
@@ -148,9 +148,11 @@ export default class BannerStacks extends Component {
 			isBannerModal,
 			isBannerInline,
 			maxWidthModal,
+			minHeightModal,
 			isFullWidth,
 			shouldShowDropShadow,
 			// maxHeightModal, // handled in store
+			maxHeightInline,
 			primaryColor,
 			primaryTextColor,
 			backgroundColor,
@@ -187,7 +189,8 @@ export default class BannerStacks extends Component {
 					class={[style.content, style.layer1, hasScrolled ? style.scrolling : ''].join(' ')}
 					ref={(el) => (this.scrollRef = el)}
 					style={{
-						maxHeight: maxHeightModal,
+						maxHeight: (isBannerInline ? `min(${maxHeightInline}, ${maxHeightModal})` : maxHeightModal),
+						...(minHeightModal ? { minHeight: minHeightModal } : {}),
 					}}
 				>
 					{ shouldShowCloseX && <div class={style.closeX} onClick={this.handleClose}>&times;</div>}

diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx
@@ -86,18 +86,29 @@ export default class BannerVendors extends Component {
 			isSaveShowing,
 			translations,
 			maxHeightModal,			
+			minHeightModal
 		} = store;
 
-		const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, isFullWidth, shouldShowDropShadow, } = theme;
+		const { 
+			isBannerModal,
+			isBannerInline,
+			primaryColor,
+			primaryTextColor,
+			backgroundColor,
+			textLightColor,
+			isFullWidth,
+			shouldShowDropShadow,
+			maxHeightInline
+		} = theme;
 
 		const bannerClasses = [style.banner];
 		if (!isShowing) {
 			bannerClasses.push(style.hidden);
 		}
-		if( !isFullWidth ) {
+		if (!isFullWidth) {
 			bannerClasses.push(style.bannerRounded);
-		}		
-		if( shouldShowDropShadow ) {
+		}
+		if (shouldShowDropShadow) {
 			bannerClasses.push(style.bannerShadow);
 		}
 		if (isBannerModal) {
@@ -116,9 +127,10 @@ export default class BannerVendors extends Component {
 				}}
 			>
 				<div
-					class={style.content}
+					class={[style.content].join(' ')}
 					style={{
-						maxHeight: maxHeightModal,
+						maxHeight: (isBannerInline ? `min(${maxHeightInline}, ${maxHeightModal})` : maxHeightModal),
+						...(minHeightModal ? { minHeight: minHeightModal } : {}),
 					}}
 				>
 					{ shouldShowCloseX && <div class={style.closeX} onClick={this.handleClose}>&times;</div>}

diff --git a/src/s1/config/2.0/purposes/purposes-bg.json b/src/s1/config/2.0/purposes/purposes-bg.json
diff --git a/src/s1/config/2.0/purposes/purposes-ca.json b/src/s1/config/2.0/purposes/purposes-ca.json
diff --git a/src/s1/config/2.0/purposes/purposes-cs.json b/src/s1/config/2.0/purposes/purposes-cs.json
diff --git a/src/s1/config/2.0/purposes/purposes-da.json b/src/s1/config/2.0/purposes/purposes-da.json
diff --git a/src/s1/config/2.0/purposes/purposes-de.json b/src/s1/config/2.0/purposes/purposes-de.json
diff --git a/src/s1/config/2.0/purposes/purposes-el.json b/src/s1/config/2.0/purposes/purposes-el.json
diff --git a/src/s1/config/2.0/purposes/purposes-es.json b/src/s1/config/2.0/purposes/purposes-es.json
diff --git a/src/s1/config/2.0/purposes/purposes-et.json b/src/s1/config/2.0/purposes/purposes-et.json
diff --git a/src/s1/config/2.0/purposes/purposes-fi.json b/src/s1/config/2.0/purposes/purposes-fi.json
diff --git a/src/s1/config/2.0/purposes/purposes-fr.json b/src/s1/config/2.0/purposes/purposes-fr.json
diff --git a/src/s1/config/2.0/purposes/purposes-hr.json b/src/s1/config/2.0/purposes/purposes-hr.json
diff --git a/src/s1/config/2.0/purposes/purposes-hu.json b/src/s1/config/2.0/purposes/purposes-hu.json
diff --git a/src/s1/config/2.0/purposes/purposes-it.json b/src/s1/config/2.0/purposes/purposes-it.json
diff --git a/src/s1/config/2.0/purposes/purposes-ja.json b/src/s1/config/2.0/purposes/purposes-ja.json
diff --git a/src/s1/config/2.0/purposes/purposes-lt.json b/src/s1/config/2.0/purposes/purposes-lt.json
diff --git a/src/s1/config/2.0/purposes/purposes-lv.json b/src/s1/config/2.0/purposes/purposes-lv.json
diff --git a/src/s1/config/2.0/purposes/purposes-mt.json b/src/s1/config/2.0/purposes/purposes-mt.json
diff --git a/src/s1/config/2.0/purposes/purposes-nl.json b/src/s1/config/2.0/purposes/purposes-nl.json
diff --git a/src/s1/config/2.0/purposes/purposes-no.json b/src/s1/config/2.0/purposes/purposes-no.json
diff --git a/src/s1/config/2.0/purposes/purposes-pl.json b/src/s1/config/2.0/purposes/purposes-pl.json
diff --git a/src/s1/config/2.0/purposes/purposes-pt.json b/src/s1/config/2.0/purposes/purposes-pt.json
diff --git a/src/s1/config/2.0/purposes/purposes-ro.json b/src/s1/config/2.0/purposes/purposes-ro.json
diff --git a/src/s1/config/2.0/purposes/purposes-ru.json b/src/s1/config/2.0/purposes/purposes-ru.json
diff --git a/src/s1/config/2.0/purposes/purposes-sk.json b/src/s1/config/2.0/purposes/purposes-sk.json
diff --git a/src/s1/config/2.0/purposes/purposes-sl.json b/src/s1/config/2.0/purposes/purposes-sl.json
diff --git a/src/s1/config/2.0/purposes/purposes-sv.json b/src/s1/config/2.0/purposes/purposes-sv.json
diff --git a/src/s1/config/2.0/purposes/purposes-tr.json b/src/s1/config/2.0/purposes/purposes-tr.json
diff --git a/src/s1/config/2.0/purposes/purposes-zh.json b/src/s1/config/2.0/purposes/purposes-zh.json
diff --git a/src/s1/config/2.0/vendor-list.json b/src/s1/config/2.0/vendor-list.json
diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js
@@ -18,6 +18,9 @@ export const theme = {
 	// secondaryColor: '#869cc0',
 	// featuresColor: '#d0d3d7',
 	// maxWidthModal: '500px',
+	// minHeightModal: '100px',
+	// maxHeightInline: '680px', // max height of the inline SCREEN_0
+	isBannerInline: false, // inline styling instead of modal/overlay
 	isFullWidth: false,
 	shouldShowDropShadow: true,
 	shouldAutoResizeModal: true,
@@ -35,6 +38,7 @@ export const config = {
 	ccpaApplies: false,
 	experimentId: 'control',
 	isSlimMode: false,
+	insertionNode: '', // target dom node to append UI
 	shouldShowCloseX: false,
 	gdprApplies: false,
 	gdprConsentUrlParam,

diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js
@@ -19,6 +19,7 @@ export default class Store {
 	config = config;
 	displayLayer1; // stacks
 	maxHeightModal = 0;
+	minHeightModal = 0;
 	shouldAutoResizeModal = false;
 	manualVendorConsents = new Set(); // vendor-consent management partially automatic and partially manual depending on the consent screen
 	isModalShowing = false;
@@ -143,7 +144,7 @@ export default class Store {
 			gdprConsentUrlParam,
 			publisherCountryCode,
 			isServiceSpecific,
-			isSlimMode,
+			isSlimMode,	
 		} = this.config;
 		const { vendors } = this.gvl;
 
@@ -255,6 +256,7 @@ export default class Store {
 		const encodedTCString = TCString.encode(tcModelNew);
 		const shouldAutoResizeModal = isSaveShowing ? false : this.shouldAutoResizeModal;
 		const maxHeightModal = shouldShowSave ? this.theme.maxHeightModal : this.maxHeightModal;
+		const minHeightModal = shouldShowSave ? this.theme.minHeightModal : this.minHeightModal;
 
 		const { vendorConsents, purposeConsents, specialFeatureOptins } = tcModelNew;
 		const { purposes, specialFeatures, vendors } = this.gvl;
@@ -277,6 +279,7 @@ export default class Store {
 				isSaveShowing,
 				hasSession,
 				maxHeightModal,
+				minHeightModal,
 				shouldAutoResizeModal,
 			},
 			true
@@ -326,10 +329,12 @@ export default class Store {
 		const { theme } = this;
 		const maxHeightModal =
 			shouldAutoResizeModal && dynamicMaxHeightModal ? dynamicMaxHeightModal : theme.maxHeightModal;
+		const minHeightModal = shouldAutoResizeModal && dynamicMaxHeightModal ? 0 : (theme.minHeightModal || 0);
 		// only set if there's a change
 		if (shouldAutoResizeModal !== this.shouldAutoResizeModal || maxHeightModal !== this.maxHeightModal) {
 			this.setState({
 				maxHeightModal,
+				minHeightModal,
 				shouldAutoResizeModal,
 			});
 		}