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

package/collections/media-providers/YouTube.js

@@ -1,31 +1,91 @@
-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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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);}import URLSearchParams from'url-search-params';import MediaProvider from"./MediaProvider";/* eslint-disable class-methods-use-this */ /**
+import URLSearchParams from 'url-search-params';
+import MediaProvider from "./MediaProvider";
+
+/* eslint-disable class-methods-use-this */
+
+/**
  * The YouTube media provider class.
- */var YouTubeMediaProvider=/*#__PURE__*/function(_MediaProvider){function YouTubeMediaProvider(){_classCallCheck(this,YouTubeMediaProvider);return _callSuper(this,YouTubeMediaProvider,arguments);}_inherits(YouTubeMediaProvider,_MediaProvider);return _createClass(YouTubeMediaProvider,[{key:"getMediaContainers",value:/**
+ */
+class YouTubeMediaProvider extends MediaProvider {
+  /**
    * Retrieves a list of media containers for YouTube.
    * @param {ParentNode} container A DOM container that may contain YouTube iframes.
    * @returns {NodeListOf<Element>}
-   */function getMediaContainers(container){return container.querySelectorAll('iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]');}/**
+   */
+  getMediaContainers(container) {
+    return container.querySelectorAll('iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]');
+  }
+
+  /**
    * Add a DOM container with embedded videos.
    * @override
    * @param {ParentNode} container A DOM container.
    * @returns {YouTubeMediaProvider}
-   */},{key:"add",value:function add(container){var iframes=this.getMediaContainers(container);if(!iframes.length){return this;}this.containers.set(container,iframes);return this;}/**
+   */
+  add(container) {
+    const iframes = this.getMediaContainers(container);
+    if (!iframes.length) {
+      return this;
+    }
+    this.containers.set(container, iframes);
+    return this;
+  }
+
+  /**
    * Applies optimizations to embedded media iframes within the given container.
    * Common enhancements include adding responsive wrappers and appropriate
    * sandbox attributes to improve security and layout behavior.
    *
    * @param {Document} document - The DOM document containing iframes to optimize.
    * @returns {YouTubeMediaProvider}
-   */},{key:"applyIframeOptimizations",value:function applyIframeOptimizations(document){var _this2=this;var iframes=this.getMediaContainers(document);if(!iframes.length){return this;}// Update the video urls to enable stopping videos via the event API.
-iframes.forEach(function(iframe,index){// Block clicks on YouTube icon
-iframes[index].setAttribute('sandbox','allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation');_this2.responsify(iframe);var src=iframe.getAttribute('src');var _src$split=src.split('?'),_src$split2=_slicedToArray(_src$split,2),url=_src$split2[0],query=_src$split2[1];var urlParams=new URLSearchParams(query);// Enable the js api to allow sending events to the iframe.
-urlParams.set('enablejsapi',1);// Enable controls to avoid the iframe not being resumable because of controls=0 param on ios.
-urlParams.set('controls',1);iframes[index].setAttribute('src',"".concat(url,"?").concat(urlParams.toString()));});return this;}/**
+   */
+  applyIframeOptimizations(document) {
+    const iframes = this.getMediaContainers(document);
+    if (!iframes.length) {
+      return this;
+    }
+
+    // Update the video urls to enable stopping videos via the event API.
+    iframes.forEach((iframe, index) => {
+      // Block clicks on YouTube icon
+      iframes[index].setAttribute('sandbox', 'allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation');
+      this.responsify(iframe);
+      const src = iframe.getAttribute('src');
+      const [url, query] = src.split('?');
+      const urlParams = new URLSearchParams(query);
+
+      // Enable the js api to allow sending events to the iframe.
+      urlParams.set('enablejsapi', 1);
+      // Enable controls to avoid the iframe not being resumable because of controls=0 param on ios.
+      urlParams.set('controls', 1);
+      iframes[index].setAttribute('src', `${url}?${urlParams.toString()}`);
+    });
+    return this;
+  }
+
+  /**
    * Stops all playing videos within the DOM containers.
    * @override
    * @returns {YouTubeMediaProvider}
-   */},{key:"stop",value:function stop(){// Select all iframes in the document. Actually this should be done via the iframes
-// registered in this.containers, but that doesn't seem to work reliably anymore.
-// Since we had to find a quick fix for CURB-5033 we now select all iframes in the document
-// via the media container selector and then stop the videos.
-var iframes=this.getMediaContainers(document);iframes.forEach(function(iframe){var _iframe$contentWindow;if(typeof(iframe===null||iframe===void 0?void 0:(_iframe$contentWindow=iframe.contentWindow)===null||_iframe$contentWindow===void 0?void 0:_iframe$contentWindow.postMessage)==='function'){iframe.contentWindow.postMessage(JSON.stringify({event:'command',func:'stopVideo',args:[]}),'*');}});return this;}}]);}(MediaProvider);export default YouTubeMediaProvider;/* eslint-enable class-methods-use-this */
+   */
+  stop() {
+    // Select all iframes in the document. Actually this should be done via the iframes
+    // registered in this.containers, but that doesn't seem to work reliably anymore.
+    // Since we had to find a quick fix for CURB-5033 we now select all iframes in the document
+    // via the media container selector and then stop the videos.
+    const iframes = this.getMediaContainers(document);
+    iframes.forEach(iframe => {
+      if (typeof iframe?.contentWindow?.postMessage === 'function') {
+        iframe.contentWindow.postMessage(JSON.stringify({
+          event: 'command',
+          func: 'stopVideo',
+          args: []
+        }), '*');
+      }
+    });
+    return this;
+  }
+}
+export default YouTubeMediaProvider;
+
+/* eslint-enable class-methods-use-this */

package/collections/media-providers/index.js

@@ -1 +1,3 @@
-export{default as MediaProvider}from"./MediaProvider";export{default as Vimeo}from"./Vimeo";export{default as YouTube}from"./YouTube";
+export { default as MediaProvider } from "./MediaProvider";
+export { default as Vimeo } from "./Vimeo";
+export { default as YouTube } from "./YouTube";

package/collections/media-providers/style.js

@@ -1,2 +1,52 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var responsiveContainer=css({position:'relative',height:0,overflow:'hidden',padding:'56.25% 0 0 0',fontSize:'0.875rem',' iframe, object, embed':{position:'absolute',top:0,left:0,width:'100%',height:'100%',border:0}});var consentContainer=css({position:'absolute',height:'100%',width:'100%',padding:16,lineHeight:'1.2rem',display:'flex',flexDirection:'column',justifyContent:'center',textAlign:'center',gap:16,background:colors.shade10,border:"1px solid ".concat(colors.shade5),// Add a tiny little border radius to make the message container look nice with padding
-borderRadius:4,top:0});var consentLink=css({textAlign:'center',color:colors.primary,fontWeight:500}).toString();var consentIcon=css({fill:colors.shade5,height:40});export default{responsiveContainer:responsiveContainer,consentContainer:consentContainer,consentLink:consentLink,consentIcon:consentIcon};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const responsiveContainer = css({
+  position: 'relative',
+  height: 0,
+  overflow: 'hidden',
+  padding: '56.25% 0 0 0',
+  fontSize: '0.875rem',
+  ' iframe, object, embed': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    border: 0
+  }
+});
+const consentContainer = css({
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  padding: 16,
+  lineHeight: '1.2rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  textAlign: 'center',
+  gap: 16,
+  background: colors.shade10,
+  border: `1px solid ${colors.shade5}`,
+  // Add a tiny little border radius to make the message container look nice with padding
+  borderRadius: 4,
+  top: 0
+});
+const consentLink = css({
+  textAlign: 'center',
+  color: colors.primary,
+  fontWeight: 500
+}).toString();
+const consentIcon = css({
+  fill: colors.shade5,
+  height: 40
+});
+export default {
+  responsiveContainer,
+  consentContainer,
+  consentLink,
+  consentIcon
+};

package/components/Backdrop/index.js

@@ -1,9 +1,98 @@
-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,{useEffect,useMemo,useRef}from'react';import PropTypes from'prop-types';import{Transition}from'react-transition-group';import{toggleBodyScroll}from'@shopgate/engage/styles/helpers';import style from"./style";/**
+import React, { useEffect, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Transition } from 'react-transition-group';
+import { toggleBodyScroll } from '@shopgate/engage/styles/helpers';
+import style from "./style";
+
+/**
  * Backdrop component
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */function Backdrop(_ref){var className=_ref.className,color=_ref.color,duration=_ref.duration,isVisible=_ref.isVisible,level=_ref.level,lockBodyScroll=_ref.lockBodyScroll,onClick=_ref.onClick,opacity=_ref.opacity;// Stable id for body scroll lock
-var bodyScrollRef=useRef(Math.random().toString(36).slice(2)+Math.random().toString(36).slice(2));var nodeRef=useRef(null);// Lock / unlock body scroll based on visibility
-useEffect(function(){if(!lockBodyScroll)return undefined;var refId=bodyScrollRef.current;toggleBodyScroll(isVisible,refId);return function(){toggleBodyScroll(false,refId);};},[isVisible,lockBodyScroll]);var baseStyle=useMemo(function(){return{background:color,zIndex:level,transition:"opacity ".concat(duration,"ms ease-out"),// start hidden by default; pointer events only when shown
-opacity:0,pointerEvents:'none'};},[color,level,duration]);var targetOpacity=useMemo(function(){return opacity/100;},[opacity]);// Map Transition states to inline styles (equivalent to your old childrenStyles)
-var transitionStyles=useMemo(function(){return{entering:{opacity:targetOpacity,pointerEvents:'auto'},entered:{opacity:targetOpacity,pointerEvents:'auto'},exiting:{opacity:0,pointerEvents:'none'},exited:{opacity:0,pointerEvents:'none'},unmounted:{opacity:0,pointerEvents:'none'}};},[targetOpacity]);var combinedClassName="".concat(style," ").concat(className," common__backdrop");return React.createElement(Transition,{"in":isVisible,timeout:duration,mountOnEnter:true,unmountOnExit:true,appear:true,nodeRef:nodeRef},function(state){return React.createElement("div",{ref:nodeRef,"data-test-id":"Backdrop","aria-hidden":true,className:combinedClassName,onClick:onClick,style:_extends({},baseStyle,{},transitionStyles[state])});});}Backdrop.defaultProps={className:'',color:'#000',duration:200,isVisible:false,level:2,onClick:function onClick(){},opacity:50,lockBodyScroll:true};export default React.memo(Backdrop,function(prev,next){return prev.isVisible===next.isVisible&&prev.className===next.className&&prev.color===next.color&&prev.duration===next.duration&&prev.level===next.level&&prev.lockBodyScroll===next.lockBodyScroll&&prev.opacity===next.opacity&&prev.onClick===next.onClick;});
+ */
+function Backdrop({
+  className,
+  color,
+  duration,
+  isVisible,
+  level,
+  lockBodyScroll,
+  onClick,
+  opacity
+}) {
+  // Stable id for body scroll lock
+  const bodyScrollRef = useRef(Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2));
+  const nodeRef = useRef(null);
+
+  // Lock / unlock body scroll based on visibility
+  useEffect(() => {
+    if (!lockBodyScroll) return undefined;
+    const refId = bodyScrollRef.current;
+    toggleBodyScroll(isVisible, refId);
+    return () => {
+      toggleBodyScroll(false, refId);
+    };
+  }, [isVisible, lockBodyScroll]);
+  const baseStyle = useMemo(() => ({
+    background: color,
+    zIndex: level,
+    transition: `opacity ${duration}ms ease-out`,
+    // start hidden by default; pointer events only when shown
+    opacity: 0,
+    pointerEvents: 'none'
+  }), [color, level, duration]);
+  const targetOpacity = useMemo(() => opacity / 100, [opacity]);
+
+  // Map Transition states to inline styles
+  const transitionStyles = useMemo(() => ({
+    entering: {
+      opacity: targetOpacity,
+      pointerEvents: 'auto'
+    },
+    entered: {
+      opacity: targetOpacity,
+      pointerEvents: 'auto'
+    },
+    exiting: {
+      opacity: 0,
+      pointerEvents: 'none'
+    },
+    exited: {
+      opacity: 0,
+      pointerEvents: 'none'
+    },
+    unmounted: {
+      opacity: 0,
+      pointerEvents: 'none'
+    }
+  }), [targetOpacity]);
+  const combinedClassName = `${style} ${className} common__backdrop`;
+  return /*#__PURE__*/React.createElement(Transition, {
+    in: isVisible,
+    timeout: duration,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    appear: true,
+    nodeRef: nodeRef
+  }, state => /*#__PURE__*/React.createElement("div", {
+    ref: nodeRef,
+    "data-test-id": "Backdrop",
+    "aria-hidden": true,
+    className: combinedClassName,
+    onClick: onClick,
+    style: {
+      ...baseStyle,
+      ...transitionStyles[state]
+    }
+  }));
+}
+Backdrop.defaultProps = {
+  className: '',
+  color: '#000',
+  duration: 200,
+  isVisible: false,
+  level: 2,
+  onClick: () => {},
+  opacity: 50,
+  lockBodyScroll: true
+};
+export default /*#__PURE__*/React.memo(Backdrop, (prev, next) => prev.isVisible === next.isVisible && prev.className === next.className && prev.color === next.color && prev.duration === next.duration && prev.level === next.level && prev.lockBodyScroll === next.lockBodyScroll && prev.opacity === next.opacity && prev.onClick === next.onClick);

package/components/Backdrop/spec.js

@@ -1 +1,23 @@
-import React from'react';import{shallow,mount}from'enzyme';import Backdrop from"./index";describe('<Backdrop />',function(){var mockOpen;beforeEach(function(){mockOpen=jest.fn();});it('should render',function(){var wrapper=shallow(React.createElement(Backdrop,{isVisible:true}));expect(wrapper).toMatchSnapshot();});it('should execute callback when Backdrop is clicked',function(){var wrapper=mount(React.createElement(Backdrop,{isVisible:true,onClick:mockOpen}));wrapper.find('div').simulate('click');expect(mockOpen).toBeCalled();});});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Backdrop from "./index";
+describe('<Backdrop />', () => {
+  let mockOpen;
+  beforeEach(() => {
+    mockOpen = jest.fn();
+  });
+  it('should render', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Backdrop, {
+      isVisible: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should execute callback when Backdrop is clicked', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Backdrop, {
+      isVisible: true,
+      onClick: mockOpen
+    }));
+    wrapper.find('div').simulate('click');
+    expect(mockOpen).toBeCalled();
+  });
+});

package/components/Backdrop/style.js

@@ -1,2 +1,11 @@
-import{css}from'glamor';export default css({position:'fixed',top:0,right:0,bottom:0,left:0,// Prevents that content behind the backdrop is clickable
-pointerEvents:'all',touchAction:'none'});
+import { css } from 'glamor';
+export default css({
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  // Prevents that content behind the backdrop is clickable
+  pointerEvents: 'all',
+  touchAction: 'none'
+});

package/components/Button/index.js

@@ -1,10 +1,52 @@
-var _excluded=["children","testId","className","disabled","onClick"];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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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 style from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import style from "./style";
+
+/**
  * The button component.
- */var Button=/*#__PURE__*/function(_Component){function Button(){_classCallCheck(this,Button);return _callSuper(this,Button,arguments);}_inherits(Button,_Component);return _createClass(Button,[{key:"buttonProps",get:/**
+ */
+class Button extends Component {
+  /**
    * Getter for the calculated button props.
    * @returns {Object}
-   */function get(){var _this$props=this.props,children=_this$props.children,testId=_this$props.testId,className=_this$props.className,disabled=_this$props.disabled,onClick=_this$props.onClick,props=_objectWithoutProperties(_this$props,_excluded);var buttonProps=_extends({className:"".concat(className," ").concat(style," common__button"),disabled:disabled,onClick:disabled?null:onClick},props);return buttonProps;}/**
+   */
+  get buttonProps() {
+    const {
+      children,
+      testId,
+      className,
+      disabled,
+      onClick,
+      ...props
+    } = this.props;
+    const buttonProps = {
+      className: `${className} ${style} common__button`,
+      disabled,
+      onClick: disabled ? null : onClick,
+      ...props
+    };
+    return buttonProps;
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */},{key:"render",value:function render(){return(// eslint-disable-next-line react/button-has-type
-React.createElement("button",_extends({"data-test-id":this.props.testId},this.buttonProps),this.props.children));}}]);}(Component);_defineProperty(Button,"defaultProps",{className:'',disabled:false,onClick:null,testId:'Button'});export default Button;
+   */
+  render() {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/button-has-type
+      React.createElement("button", _extends({
+        "data-test-id": this.props.testId
+      }, this.buttonProps), this.props.children)
+    );
+  }
+}
+Button.defaultProps = {
+  className: '',
+  disabled: false,
+  onClick: null,
+  testId: 'Button'
+};
+export default Button;

package/components/Button/spec.js

@@ -1 +1,36 @@
-import React from'react';import{shallow}from'enzyme';import Button from"./index";describe('<Button />',function(){it('should render the button',function(){var wrapper=shallow(React.createElement(Button,null,"My content"));expect(wrapper).toMatchSnapshot();expect(wrapper.find('button').length).toBe(1);});it('should render the button in disabled state',function(){var wrapper=shallow(React.createElement(Button,{disabled:true},"My content"));expect(wrapper).toMatchSnapshot();expect(wrapper.find('button[disabled]').length).toBe(1);});it('should trigger the click event',function(){var callback=jest.fn();var wrapper=shallow(React.createElement(Button,{onClick:callback},"My content"));wrapper.simulate('click');expect(wrapper).toMatchSnapshot();expect(callback).toHaveBeenCalled();});it('should not trigger the click event when disabled',function(){var callback=jest.fn();var wrapper=shallow(React.createElement(Button,{disabled:true,onClick:callback},"My content"));wrapper.simulate('click');expect(wrapper).toMatchSnapshot();expect(callback).not.toHaveBeenCalled();});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Button from "./index";
+describe('<Button />', () => {
+  it('should render the button', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, null, "My content"));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('button').length).toBe(1);
+  });
+  it('should render the button in disabled state', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }, "My content"));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('button[disabled]').length).toBe(1);
+  });
+  it('should trigger the click event', () => {
+    const callback = jest.fn();
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+      onClick: callback
+    }, "My content"));
+    wrapper.simulate('click');
+    expect(wrapper).toMatchSnapshot();
+    expect(callback).toHaveBeenCalled();
+  });
+  it('should not trigger the click event when disabled', () => {
+    const callback = jest.fn();
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+      disabled: true,
+      onClick: callback
+    }, "My content"));
+    wrapper.simulate('click');
+    expect(wrapper).toMatchSnapshot();
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

package/components/Button/style.js

@@ -1 +1,6 @@
-import{css}from'glamor';export default css({':focus':{outline:0}}).toString();
+import { css } from 'glamor';
+export default css({
+  ':focus': {
+    outline: 0
+  }
+}).toString();

package/components/Checkbox/index.js

@@ -1,4 +1,8 @@
-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 React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
  * @typedef {Object} CheckboxProps
  * @property {React.ReactNode} checkedIcon React component used as icon for the checked state
  * @property {React.ReactNode} uncheckedIcon React component used as icon for the unchecked state
@@ -10,45 +14,135 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
  * @property {"left"|"right"} [labelPosition] Position for the lable (default `"left"`)
  * @property {string} [name] Name for the hidden input tag
  * @property {Function} [onCheck] Callback invoked when checkbox is toggled
- */ /**
+ */
+
+/**
  * Base checkbox component.
  * @extends {React.Component<CheckboxProps>}
  * @returns {JSX.Element}
- */var Checkbox=/*#__PURE__*/function(_Component){/**
+ */
+class Checkbox extends Component {
+  /**
    * The checkbox component constructor.
    * It checks if the checkbox is a controlled or uncontrolled input and sets an internal state if
    * uncontrolled to keep track of th checked-state.
    * @param {Object} props The Checkbox properties.
-   */function Checkbox(props){var _this2;_classCallCheck(this,Checkbox);_this2=_callSuper(this,Checkbox,[props]);/**
-   * Returns if the checkbox is checked or not.
-   * @return {boolean} Is the checkbox checked?
-   */_defineProperty(_this2,"isChecked",function(){return typeof _this2.props.defaultChecked==='undefined'?_this2.props.checked// Controlled.
-:_this2.state.checked// Uncontrolled.
-;});/**
-   * Inverts the current "checked" value and calls the callback function with it.
-   * If the checkbox is uncontrolled, it keeps track of the value.
-   */_defineProperty(_this2,"handleCheck",function(){if(_this2.props.disabled){return;}var checked=!_this2.isChecked();if(typeof _this2.props.defaultChecked!=='undefined'){// Uncontrolled.
-_this2.setState({checked:checked});}_this2.props.onCheck(checked);});/**
-   * Handler for keyDown events of the checkbox
-   * @param {Object} e The keyDown event payload
-   */_defineProperty(_this2,"handleKeyDown",function(e){if(e.key===' '){// Toggle checkbox on "space" - mocks behavior of native checkboxes
-_this2.handleCheck();}});/**
-   * Renders the checked/unchecked icon.
-   * @returns {JSX}
-   */_defineProperty(_this2,"renderIcon",function(){return _this2.isChecked()?_this2.props.checkedIcon:_this2.props.uncheckedIcon;});/**
-   * Renders an input if a "name" prop is provided.
-   * @returns {JSX}
-   */_defineProperty(_this2,"renderInput",function(){var _this3=_this2,name=_this3.props.name,isChecked=_this3.isChecked;return _this2.props.name?React.createElement("input",{className:"input",type:"hidden",name:name,value:isChecked()?1:0}):null;});/**
-   * Renders the label if "side" matches he labelPosition prop.
-   * @param {string} side Used to check against which side to render the label on.
-   * @returns {JSX}
-   */_defineProperty(_this2,"renderLabelIfItIsOnThe",function(side){return _this2.props.labelPosition===side?_this2.props.label:null;});if(typeof props.defaultChecked!=='undefined'){// Uncontrolled input.
-_this2.state={checked:props.defaultChecked};}else{// Controlled input
-_this2.state={checked:props.checked};}return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Returns if the checkbox is checked or not.
+     * @return {boolean} Is the checkbox checked?
+     */
+    this.isChecked = () => typeof this.props.defaultChecked === 'undefined' ? this.props.checked // Controlled.
+    : this.state.checked // Uncontrolled.
+    ;
+    /**
+     * Inverts the current "checked" value and calls the callback function with it.
+     * If the checkbox is uncontrolled, it keeps track of the value.
+     */
+    this.handleCheck = () => {
+      if (this.props.disabled) {
+        return;
+      }
+      const checked = !this.isChecked();
+      if (typeof this.props.defaultChecked !== 'undefined') {
+        // Uncontrolled.
+        this.setState({
+          checked
+        });
+      }
+      this.props.onCheck(checked);
+    };
+    /**
+     * Handler for keyDown events of the checkbox
+     * @param {Object} e The keyDown event payload
+     */
+    this.handleKeyDown = e => {
+      if (e.key === ' ') {
+        // Toggle checkbox on "space" - mocks behavior of native checkboxes
+        this.handleCheck();
+      }
+    };
+    /**
+     * Renders the checked/unchecked icon.
+     * @returns {JSX}
+     */
+    this.renderIcon = () => this.isChecked() ? this.props.checkedIcon : this.props.uncheckedIcon;
+    /**
+     * Renders an input if a "name" prop is provided.
+     * @returns {JSX}
+     */
+    this.renderInput = () => {
+      const {
+        props: {
+          name
+        },
+        isChecked
+      } = this;
+      return this.props.name ? /*#__PURE__*/React.createElement("input", {
+        className: "input",
+        type: "hidden",
+        name: name,
+        value: isChecked() ? 1 : 0
+      }) : null;
+    };
+    /**
+     * Renders the label if "side" matches he labelPosition prop.
+     * @param {string} side Used to check against which side to render the label on.
+     * @returns {JSX}
+     */
+    this.renderLabelIfItIsOnThe = side => this.props.labelPosition === side ? this.props.label : null;
+    if (typeof props.defaultChecked !== 'undefined') {
+      // Uncontrolled input.
+      this.state = {
+        checked: props.defaultChecked
+      };
+    } else {
+      // Controlled input
+      this.state = {
+        checked: props.checked
+      };
+    }
+  }
+
+  /**
    * Make sure state is updated with new checked value when input is controlled
    * @param {Object} nextProps Contains the new "checked" status
-   */_inherits(Checkbox,_Component);return _createClass(Checkbox,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Update only for controlled input
-if(typeof this.props.defaultChecked==='undefined'){if(this.state.checked!==nextProps.checked){this.setState({checked:nextProps.checked});}}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Update only for controlled input
+    if (typeof this.props.defaultChecked === 'undefined') {
+      if (this.state.checked !== nextProps.checked) {
+        this.setState({
+          checked: nextProps.checked
+        });
+      }
+    }
+  }
+  /**
    * Renders the checkbox component.
    * @returns {JSX}
-   */function render(){return React.createElement("div",{className:classNames(this.props.className,'checkbox','common__checkbox'),onClick:this.handleCheck,onKeyDown:this.handleKeyDown,role:"checkbox","aria-checked":this.props.checked,tabIndex:0},this.renderInput(),this.renderLabelIfItIsOnThe('left'),this.renderIcon(),this.renderLabelIfItIsOnThe('right'));}}]);}(Component);_defineProperty(Checkbox,"defaultProps",{checked:undefined,className:undefined,defaultChecked:undefined,disabled:false,label:null,labelPosition:'left',name:undefined,onCheck:function onCheck(){}});export default Checkbox;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(this.props.className, 'checkbox', 'common__checkbox'),
+      onClick: this.handleCheck,
+      onKeyDown: this.handleKeyDown,
+      role: "checkbox",
+      "aria-checked": this.props.checked,
+      tabIndex: 0
+    }, this.renderInput(), this.renderLabelIfItIsOnThe('left'), this.renderIcon(), this.renderLabelIfItIsOnThe('right'));
+  }
+}
+Checkbox.defaultProps = {
+  checked: undefined,
+  className: undefined,
+  defaultChecked: undefined,
+  disabled: false,
+  label: null,
+  labelPosition: 'left',
+  name: undefined,
+  onCheck: () => {}
+};
+export default Checkbox;