buoy-bottom-banner - npm Package Compare versions

Comparing version 1.1.27 to 1.1.28

dist/index.js

@@ -12,7 +12,9 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-top: 0;\n  ", ";\n  ", ";\n  max-width: unset;\n  -webkit-text-size-adjust: 100%;\n"], ["\n  flex: 1;\n  margin-top: 0;\n  ", ";\n  ", ";\n  max-width: unset;\n  -webkit-text-size-adjust: 100%;\n"]),
+var _templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-top: 0;\n  ", ";\n  ", ";\n  max-width: unset;\n  -webkit-text-size-adjust: 100%;\n\n  a {\n    color: ", ";\n    text-decoration: underline;\n\n    :hover {\n      color: ", ";\n    }\n  }\n"], ["\n  flex: 1;\n  margin-top: 0;\n  ", ";\n  ", ";\n  max-width: unset;\n  -webkit-text-size-adjust: 100%;\n\n  a {\n    color: ", ";\n    text-decoration: underline;\n\n    :hover {\n      color: ", ";\n    }\n  }\n"]),
     _templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(80, 80, 80, 0.9);\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  width: 100%;\n  ", ";\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(80, 80, 80, 0.9);\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  width: 100%;\n  ", ";\n  ", ";\n"]),
     _templateObject3 = _taggedTemplateLiteral(["\n  max-width: 1280px;\n  position: relative;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  justify-content: space-between;\n"], ["\n  max-width: 1280px;\n  position: relative;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  justify-content: space-between;\n"]),
     _templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  ", ";\n  ", ";\n"], ["\n  position: absolute;\n  ", ";\n  ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-decoration: underline;\n\n  :hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  text-decoration: underline;\n\n  :hover {\n    color: ", ";\n  }\n"]);
+    _templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-decoration: underline;\n\n  :hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  text-decoration: underline;\n\n  :hover {\n    color: ", ";\n  }\n"]),
+    _templateObject6 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 9;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: ", ";\n  opacity: 0.7;\n"], ["\n  position: fixed;\n  z-index: 9;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: ", ";\n  opacity: 0.7;\n"]),
+    _templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 98;\n"], ["\n  position: relative;\n  z-index: 98;\n"]);
 
@@ -27,4 +29,2 @@ var _react = require("react");
 
-var _buoyTheme = require("buoy-theme");
-
 var _styledComponents = require("styled-components");
@@ -34,2 +34,6 @@
 
+var _buoyTheme = require("buoy-theme");
+
+var _buoyCore = require("buoy-core");
+
 var _buoyText = require("buoy-text");
@@ -41,2 +45,6 @@
 
+var _buoyConfig = require("buoy-config");
+
+var _brands = require("./utils/brands");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,3 +60,3 @@
 
-var BannerParagraph = (0, _styledComponents2.default)(_buoyText.Paragraph)(_templateObject, (0, _buoyTheme.responsive)("margin-bottom", "0", "0", "24px", "24px"), (0, _buoyTheme.responsive)("margin-right", "80px", "48px", "0", "0"));
+var BannerParagraph = (0, _styledComponents2.default)(_buoyText.Paragraph)(_templateObject, (0, _buoyTheme.responsive)("margin-bottom", "0", "0", "24px", "24px"), (0, _buoyTheme.responsive)("margin-right", "80px", "48px", "0", "0"), _buoyTheme.colors.neutralLightest, _buoyTheme.colors.neutralLight);
 
@@ -105,12 +113,19 @@ var Container = _styledComponents2.default.div(_templateObject2, function (props) {
 
+var Overlay = _styledComponents2.default.div(_templateObject6, _buoyTheme.colors.neutralDarkest);
+
+var CookieBannerWrapper = _styledComponents2.default.div(_templateObject7);
+
 var CookieBanner = function CookieBanner(props) {
   return _react2.default.createElement(
-    BottomBanner,
-    _extends({ buttonText: "OK", closeable: true }, props),
-    "We use cookies and similar technologies on our website to improve its performance, as well as to monitor traffic and analyze website usage. To learn more about cookies, including how to disable them, view our",
-    " ",
+    CookieBannerWrapper,
+    null,
+    props.overlay && _react2.default.createElement(Overlay, null),
     _react2.default.createElement(
-      Link,
-      { href: "/cookies" },
-      "Cookie Policy."
+      BottomBanner,
+      _extends({ buttonText: props.cta }, props),
+      _react2.default.createElement(
+        _buoyCore.RawHTML,
+        null,
+        props.text
+      )
     )
@@ -128,2 +143,9 @@ );
 
+    _this.componentDidMount = function () {
+      var brand = (0, _brands.getBrand)();
+      if (brand !== _this.state.brand) {
+        _this.setState({ brand: brand });
+      }
+    };
+
     _this.onClick = function () {
@@ -142,2 +164,3 @@ // Hide banner
     _this.state = {
+      brand: null,
       hide: false,
@@ -152,3 +175,23 @@ remove: false
     value: function render() {
-      return _react2.default.createElement(CookieBanner, _extends({}, this.state, this.props, { onClick: this.onClick }));
+      var brand = this.state.brand;
+
+
+      if (!brand || !(brand in _buoyConfig.gdprConfig)) {
+        brand = "default";
+      }
+
+      var _gdprConfig$brand = _buoyConfig.gdprConfig[brand],
+          text = _gdprConfig$brand.text,
+          cta = _gdprConfig$brand.cta,
+          overlay = _gdprConfig$brand.overlay,
+          closeable = _gdprConfig$brand.closeable;
+
+
+      return _react2.default.createElement(CookieBanner, _extends({}, this.state, this.props, {
+        cta: cta,
+        text: text,
+        closeable: closeable,
+        overlay: overlay,
+        onClick: this.onClick
+      }));
     }
@@ -155,0 +198,0 @@ }]);

package.json

 {
   "name": "buoy-bottom-banner",
-  "version": "1.1.27",
+  "version": "1.1.28",
   "description": "Buoy fixed bottom banner",
@@ -17,7 +17,8 @@ "main": "dist/index.js",
   "dependencies": {
-    "buoy-button": "^1.0.26",
+    "buoy-button": "^1.0.27",
     "buoy-close-icon": "^1.0.22",
-    "buoy-text": "^1.1.3",
-    "buoy-theme": "^1.0.24"
+    "buoy-config": "^1.0.9",
+    "buoy-text": "^1.1.4",
+    "buoy-theme": "^1.0.25"
   }
 }

src/index.js

 import React from "react"
 import Button from "buoy-button"
+import styled from "styled-components"
 import { responsive, colors, fontFamily, fontWeight } from "buoy-theme"
-import styled from "styled-components"
+import { RawHTML } from "buoy-core"
 import { Paragraph } from "buoy-text"
 import CloseIcon from "buoy-close-icon"
+import { gdprConfig } from "buoy-config"
+import { getBrand } from "./utils/brands"
 
@@ -15,2 +18,11 @@ const BannerParagraph = styled(Paragraph)`
   -webkit-text-size-adjust: 100%;
+
+  a {
+    color: ${colors.neutralLightest};
+    text-decoration: underline;
+
+    :hover {
+      color: ${colors.neutralLight};
+    }
+  }
 `
@@ -105,9 +117,27 @@
 
+const Overlay = styled.div`
+  position: fixed;
+  z-index: 9;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${colors.neutralDarkest};
+  opacity: 0.7;
+`
+
+const CookieBannerWrapper = styled.div`
+  position: relative;
+  z-index: 98;
+`
+
 const CookieBanner = props => (
-  <BottomBanner buttonText="OK" closeable {...props}>
-    We use cookies and similar technologies on our website to improve its
-    performance, as well as to monitor traffic and analyze website usage. To
-    learn more about cookies, including how to disable them, view our{" "}
-    <Link href="/cookies">Cookie Policy.</Link>
-  </BottomBanner>
+  <CookieBannerWrapper>
+    {props.overlay && <Overlay/>}
+    <BottomBanner buttonText={props.cta} {...props}>
+      <RawHTML>{props.text}</RawHTML>
+    </BottomBanner>
+  </CookieBannerWrapper>
 )
@@ -119,2 +149,3 @@
     this.state = {
+      brand: null,
       hide: false,
@@ -125,2 +156,9 @@ remove: false
 
+  componentDidMount = () => {
+    const brand = getBrand()
+    if (brand !== this.state.brand) {
+      this.setState({ brand })
+    }
+  }
+
   onClick = () => {
@@ -139,4 +177,21 @@ // Hide banner
   render() {
+
+    let { brand } = this.state
+
+    if (!brand || !(brand in gdprConfig)) { 
+      brand = "default" 
+    }
+
+    const { text, cta, overlay, closeable } = gdprConfig[brand]
+
     return (
-      <CookieBanner {...this.state} {...this.props} onClick={this.onClick} />
+      <CookieBanner
+        {...this.state}
+        {...this.props}
+        cta={cta}
+        text={text}
+        closeable={closeable}
+        overlay={overlay}
+        onClick={this.onClick}
+      />
     )
@@ -143,0 +198,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

17499

increased by39.04%

Number of package files

6

increased by50%

Lines of code

406

increased by54.37%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Addedbuoy-config@^1.0.9

• + Addedbuoy-config@1.1.4(transitive)

• Updatedbuoy-button@^1.0.27

• Updatedbuoy-text@^1.1.4

• Updatedbuoy-theme@^1.0.25