@shopgate/pwa-common 7.30.0-alpha.7 → 7.30.0-alpha.8

package/components/Grid/index.js

@@ -1,9 +1,41 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{objectWithoutProps}from"../../helpers/data";import GridItem from"./components/Item";import styles,{wrap}from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { objectWithoutProps } from "../../helpers/data";
+import GridItem from "./components/Item";
+import styles, { wrap } from "./style";
+
+/**
  * The grid component.
- */var Grid=/*#__PURE__*/function(_Component){function Grid(){_classCallCheck(this,Grid);return _callSuper(this,Grid,arguments);}_inherits(Grid,_Component);return _createClass(Grid,[{key:"getProps",value:/**
+ */
+class Grid extends Component {
+  /**
    * Composes the props.
    * @returns {Object} The composed props.
-   */function getProps(){var className="".concat(this.props.className," ").concat(styles," common__grid");if(this.props.wrap){className+=" ".concat(wrap(this.props.wrap));}var props=_extends({},this.props,{className:className});return objectWithoutProps(props,['wrap','component']);}/**
+   */
+  getProps() {
+    let className = `${this.props.className} ${styles} common__grid`;
+    if (this.props.wrap) {
+      className += ` ${wrap(this.props.wrap)}`;
+    }
+    const props = {
+      ...this.props,
+      className
+    };
+    return objectWithoutProps(props, ['wrap', 'component']);
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){return React.createElement(this.props.component,this.getProps());}}]);}(Component);_defineProperty(Grid,"Item",GridItem);_defineProperty(Grid,"defaultProps",{className:'',component:'ul',wrap:false});export default Grid;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
+  }
+}
+Grid.Item = GridItem;
+Grid.defaultProps = {
+  className: '',
+  component: 'ul',
+  wrap: false
+};
+export default Grid;

package/components/Grid/spec.js

@@ -1 +1,23 @@
-import React from'react';import{shallow}from'enzyme';import Grid from"./index";describe('<Grid />',function(){it('should render without any further props',function(){var wrapper=shallow(React.createElement(Grid,null));expect(wrapper).toMatchSnapshot();});it('should be able to render a custom tag',function(){var wrapper=shallow(React.createElement(Grid,{component:"article"}));expect(wrapper).toMatchSnapshot();expect(wrapper.type()).toEqual('article');});it('should add custom classes on demand',function(){var wrapper=shallow(React.createElement(Grid,{className:"custom-class-name"}));expect(wrapper).toMatchSnapshot();expect(wrapper.hasClass('custom-class-name')).toEqual(true);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Grid from "./index";
+describe('<Grid />', () => {
+  it('should render without any further props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Grid, null));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should be able to render a custom tag', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Grid, {
+      component: "article"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.type()).toEqual('article');
+  });
+  it('should add custom classes on demand', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Grid, {
+      className: "custom-class-name"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.hasClass('custom-class-name')).toEqual(true);
+  });
+});

package/components/Grid/style.js

@@ -1,5 +1,14 @@
-import{css}from'glamor';/**
+import { css } from 'glamor';
+
+/**
  * Creates a class name for the flex-wrap property
  * @param {boolean} [value=false] TRUE for 'wrap', FALSE for 'nowrap'
  * @return {string} The class name
- */export var wrap=function wrap(){var value=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;return css({flexWrap:value?'wrap':'nowrap'}).toString();};export default css({display:'flex',minWidth:'100%'}).toString();
+ */
+export const wrap = (value = false) => css({
+  flexWrap: value ? 'wrap' : 'nowrap'
+}).toString();
+export default css({
+  display: 'flex',
+  minWidth: '100%'
+}).toString();

package/components/HtmlSanitizer/connector.js

@@ -1,9 +1,30 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{connect}from'react-redux';import{getAreComfortCookiesAccepted,getAreStatisticsCookiesAccepted}from'@shopgate/engage/tracking/selectors';import{historyPush}from"../../actions/router";/**
+import { connect } from 'react-redux';
+import { getAreComfortCookiesAccepted, getAreStatisticsCookiesAccepted } from '@shopgate/engage/tracking/selectors';
+import { historyPush } from "../../actions/router";
+
+/**
  * Maps the current application state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The populated component props.
- */var mapStateToProps=function mapStateToProps(state){return{comfortCookiesAccepted:getAreComfortCookiesAccepted(state),statisticsCookiesAccepted:getAreStatisticsCookiesAccepted(state)};};/**
+ */
+const mapStateToProps = state => ({
+  comfortCookiesAccepted: getAreComfortCookiesAccepted(state),
+  statisticsCookiesAccepted: getAreStatisticsCookiesAccepted(state)
+});
+
+/**
  * Connects the dispatch function to a callable function in the props.
  * @param  {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{navigate:function navigate(pathname,target){return dispatch(historyPush(_extends({pathname:pathname},target&&{state:{target:target}})));}};};export default connect(mapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = dispatch => ({
+  navigate: (pathname, target) => dispatch(historyPush({
+    pathname,
+    ...(target && {
+      state: {
+        target
+      }
+    })
+  }))
+});
+export default connect(mapStateToProps, mapDispatchToProps);

package/components/HtmlSanitizer/index.js

@@ -1,22 +1,114 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{embeddedMedia}from'@shopgate/pwa-common/collections';import EmbeddedMedia from"../EmbeddedMedia";import parseHTML from"../../helpers/html/parseHTML";import connect from"./connector";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { embeddedMedia } from '@shopgate/pwa-common/collections';
+import EmbeddedMedia from "../EmbeddedMedia";
+import parseHTML from "../../helpers/html/parseHTML";
+import connect from "./connector";
+
+/**
  * HtmlSanitizer component.
- */var HtmlSanitizer=/*#__PURE__*/function(_Component){/**
+ */
+class HtmlSanitizer extends Component {
+  /**
    * @param {Object} props The component props.
-   */function HtmlSanitizer(props){var _this2;_classCallCheck(this,HtmlSanitizer);_this2=_callSuper(this,HtmlSanitizer,[props]);/**
-   * If the user tapped a link element, prevent the default behavior.
-   * @param {Object} event The touchstart event.
-   */_defineProperty(_this2,"handleTap",function(event){var linkTag=event.target.closest('a');if(linkTag){var _linkTag$attributes3=linkTag.attributes,_linkTag$attributes4=_linkTag$attributes3===void 0?{}:_linkTag$attributes3,_linkTag$attributes2$7=_linkTag$attributes4.href,_linkTag$attributes2$8=_linkTag$attributes2$7===void 0?{}:_linkTag$attributes2$7,_linkTag$attributes2$9=_linkTag$attributes2$8.value,href=_linkTag$attributes2$9===void 0?'':_linkTag$attributes2$9,_linkTag$attributes2$10=_linkTag$attributes4.target,_linkTag$attributes2$11=_linkTag$attributes2$10===void 0?{}:_linkTag$attributes2$10,_linkTag$attributes2$12=_linkTag$attributes2$11.value,target=_linkTag$attributes2$12===void 0?'':_linkTag$attributes2$12;if(href){event.preventDefault();if(_this2.props.settings.handleClick){_this2.props.settings.handleClick(href,target);}else{_this2.props.navigate(href,target);}}}});_this2.htmlContainer=React.createRef();return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * If the user tapped a link element, prevent the default behavior.
+     * @param {Object} event The touchstart event.
+     */
+    this.handleTap = event => {
+      const linkTag = event.target.closest('a');
+      if (linkTag) {
+        const {
+          attributes: {
+            href: {
+              value: href = ''
+            } = {},
+            target: {
+              value: target = ''
+            } = {}
+          } = {}
+        } = linkTag;
+        if (href) {
+          event.preventDefault();
+          if (this.props.settings.handleClick) {
+            this.props.settings.handleClick(href, target);
+          } else {
+            this.props.navigate(href, target);
+          }
+        }
+      }
+    };
+    this.htmlContainer = /*#__PURE__*/React.createRef();
+  }
+
+  /**
    * Registers the event handler for when the user taps inside the html content.
-   */_inherits(HtmlSanitizer,_Component);return _createClass(HtmlSanitizer,[{key:"componentDidMount",value:function componentDidMount(){this.htmlContainer.current.addEventListener('click',this.handleTap,true);embeddedMedia.add(this.htmlContainer.current);}/**
+   */
+  componentDidMount() {
+    this.htmlContainer.current.addEventListener('click', this.handleTap, true);
+    embeddedMedia.add(this.htmlContainer.current);
+  }
+
+  /**
    * Only update if the HTML changed.
    * @param {Object} nextProps The next props for the component.
    * @return {boolean}
-   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){return nextProps.children!==this.props.children||nextProps.comfortCookiesAccepted!==this.props.comfortCookiesAccepted||nextProps.statisticsCookiesAccepted!==this.props.statisticsCookiesAccepted;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    return nextProps.children !== this.props.children || nextProps.comfortCookiesAccepted !== this.props.comfortCookiesAccepted || nextProps.statisticsCookiesAccepted !== this.props.statisticsCookiesAccepted;
+  }
+
+  /**
    * Updates embedded media within the html container.
-   */},{key:"componentDidUpdate",value:function componentDidUpdate(){embeddedMedia.add(this.htmlContainer.current);}/**
+   */
+  componentDidUpdate() {
+    embeddedMedia.add(this.htmlContainer.current);
+  }
+
+  /**
    * Removes the event handler.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.htmlContainer.current.removeEventListener('click',this.handleTap,true);embeddedMedia.remove(this.htmlContainer.current);}},{key:"render",value:/**
+   */
+  componentWillUnmount() {
+    this.htmlContainer.current.removeEventListener('click', this.handleTap, true);
+    embeddedMedia.remove(this.htmlContainer.current);
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var cookieConsentSettings={comfortCookiesAccepted:this.props.comfortCookiesAccepted,statisticsCookiesAccepted:this.props.statisticsCookiesAccepted};var innerHTML={__html:parseHTML(this.props.children,this.props.decode,this.props.settings,this.props.processStyles,cookieConsentSettings)};var Wrapper=this.props.wrapper;return React.createElement(Wrapper,{cookieConsentSettings:cookieConsentSettings},React.createElement("div",{// eslint-disable-next-line react/no-danger
-dangerouslySetInnerHTML:innerHTML,ref:this.htmlContainer,className:classNames(this.props.className,'common__html-sanitizer')}));}}]);}(Component);_defineProperty(HtmlSanitizer,"defaultProps",{children:'',className:'',decode:false,processStyles:false,settings:{},wrapper:EmbeddedMedia,comfortCookiesAccepted:false,statisticsCookiesAccepted:false});export default connect(HtmlSanitizer);
+   */
+  render() {
+    const cookieConsentSettings = {
+      comfortCookiesAccepted: this.props.comfortCookiesAccepted,
+      statisticsCookiesAccepted: this.props.statisticsCookiesAccepted
+    };
+    const innerHTML = {
+      __html: parseHTML(this.props.children, this.props.decode, this.props.settings, this.props.processStyles, cookieConsentSettings)
+    };
+    const {
+      wrapper: Wrapper
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      cookieConsentSettings: cookieConsentSettings
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: innerHTML,
+      ref: this.htmlContainer,
+      className: classNames(this.props.className, 'common__html-sanitizer')
+    }));
+  }
+}
+HtmlSanitizer.defaultProps = {
+  children: '',
+  className: '',
+  decode: false,
+  processStyles: false,
+  settings: {},
+  wrapper: EmbeddedMedia,
+  comfortCookiesAccepted: false,
+  statisticsCookiesAccepted: false
+};
+export default connect(HtmlSanitizer);

package/components/HtmlSanitizer/spec.js

@@ -1,18 +1,219 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{mount}from'enzyme';import{JSDOM}from'jsdom';import{embeddedMedia}from'@shopgate/pwa-common/collections';import HtmlSanitizer from"./index";jest.mock("../EmbeddedMedia",function(){return function(_ref){var children=_ref.children;return children;};});jest.mock("./connector",function(){return function(Cmp){return Cmp;};});/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { mount } from 'enzyme';
+import { JSDOM } from 'jsdom';
+import { embeddedMedia } from '@shopgate/pwa-common/collections';
+import HtmlSanitizer from "./index";
+jest.mock("../EmbeddedMedia", () => ({
+  children
+}) => children);
+jest.mock("./connector", () => Cmp => Cmp);
+
+/**
  * @param {string} html HTML markup.
  * @param {Object} props Component props.
  * @returns {JSX}
- */var createWrapper=function createWrapper(html){var props=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return mount(React.createElement(HtmlSanitizer,_extends({navigate:function navigate(){}},props),html));};describe('<HtmlSanitizer />',function(){var embeddedMediaAddSpy;var embeddedMediaRemoveSpy;var embeddedMediaHandleCookieConsentSpy;beforeEach(function(){jest.clearAllMocks();embeddedMediaAddSpy=jest.spyOn(embeddedMedia,'add');embeddedMediaRemoveSpy=jest.spyOn(embeddedMedia,'remove');embeddedMediaHandleCookieConsentSpy=jest.spyOn(embeddedMedia,'handleCookieConsent');});it('should render the HtmlSanitizer',function(){/**
+ */
+const createWrapper = (html, props = {}) => mount(/*#__PURE__*/React.createElement(HtmlSanitizer, _extends({
+  navigate: () => {}
+}, props), html));
+describe('<HtmlSanitizer />', () => {
+  let embeddedMediaAddSpy;
+  let embeddedMediaRemoveSpy;
+  let embeddedMediaHandleCookieConsentSpy;
+  beforeEach(() => {
+    jest.clearAllMocks();
+    embeddedMediaAddSpy = jest.spyOn(embeddedMedia, 'add');
+    embeddedMediaRemoveSpy = jest.spyOn(embeddedMedia, 'remove');
+    embeddedMediaHandleCookieConsentSpy = jest.spyOn(embeddedMedia, 'handleCookieConsent');
+  });
+  it('should render the HtmlSanitizer', () => {
+    /**
      * The value for html is the HTML-escaped equivalent of the following:
      * <h1>Hello World!</h1>
      * @type {string}
-     */var html='&lt;h1&gt;Hello World!&lt;/h1&gt;';var wrapper=createWrapper(html,{decode:true});// Test result of dangerouslySetInnerHTML.
-expect(wrapper.html()).toEqual('<div class="common__html-sanitizer"><h1>Hello World!</h1></div>');expect(wrapper.render()).toMatchSnapshot();});it('should add and remove handlers for embedded media',function(){var wrapper=createWrapper('<div></div>',{decode:true});var ref=wrapper.instance().htmlContainer.current;expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(1);expect(embeddedMediaAddSpy).toHaveBeenCalledWith(ref);expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(0);wrapper.setProps({children:'<span></span>'});expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(2);expect(embeddedMediaAddSpy).toHaveBeenCalledWith(ref);expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(0);wrapper.unmount();expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(2);expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(1);expect(embeddedMediaRemoveSpy).toHaveBeenCalledWith(ref);});it('strips out images with relative paths',function(){var html="\n      <div>\n      <style>a { color: red }</style>\n        <a href=\"foo\">\n          <img src=\"bar.jpg\" />\n        </a>\n      </div>\n    ";var wrapper=createWrapper(html);expect(wrapper.html()).not.toContain('<img');expect(wrapper.html()).toContain('<style>');expect(wrapper.render()).toMatchSnapshot();});it('should move style blocks out of the content',function(){var html="\n      <div>\n        <style>a { color: red }</style>\n        <a href=\"foo\">\n          <img src=\"bar.jpg\" />\n        </a>\n      </div>\n    ";var wrapper=createWrapper(html,{processStyles:true});expect(wrapper.html()).not.toContain('<style>');});it('does not strip out images with absolute paths',function(){var html="\n      <div>\n        <a href=\"foo\">\n          <img src=\"http://google.de/bar.jpg\" />\n        </a>\n      </div>\n    ";var wrapper=createWrapper(html);expect(wrapper.html()).toContain('<img');expect(wrapper.render()).toMatchSnapshot();});it('strips out the script tags',function(){/**
+     */
+    const html = '&lt;h1&gt;Hello World!&lt;/h1&gt;';
+    const wrapper = createWrapper(html, {
+      decode: true
+    });
+
+    // Test result of dangerouslySetInnerHTML.
+    expect(wrapper.html()).toEqual('<div class="common__html-sanitizer"><h1>Hello World!</h1></div>');
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+  it('should add and remove handlers for embedded media', () => {
+    const wrapper = createWrapper('<div></div>', {
+      decode: true
+    });
+    const ref = wrapper.instance().htmlContainer.current;
+    expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(1);
+    expect(embeddedMediaAddSpy).toHaveBeenCalledWith(ref);
+    expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(0);
+    wrapper.setProps({
+      children: '<span></span>'
+    });
+    expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(2);
+    expect(embeddedMediaAddSpy).toHaveBeenCalledWith(ref);
+    expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(0);
+    wrapper.unmount();
+    expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(2);
+    expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(1);
+    expect(embeddedMediaRemoveSpy).toHaveBeenCalledWith(ref);
+  });
+  it('strips out images with relative paths', () => {
+    const html = `
+      <div>
+      <style>a { color: red }</style>
+        <a href="foo">
+          <img src="bar.jpg" />
+        </a>
+      </div>
+    `;
+    const wrapper = createWrapper(html);
+    expect(wrapper.html()).not.toContain('<img');
+    expect(wrapper.html()).toContain('<style>');
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+  it('should move style blocks out of the content', () => {
+    const html = `
+      <div>
+        <style>a { color: red }</style>
+        <a href="foo">
+          <img src="bar.jpg" />
+        </a>
+      </div>
+    `;
+    const wrapper = createWrapper(html, {
+      processStyles: true
+    });
+    expect(wrapper.html()).not.toContain('<style>');
+  });
+  it('does not strip out images with absolute paths', () => {
+    const html = `
+      <div>
+        <a href="foo">
+          <img src="http://google.de/bar.jpg" />
+        </a>
+      </div>
+    `;
+    const wrapper = createWrapper(html);
+    expect(wrapper.html()).toContain('<img');
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+  it('strips out the script tags', () => {
+    /**
      * The value for html is the HTML-escaped equivalent of the following:
      * <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
      * <script type="text/javascript">var x = 42;</script>
      * <p>Foo Bar</p>
      * <script>var y = 23;</script>
      * @type {string}
-     */var html='&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt;var x = 42;&lt;/script&gt; &lt;p&gt;Foo Bar&lt;/p&gt; &lt;script&gt;var y = 23;&lt;/script&gt;';var wrapper=createWrapper(html,{decode:true});// Test result of dangerouslySetInnerHTML.
-expect(wrapper.html()).toEqual('<div class="common__html-sanitizer">  <p>Foo Bar</p> </div>');expect(wrapper).toMatchSnapshot();});describe('Link handling',function(){var mockedHandleClick=jest.fn();beforeEach(function(){mockedHandleClick.mockClear();});it('follows a link from a plain <a>',function(){var doc=new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;var html='&lt;a id=&quot;link&quot; href=&quot;#follow-me-and-everything-is-alright&quot;&gt;Plain Link&lt;/a&gt;';var wrapper=mount(React.createElement(HtmlSanitizer,{decode:true,settings:{handleClick:mockedHandleClick},navigate:function navigate(){}},html),{attachTo:doc.getElementsByTagName('div')[0]});var aTag=doc.getElementsByTagName('a')[0];aTag.closest=function(){return aTag;};var event={target:aTag,preventDefault:function preventDefault(){}};wrapper.instance().handleTap(event);expect(mockedHandleClick).toHaveBeenCalledTimes(1);expect(mockedHandleClick).toHaveBeenCalledWith('#follow-me-and-everything-is-alright','');});it('follows a link from a <a> with other HTML inside',function(){var doc=new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;var html='&lt;a id=&quot;link&quot; target=&quot;_blank&quot; href=&quot;#I-ll-be-the-one-to-tuck-you-in-at-night&quot;&gt;&lt;span&gt;Span Link&lt;/span&gt;&lt;/a&gt;';var wrapper=mount(React.createElement(HtmlSanitizer,{decode:true,settings:{handleClick:mockedHandleClick},navigate:function navigate(){}},html),{attachTo:doc.getElementsByTagName('div')[0]});var aTag=doc.getElementsByTagName('a')[0];var spanTag=doc.getElementsByTagName('span')[0];spanTag.closest=function(){return aTag;};var event={target:spanTag,preventDefault:function preventDefault(){}};wrapper.instance().handleTap(event);expect(mockedHandleClick).toHaveBeenCalledTimes(1);expect(mockedHandleClick).toHaveBeenCalledWith('#I-ll-be-the-one-to-tuck-you-in-at-night','_blank');});});describe('Cookie consent handling',function(){it('should invoke handleCookieConsent method of embedded media with default cookie consent settings',function(){createWrapper('<div></div>',{decode:true});expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document),{comfortCookiesAccepted:false,statisticsCookiesAccepted:false});});it('should invoke handleCookieConsent method of embedded media with accepted comfort cookies',function(){createWrapper('<div></div>',{decode:true,comfortCookiesAccepted:true});expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document),{comfortCookiesAccepted:true,statisticsCookiesAccepted:false});});it('should invoke handleCookieConsent method of embedded media with accepted statistics cookies',function(){createWrapper('<div></div>',{decode:true,statisticsCookiesAccepted:true});expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document),{comfortCookiesAccepted:false,statisticsCookiesAccepted:true});});it('should invoke handleCookieConsent method of embedded media with all cookies accepted',function(){createWrapper('<div></div>',{decode:true,comfortCookiesAccepted:true,statisticsCookiesAccepted:true});expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document),{comfortCookiesAccepted:true,statisticsCookiesAccepted:true});});});});
+     */
+    const html = '&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt;var x = 42;&lt;/script&gt; &lt;p&gt;Foo Bar&lt;/p&gt; &lt;script&gt;var y = 23;&lt;/script&gt;';
+    const wrapper = createWrapper(html, {
+      decode: true
+    });
+
+    // Test result of dangerouslySetInnerHTML.
+    expect(wrapper.html()).toEqual('<div class="common__html-sanitizer">  <p>Foo Bar</p> </div>');
+    expect(wrapper).toMatchSnapshot();
+  });
+  describe('Link handling', () => {
+    const mockedHandleClick = jest.fn();
+    beforeEach(() => {
+      mockedHandleClick.mockClear();
+    });
+    it('follows a link from a plain <a>', () => {
+      const doc = new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;
+      const html = '&lt;a id=&quot;link&quot; href=&quot;#follow-me-and-everything-is-alright&quot;&gt;Plain Link&lt;/a&gt;';
+      const wrapper = mount(/*#__PURE__*/React.createElement(HtmlSanitizer, {
+        decode: true,
+        settings: {
+          handleClick: mockedHandleClick
+        },
+        navigate: () => {}
+      }, html), {
+        attachTo: doc.getElementsByTagName('div')[0]
+      });
+      const aTag = doc.getElementsByTagName('a')[0];
+      aTag.closest = () => aTag;
+      const event = {
+        target: aTag,
+        preventDefault: () => {}
+      };
+      wrapper.instance().handleTap(event);
+      expect(mockedHandleClick).toHaveBeenCalledTimes(1);
+      expect(mockedHandleClick).toHaveBeenCalledWith('#follow-me-and-everything-is-alright', '');
+    });
+    it('follows a link from a <a> with other HTML inside', () => {
+      const doc = new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;
+      const html = '&lt;a id=&quot;link&quot; target=&quot;_blank&quot; href=&quot;#I-ll-be-the-one-to-tuck-you-in-at-night&quot;&gt;&lt;span&gt;Span Link&lt;/span&gt;&lt;/a&gt;';
+      const wrapper = mount(/*#__PURE__*/React.createElement(HtmlSanitizer, {
+        decode: true,
+        settings: {
+          handleClick: mockedHandleClick
+        },
+        navigate: () => {}
+      }, html), {
+        attachTo: doc.getElementsByTagName('div')[0]
+      });
+      const aTag = doc.getElementsByTagName('a')[0];
+      const spanTag = doc.getElementsByTagName('span')[0];
+      spanTag.closest = () => aTag;
+      const event = {
+        target: spanTag,
+        preventDefault: () => {}
+      };
+      wrapper.instance().handleTap(event);
+      expect(mockedHandleClick).toHaveBeenCalledTimes(1);
+      expect(mockedHandleClick).toHaveBeenCalledWith('#I-ll-be-the-one-to-tuck-you-in-at-night', '_blank');
+    });
+  });
+  describe('Cookie consent handling', () => {
+    it('should invoke handleCookieConsent method of embedded media with default cookie consent settings', () => {
+      createWrapper('<div></div>', {
+        decode: true
+      });
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
+        comfortCookiesAccepted: false,
+        statisticsCookiesAccepted: false
+      });
+    });
+    it('should invoke handleCookieConsent method of embedded media with accepted comfort cookies', () => {
+      createWrapper('<div></div>', {
+        decode: true,
+        comfortCookiesAccepted: true
+      });
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
+        comfortCookiesAccepted: true,
+        statisticsCookiesAccepted: false
+      });
+    });
+    it('should invoke handleCookieConsent method of embedded media with accepted statistics cookies', () => {
+      createWrapper('<div></div>', {
+        decode: true,
+        statisticsCookiesAccepted: true
+      });
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
+        comfortCookiesAccepted: false,
+        statisticsCookiesAccepted: true
+      });
+    });
+    it('should invoke handleCookieConsent method of embedded media with all cookies accepted', () => {
+      createWrapper('<div></div>', {
+        decode: true,
+        comfortCookiesAccepted: true,
+        statisticsCookiesAccepted: true
+      });
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
+      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
+        comfortCookiesAccepted: true,
+        statisticsCookiesAccepted: true
+      });
+    });
+  });
+});

package/components/I18n/components/FormatDate/index.js

@@ -1,5 +1,29 @@
-import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers/i18n';/**
+import React, { Fragment, memo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers/i18n';
+
+/**
  * Formats a date.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var FormatDate=function FormatDate(_ref){var timestamp=_ref.timestamp,format=_ref.format;return React.createElement(Fragment,null,FormatDate.format({timestamp:timestamp,format:format}));};FormatDate.format=function(_ref2){var timestamp=_ref2.timestamp,format=_ref2.format;if(!i18n.ready){return timestamp;}return i18n.date(timestamp,format);};FormatDate.defaultProps={format:'medium'};export default memo(FormatDate);
+ */
+const FormatDate = ({
+  timestamp,
+  format
+}) => /*#__PURE__*/React.createElement(Fragment, null, FormatDate.format({
+  timestamp,
+  format
+}));
+FormatDate.format = ({
+  timestamp,
+  format
+}) => {
+  if (!i18n.ready) {
+    return timestamp;
+  }
+  return i18n.date(timestamp, format);
+};
+FormatDate.defaultProps = {
+  format: 'medium'
+};
+export default /*#__PURE__*/memo(FormatDate);

package/components/I18n/components/FormatDate/spec.js

@@ -1 +1,46 @@
-import React from'react';import{mount}from'enzyme';import{i18n}from'@shopgate/engage/core';import I18n from"../../index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<FormatDate />',function(){var locales={greeting:'Hello {date}'};var lang='en-US';var timestamp=123456789000;var formattedDate='Nov 29, 1973';var format='medium';i18n.init({locales:locales,lang:lang});describe('Given the component was mounted to the DOM',function(){var renderedElement;it('should match snapshot',function(){renderedElement=mount(React.createElement(I18n.Provider,null,React.createElement("div",null,React.createElement("span",{className:"only-date"},React.createElement(I18n.Date,{timestamp:timestamp,format:format})),React.createElement("span",{className:"text-with-date"},React.createElement(I18n.Text,{string:"greeting"},React.createElement(I18n.Date,{forKey:"date",timestamp:timestamp,format:format}))))));expect(renderedElement).toMatchSnapshot();});it('should render formatted date',function(){var text=renderedElement.find('.only-date').text();expect(text).toBe(formattedDate);});it('should render within translated text',function(){var text=renderedElement.find('.text-with-date').text();expect(text).toBe("Hello ".concat(formattedDate));});});});
+import React from 'react';
+import { mount } from 'enzyme';
+import { i18n } from '@shopgate/engage/core';
+import I18n from "../../index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<FormatDate />', () => {
+  const locales = {
+    greeting: 'Hello {date}'
+  };
+  const lang = 'en-US';
+  const timestamp = 123456789000;
+  const formattedDate = 'Nov 29, 1973';
+  const format = 'medium';
+  i18n.init({
+    locales,
+    lang
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+    it('should match snapshot', () => {
+      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: "only-date"
+      }, /*#__PURE__*/React.createElement(I18n.Date, {
+        timestamp: timestamp,
+        format: format
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "text-with-date"
+      }, /*#__PURE__*/React.createElement(I18n.Text, {
+        string: "greeting"
+      }, /*#__PURE__*/React.createElement(I18n.Date, {
+        forKey: "date",
+        timestamp: timestamp,
+        format: format
+      }))))));
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should render formatted date', () => {
+      const text = renderedElement.find('.only-date').text();
+      expect(text).toBe(formattedDate);
+    });
+    it('should render within translated text', () => {
+      const text = renderedElement.find('.text-with-date').text();
+      expect(text).toBe(`Hello ${formattedDate}`);
+    });
+  });
+});

package/components/I18n/components/FormatNumber/index.js

@@ -1,5 +1,37 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers/i18n';/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers/i18n';
+/**
  * Formats a number.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var FormatNumber=function FormatNumber(_ref){var className=_ref.className,number=_ref.number,fractions=_ref.fractions;if(!className){FormatNumber.format({number:number,fractions:fractions});}return React.createElement("span",{className:className},FormatNumber.format({number:number,fractions:fractions}));};FormatNumber.format=function(props){if(!i18n.ready){return props.number;}return i18n.number(props.number,props.fractions);};FormatNumber.defaultProps={className:null,fractions:0};export default memo(FormatNumber);
+ */
+const FormatNumber = ({
+  className,
+  number,
+  fractions
+}) => {
+  if (!className) {
+    FormatNumber.format({
+      number,
+      fractions
+    });
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, FormatNumber.format({
+    number,
+    fractions
+  }));
+};
+FormatNumber.format = props => {
+  if (!i18n.ready) {
+    return props.number;
+  }
+  return i18n.number(props.number, props.fractions);
+};
+FormatNumber.defaultProps = {
+  className: null,
+  fractions: 0
+};
+export default /*#__PURE__*/memo(FormatNumber);