Pfe 4216

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [2.1.4](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-05)
+
+### Feat
+
+- [x] Adds new slim banner with feature flag
+- [x] Adds full width mode with feature flag
+- [x] Adds drop shadow toggle feature flag
+- [x] Adds close with × buttom feature flag
+- [x] Adds default background color override 
+
 ## [2.1.3](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-03)
 
 ### Chore

README.md

@@ -74,6 +74,7 @@ See a [working example in codepen](https://codepen.io/potench/pen/GRZZprw).
 			publisherCountryCode: 'US',
 			// language: '', // empty string or unset to default to browser language
 			shouldUseStacks: true,
+			isSlimMode: true,
 			// narrowedVendors: [1, 2, 3, 4, 5, 6],
 			theme: {
 				boxShadow: 'none',
@@ -83,6 +84,7 @@ See a [working example in codepen](https://codepen.io/potench/pen/GRZZprw).
 				secondaryColor: '#869cc0',
 				shouldAutoResizeModal: true, // resizes modal on stacks screen to push stacks below fold
 				textLinkColor: '#0099ff',
+				isFullWidth: false,
 			},
 		}
 	);
@@ -220,21 +222,25 @@ __tcfapi('init', 2, () => {}, {
 | `publisherCountryCode` | optional string  | `US`                                    | String representing country code of parent website business                                                       |
 | `isServiceSpecific`    | optional boolean | `true`                                  | true uses publisher consent, false uses global consent                                                            |
 | `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>     |
 
 ### theme
 
 Themeing is a bit limited right now. Pass in a `config.theme` object during initialization. Use the following to override styling choices:
 
-| Theme Property          | Type             | Default  | Detail                                                                                     |
-| ----------------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------ |
-| `maxHeightModal`        | optional string  | `45vh`   | CSS style for max height of the CMP UI. Example: `45vh`, `50%`, `350px`                    |
-| `maxWidthModal`         | optional string  | `1024px` | CSS style for max width of the CMP UI. Example: `1024px`, `calc(90% - 100px)`              |
-| `shouldAutoResizeModal` | optional boolean | true     | Auto detects Layer1 height to minimize UI. UI resizes to `maxHeightModal` upon interaction |
-| `primaryColor`          | optional string  | null     | Example: `#0099ff`                                                                         |
-| `textLinkColor`         | optional string  | null     | Example: `#0099ff`                                                                         |
-| `secondaryColor`        | optional string  | null     | Example: `#869cc0`                                                                         |
-| `featuresColor`         | optional string  | null     | Example: `#d0d3d7`                                                                         |
-| `featuresColor`         | optional string  | null     | Example: `#d0d3d7`                                                                         |
+| Theme Property          | Type             | Default  | Detail                                                                                                   |
+| ----------------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| `maxHeightModal`        | optional string  | `45vh`   | CSS style for max height of the CMP UI. Example: `45vh`, `50%`, `350px`                                  |
+| `maxWidthModal`         | optional string  | `1024px` | CSS style for max width of the CMP UI. Example: `1024px`, `calc(90% - 100px)`                            |
+| `shouldAutoResizeModal` | optional boolean | true     | Auto detects Layer1 height to minimize UI. UI resizes to `maxHeightModal` upon interaction               |
+| `primaryColor`          | optional string  | null     | Example: `#0099ff`                                                                                       |
+| `textLinkColor`         | optional string  | null     | Example: `#0099ff`                                                                                       |
+| `secondaryColor`        | optional string  | null     | Example: `#869cc0`                                                                                       |
+| `featuresColor`         | optional string  | null     | Example: `#d0d3d7`                                                                                       |
+| `backgroundColor`       | optional string  | null     | Example: `#d0d3d7` Sets the background color of the banners.  <sup>v2.1.4+</sup>                         |
+| `isFullWidth`           | optional boolean | false    | Removes rounded corners and makes banners full width - matching style layout slimMode <sup>v2.1.4+</sup> |
+| `shouldShowDropShadow`  | optional boolean | true     | When set to `true`, displays the drop shadoq on banners <sup>v2.1.4+</sup>                               |
 
 ## Initialize With Euconsent String from URL Param
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "system1-cmp",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"cmpVersion": 5,
 	"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
 	"scripts": {

src/s1/components/app.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import BannerStacks from './banner/bannerStacks';
 import BannerVendors from './banner/bannerVendors';
+import BannerSlim from './banner/bannerSlim';
 
 import { CONSENT_SCREENS } from '../constants';
 
@@ -47,10 +48,18 @@ export default class App extends Component {
 
 		return (
 			<div class={style.gdpr}>
-				{!consentScreen ||
+				{
+					!consentScreen ||
 					(consentScreen === CONSENT_SCREENS.STACKS_LAYER1 && (
 						<BannerStacks store={store} isShowing={shouldShowModal && tcModel} />
-					))}
+					))
+				}
+
+				{  
+					(consentScreen === CONSENT_SCREENS.SLIM_LAYER0 && (
+						<BannerSlim store={store} isShowing={shouldShowModal && tcModel} />
+					))
+				}
 
 				{consentScreen === CONSENT_SCREENS.VENDORS_LAYER3 && (
 					<BannerVendors store={store} isShowing={shouldShowModal && tcModel} />

src/s1/components/banner/banner.less

@@ -15,19 +15,25 @@
 	padding-left: 0px;
 	z-index: 99999;
 	color: @color-textLight;
-	background: white;
+	background: #fff;
 	font-size: 16px;
-	transition: transform 350ms ease-in-out, opacity 350ms linear;
-	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);
-	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;
+	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);
@@ -66,7 +72,7 @@
 			overflow: auto;
 			-webkit-overflow-scrolling: touch;
 			box-sizing: border-box;
-			background: #fff;
+			/*background: #fff;*/
 			display: flex;
 			flex-wrap: wrap;
 			align-items: center;
@@ -79,6 +85,60 @@
 		}
 	}
 
+	&.bannerSlim {
+		width: 100%;
+		max-width: 100%;
+		border-radius: 0;
+		display: flex;
+		flex-direction: row;
+		align-items: stretch;
+		padding-top: 30px;
+
+		@media @smartphone {
+			flex-direction: column;
+			padding-top: 20px;
+		}
+
+		.content {
+			flex: 3;
+			margin-bottom: 0;
+			padding: 0 30px 30px;
+
+			@media @smartphone {
+				padding: 12px 20px 0;
+
+				.message {
+					padding-bottom: 0;
+					.info {
+						div.title {
+							margin-bottom: 15px;
+						}
+					}
+				}
+			}
+		}
+
+		.navigation {
+			flex: 1;
+			box-shadow: none;
+			position: static;
+			flex-direction: column-reverse;
+			align-items: stretch;
+			justify-content: center; 
+			gap: 1em;
+
+			a {
+				@media @smartphone {
+					padding: 12px
+				}
+
+				&.continue {
+					margin: 0;
+				}
+			}
+		}
+	}
+
 	.content {
 		max-height: 60vh;
 		padding-left: 30px;
@@ -168,6 +228,22 @@
 				}
 			}
 		}
+
+		.closeX {
+			position: absolute;
+			right: 20px;
+			top: -20px;
+			width: 40px;
+			height: 40px;
+			line-height: 40px;
+			text-align: center;
+			border-radius: 20px;
+			border: 1px solid rgba( 0, 0, 0, 0.5 );
+			background: #fff;
+			font-size: 30px;
+			cursor: pointer;
+			font-family: arial,sans-serif;
+		}
 	}
 
 	.navigation {
@@ -185,12 +261,7 @@
 		border-top-right-radius: 10px;
 		box-shadow: 20px -30px 10px -30px rgba(0, 0, 0, 0.05), -10px -30px 10px -30px rgba(0, 0, 0, 0.05),
 			0px -30px 10px -40px rgba(150, 0, 0, 0.1);
-		background: linear-gradient(
-			180deg,
-			rgba(255, 255, 255, 0.9) 0%,
-			rgba(255, 255, 255, 1) 20%,
-			rgba(255, 255, 255, 1) 100%
-		);
+		background-color: inherit;
 		font-size: 18px;
 		display: flex;