@shopgate/pwa-ui-shared 7.30.0-alpha.7 → 7.30.0-alpha.8

package/AddToCartButton/style.js

@@ -1,32 +1,148 @@
-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{css}from'glamor';import spring from'css-spring';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var options={stiffness:381.47,damping:15};var buttonSize=40;var iconSize=20;/**
+import { css } from 'glamor';
+import spring from 'css-spring';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const options = {
+  stiffness: 381.47,
+  damping: 15
+};
+const buttonSize = 40;
+const iconSize = 20;
+
+/**
  * Keyframe animations to create spring animation.
  * spring(..) automatically calculates all steps for the keyframe animation.
- */var springFromTopKeyframes=css.keyframes(spring({transform:'translate3d(0, 300%, 0)'},{transform:'translate3d(0, -50%, 0)'},options));var springFromBottomKeyframes=css.keyframes(spring({transform:'translate3d(0, -300%, 0)'},{transform:'translate3d(0, -50%, 0)'},options));var springToTopKeyframes=css.keyframes(spring({transform:'translate3d(0, -50%, 0)'},{transform:'translate3d(0, 300%, 0)'},options));var springToBottomKeyframes=css.keyframes(spring({transform:'translate3d(0, -50%, 0)'},{transform:'translate3d(0, -300%, 0)'},options));var springFromBottom=css({animation:"".concat(springFromBottomKeyframes," 600ms")}).toString();var springFromTop=css({animation:"".concat(springFromTopKeyframes," 600ms")}).toString();var springToTop=css({animation:"".concat(springToTopKeyframes," 600ms")}).toString();var springToBottom=css({animation:"".concat(springToBottomKeyframes," 600ms")}).toString();/**
+ */
+const springFromTopKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, 300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, options));
+const springFromBottomKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, -300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, options));
+const springToTopKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, 300%, 0)'
+}, options));
+const springToBottomKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, -300%, 0)'
+}, options));
+const springFromBottom = css({
+  animation: `${springFromBottomKeyframes} 600ms`
+}).toString();
+const springFromTop = css({
+  animation: `${springFromTopKeyframes} 600ms`
+}).toString();
+const springToTop = css({
+  animation: `${springToTopKeyframes} 600ms`
+}).toString();
+const springToBottom = css({
+  animation: `${springToBottomKeyframes} 600ms`
+}).toString();
+
+/**
  * Circular button and container for the icons.
  * Default styles.
  * @param {number} bSize Size of the button.
  * @param {number} iSize Size of the icon.
  * @return {string} Class name
- */var buttonWrapperDefault=function buttonWrapperDefault(bSize,iSize){return{transition:'background 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',borderRadius:'50%',width:bSize,height:bSize,position:'relative',fontSize:iSize,outline:0,paddingLeft:(bSize-iSize)/2,paddingRight:(bSize-iSize)/2,zIndex:2,// Prevents the icons to be visible outside of the circle
-overflow:'hidden',flexShrink:0};};/**
+ */
+const buttonWrapperDefault = (bSize, iSize) => ({
+  transition: 'background 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+  borderRadius: '50%',
+  width: bSize,
+  height: bSize,
+  position: 'relative',
+  fontSize: iSize,
+  outline: 0,
+  paddingLeft: (bSize - iSize) / 2,
+  paddingRight: (bSize - iSize) / 2,
+  zIndex: 2,
+  // Prevents the icons to be visible outside of the circle
+  overflow: 'hidden',
+  flexShrink: 0
+});
+/**
  * Circular button and container for the icons.
  * @param {number} bSize Size of the button.
  * @param {number} iSize Size of the icon.
  * @return {string} Class name
- */var buttonWrapper=function buttonWrapper(bSize,iSize){return css(_extends({},buttonWrapperDefault(bSize,iSize))).toString();};/**
+ */
+const buttonWrapper = (bSize, iSize) => css({
+  ...buttonWrapperDefault(bSize, iSize)
+}).toString();
+
+/**
  * Circular button and container for the icons.
  * Without shadow.
  * @param {number} bSize Size of the button.
  * @param {number} iSize Size of the icon.
  * @return {string} Class name
- */var buttonWrapperNoShadow=function buttonWrapperNoShadow(bSize,iSize){return css(_extends({},buttonWrapperDefault(bSize,iSize))).toString();};/**
+ */
+const buttonWrapperNoShadow = (bSize, iSize) => css({
+  ...buttonWrapperDefault(bSize, iSize)
+}).toString();
+
+/**
  * Styling that is applied to the button when cart icon is shown.
- */var buttonReady=css({background:"var(--color-button-cta, ".concat(themeConfig.colors.cta,")"),color:"var(--color-button-cta-contrast, ".concat(themeConfig.colors.ctaContrast,")")}).toString();/**
+ */
+const buttonReady = css({
+  background: `var(--color-button-cta, ${themeConfig.colors.cta})`,
+  color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`
+}).toString();
+
+/**
  * Styling that is applied to the button when checkmark is shown.
- */var buttonSuccess=css({background:"var(--color-button-cta-contrast, ".concat(themeConfig.colors.ctaContrast,")"),color:"var(--color-button-cta, ".concat(themeConfig.colors.cta,")")}).toString();/**
+ */
+const buttonSuccess = css({
+  background: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
+  color: `var(--color-button-cta, ${themeConfig.colors.cta})`
+}).toString();
+
+/**
  * Styling that is applied to the button when it is disabled.
- */var buttonDisabled=css({background:themeConfig.colors.shade5,color:"var(--color-button-cta-contrast, ".concat(themeConfig.colors.ctaContrast,")"),boxShadow:themeConfig.shadows.buttons.disabled}).toString();/**
+ */
+const buttonDisabled = css({
+  background: themeConfig.colors.shade5,
+  color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
+  boxShadow: themeConfig.shadows.buttons.disabled
+}).toString();
+
+/**
  * Basic icon style that is always applied to all icons.
- */var icon=css({transition:'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',opacity:1,position:'absolute'}).toString();/**
+ */
+const icon = css({
+  transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+  opacity: 1,
+  position: 'absolute'
+}).toString();
+
+/**
  * Icon style that is applied only to the spinner icon.
- */var spinnerIcon=css({left:'50%',top:'50%',marginTop:-themeConfig.variables.loadingIndicator.size/2,marginLeft:-themeConfig.variables.loadingIndicator.size/2}).toString();export default{buttonWrapper:buttonWrapper,buttonWrapperNoShadow:buttonWrapperNoShadow,buttonReady:buttonReady,buttonSuccess:buttonSuccess,buttonDisabled:buttonDisabled,buttonSize:buttonSize,icon:icon,iconSize:iconSize,spinnerIcon:spinnerIcon,springFromBottom:springFromBottom,springFromTop:springFromTop,springToBottom:springToBottom,springToTop:springToTop};
+ */
+const spinnerIcon = css({
+  left: '50%',
+  top: '50%',
+  marginTop: -themeConfig.variables.loadingIndicator.size / 2,
+  marginLeft: -themeConfig.variables.loadingIndicator.size / 2
+}).toString();
+export default {
+  buttonWrapper,
+  buttonWrapperNoShadow,
+  buttonReady,
+  buttonSuccess,
+  buttonDisabled,
+  buttonSize,
+  icon,
+  iconSize,
+  spinnerIcon,
+  springFromBottom,
+  springFromTop,
+  springToBottom,
+  springToTop
+};

package/Availability/index.js

@@ -1,4 +1,9 @@
-import React from'react';import PropTypes from'prop-types';import{AVAILABILITY_STATE_OK,AVAILABILITY_STATE_WARNING,AVAILABILITY_STATE_ALERT}from'@shopgate/pwa-common-commerce/product/constants';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
+import styles from "./style";
+
+/**
  * This component renders the availability text for a product
  * @param {Object} props The component props
  * @param {string} props.text The availability text
@@ -7,4 +12,31 @@ import React from'react';import PropTypes from'prop-types';import{AVAILABILITY_S
  *   state of the availability text is "ok"
  * @param {string} [props.className] CSS classes
  * @return {JSX}
- */var Availability=function Availability(_ref){var text=_ref.text,state=_ref.state,_ref$showWhenAvailabl=_ref.showWhenAvailable,showWhenAvailable=_ref$showWhenAvailabl===void 0?false:_ref$showWhenAvailabl,_ref$className=_ref.className,className=_ref$className===void 0?null:_ref$className;if(!text||state===AVAILABILITY_STATE_OK&&!showWhenAvailable){return null;}var style=styles.stateOk;if(state===AVAILABILITY_STATE_WARNING){style=styles.stateWarning;}if(state===AVAILABILITY_STATE_ALERT){style=styles.stateAlert;}return React.createElement("div",{className:"ui-shared__availability ".concat(className," ").concat(style),"data-test-id":"availabilityText: ".concat(text)},text);};Availability.defaultProps={className:'',showWhenAvailable:false,state:AVAILABILITY_STATE_OK};export default Availability;
+ */
+const Availability = ({
+  text,
+  state,
+  showWhenAvailable = false,
+  className = null
+}) => {
+  if (!text || state === AVAILABILITY_STATE_OK && !showWhenAvailable) {
+    return null;
+  }
+  let style = styles.stateOk;
+  if (state === AVAILABILITY_STATE_WARNING) {
+    style = styles.stateWarning;
+  }
+  if (state === AVAILABILITY_STATE_ALERT) {
+    style = styles.stateAlert;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `ui-shared__availability ${className} ${style}`,
+    "data-test-id": `availabilityText: ${text}`
+  }, text);
+};
+Availability.defaultProps = {
+  className: '',
+  showWhenAvailable: false,
+  state: AVAILABILITY_STATE_OK
+};
+export default Availability;

package/Availability/spec.js

@@ -1 +1,41 @@
-import React from'react';import{mount}from'enzyme';import{AVAILABILITY_STATE_OK,AVAILABILITY_STATE_WARNING,AVAILABILITY_STATE_ALERT}from'@shopgate/pwa-common-commerce/product/constants';import Availability from"./index";describe('<Availability />',function(){it('should not render when text is empty',function(){var wrapper=mount(React.createElement(Availability,{text:""}));expect(wrapper).toMatchSnapshot();});it('should not render by default if state is "ok"',function(){var wrapper=mount(React.createElement(Availability,{state:AVAILABILITY_STATE_OK,text:"Available"}));expect(wrapper).toMatchSnapshot();});it('should render if state is "ok" when "showWhenAvailable" is set',function(){var wrapper=mount(React.createElement(Availability,{state:AVAILABILITY_STATE_OK,text:"Available",showWhenAvailable:true}));expect(wrapper).toMatchSnapshot();});it('should render if state is "warning"',function(){var wrapper=mount(React.createElement(Availability,{state:AVAILABILITY_STATE_WARNING,text:"Only 5 left"}));expect(wrapper).toMatchSnapshot();});it('should render if state is "warning"',function(){var wrapper=mount(React.createElement(Availability,{state:AVAILABILITY_STATE_ALERT,text:"Out of stock"}));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { mount } from 'enzyme';
+import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
+import Availability from "./index";
+describe('<Availability />', () => {
+  it('should not render when text is empty', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+      text: ""
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should not render by default if state is "ok"', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+      state: AVAILABILITY_STATE_OK,
+      text: "Available"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render if state is "ok" when "showWhenAvailable" is set', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+      state: AVAILABILITY_STATE_OK,
+      text: "Available",
+      showWhenAvailable: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render if state is "warning"', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+      state: AVAILABILITY_STATE_WARNING,
+      text: "Only 5 left"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render if state is "warning"', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+      state: AVAILABILITY_STATE_ALERT,
+      text: "Out of stock"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/Availability/style.js

@@ -1 +1,19 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var stateOk=css({fontSize:'0.875rem',color:"var(--color-state-ok, ".concat(themeConfig.colors.success,")")}).toString();var stateWarning=css({fontSize:'0.875rem',color:"var(--color-state-warning, ".concat(themeConfig.colors.warning,")")}).toString();var stateAlert=css({fontSize:'0.875rem',color:"var(--color-state-alert, ".concat(themeConfig.colors.error,")")}).toString();export default{stateOk:stateOk,stateWarning:stateWarning,stateAlert:stateAlert};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const stateOk = css({
+  fontSize: '0.875rem',
+  color: `var(--color-state-ok, ${themeConfig.colors.success})`
+}).toString();
+const stateWarning = css({
+  fontSize: '0.875rem',
+  color: `var(--color-state-warning, ${themeConfig.colors.warning})`
+}).toString();
+const stateAlert = css({
+  fontSize: '0.875rem',
+  color: `var(--color-state-alert, ${themeConfig.colors.error})`
+}).toString();
+export default {
+  stateOk,
+  stateWarning,
+  stateAlert
+};

package/Button/index.js

@@ -1,14 +1,85 @@
-var _excluded=["className","disabled","onClick","testId","type","wrapContent","flat"];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 BaseButton from'@shopgate/pwa-common/components/Button';import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import BaseButton from '@shopgate/pwa-common/components/Button';
+import styles from "./style";
+/**
  * The basic button component. This components applies Material Design styles and acts as
  * base to more feature-rich button components such as ActionButton and RippleButton, but can
  * also be used as standalone component or any other kind of new button.
- */var Button=/*#__PURE__*/function(_Component){function Button(){_classCallCheck(this,Button);return _callSuper(this,Button,arguments);}_inherits(Button,_Component);return _createClass(Button,[{key:"style",get:/**
+ */
+class Button extends Component {
+  /**
    * Getter for style depending on prop type.
    * @returns {Object}
-   */function get(){var _this$props=this.props,flat=_this$props.flat,disabled=_this$props.disabled;switch(this.props.type){case'plain':return styles.plain();case'regular':return styles.regular(disabled);case'simple':return styles.simple(disabled);default:case'primary':return styles.primary(disabled,flat);case'secondary':return styles.secondary(disabled,flat);}}/**
+   */
+  get style() {
+    const {
+      flat,
+      disabled
+    } = this.props;
+    switch (this.props.type) {
+      case 'plain':
+        return styles.plain();
+      case 'regular':
+        return styles.regular(disabled);
+      case 'simple':
+        return styles.simple(disabled);
+      default:
+      case 'primary':
+        return styles.primary(disabled, flat);
+      case 'secondary':
+        return styles.secondary(disabled, flat);
+    }
+  }
+
+  /**
    * Getter for the calculated button props.
    * @returns {Object}
-   */},{key:"buttonProps",get:function get(){var _this$props2=this.props,className=_this$props2.className,disabled=_this$props2.disabled,onClick=_this$props2.onClick,testId=_this$props2.testId,type=_this$props2.type,wrapContent=_this$props2.wrapContent,flat=_this$props2.flat,rest=_objectWithoutProperties(_this$props2,_excluded);var buttonProps=_extends({className:className,disabled:disabled,onClick:onClick},rest);return buttonProps;}/**
+   */
+  get buttonProps() {
+    const {
+      className,
+      disabled,
+      onClick,
+      testId,
+      type,
+      wrapContent,
+      flat,
+      ...rest
+    } = this.props;
+    const buttonProps = {
+      className,
+      disabled,
+      onClick,
+      ...rest
+    };
+    return buttonProps;
+  }
+
+  /**
    * Renders the component.
    * @return {JSX}
-   */},{key:"render",value:function render(){var style=this.style;var content=this.props.wrapContent?React.createElement("div",{className:style.content},this.props.children):this.props.children;return React.createElement(BaseButton,_extends({},this.buttonProps,{className:"ui-shared__button ".concat(style.button," ").concat(this.props.className),testId:this.props.testId}),content);}}]);}(Component);_defineProperty(Button,"defaultProps",_extends({},BaseButton.defaultProps,{className:'',flat:false,type:'primary',wrapContent:true,testId:'Button'}));export default Button;
+   */
+  render() {
+    const {
+      style
+    } = this;
+    const content = this.props.wrapContent ? /*#__PURE__*/React.createElement("div", {
+      className: style.content
+    }, this.props.children) : this.props.children;
+    return /*#__PURE__*/React.createElement(BaseButton, _extends({}, this.buttonProps, {
+      className: `ui-shared__button ${style.button} ${this.props.className}`,
+      testId: this.props.testId
+    }), content);
+  }
+}
+Button.defaultProps = {
+  ...BaseButton.defaultProps,
+  className: '',
+  flat: false,
+  type: 'primary',
+  wrapContent: true,
+  testId: 'Button'
+};
+export default Button;

package/Button/spec.js

@@ -1 +1,33 @@
-import trim from'lodash/trim';import React from'react';import{shallow}from'enzyme';import Button from"./index";import styles from"./style";describe('<Button />',function(){it('should render as a regular button if type is omitted',function(){var wrapper=shallow(React.createElement(Button,null,"Press me"));expect(wrapper).toMatchSnapshot();expect(wrapper.render().text()).toEqual('Press me');});it('should render as a regular button if type is explicitly defined',function(){var wrapper=shallow(React.createElement(Button,{type:"regular"},"Press me"));expect(wrapper).toMatchSnapshot();expect(trim(wrapper.prop('className'))).toEqual("ui-shared__button ".concat(styles.regular(false).button));});it('should render as a primary button',function(){var wrapper=shallow(React.createElement(Button,{type:"primary"},"Press me"));expect(trim(wrapper.prop('className'))).toEqual("ui-shared__button ".concat(styles.primary(false,false).button));expect(wrapper).toMatchSnapshot();});it('should render as a secondary button',function(){var wrapper=shallow(React.createElement(Button,{type:"secondary"},"Press me"));expect(trim(wrapper.prop('className'))).toEqual("ui-shared__button ".concat(styles.secondary(false,false).button));expect(wrapper).toMatchSnapshot();});});
+import trim from 'lodash/trim';
+import React from 'react';
+import { shallow } from 'enzyme';
+import Button from "./index";
+import styles from "./style";
+describe('<Button />', () => {
+  it('should render as a regular button if type is omitted', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, null, "Press me"));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render().text()).toEqual('Press me');
+  });
+  it('should render as a regular button if type is explicitly defined', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+      type: "regular"
+    }, "Press me"));
+    expect(wrapper).toMatchSnapshot();
+    expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.regular(false).button}`);
+  });
+  it('should render as a primary button', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+      type: "primary"
+    }, "Press me"));
+    expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.primary(false, false).button}`);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render as a secondary button', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+      type: "secondary"
+    }, "Press me"));
+    expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.secondary(false, false).button}`);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/Button/style.js

@@ -1,46 +1,155 @@
-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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var buttonPadding="0 ".concat(themeConfig.variables.gap.big,"px 0");/**
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const buttonPadding = `0 ${themeConfig.variables.gap.big}px 0`;
+
+/**
  * Creates the button style.
  * @param {string} text The text color.
  * @param {string|null} background The fill color.
  * @return {Object} The button style.
- */var button=function button(text,background){return _extends({position:'relative',display:'inline-block',outline:0,color:text,backgroundColor:background,minWidth:64,overflow:'hidden',':disabled':{cursor:'not-allowed'}},themeConfig.variables.buttonBase);};/**
+ */
+const button = (text, background) => ({
+  position: 'relative',
+  display: 'inline-block',
+  outline: 0,
+  color: text,
+  backgroundColor: background,
+  minWidth: 64,
+  overflow: 'hidden',
+  ':disabled': {
+    cursor: 'not-allowed'
+  },
+  ...themeConfig.variables.buttonBase
+});
+
+/**
  * The basic content wrapper styles.
- */var contentWrapper=css({padding:buttonPadding}).toString();/**
+ */
+const contentWrapper = css({
+  padding: buttonPadding
+}).toString();
+
+/**
  * Creates the button styles object.
  * @param {string} textColor The text color.
  * @param {string|null} fillColor The fill color.
  * @return {Object} The styles object.
- */var createButtonStyles=function createButtonStyles(textColor,fillColor){var buttonStyle=_extends({},button(textColor,fillColor));var contentStyle={padding:buttonPadding,color:buttonStyle.color};return{button:css(buttonStyle).toString(),content:css(contentStyle).toString()};};/**
+ */
+const createButtonStyles = (textColor, fillColor) => {
+  const buttonStyle = {
+    ...button(textColor, fillColor)
+  };
+  const contentStyle = {
+    padding: buttonPadding,
+    color: buttonStyle.color
+  };
+  return {
+    button: css(buttonStyle).toString(),
+    content: css(contentStyle).toString()
+  };
+};
+
+/**
  * Creates a plain button style object without any styling.
  * @return {Object}
- */var plain=function plain(){return{button:css({padding:0,outline:0,border:0,textAlign:'left'}).toString(),content:''};};/**
+ */
+const plain = () => ({
+  button: css({
+    padding: 0,
+    outline: 0,
+    border: 0,
+    textAlign: 'left'
+  }).toString(),
+  content: ''
+});
+
+/**
  * Creates a simple button style object.
  * @param {boolean} disabled Whether this button is disabled.
  * @return {Object}
- */var simple=function simple(disabled){if(disabled){// simple disabled button style.
-return createButtonStyles(themeConfig.colors.shade4,themeConfig.colors.shade7);}// simple enabled button style.
-return createButtonStyles(themeConfig.colors.dark,themeConfig.colors.shade7);};/**
+ */
+const simple = disabled => {
+  if (disabled) {
+    // simple disabled button style.
+    return createButtonStyles(themeConfig.colors.shade4, themeConfig.colors.shade7);
+  }
+
+  // simple enabled button style.
+  return createButtonStyles(themeConfig.colors.dark, themeConfig.colors.shade7);
+};
+
+/**
  * The regular flat button style.
  * @param {boolean} disabled Whether this button is disabled.
  * @return {Object} An object of style definitions.
- */var regular=function regular(disabled){if(disabled){// Flat disabled button style.
-return createButtonStyles(colors.shade4,null);}// Flat enabled button style.
-return createButtonStyles(colors.dark,null);};/**
+ */
+const regular = disabled => {
+  if (disabled) {
+    // Flat disabled button style.
+    return createButtonStyles(colors.shade4, null);
+  }
+
+  // Flat enabled button style.
+  return createButtonStyles(colors.dark, null);
+};
+
+/**
  * The primary button style.
  * @param {boolean} disabled Whether this button is disabled.
  * @param {boolean} flat Whether this button should be rendered flat.
  * @return {Object} An object of style definitions.
- */var primary=function primary(disabled,flat){if(!flat){if(disabled){// Regular disabled button style.
-return createButtonStyles(colors.shade4,colors.shade7);}// Regular enabled button style.
-return createButtonStyles("var(--color-secondary-contrast, ".concat(colors.accentContrast,")"),"var(--color-secondary, ".concat(colors.accent,")"));}if(disabled){// Flat disabled button style.
-return createButtonStyles(colors.shade4,null);}// Flat enabled button style.
-return createButtonStyles("var(--color-secondary, ".concat(colors.accent,")"),null);};/**
+ */
+const primary = (disabled, flat) => {
+  if (!flat) {
+    if (disabled) {
+      // Regular disabled button style.
+      return createButtonStyles(colors.shade4, colors.shade7);
+    }
+
+    // Regular enabled button style.
+    return createButtonStyles(`var(--color-secondary-contrast, ${colors.accentContrast})`, `var(--color-secondary, ${colors.accent})`);
+  }
+  if (disabled) {
+    // Flat disabled button style.
+    return createButtonStyles(colors.shade4, null);
+  }
+
+  // Flat enabled button style.
+  return createButtonStyles(`var(--color-secondary, ${colors.accent})`, null);
+};
+
+/**
  * The secondary button style.
  * @param {boolean} disabled Whether this button is disabled.
  * @param {boolean} flat Whether this button should be rendered flat.
  * @return {Object} An object of style definitions.
- */var secondary=function secondary(disabled,flat){if(!flat){if(disabled){// Regular disabled button style.
-return createButtonStyles(colors.shade4,colors.shade7);}// Regular enabled button style.
-return createButtonStyles("var(--color-primary-contrast, ".concat(colors.primaryContrast,")"),"var(--color-primary, ".concat(colors.primary,")"));}if(disabled){// Flat disabled button style.
-return createButtonStyles(colors.shade4,null);}// Flat enabled button style.
-return createButtonStyles("var(--color-primary, ".concat(colors.primary,")"),null);};export default{plain:plain,regular:regular,simple:simple,primary:primary,secondary:secondary,contentWrapper:contentWrapper};
+ */
+const secondary = (disabled, flat) => {
+  if (!flat) {
+    if (disabled) {
+      // Regular disabled button style.
+      return createButtonStyles(colors.shade4, colors.shade7);
+    }
+
+    // Regular enabled button style.
+    return createButtonStyles(`var(--color-primary-contrast, ${colors.primaryContrast})`, `var(--color-primary, ${colors.primary})`);
+  }
+  if (disabled) {
+    // Flat disabled button style.
+    return createButtonStyles(colors.shade4, null);
+  }
+
+  // Flat enabled button style.
+  return createButtonStyles(`var(--color-primary, ${colors.primary})`, null);
+};
+export default {
+  plain,
+  regular,
+  simple,
+  primary,
+  secondary,
+  contentWrapper
+};

package/ButtonLink/connector.js

@@ -1,4 +1,13 @@
-import{connect}from'react-redux';import{historyPush}from'@shopgate/pwa-common/actions/router';/**
+import { connect } from 'react-redux';
+import { historyPush } from '@shopgate/pwa-common/actions/router';
+
+/**
  * @param {Function} dispatch The redux dispatch function.
  * @return {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{navigate:function navigate(pathname){return dispatch(historyPush({pathname:pathname}));}};};export default connect(null,mapDispatchToProps);
+ */
+const mapDispatchToProps = dispatch => ({
+  navigate: pathname => dispatch(historyPush({
+    pathname
+  }))
+});
+export default connect(null, mapDispatchToProps);