@shopgate/pwa-ui-shared 7.25.0-beta.2 → 7.26.0-beta.1

package/ContextMenu/components/Item/index.js

@@ -4,5 +4,5 @@ import React from'react';import PropTypes from'prop-types';import compose from'l
  */var CLOSE_DELAY=250;/**
  * The Context Menu Item component.
  * @param {Object} props The component props.
- * @returns {JSX}
- */var Item=function Item(_ref){var children=_ref.children,closeMenu=_ref.closeMenu,onClick=_ref.onClick,disabled=_ref.disabled,autoClose=_ref.autoClose,className=_ref.className;var handleClick=compose(onClick,autoClose?function(){return setTimeout(closeMenu,CLOSE_DELAY);}:noop);return React.createElement(Glow,{disabled:disabled},React.createElement("div",{className:classNames(getItemClass(disabled),className),onClick:disabled?noop:handleClick,"aria-hidden":true,"data-test-id":"contextMenuButton"},children));};Item.defaultProps={autoClose:true,children:null,className:'',closeMenu:function closeMenu(){},onClick:function onClick(){},disabled:false};export default Item;
+ * @returns {JSX.Element}
+ */var Item=function Item(_ref){var children=_ref.children,closeMenu=_ref.closeMenu,onClick=_ref.onClick,disabled=_ref.disabled,autoClose=_ref.autoClose,className=_ref.className;var handleClick=compose(onClick,autoClose?function(){return setTimeout(closeMenu,CLOSE_DELAY);}:noop);return React.createElement(Glow,{disabled:disabled},React.createElement("button",{className:classNames(getItemClass(disabled),className),onClick:disabled?noop:handleClick,"data-test-id":"contextMenuButton",type:"button",disabled:disabled},children));};Item.defaultProps={autoClose:true,children:null,className:'',closeMenu:function closeMenu(){},onClick:function onClick(){},disabled:false};export default Item;

package/ContextMenu/index.js

@@ -1,4 +1,4 @@
-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,Children}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import classNames from'classnames';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import MoreVertIcon from"../icons/MoreVertIcon";import Position from"./components/Position";import Item from"./components/Item";import styles from"./style";/**
+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,Children}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import classNames from'classnames';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{FocusTrap}from'focus-trap-react';import MoreVertIcon from"../icons/MoreVertIcon";import Position from"./components/Position";import Item from"./components/Item";import styles from"./style";/**
  * The ContextMenu component.
  */var ContextMenu=/*#__PURE__*/function(_Component){/**
    * The Constructor.
@@ -6,10 +6,15 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */function ContextMenu(props){var _this2;_classCallCheck(this,ContextMenu);_this2=_callSuper(this,ContextMenu,[props]);/**
    * Handles any menu toggling interactions.
    * @param {Object} [e] Event
-   */_defineProperty(_this2,"handleMenuToggle",function(e){if(e){e.preventDefault();e.stopPropagation();}if(_this2.elementRef){_this2.setState(function(_ref){var active=_ref.active;var state={active:!active};if(_this2.props.onStateChange){_this2.props.onStateChange(state);}return state;});}});_this2.elementRef=null;_this2.state={active:props.isOpened};return _this2;}/** @inheritDoc */_inherits(ContextMenu,_Component);return _createClass(ContextMenu,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(_ref2){var isOpened=_ref2.isOpened;if(typeof isOpened==='boolean'&&this.state.active!==isOpened){this.setState({active:isOpened});}}/**
+   */_defineProperty(_this2,"handleMenuToggle",function(e){if(e){e.preventDefault();e.stopPropagation();}if(_this2.elementRef){_this2.setState(function(_ref){var active=_ref.active;var newState={active:!active};if(_this2.props.onStateChange){_this2.props.onStateChange(newState);}return newState;});}});_this2.elementRef=null;_this2.menuRef=null;_this2.state={active:props.isOpened};return _this2;}/** @inheritDoc */_inherits(ContextMenu,_Component);return _createClass(ContextMenu,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(_ref2){var isOpened=_ref2.isOpened;if(typeof isOpened==='boolean'&&this.state.active!==isOpened){this.setState({active:isOpened});}}/**
+   * update the focus of the context menu popup
+   * @param {Object} prevProps previous props
+   * @param {Object} prevState previous state
+   */},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){// Check if active changed from false to true
+if(!prevState.active&&this.state.active&&this.menuRef){this.menuRef.focus();}}/**
    * Gets the offset of the DOM element.
    * @returns {Object}
    */},{key:"offset",get:function get(){if(this.elementRef){return this.elementRef.getBoundingClientRect();}return{top:0,left:0};}},{key:"render",value:/**
    * Renders the component.
-   * @returns {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,children=_this$props.children,classes=_this$props.classes,disabled=_this$props.disabled,showToggle=_this$props.showToggle,scroll=_this$props.scroll;var active=this.state.active;var useScroll=typeof scroll==='boolean'&&!!scroll;return React.createElement("div",{"data-test-id":"contextMenu",ref:function ref(_ref3){_this3.elementRef=_ref3;},className:classNames(styles.container,classes.container,'ui-shared__context-menu'),"aria-hidden":true},showToggle&&React.createElement("button",{className:classNames(styles.button,classes.button,_defineProperty({},styles.disabled,disabled)),onClick:this.handleMenuToggle,disabled:disabled,type:"button","aria-hidden":true},React.createElement(MoreVertIcon,null)),React.createElement(ConnectedReactPortal,{isOpened:active},React.createElement("div",{className:styles.overlay},React.createElement(Backdrop,{isVisible:true,level:0,opacity:0,onClick:this.handleMenuToggle}),React.createElement(Position,{offset:this.offset},React.createElement("div",{className:classNames(styles.menu,_defineProperty({},styles.scrollable,useScroll))},Children.map(children,function(child){if(!child){return null;}return React.cloneElement(child,{closeMenu:_this3.handleMenuToggle});}))))));}}]);}(Component);_defineProperty(ContextMenu,"Item",Item);_defineProperty(ContextMenu,"defaultProps",{children:null,classes:{container:'',button:''},disabled:false,showToggle:true,isOpened:null,onStateChange:null,scroll:null});export default ContextMenu;
+   * @returns {JSX.Element}
+   */function render(){var _this3=this;var _this$props=this.props,children=_this$props.children,classes=_this$props.classes,disabled=_this$props.disabled,showToggle=_this$props.showToggle,scroll=_this$props.scroll;var active=this.state.active;var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;var useScroll=typeof scroll==='boolean'&&!!scroll;return React.createElement("div",{"data-test-id":"contextMenu",ref:function ref(_ref3){_this3.elementRef=_ref3;},className:classNames(styles.container,classes.container,'ui-shared__context-menu')},showToggle&&React.createElement("button",{className:classNames(styles.button,classes.button,_defineProperty({},styles.disabled,disabled)),onClick:this.handleMenuToggle,disabled:disabled,type:"button","aria-label":__('navigation.open_menu'),"aria-haspopup":"true","aria-expanded":active,"aria-controls":"contextMenuDialog"},React.createElement(MoreVertIcon,{"aria-hidden":true})),React.createElement(ConnectedReactPortal,{isOpened:active},React.createElement(FocusTrap,{active:active},React.createElement("div",{className:styles.overlay},React.createElement(Backdrop,{isVisible:true,level:0,opacity:0,onClick:this.handleMenuToggle}),React.createElement(Position,{offset:this.offset},React.createElement("div",{className:classNames(styles.menu,_defineProperty({},styles.scrollable,useScroll)),ref:function ref(node){_this3.menuRef=node;},tabIndex:"-1","aria-modal":"true",role:"dialog"},Children.map(children,function(child){if(!child){return null;}return React.cloneElement(child,{closeMenu:_this3.handleMenuToggle});}),React.createElement("button",{onClick:this.handleMenuToggle,className:"sr-only","aria-label":__('common.close'),type:"button"},__('common.close'))))))));}}]);}(Component);_defineProperty(ContextMenu,"Item",Item);_defineProperty(ContextMenu,"defaultProps",{children:null,classes:{container:'',button:''},disabled:false,showToggle:true,isOpened:null,onStateChange:null,scroll:null});_defineProperty(ContextMenu,"contextTypes",{i18n:PropTypes.func});export default ContextMenu;

package/Dialog/components/HtmlContentDialog/index.js

@@ -2,5 +2,5 @@ import React from'react';import PropTypes from'prop-types';import BasicDialog fr
  * Renders a simple dialog with a title and html content as a message.
  * This is the default dialog if no type has been specified.
  * @param {Object} props The component properties.
- * @returns {JSX} The rendered component.
+ * @returns {JSX.Element} The rendered component.
  */var HtmlContentDialog=function HtmlContentDialog(_ref){var actions=_ref.actions,message=_ref.message,title=_ref.title;return React.createElement(BasicDialog,{title:title,actions:actions},React.createElement("div",{dangerouslySetInnerHTML:{__html:message}}));};HtmlContentDialog.defaultProps={title:BasicDialog.defaultProps.title};export default HtmlContentDialog;

package/DiscountBadge/index.js

@@ -1,7 +1,7 @@
-import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React from'react';import PropTypes from'prop-types';import{I18n}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import styles from"./style";/**
  * The discount badge component.
  * @param {Object} props The component props
  * @param {string} [props.className] Additional CSS style definitions
  * @param {string} props.text The text contents of the component.
- * @returns {JSX}
- */var DiscountBadge=function DiscountBadge(_ref){var text=_ref.text,className=_ref.className,display=_ref.display,discount=_ref.discount;return React.createElement("div",{"data-test-id":text,className:"ui-shared__discount-badge"},React.createElement(I18n.Text,{className:"".concat(styles[display]," ").concat(className),string:text,params:[discount]}));};DiscountBadge.defaultProps={className:'',discount:null,display:'small'};export default DiscountBadge;
+ * @returns {JSX.Element}
+ */var DiscountBadge=function DiscountBadge(_ref){var text=_ref.text,className=_ref.className,display=_ref.display,discount=_ref.discount;return React.createElement("div",{"data-test-id":text,className:"ui-shared__discount-badge","aria-label":"".concat(i18n.text('cart.discount'),": ").concat(text)},React.createElement(I18n.Text,{className:"".concat(styles[display]," ").concat(className),string:text,params:[discount],"aria-hidden":true}));};DiscountBadge.defaultProps={className:'',discount:null,display:'small'};export default DiscountBadge;

package/Form/RadioGroup/components/Item/index.js

@@ -1,6 +1,6 @@
-import _camelCase from"lodash/camelCase";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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import I18n from'@shopgate/pwa-common/components/I18n';import style from"./style";/**
+import _camelCase from"lodash/camelCase";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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{I18n}from'@shopgate/engage/components';import style from"./style";/**
  * RadioItem component.
- */var RadioItem=/*#__PURE__*/function(_PureComponent){function RadioItem(){_classCallCheck(this,RadioItem);return _callSuper(this,RadioItem,arguments);}_inherits(RadioItem,_PureComponent);return _createClass(RadioItem,[{key:"render",value:function render(){var _this$props=this.props,ItemLabel=_this$props.label,name=_this$props.name,onChange=_this$props.onChange,checked=_this$props.checked,className=_this$props.className,attributes=_this$props.attributes;var _ref=attributes||{},disabled=_ref.disabled;return React.createElement("label",{className:classNames(style.container,className,_defineProperty({},style.disabled,!!disabled),_camelCase(name),'radioItem'),htmlFor:this.key},checked&&React.createElement(CheckedIcon,{className:classNames(style.active,style.icon,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(style.icon,'uncheckedIcon')}),React.createElement("input",_extends({className:classNames(style.input,'input'),checked:checked,type:"radio",name:name,onChange:onChange},attributes)),React.createElement(I18n.Text,{className:classNames(style.label,'label'),string:ItemLabel}));}}]);}(PureComponent);_defineProperty(RadioItem,"defaultProps",{attributes:null,checked:false,className:'',onChange:function onChange(){}/**
+ */var RadioItem=/*#__PURE__*/function(_PureComponent){function RadioItem(){_classCallCheck(this,RadioItem);return _callSuper(this,RadioItem,arguments);}_inherits(RadioItem,_PureComponent);return _createClass(RadioItem,[{key:"render",value:function render(){var _this$props=this.props,ItemLabel=_this$props.label,name=_this$props.name,onChange=_this$props.onChange,checked=_this$props.checked,className=_this$props.className,attributes=_this$props.attributes;var _ref=attributes||{},disabled=_ref.disabled;return React.createElement("label",{className:classNames(style.container,className,_defineProperty({},style.disabled,!!disabled),_camelCase(name),'radioItem'),htmlFor:name},checked&&React.createElement(CheckedIcon,{className:classNames(style.active,style.icon,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(style.icon,'uncheckedIcon')}),React.createElement("input",_extends({className:classNames('sr-only','input'),checked:checked,id:name,type:"radio",name:name,onChange:onChange,"aria-labelledby":"".concat(name,"-label")},attributes)),React.createElement("span",{"aria-hidden":true,id:"".concat(name,"-label"),className:classNames(style.label,'label')},React.createElement(I18n.Text,{string:ItemLabel})));}}]);}(PureComponent);_defineProperty(RadioItem,"defaultProps",{attributes:null,checked:false,className:'',onChange:function onChange(){}/**
    * Renders the component.
-   * @returns {JSX}
+   * @returns {JSX.Element}
    */});export default RadioItem;

package/Form/RadioGroup/components/Item/style.js

@@ -1,2 +1,2 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var input=css({display:'none'}).toString();var container=css({display:'flex',marginLeft:-1// Removes margin of svg.
-}).toString();var icon=css({width:24,height:24,flexShrink:0}).toString();var disabled=css({opacity:0.25,pointerEvents:'none'}).toString();var label=css({flex:1,fontSize:'1rem',lineHeight:1.5,marginLeft:themeConfig.variables.gap.small,marginBottom:themeConfig.variables.gap.small}).toString();var active=css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();export default{input:input,icon:icon,disabled:disabled,container:container,label:label,active:active};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',marginLeft:-1// Removes margin of svg.
+}).toString();var icon=css({width:24,height:24,flexShrink:0}).toString();var disabled=css({opacity:0.25,pointerEvents:'none'}).toString();var label=css({flex:1,fontSize:'1rem',lineHeight:1.5,marginLeft:themeConfig.variables.gap.small,marginBottom:themeConfig.variables.gap.small}).toString();var active=css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();export default{icon:icon,disabled:disabled,container:container,label:label,active:active};

package/FormElement/components/ErrorText/index.js

@@ -1,5 +1,5 @@
 import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
  * Error message component.
  * @param {Object} props The component props.
- * @returns {JSX}
- */var ErrorText=function ErrorText(_ref){var className=_ref.className,errorText=_ref.errorText,translate=_ref.translate;return React.createElement("div",{className:classNames(className,styles,'errorText')},translate&&React.createElement(I18n.Text,{string:errorText}),!translate&&errorText);};ErrorText.defaultProps={className:null,errorText:null,translate:true};export default ErrorText;
+ * @returns {JSX.Element}
+ */var ErrorText=function ErrorText(_ref){var className=_ref.className,errorText=_ref.errorText,translate=_ref.translate;return React.createElement("div",{className:classNames(className,styles,'errorText'),role:"alert","aria-live":"assertive","aria-atomic":"true"},translate&&React.createElement(I18n.Text,{string:errorText}),!translate&&errorText);};ErrorText.defaultProps={className:null,errorText:null,translate:true};export default ErrorText;

package/NoResults/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import classNames fro
  * The NoResults component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var NoResults=function NoResults(props){return React.createElement("div",{className:classNames(styles.wrapper,props.className,' ui-shared__no-results'),"data-test-id":"noResults"},React.createElement("div",{className:styles.icon},React.createElement(Icon,null)),React.createElement("div",{className:styles.headline},React.createElement(I18n.Text,{string:props.headlineText,params:props})),React.createElement("div",{className:styles.text},React.createElement(I18n.Text,{string:props.bodyText,params:props})));};NoResults.defaultProps={className:null};export default NoResults;
+ */var NoResults=function NoResults(props){return React.createElement("div",{className:classNames(styles.wrapper,props.className,' ui-shared__no-results'),"data-test-id":"noResults"},React.createElement("div",{className:styles.icon},React.createElement(Icon,null)),React.createElement("div",{className:styles.headline,role:"alert","aria-atomic":"true"},React.createElement(I18n.Text,{string:props.headlineText,params:props})),React.createElement("div",{className:styles.text,role:"alert","aria-atomic":"true"},React.createElement(I18n.Text,{string:props.bodyText,params:props})));};NoResults.defaultProps={className:null};export default NoResults;

package/Price/index.js

@@ -1,4 +1,4 @@
-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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import showTaxDisclaimer from'@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import styles from"./style";/**
+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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import{I18n}from'@shopgate/engage/components';import showTaxDisclaimer from'@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import styles from"./style";/**
  * The Price component
  * @param {Object} props The component props
  * @param {string} [props.className] CSS classes
@@ -7,11 +7,11 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {number} props.unitPriceMin The minimum price of possible child products
  * @param {boolean} props.discounted Tells if the pice is discounted
  * @param {Object} context The component context.
- * @return {JSX}
+ * @return {JSX.Element}
  */var Price=function Price(props,context){// Added with PWA 6 - CCP-2372
 var _useWidgetSettings=useWidgetSettings('@shopgate/engage/components/TaxDisclaimer'),show=_useWidgetSettings.show,hint=_useWidgetSettings.hint;// use widget setting if set to true/false, otherwise use market logic
-var showDisclaimer=typeof show==='boolean'?show:showTaxDisclaimer;var containerClasses=classNames(styles.container,props.className,_defineProperty({},styles.discounted,props.discounted),'price',props.discounted?'ui-shared__price-discounted':'ui-shared__price');var _context$i18n=context.i18n(),__=_context$i18n.__,_p=_context$i18n._p;var ariaPrice;if(props.unitPriceMin){ariaPrice=__('price.from',{price:_p(props.unitPriceMin,props.currency,props.fractions)});}else{ariaPrice=_p(props.unitPrice,props.currency,props.fractions);}ariaPrice=ariaPrice.replace('-',"\u2212");/* eslint-disable jsx-a11y/aria-role */ /**
+var showDisclaimer=typeof show==='boolean'?show:showTaxDisclaimer;var containerClasses=classNames(styles.container,props.className,_defineProperty({},styles.discounted,props.discounted),'price',props.discounted?'ui-shared__price-discounted':'ui-shared__price');var _context$i18n=context.i18n(),__=_context$i18n.__,_p=_context$i18n._p;var ariaPrice;if(props.unitPriceMin){ariaPrice=__('price.from',{price:_p(props.unitPriceMin,props.currency,props.fractions)});}else{ariaPrice=_p(props.unitPrice,props.currency,props.fractions);}ariaPrice=ariaPrice.replace('-',"\u2212");/**
    * A unitPriceMin > 0 means, that the product has child products with different prices.
    * The unitPriceMin contains the lowest of these prices and will be
    * displayed with a 'From' prefix.
-   */return React.createElement("div",{className:containerClasses,"data-test-id":"minPrice: ".concat(props.unitPriceMin," price: ").concat(props.unitPrice," currency: ").concat(props.currency)},React.createElement("span",{role:"text","aria-label":__('price.label',{price:ariaPrice})},props.unitPriceMin?React.createElement(I18n.Text,{string:"price.from"},React.createElement(I18n.Price,{currency:props.currency,fractions:props.fractions,forKey:"price",price:props.unitPriceMin})):React.createElement(React.Fragment,null,props.allowFree&&props.unitPrice===0?React.createElement(I18n.Text,{string:"price.free"}):React.createElement(I18n.Price,{currency:props.currency,fractions:props.fractions,price:props.unitPrice}))),props.taxDisclaimer&&showDisclaimer?React.createElement("div",{role:"text",className:styles.disclaimer,"aria-label":__('product.tax_disclaimer')},hint||'*'):null);/* eslint-enable jsx-a11y/aria-role */};Price.defaultProps={className:'',unitPriceMin:0,discounted:false,fractions:true,taxDisclaimer:false,allowFree:false};Price.contextTypes={i18n:PropTypes.func};export default Price;
+   */return React.createElement("div",{className:containerClasses,"data-test-id":"minPrice: ".concat(props.unitPriceMin," price: ").concat(props.unitPrice," currency: ").concat(props.currency)},React.createElement("span",{"aria-label":__('price.label',{price:ariaPrice})},props.unitPriceMin?React.createElement(I18n.Text,{"aria-hidden":true,string:"price.from"},React.createElement(I18n.Price,{currency:props.currency,fractions:props.fractions,forKey:"price",price:props.unitPriceMin})):React.createElement(React.Fragment,null,props.allowFree&&props.unitPrice===0?React.createElement(I18n.Text,{string:"price.free"}):React.createElement(I18n.Price,{currency:props.currency,fractions:props.fractions,price:props.unitPrice}))),props.taxDisclaimer&&showDisclaimer?React.createElement("div",{className:styles.disclaimer},React.createElement("span",null,hint||'*'),React.createElement("span",{className:styles.hidden,"aria-label":__('product.tax_disclaimer_aria')},__('product.tax_disclaimer_aria'))):null);};Price.defaultProps={className:'',unitPriceMin:0,discounted:false,fractions:true,taxDisclaimer:false,allowFree:false};Price.contextTypes={i18n:PropTypes.func};export default Price;

package/Price/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',position:'relative',whiteSpace:'nowrap'}).toString();var disclaimer=css({color:'initial',fontSize:14,position:'absolute',right:-10,top:0}).toString();var discounted=css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();export default{container:container,disclaimer:disclaimer,discounted:discounted};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',position:'relative',whiteSpace:'nowrap'}).toString();var disclaimer=css({color:'initial',fontSize:14,position:'absolute',right:-10,top:0}).toString();var discounted=css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();var hidden=css({position:'absolute',width:'1px',height:'1px',padding:0,margin:'-1px',overflow:'hidden',border:0}).toString();export default{container:container,disclaimer:disclaimer,discounted:discounted,hidden:hidden};

package/PriceStriked/index.js

@@ -19,13 +19,11 @@ return Math.round(90-Math.atan(width/height)*(180/Math.PI));};/**
    */function PriceStriked(props){var _this2;_classCallCheck(this,PriceStriked);_this2=_callSuper(this,PriceStriked,[props]);/**
    * Sets the calculated angle for the DOM element
    * and returns true if succeeded.
-   * @param {Object} element The target element.
    * @returns {boolean}
    */_defineProperty(_this2,"setAngle",function(){if(_this2.element){_this2.angle=calcAngle(_this2.element);return true;}return false;});_this2.angle=null;_this2.element=null;return _this2;}/**
    * Updates the component one more time with the calculated angle
    * based on the DOM element.
    */_inherits(PriceStriked,_Component);return _createClass(PriceStriked,[{key:"componentDidMount",value:function componentDidMount(){if(this.setAngle()){this.forceUpdate();}}},{key:"render",value:/**
    * Renders the component.
-   * @returns {JSX}
-   */function render(){var _this3=this;var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__,_p=_this$context$i18n._p;var angleStyle=this.angle?styles.getAngleStyle(this.angle):'';return React.createElement("div",{// eslint-disable-next-line jsx-a11y/aria-role
-role:"text",className:"".concat(styles.basic," ").concat(this.props.className," ").concat(angleStyle," price-striked ui-shared__price-striked")},React.createElement("span",{ref:function ref(_ref){_this3.element=_ref;},"data-test-id":"strikedPrice: ".concat(this.props.value),"aria-label":__('price.label_old_price',{price:_p(this.props.value,this.props.currency,true)})},React.createElement(I18n.Price,{price:this.props.value,currency:this.props.currency})));}}]);}(Component);_defineProperty(PriceStriked,"defaultProps",{className:''});_defineProperty(PriceStriked,"contextTypes",{i18n:PropTypes.func});export default PriceStriked;
+   * @returns {JSX.Element}
+   */function render(){var _this3=this;var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__,_p=_this$context$i18n._p;var angleStyle=this.angle?styles.getAngleStyle(this.angle):'';return React.createElement(React.Fragment,null,React.createElement("div",{className:"".concat(styles.basic," ").concat(this.props.className," ").concat(angleStyle," price-striked ui-shared__price-striked")},React.createElement("span",{"aria-hidden":true,ref:function ref(_ref){_this3.element=_ref;},"data-test-id":"strikedPrice: ".concat(this.props.value)},React.createElement(I18n.Price,{price:this.props.value,currency:this.props.currency}))),React.createElement("span",{className:"sr-only"},__('price.label_old_price',{price:_p(this.props.value,this.props.currency,true)})));}}]);}(Component);_defineProperty(PriceStriked,"defaultProps",{className:''});_defineProperty(PriceStriked,"contextTypes",{i18n:PropTypes.func});export default PriceStriked;

package/PriceStriked/style.js

@@ -1,5 +1,5 @@
 import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var basic=css({whiteSpace:'nowrap','& span':{position:'relative',':before':{// The strike-through effect is achieved by using the :before pseudo-class.
-borderColor:'currentColor',content:'""',position:'absolute',left:0,right:0,top:'50%'}},color:themeColors.shade3}).toString();/**
+borderColor:'currentColor',content:'""',position:'absolute',left:0,right:0,top:'50%'}},color:themeColors.shade11}).toString();/**
  * Returns a class for the rotated strike-through line.
  * @param {number} angle The calculated angle for the strike-through line.
  * @returns {string} Classname

package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/index.js

@@ -1,4 +1,4 @@
-import React from'react';import PropTypes from'prop-types';import ToggleIcon from'@shopgate/pwa-ui-shared/ToggleIcon';import FlashEnabledIcon from'@shopgate/pwa-ui-shared/icons/FlashEnabledIcon';import FlashDisabledIcon from'@shopgate/pwa-ui-shared/icons/FlashDisabledIcon';import{SCANNER_FLASH}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import styles from"./style";/**
+import React from'react';import PropTypes from'prop-types';import ToggleIcon from'@shopgate/pwa-ui-shared/ToggleIcon';import FlashEnabledIcon from'@shopgate/pwa-ui-shared/icons/FlashEnabledIcon';import FlashDisabledIcon from'@shopgate/pwa-ui-shared/icons/FlashDisabledIcon';import{SCANNER_FLASH}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';import{SurroundPortals}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import styles from"./style";/**
  * The FlashlightButton component.
- * @returns {JSX}
- */var FlashlightButton=function FlashlightButton(_ref){var flashlightState=_ref.flashlightState,onToggle=_ref.onToggle;return React.createElement(SurroundPortals,{portalName:SCANNER_FLASH},React.createElement("button",{className:styles.button,onClick:onToggle,role:"link",type:"button"},React.createElement(ToggleIcon,{on:flashlightState,onIcon:React.createElement(FlashEnabledIcon,{className:styles.icon}),offIcon:React.createElement(FlashDisabledIcon,{className:styles.icon})})));};export default FlashlightButton;
+ * @returns {JSX.Element}
+ */var FlashlightButton=function FlashlightButton(_ref){var flashlightState=_ref.flashlightState,onToggle=_ref.onToggle;return React.createElement(SurroundPortals,{portalName:SCANNER_FLASH},React.createElement("button",{className:styles.button,onClick:onToggle,role:"link",type:"button","aria-label":i18n.text(flashlightState?'scanner.flashlight.switchOff':'scanner.flashlight.switchOn')},React.createElement(ToggleIcon,{on:flashlightState,onIcon:React.createElement(FlashEnabledIcon,{className:styles.icon}),offIcon:React.createElement(FlashDisabledIcon,{className:styles.icon})})),React.createElement("div",{className:"sr-only",role:"status","aria-live":"polite"},i18n.text(flashlightState?'scanner.flashlight.on':'scanner.flashlight.off')));};export default FlashlightButton;

package/ScannerOverlay/components/ScannerBar/components/ScannerInstructions/index.js

@@ -1,4 +1,4 @@
-import React from'react';import I18n from'@shopgate/pwa-common/components/I18n';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{SCANNER_INSTRUCTIONS}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';/**
- * The FlashlightButton component.
- * @returns {JSX}
+import React from'react';import{I18n,SurroundPortals}from'@shopgate/engage/components';import{SCANNER_INSTRUCTIONS}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';/**
+ * The Scanner Instructions component.
+ * @returns {JSX.Element}
  */var ScannerInstructions=function ScannerInstructions(){return React.createElement(SurroundPortals,{portalName:SCANNER_INSTRUCTIONS},React.createElement(I18n.Text,{string:"scanner.instructions"}));};export default ScannerInstructions;

package/ScannerOverlay/components/ScannerBar/index.js

@@ -1,5 +1,5 @@
-import React from'react';import{createPortal}from'react-dom';import PropTypes from'prop-types';import Grid from'@shopgate/pwa-common/components/Grid';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{SCANNER_BAR}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';import FlashlightButton from"./components/FlashlightButton";import ScannerInstructions from"./components/ScannerInstructions";import styles from"./style";/**
+import React from'react';import{createPortal}from'react-dom';import PropTypes from'prop-types';import{Grid}from'@shopgate/engage/components';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{SCANNER_BAR}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';import FlashlightButton from"./components/FlashlightButton";import ScannerInstructions from"./components/ScannerInstructions";import styles from"./style";/**
  * @param {boolean} flashlightState The on/off state of the flashlight.
  * @param {Function} onToggleFlashlight The toggle event triggered by the user.
- * @returns {JSX}
+ * @returns {React.ReactPortal}
  */var ScannerBar=function ScannerBar(_ref){var flashlightState=_ref.flashlightState,onToggleFlashlight=_ref.onToggleFlashlight;return createPortal(React.createElement(SurroundPortals,{portalName:SCANNER_BAR,portalProps:{flashlightState:flashlightState,onToggleFlashlight:onToggleFlashlight}},React.createElement(Grid,{className:"".concat(styles.container," ui-shared__scanner-bar")},React.createElement(Grid.Item,{className:styles.column},React.createElement(FlashlightButton,{onToggle:onToggleFlashlight,flashlightState:flashlightState})),React.createElement(Grid.Item,{className:styles.column},React.createElement(ScannerInstructions,null)))),document.getElementById('AppFooter'));};export default ScannerBar;

package/TextField/components/Label/style.js

@@ -11,7 +11,7 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  */var labelFloating=css({transform:'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)'}).toString();/**
  * The basic styles for the label.
  * @type {string}
- */var label=css(_extends({position:'absolute',left:0,top:24,lineHeight:'19px',pointerEvents:'none',userSelect:'none',color:themeConfig.colors.shade12,transformOrigin:'left top 0px',willChange:'transform, color',transition:"transform ".concat(easing,", color ").concat(easing)},ellipsisLine)).toString();/**
+ */var label=css(_extends({position:'absolute',left:0,top:24,lineHeight:'19px',pointerEvents:'none',userSelect:'none',color:themeConfig.colors.shade11,transformOrigin:'left top 0px',willChange:'transform, color',transition:"transform ".concat(easing,", color ").concat(easing)},ellipsisLine)).toString();/**
  * Gets the style classes for the label.
  * @param {boolean} focused Whether the input field is focused.
  * @param {boolean} floating Whether the label is floating.

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.25.0-beta.2",
+  "version": "7.26.0-beta.1",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.25.0-beta.2",
-    "@shopgate/pwa-ui-material": "7.25.0-beta.2",
+    "@shopgate/pwa-ui-ios": "7.26.0-beta.1",
+    "@shopgate/pwa-ui-material": "7.26.0-beta.1",
     "react-day-picker": "^7.4.8"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.25.0-beta.2",
-    "@shopgate/pwa-common-commerce": "7.25.0-beta.2",
+    "@shopgate/pwa-common": "7.26.0-beta.1",
+    "@shopgate/pwa-common-commerce": "7.26.0-beta.1",
     "classnames": "2.5.1",
     "react": "~16.14.0"
   },