@shopgate/pwa-ui-shared 7.20.0-beta.1 → 7.20.0-beta.10

package/Chip/index.js

@@ -1,5 +1,5 @@
-import React,{useRef,useCallback,useEffect}from'react';import PropTypes from'prop-types';import Button from'@shopgate/pwa-common/components/Button';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import CrossIcon from"../icons/CrossIcon";import styles from"./style";/**
+import React,{useRef,useCallback,useEffect}from'react';import PropTypes from'prop-types';import Button from'@shopgate/pwa-common/components/Button';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import CrossIcon from"../icons/CrossIcon";import styles from"./style";/**
  * The chip component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */function Chip(props){var removable=props.removable,children=props.children,id=props.id,onClick=props.onClick,onRemove=props.onRemove,invert=props.invert,removeLabel=props.removeLabel,editLabel=props.editLabel;var ref=useRef(null);var handleRemove=useCallback(function(){onRemove(id);},[onRemove,id]);useEffect(function(){ref.current.removeAttribute('style');});return React.createElement("div",{ref:ref,className:"ui-shared__chip ".concat(styles.chip(removable,invert)),"data-test-id":id},removable&&React.createElement(Button,{className:styles.removeButton,onClick:handleRemove,testId:"removeFilter","aria-label":removeLabel},React.createElement(ResponsiveContainer,{breakpoint:"<=xs",appAlways:true},React.createElement(CrossIcon,{size:16,color:invert?themeConfig.colors.light:"var(--color-primary, ".concat(themeConfig.colors.accent,")")})),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement(CrossIcon,{size:18,color:invert?themeConfig.colors.light:'var(--color-primary)'}))),React.createElement(Button,{className:styles.name,onClick:onClick,"aria-label":editLabel},children));}Chip.defaultProps={invert:false,onClick:function onClick(){},onRemove:function onRemove(){},removable:true,removeLabel:null,editLabel:null};export default Chip;
+ */function Chip(props){var removable=props.removable,children=props.children,id=props.id,onClick=props.onClick,onRemove=props.onRemove,invert=props.invert,removeLabel=props.removeLabel,editLabel=props.editLabel;var ref=useRef(null);var handleRemove=useCallback(function(){onRemove(id);},[onRemove,id]);useEffect(function(){ref.current.removeAttribute('style');});return React.createElement("div",{ref:ref,className:"ui-shared__chip ".concat(styles.chip(removable,invert)),"data-test-id":id},removable&&React.createElement(Button,{className:styles.removeButton,onClick:handleRemove,testId:"removeFilter","aria-label":removeLabel},React.createElement(ResponsiveContainer,{breakpoint:"<=xs",appAlways:true},React.createElement(CrossIcon,{size:16})),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement(CrossIcon,{size:18}))),React.createElement(Button,{className:styles.name,onClick:onClick,"aria-label":editLabel},children));}Chip.defaultProps={invert:false,onClick:function onClick(){},onRemove:function onRemove(){},removable:true,removeLabel:null,editLabel:null};export default Chip;

package/Chip/style.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;}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{responsiveMediaQuery}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+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;}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{responsiveMediaQuery}from'@shopgate/engage/styles';import{hasNewServices}from'@shopgate/engage/core/helpers';import{themeConfig}from'@shopgate/engage';/**
  * Gets a basic style object for the chip layout.
  * @param {boolean} hasRemoveButton Whether this chip has a remove button.
  * @returns {Object} The style object.
@@ -7,4 +7,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {boolean} hasRemoveButton Whether this chip has a remove button.
  * @param {boolean} inverted Whether the colors of the chip are inverted.
  * @returns {string} The style class name.
- */var chip=function chip(){var hasRemoveButton=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var inverted=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return css(_extends({},chipBase(hasRemoveButton),{backgroundColor:inverted?"var(--color-primary, ".concat(themeConfig.accent,")"):"var(--color-primary-contrast, ".concat(themeConfig.accentContrast,")"),color:inverted?"var(--color-primary-contrast, ".concat(themeConfig.accentContrast,")"):"var(--color-primary, ".concat(themeConfig.accent,")")})).toString();};var removeButton=css(_defineProperty({flexShrink:0,padding:0},responsiveMediaQuery('>xs',{webOnly:true}),{padding:'0 5px',fontSize:'1.125rem'})).toString();var name=css(_defineProperty({paddingLeft:themeConfig.variables.gap.small*0.5,paddingRight:themeConfig.variables.gap.small*0.5,paddingTop:3,paddingBottom:3,fontSize:12,fontWeight:500,textOverflow:'ellipsis',maxWidth:'100%',whiteSpace:'nowrap',overflow:'hidden',display:'block',lineHeight:'1',color:'inherit'},responsiveMediaQuery('>xs',{webOnly:true}),{fontSize:'0.875rem',lineHeight:'1.25rem',padding:'6px 8px 6px 0'})).toString();export default{chip:chip,removeButton:removeButton,name:name};
+ */var chip=function chip(){var hasRemoveButton=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var inverted=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return css(_extends({},chipBase(hasRemoveButton),{},hasNewServices()?{backgroundColor:inverted?'var(--color-primary)':'var(--color-primary-contrast)',color:inverted?'var(--color-primary-contrast)':'var(--color-primary)'}:{backgroundColor:inverted?'var(--color-secondary)':'var(--color-secondary-contrast)',color:inverted?'var(--color-secondary-contrast)':'var(--color-secondary)','--color-text-high-emphasis':inverted?'var(--color-secondary-contrast)':'var(--color-secondary)'})).toString();};var removeButton=css(_defineProperty({flexShrink:0,padding:0},responsiveMediaQuery('>xs',{webOnly:true}),{padding:'0 5px',fontSize:'1.125rem'})).toString();var name=css(_defineProperty({paddingLeft:themeConfig.variables.gap.small*0.5,paddingRight:themeConfig.variables.gap.small*0.5,paddingTop:3,paddingBottom:3,fontSize:12,fontWeight:500,textOverflow:'ellipsis',maxWidth:'100%',whiteSpace:'nowrap',overflow:'hidden',display:'block',lineHeight:'1',color:'inherit'},responsiveMediaQuery('>xs',{webOnly:true}),{fontSize:'0.875rem',lineHeight:'1.25rem',padding:'6px 8px 6px 0'})).toString();export default{chip:chip,removeButton:removeButton,name:name};

package/DiscountBadge/style.js

@@ -1,5 +1,4 @@
-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 badge=_extends({// Before the custom properties the primary color was used for this class.
-background:"var(--color-secondary, ".concat(colors.primary,")"),borderRadius:2,color:"var(--color-secondary-contrast, ".concat(colors.primaryContrast,")"),padding:5,width:'100%',fontWeight:700,textAlign:'center',display:'flex',justifyContent:'center',alignItems:'center',lineHeight:1,whiteSpace:'nowrap'},themeConfig.variables.discountBadgeBase);/**
+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 badge=_extends({background:"var(--color-primary, ".concat(colors.primary,")"),borderRadius:2,color:"var(--color-primary-contrast, ".concat(colors.primaryContrast,")"),padding:5,width:'100%',fontWeight:700,textAlign:'center',display:'flex',justifyContent:'center',alignItems:'center',lineHeight:1,whiteSpace:'nowrap'},themeConfig.variables.discountBadgeBase);/**
  * The discount badge styles that can be selected by passing the style key.
  * @type {Object}
  */export default{small:css(_extends({},badge)).toString(),big:css(_extends({},badge,{paddingTop:5,paddingLeft:5,paddingRight:5})).toString()};

package/Form/TextField/index.js

@@ -11,4 +11,4 @@ var _excluded=["className","placeholder","label","errorText","leftElement","righ
    */_defineProperty(_this2,"handleFocusChange",function(isFocused){_this2.setState({isFocused:isFocused});_this2.props.onFocusChange(isFocused);});_this2.state={isFocused:false};return _this2;}_inherits(TextField,_Component);return _createClass(TextField,[{key:"render",value:/**
    * Renders the text field.
    * @return {JSX}
-   */function render(){var _this$props=this.props,className=_this$props.className,placeholder=_this$props.placeholder,label=_this$props.label,errorText=_this$props.errorText,leftElement=_this$props.leftElement,rightElement=_this$props.rightElement,hasUnderline=_this$props.hasUnderline,props=_objectWithoutProperties(_this$props,_excluded);return React.createElement(FormElement,{className:"".concat(className," ui-shared__form__text-field"),htmlFor:props.name,placeholder:placeholder,label:label,errorText:errorText,hasUnderline:hasUnderline,hasValue:!!props.value,isFocused:this.state.isFocused},React.createElement(Grid,null,leftElement&&React.createElement(Grid.Item,{grow:0,className:style.element},leftElement),React.createElement(Grid.Item,{grow:1,className:style.container},React.createElement(Input,_extends({},props,{onFocusChange:this.handleFocusChange,className:style[props.multiLine?'multiLine':'input'],validateOnBlur:true}))),rightElement&&React.createElement(Grid.Item,{grow:0,className:style.element},rightElement)));}}]);}(Component);_defineProperty(TextField,"defaultProps",{attributes:null,className:'',errorText:'',hasUnderline:true,label:'',leftElement:null,onChange:noop,onFocusChange:noop,placeholder:'',multiLine:false,rightElement:null,value:'',type:'text',maxlength:''});export default TextField;
+   */function render(){var _this$props=this.props,className=_this$props.className,placeholder=_this$props.placeholder,label=_this$props.label,errorText=_this$props.errorText,leftElement=_this$props.leftElement,rightElement=_this$props.rightElement,hasUnderline=_this$props.hasUnderline,props=_objectWithoutProperties(_this$props,_excluded);return React.createElement(FormElement,{className:"".concat(className," ui-shared__form__text-field"),htmlFor:props.name,placeholder:placeholder,label:label,errorText:errorText,hasUnderline:hasUnderline,hasValue:!!props.value,isFocused:this.state.isFocused},React.createElement(Grid,null,leftElement&&React.createElement(Grid.Item,{grow:0,className:style.element},leftElement),React.createElement(Grid.Item,{grow:1,className:style.container},React.createElement(Input,_extends({},props,{onFocusChange:this.handleFocusChange,className:style[props.multiLine?'multiLine':'input'],validateOnBlur:true}))),rightElement&&React.createElement(Grid.Item,{grow:0,className:style.element},rightElement)));}}]);}(Component);_defineProperty(TextField,"defaultProps",{attributes:null,className:'',errorText:'',hasUnderline:true,label:'',leftElement:null,onChange:noop,onFocusChange:noop,placeholder:'',multiLine:false,rightElement:null,value:'',type:'text',maxLength:''});export default TextField;

package/Manufacturer/style.js

@@ -1,2 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export default css({// Before the custom properties the primary color was used for this class.
-color:"var(--color-secondary, ".concat(themeConfig.colors.primary,")")}).toString();
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export default css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();

package/Price/index.js

@@ -8,7 +8,8 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {boolean} props.discounted Tells if the pice is discounted
  * @param {Object} context The component context.
  * @return {JSX}
- */var Price=function Price(props,context){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 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 */ /**
    * A unitPriceMin > 0 means, that the product has child products with different prices.
    * The unitPriceMin contains the lowest of these prices and will be

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,marginLeft:10}).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();export default{container:container,disclaimer:disclaimer,discounted:discounted};

package/RatingStars/style.js

@@ -1,5 +1,4 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var container=css({position:'relative'}).toString();var icon=css({display:'inline-block',verticalAlign:'top',outline:0}).toString();var emptyStars=css({color:themeConfig.colors.shade7}).toString();var filledStars=css({position:'absolute',// Before the custom properties the primary color was used for this class.
-color:"var(--color-secondary, ".concat(colors.primary,")"),top:0}).toString();/**
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var container=css({position:'relative'}).toString();var icon=css({display:'inline-block',verticalAlign:'top',outline:0}).toString();var emptyStars=css({color:themeConfig.colors.shade7}).toString();var filledStars=css({position:'absolute',color:"var(--color-primary, ".concat(colors.primary,")"),top:0}).toString();/**
  * The rating stars styles that can be selected by passing the style key to the
  * @type {Object}
  */var iconStyles={small:{iconSize:'1em',iconStyle:css({marginRight:'0.1em'}).toString()},big:{iconSize:'1.24em',iconStyle:css({marginRight:'0.12em'}).toString()},large:{iconSize:'2.3em',iconStyle:css({marginRight:'0.23em'}).toString()}};export default{container:container,icon:icon,iconStyles:iconStyles,emptyStars:emptyStars,filledStars:filledStars};

package/TaxDisclaimer/index.js

@@ -1,5 +1,6 @@
 import React from'react';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{PRODUCT_TAX_DISCLAIMER}from'@shopgate/pwa-common-commerce/product/constants/Portals';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";/**
  * TaxDisclaimer component.
  * @returns {Function}
- */var TaxDisclaimer=function TaxDisclaimer(){var _useWidgetSettings=useWidgetSettings('@shopgate/engage/components/TaxDisclaimer'),show=_useWidgetSettings.show,text=_useWidgetSettings.text;// use widget setting if set to true/false, otherwise use market logic
+ */var TaxDisclaimer=function TaxDisclaimer(){// Added with PWA 6 - CCP-2372
+var _useWidgetSettings=useWidgetSettings('@shopgate/engage/components/TaxDisclaimer'),show=_useWidgetSettings.show,text=_useWidgetSettings.text;// use widget setting if set to true/false, otherwise use market logic
 var showDisclaimer=typeof show==='boolean'?show:showTaxDisclaimer;return React.createElement(SurroundPortals,{portalName:PRODUCT_TAX_DISCLAIMER,portalProps:{showTaxDisclaimer:showDisclaimer}},showDisclaimer&&React.createElement("div",{"data-test-id":"taxDisclaimer","aria-hidden":true,className:"ui-shared__tax-disclaimer"},React.createElement(I18n.Text,{className:styles,string:text||'product.tax_disclaimer'})));};export default TaxDisclaimer;

package/package.json

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