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

package/NoResults/style.js

@@ -1 +1,31 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var wrapper=css({alignItems:'center',display:'flex',flexDirection:'column',height:'100%',width:'100%',justifyContent:'center',textAlign:'center',background:"var(--page-background-color, ".concat(themeConfig.colors.shade8,")")}).toString();var icon=css({width:216,color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();var headline=css({fontSize:'1.25rem',fontWeight:500,marginTop:30}).toString();var text=css({marginTop:themeConfig.variables.gap.big,padding:"0 ".concat(themeConfig.variables.gap.big,"px")}).toString();export default{wrapper:wrapper,icon:icon,headline:headline,text:text};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const wrapper = css({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  justifyContent: 'center',
+  textAlign: 'center',
+  background: `var(--page-background-color, ${themeConfig.colors.shade8})`
+}).toString();
+const icon = css({
+  width: 216,
+  color: `var(--color-primary, ${themeConfig.colors.primary})`
+}).toString();
+const headline = css({
+  fontSize: '1.25rem',
+  fontWeight: 500,
+  marginTop: 30
+}).toString();
+const text = css({
+  marginTop: themeConfig.variables.gap.big,
+  padding: `0 ${themeConfig.variables.gap.big}px`
+}).toString();
+export default {
+  wrapper,
+  icon,
+  headline,
+  text
+};

package/Placeholder/index.js

@@ -1,5 +1,27 @@
-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,{PureComponent}from'react';import PropTypes from'prop-types';import styles from"./style";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styles from "./style";
+
+/**
  * The placeholder component.
- */var Placeholder=/*#__PURE__*/function(_PureComponent){function Placeholder(){_classCallCheck(this,Placeholder);return _callSuper(this,Placeholder,arguments);}_inherits(Placeholder,_PureComponent);return _createClass(Placeholder,[{key:"render",value:/**
+ */
+class Placeholder extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){return React.createElement("div",{className:"".concat(styles," ui-shared__placeholder"),style:this.props});}}]);}(PureComponent);/* eslint-disable react/no-unused-prop-types */ /* eslint-enable react/no-unused-prop-types */_defineProperty(Placeholder,"defaultProps",{height:0,left:0,top:0,width:0});export default Placeholder;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${styles} ui-shared__placeholder`,
+      style: this.props
+    });
+  }
+}
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-enable react/no-unused-prop-types */
+Placeholder.defaultProps = {
+  height: 0,
+  left: 0,
+  top: 0,
+  width: 0
+};
+export default Placeholder;

package/Placeholder/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var shade7=themeConfig.colors.shade7;export default css({background:"var(--color-background-accent, ".concat(shade7,")"),position:'relative'});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors: {
+    shade7
+  }
+} = themeConfig;
+export default css({
+  background: `var(--color-background-accent, ${shade7})`,
+  position: 'relative'
+});

package/PlaceholderLabel/index.js

@@ -1,5 +1,30 @@
-import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from "./style";
+
+/**
  * Placeholder for one line texts.
  * @param {Object} props The component props.
  * @return {JSX}
- */var PlaceholderLabel=function PlaceholderLabel(_ref){var children=_ref.children,className=_ref.className,ready=_ref.ready,style=_ref.style;if(!ready){return React.createElement("div",{style:style,className:"".concat(styles.label," ").concat(className," ui-shared__placeholder-label")});}return children;};PlaceholderLabel.defaultProps={children:null,className:'',style:null,ready:false};export default PlaceholderLabel;
+ */
+const PlaceholderLabel = ({
+  children,
+  className,
+  ready,
+  style
+}) => {
+  if (!ready) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: `${styles.label} ${className} ui-shared__placeholder-label`
+    });
+  }
+  return children;
+};
+PlaceholderLabel.defaultProps = {
+  children: null,
+  className: '',
+  style: null,
+  ready: false
+};
+export default PlaceholderLabel;

package/PlaceholderLabel/spec.js

@@ -1 +1,19 @@
-import React from'react';import{mount}from'enzyme';import PlaceholderLabel from"./index";describe('<PlaceholderLabel />',function(){it('should render placeholder ',function(){var wrapper=mount(React.createElement(PlaceholderLabel,{ready:false},React.createElement("h1",null,"foo")));expect(wrapper).toMatchSnapshot();expect(wrapper.find('h1').length).toEqual(0);});it('should render children',function(){var wrapper=mount(React.createElement(PlaceholderLabel,{ready:true},React.createElement("h1",null,"foo")));expect(wrapper).toMatchSnapshot();expect(wrapper.find('h1').length).toEqual(1);});});
+import React from 'react';
+import { mount } from 'enzyme';
+import PlaceholderLabel from "./index";
+describe('<PlaceholderLabel />', () => {
+  it('should render placeholder ', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderLabel, {
+      ready: false
+    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('h1').length).toEqual(0);
+  });
+  it('should render children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderLabel, {
+      ready: true
+    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('h1').length).toEqual(1);
+  });
+});

package/PlaceholderLabel/style.js

@@ -1 +1,12 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var label=css({background:themeConfig.colors.dark,opacity:0.1,width:'100%',height:16,marginBottom:12}).toString();export default{label:label};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const label = css({
+  background: themeConfig.colors.dark,
+  opacity: 0.1,
+  width: '100%',
+  height: 16,
+  marginBottom: 12
+}).toString();
+export default {
+  label
+};

package/PlaceholderParagraph/index.js

@@ -1,6 +1,40 @@
-import React from'react';import PropTypes from'prop-types';import range from'lodash/range';import PlaceholderLabel from"../PlaceholderLabel";var widths=[95,100,92,88,96,93,96,48];/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import range from 'lodash/range';
+import PlaceholderLabel from "../PlaceholderLabel";
+const widths = [95, 100, 92, 88, 96, 93, 96, 48];
+
+/**
  * The paragraph placeholder component.
  * Creates a simple paragraph out of PlaceholderLabels.
  * @param {Object} props The component props.
  * @return {JSX}
- */var PlaceholderParagraph=function PlaceholderParagraph(_ref){var className=_ref.className,children=_ref.children,lines=_ref.lines,ready=_ref.ready;if(ready){return children;}return React.createElement("div",{className:"ui-shared__placeholder-paragraph"},range(lines).map(function(num){var width=num%2===0?"".concat(widths[(num/2+widths.length)%widths.length],"%"):null;return React.createElement(PlaceholderLabel,{key:num,style:width?{width:width}:null,className:className});}));};PlaceholderParagraph.defaultProps={className:'',lines:3,ready:false};export default PlaceholderParagraph;
+ */
+const PlaceholderParagraph = ({
+  className,
+  children,
+  lines,
+  ready
+}) => {
+  if (ready) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ui-shared__placeholder-paragraph"
+  }, range(lines).map(num => {
+    const width = num % 2 === 0 ? `${widths[(num / 2 + widths.length) % widths.length]}%` : null;
+    return /*#__PURE__*/React.createElement(PlaceholderLabel, {
+      key: num,
+      style: width ? {
+        width
+      } : null,
+      className: className
+    });
+  }));
+};
+PlaceholderParagraph.defaultProps = {
+  className: '',
+  lines: 3,
+  ready: false
+};
+export default PlaceholderParagraph;

package/PlaceholderParagraph/spec.js

@@ -1 +1,19 @@
-import React from'react';import{mount}from'enzyme';import PlaceholderParagraph from"./index";describe('<PlaceholderParagraph />',function(){it('should render placeholder ',function(){var wrapper=mount(React.createElement(PlaceholderParagraph,{ready:false},React.createElement("h1",null,"foo")));expect(wrapper).toMatchSnapshot();expect(wrapper.find('h1').length).toEqual(0);});it('should render children',function(){var wrapper=mount(React.createElement(PlaceholderParagraph,{ready:true},React.createElement("h1",null,"foo")));expect(wrapper).toMatchSnapshot();expect(wrapper.find('h1').length).toEqual(1);});});
+import React from 'react';
+import { mount } from 'enzyme';
+import PlaceholderParagraph from "./index";
+describe('<PlaceholderParagraph />', () => {
+  it('should render placeholder ', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderParagraph, {
+      ready: false
+    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('h1').length).toEqual(0);
+  });
+  it('should render children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderParagraph, {
+      ready: true
+    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('h1').length).toEqual(1);
+  });
+});

package/Price/index.js

@@ -1,4 +1,13 @@
-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,{useMemo}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";/**
+import "core-js/modules/es.string.replace.js";
+import React, { useMemo } 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
@@ -8,12 +17,84 @@ 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.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;var showFromPrice=useMemo(function(){// unitPriceMin is falsy so we don't have a price range
-if(!props.unitPriceMin)return false;// Only show 'from' if we have a price range (both prices are available and different)
-return props.unitPriceMin!==props.unitPriceMax;},[props.unitPriceMax,props.unitPriceMin]);if(showFromPrice){ariaPrice=__('price.from',{price:_p(props.unitPriceMin,props.currency,props.fractions)});}else{ariaPrice=_p(props.unitPrice,props.currency,props.fractions);}ariaPrice=ariaPrice.replace('-',"\u2212");/**
+ */
+const Price = (props, context) => {
+  // Added with PWA 6 - CCP-2372
+  const {
+    show,
+    hint
+  } = useWidgetSettings('@shopgate/engage/components/TaxDisclaimer');
+
+  // use widget setting if set to true/false, otherwise use market logic
+  const showDisclaimer = typeof show === 'boolean' ? show : showTaxDisclaimer;
+  const containerClasses = classNames(styles.container, props.className, {
+    [styles.discounted]: props.discounted
+  }, 'price', props.discounted ? 'ui-shared__price-discounted' : 'ui-shared__price');
+  const {
+    __,
+    _p
+  } = context.i18n();
+  let ariaPrice;
+  const showFromPrice = useMemo(() => {
+    // unitPriceMin is falsy so we don't have a price range
+    if (!props.unitPriceMin) return false;
+    // Only show 'from' if we have a price range (both prices are available and different)
+    return props.unitPriceMin !== props.unitPriceMax;
+  }, [props.unitPriceMax, props.unitPriceMin]);
+  if (showFromPrice) {
+    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",{"aria-label":__('price.label',{price:ariaPrice})},showFromPrice?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",{"aria-hidden":true},hint||'*'),React.createElement("span",{className:"sr-only","aria-label":hint||__('product.tax_disclaimer_aria')},__('product.tax_disclaimer_aria'))):null);};Price.defaultProps={className:'',unitPriceMin:0,unitPriceMax:undefined,discounted:false,fractions:true,taxDisclaimer:false,allowFree:false};Price.contextTypes={i18n:PropTypes.func};export default Price;
+   */
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerClasses,
+    "data-test-id": `minPrice: ${props.unitPriceMin} price: ${props.unitPrice} currency: ${props.currency}`
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-label": __('price.label', {
+      price: ariaPrice
+    })
+  }, showFromPrice ? /*#__PURE__*/React.createElement(I18n.Text, {
+    "aria-hidden": true,
+    string: "price.from"
+  }, /*#__PURE__*/React.createElement(I18n.Price, {
+    currency: props.currency,
+    fractions: props.fractions,
+    forKey: "price",
+    price: props.unitPriceMin
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, props.allowFree && props.unitPrice === 0 ? /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "price.free"
+  }) : /*#__PURE__*/React.createElement(I18n.Price, {
+    currency: props.currency,
+    fractions: props.fractions,
+    price: props.unitPrice
+  }))), props.taxDisclaimer && showDisclaimer ? /*#__PURE__*/React.createElement("div", {
+    className: styles.disclaimer
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true
+  }, hint || '*'), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only",
+    "aria-label": hint || __('product.tax_disclaimer_aria')
+  }, __('product.tax_disclaimer_aria'))) : null);
+};
+Price.defaultProps = {
+  className: '',
+  unitPriceMin: 0,
+  unitPriceMax: undefined,
+  discounted: false,
+  fractions: true,
+  taxDisclaimer: false,
+  allowFree: false
+};
+Price.contextTypes = {
+  i18n: PropTypes.func
+};
+export default Price;

package/Price/style.js

@@ -1 +1,22 @@
-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';
+const container = css({
+  display: 'flex',
+  position: 'relative',
+  whiteSpace: 'nowrap'
+}).toString();
+const disclaimer = css({
+  color: 'initial',
+  fontSize: 14,
+  position: 'absolute',
+  right: -10,
+  top: 0
+}).toString();
+const discounted = css({
+  color: `var(--color-primary, ${themeConfig.colors.primary})`
+}).toString();
+export default {
+  container,
+  disclaimer,
+  discounted
+};

package/PriceInfo/index.js

@@ -1,7 +1,25 @@
-import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from "./style";
+
+/**
  * The price info component
  * @param {Object} props The component props
  * @param {string} props.text The price info string e.g. 12,00 € / l
  * @param {string} [props.className] CSS classes
  * @return {JSX}
- */var PriceInfo=function PriceInfo(_ref){var className=_ref.className,text=_ref.text;return React.createElement("div",{className:"".concat(styles," ").concat(className," ui-shared__price-info"),dangerouslySetInnerHTML:{__html:text},"data-test-id":"priceInfo: ".concat(text)});};PriceInfo.defaultProps={className:''};export default PriceInfo;
+ */
+const PriceInfo = ({
+  className,
+  text
+}) => /*#__PURE__*/React.createElement("div", {
+  className: `${styles} ${className} ui-shared__price-info`,
+  dangerouslySetInnerHTML: {
+    __html: text
+  },
+  "data-test-id": `priceInfo: ${text}`
+});
+PriceInfo.defaultProps = {
+  className: ''
+};
+export default PriceInfo;

package/PriceInfo/style.js

@@ -1 +1,5 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export default css({color:themeConfig.colors.shade3}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+export default css({
+  color: themeConfig.colors.shade3
+}).toString();

package/PriceStriked/index.js

@@ -1,29 +1,100 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "./style";
+
+/**
  * Calculates the angle for the strike-through line
  * @param {HTMLElement} element The price element
  * @returns {number} the calculated angle
- */var calcAngle=function calcAngle(element){/**
+ */
+const calcAngle = element => {
+  /**
    * If the element is in a hidden container the browser won't calculate it's size.
    * In that case we clone in into a visible container and then remove it again.
-   */var cloned=element.cloneNode(true);document.body.appendChild(cloned);var width=cloned.offsetWidth;var height=cloned.offsetHeight;document.body.removeChild(cloned);// Calculate the correct angle for the strike-through line
-return Math.round(90-Math.atan(width/height)*(180/Math.PI));};/**
+   */
+  const cloned = element.cloneNode(true);
+  document.body.appendChild(cloned);
+  const width = cloned.offsetWidth;
+  const height = cloned.offsetHeight;
+  document.body.removeChild(cloned);
+
+  // Calculate the correct angle for the strike-through line
+  return Math.round(90 - Math.atan(width / height) * (180 / Math.PI));
+};
+
+/**
  * The price striked component
  * @param {Object} props The component props
  * @param {number} props.value The striked price of the product
  * @param {string} props.currency The currency of the price
  * @param {string} [props.className] CSS classes
  * @return {JSX}
- */var PriceStriked=/*#__PURE__*/function(_Component){/**
+ */
+class PriceStriked extends Component {
+  /**
    * Constructor
    * @param {Object} props The component props
-   */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.
-   * @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;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Sets the calculated angle for the DOM element
+     * and returns true if succeeded.
+     * @returns {boolean}
+     */
+    this.setAngle = () => {
+      if (this.element) {
+        this.angle = calcAngle(this.element);
+        return true;
+      }
+      return false;
+    };
+    this.angle = null;
+    this.element = null;
+  }
+
+  /**
    * 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:/**
+   */
+  componentDidMount() {
+    if (this.setAngle()) {
+      this.forceUpdate();
+    }
+  }
+  /**
    * Renders the component.
    * @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;
+   */
+  render() {
+    const {
+      __,
+      _p
+    } = this.context.i18n();
+    const angleStyle = this.angle ? styles.getAngleStyle(this.angle) : '';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `${styles.basic} ${this.props.className} ${angleStyle} price-striked ui-shared__price-striked`
+    }, /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": true,
+      ref: ref => {
+        this.element = ref;
+      },
+      "data-test-id": `strikedPrice: ${this.props.value}`
+    }, /*#__PURE__*/React.createElement(I18n.Price, {
+      price: this.props.value,
+      currency: this.props.currency
+    }))), /*#__PURE__*/React.createElement("span", {
+      className: "sr-only"
+    }, __('price.label_old_price', {
+      price: _p(this.props.value, this.props.currency, true)
+    })));
+  }
+}
+PriceStriked.defaultProps = {
+  className: ''
+};
+PriceStriked.contextTypes = {
+  i18n: PropTypes.func
+};
+export default PriceStriked;

package/PriceStriked/style.js

@@ -1,6 +1,36 @@
-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.shade11}).toString();/**
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+const 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.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
- */var getAngleStyle=function getAngleStyle(angle){return css({'& span':{':before':{borderTop:'1px solid',transform:"rotate(-".concat(angle,"deg)")}}}).toString();};export default{basic:basic,getAngleStyle:getAngleStyle};
+ */
+const getAngleStyle = angle => css({
+  '& span': {
+    ':before': {
+      borderTop: '1px solid',
+      transform: `rotate(-${angle}deg)`
+    }
+  }
+}).toString();
+export default {
+  basic,
+  getAngleStyle
+};

package/ProductProperties/index.js

@@ -1,5 +1,35 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import Ellipsis from'@shopgate/pwa-common/components/Ellipsis';/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
+
+/**
  * The Product Properties component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Properties=function Properties(_ref){var lineClamp=_ref.lineClamp,properties=_ref.properties,className=_ref.className;if(!properties.length){return null;}return React.createElement("ul",{className:classNames(className,'ui-shared__product-properties')},properties.map(function(_ref2){var label=_ref2.label,value=_ref2.value;return React.createElement("li",{key:"".concat(label,"-").concat(value)},lineClamp&&React.createElement(Ellipsis,{rows:lineClamp},"".concat(label,": ").concat(value)),!lineClamp&&"".concat(label,": ").concat(value));}));};Properties.defaultProps={className:null,lineClamp:null,properties:[]};export default Properties;
+ */
+const Properties = ({
+  lineClamp,
+  properties,
+  className
+}) => {
+  if (!properties.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("ul", {
+    className: classNames(className, 'ui-shared__product-properties')
+  }, properties.map(({
+    label,
+    value
+  }) => /*#__PURE__*/React.createElement("li", {
+    key: `${label}-${value}`
+  }, lineClamp && /*#__PURE__*/React.createElement(Ellipsis, {
+    rows: lineClamp
+  }, `${label}: ${value}`), !lineClamp && `${label}: ${value}`)));
+};
+Properties.defaultProps = {
+  className: null,
+  lineClamp: null,
+  properties: []
+};
+export default Properties;