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

package/IndicatorCircle/index.js

@@ -1,9 +1,39 @@
-import React from'react';import PropTypes from'prop-types';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import styles from "./style";
+
+/**
  * The circle indicator component.
  * @param {Object} props The component props.
  * @param {Object} props.size Width and height of the circle.
  * @param {Object} props.color Color of the circle.
  * @param {Object} props.strokeWidth Stroke width of the circle.
- * @param {bool} props.paused Animation should be paused.
+ * @param {boolean} props.paused Animation should be paused.
  * @returns {JSX}
- */var IndicatorCircle=function IndicatorCircle(_ref){var size=_ref.size,color=_ref.color,strokeWidth=_ref.strokeWidth,paused=_ref.paused;return React.createElement("svg",{className:"".concat(styles.spinner(paused)," ui-shared__indicator-circle"),viewBox:"25 25 50 50",width:size,height:size,xmlns:"http://www.w3.org/2000/svg","data-test-id":"loadingIndicator"},React.createElement("circle",{className:styles.circle(color,strokeWidth,paused),cx:"50",cy:"50",r:"20"}));};IndicatorCircle.defaultProps={color:"var(--color-secondary, ".concat(themeConfig.colors.accent,")"),paused:false,size:themeConfig.variables.loadingIndicator.size,strokeWidth:themeConfig.variables.loadingIndicator.strokeWidth};export default IndicatorCircle;
+ */
+const IndicatorCircle = ({
+  size,
+  color,
+  strokeWidth,
+  paused
+}) => /*#__PURE__*/React.createElement("svg", {
+  className: `${styles.spinner(paused)} ui-shared__indicator-circle`,
+  viewBox: "25 25 50 50",
+  width: size,
+  height: size,
+  xmlns: "http://www.w3.org/2000/svg",
+  "data-test-id": "loadingIndicator"
+}, /*#__PURE__*/React.createElement("circle", {
+  className: styles.circle(color, strokeWidth, paused),
+  cx: "50",
+  cy: "50",
+  r: "20"
+}));
+IndicatorCircle.defaultProps = {
+  color: `var(--color-secondary, ${themeConfig.colors.accent})`,
+  paused: false,
+  size: themeConfig.variables.loadingIndicator.size,
+  strokeWidth: themeConfig.variables.loadingIndicator.strokeWidth
+};
+export default IndicatorCircle;

package/IndicatorCircle/spec.js

@@ -1 +1,28 @@
-import React from'react';import{shallow,mount}from'enzyme';import IndicatorCircle from"./index";import styles from"./style";describe('<IndicatorCircle />',function(){it('should apply the given size',function(){var wrapper=shallow(React.createElement(IndicatorCircle,{size:32}));expect(wrapper).toMatchSnapshot();var svg=wrapper.find('svg');expect(svg.props().width).toBe(32);expect(svg.props().height).toBe(32);});it('should apply the given color',function(){var wrapper=mount(React.createElement(IndicatorCircle,{size:32,color:"#fff",strokeWidth:4}));expect(wrapper).toMatchSnapshot();var correctCssClass=styles.circle('#fff',4,false);var wrongCssClass=styles.circle('#000',0);var circleHtml=wrapper.find('circle');expect(circleHtml.html().indexOf(correctCssClass)).toBeGreaterThanOrEqual(0);expect(circleHtml.html().indexOf(wrongCssClass)).toBe(-1);});});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import IndicatorCircle from "./index";
+import styles from "./style";
+describe('<IndicatorCircle />', () => {
+  it('should apply the given size', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(IndicatorCircle, {
+      size: 32
+    }));
+    expect(wrapper).toMatchSnapshot();
+    const svg = wrapper.find('svg');
+    expect(svg.props().width).toBe(32);
+    expect(svg.props().height).toBe(32);
+  });
+  it('should apply the given color', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(IndicatorCircle, {
+      size: 32,
+      color: "#fff",
+      strokeWidth: 4
+    }));
+    expect(wrapper).toMatchSnapshot();
+    const correctCssClass = styles.circle('#fff', 4, false);
+    const wrongCssClass = styles.circle('#000', 0);
+    const circleHtml = wrapper.find('circle');
+    expect(circleHtml.html().indexOf(correctCssClass)).toBeGreaterThanOrEqual(0);
+    expect(circleHtml.html().indexOf(wrongCssClass)).toBe(-1);
+  });
+});

package/IndicatorCircle/style.js

@@ -1,11 +1,65 @@
-import{css}from'glamor';var rotate=css.keyframes({'100%':{transform:'rotate(360deg)'}});/**
+import { css } from 'glamor';
+const rotate = css.keyframes({
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+
+/**
  * Styles for spinner.
  * @param {boolean} paused Animation should be paused.
  * @returns {string}
- */var spinner=function spinner(paused){var styles={margin:'auto',transformOrigin:'center center',maxWidth:'100%',maxHeight:'100%'};if(!paused){styles.animation="".concat(rotate," 1.6s linear infinite");}return css(styles).toString();};var dash=css.keyframes({'0%':{strokeDasharray:'1, 200',strokeDashoffset:'0'},'50%':{strokeDasharray:'89, 200',strokeDashoffset:'-35px'},'100%':{strokeDasharray:'89, 200',strokeDashoffset:'-124px'}});/**
+ */
+const spinner = paused => {
+  const styles = {
+    margin: 'auto',
+    transformOrigin: 'center center',
+    maxWidth: '100%',
+    maxHeight: '100%'
+  };
+  if (!paused) {
+    styles.animation = `${rotate} 1.6s linear infinite`;
+  }
+  return css(styles).toString();
+};
+const dash = css.keyframes({
+  '0%': {
+    strokeDasharray: '1, 200',
+    strokeDashoffset: '0'
+  },
+  '50%': {
+    strokeDasharray: '89, 200',
+    strokeDashoffset: '-35px'
+  },
+  '100%': {
+    strokeDasharray: '89, 200',
+    strokeDashoffset: '-124px'
+  }
+});
+
+/**
  * Styles for the rotating circle.
  * @param {string} color The color of the circle. Default color is "accent".
  * @param {string} strokeWidth The stroke width of the circle.
  * @param {boolean} paused Animation should be paused.
  * @return {string} CSS class name.
- */var circle=function circle(color,strokeWidth,paused){var styles={fill:'none',stroke:color,strokeDasharray:'1, 200',strokeDashoffset:0,strokeLinecap:'round',strokeMiterlimit:10,strokeWidth:strokeWidth};if(!paused){styles.animation="".concat(dash," 1.2s ease-in-out infinite");}return css(styles).toString();};export default{spinner:spinner,circle:circle};
+ */
+const circle = (color, strokeWidth, paused) => {
+  const styles = {
+    fill: 'none',
+    stroke: color,
+    strokeDasharray: '1, 200',
+    strokeDashoffset: 0,
+    strokeLinecap: 'round',
+    strokeMiterlimit: 10,
+    strokeWidth
+  };
+  if (!paused) {
+    styles.animation = `${dash} 1.2s ease-in-out infinite`;
+  }
+  return css(styles).toString();
+};
+export default {
+  spinner,
+  circle
+};

package/LoadingIndicator/index.js

@@ -1,4 +1,31 @@
-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{themeConfig}from'@shopgate/engage';import IndicatorCircle from"../IndicatorCircle";import{container,imgContainer}from"./style";var _themeConfig$variable=themeConfig.variables.loadingIndicator,_themeConfig$variable2=_themeConfig$variable===void 0?{}:_themeConfig$variable,loadingImageSrc=_themeConfig$variable2.imgSrc;/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/engage';
+import IndicatorCircle from "../IndicatorCircle";
+import { container, imgContainer } from "./style";
+const {
+  loadingIndicator: {
+    imgSrc: loadingImageSrc
+  } = {}
+} = themeConfig.variables;
+
+/**
  * Renders a loading indicator.
  * @returns {JSX}
- */var LoadingIndicator=function LoadingIndicator(_ref){var className=_ref.className;return React.createElement("div",{className:classNames(className,_defineProperty(_defineProperty({},container,!loadingImageSrc),imgContainer,!!loadingImageSrc),'loading-indicator','ui-shared__loading-indicator')},loadingImageSrc?React.createElement("img",{src:loadingImageSrc,alt:""}):React.createElement(IndicatorCircle,null));};LoadingIndicator.defaultProps={className:null};export default LoadingIndicator;
+ */
+const LoadingIndicator = ({
+  className
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classNames(className, {
+    [container]: !loadingImageSrc,
+    [imgContainer]: !!loadingImageSrc
+  }, 'loading-indicator', 'ui-shared__loading-indicator')
+}, loadingImageSrc ? /*#__PURE__*/React.createElement("img", {
+  src: loadingImageSrc,
+  alt: ""
+}) : /*#__PURE__*/React.createElement(IndicatorCircle, null));
+LoadingIndicator.defaultProps = {
+  className: null
+};
+export default LoadingIndicator;

package/LoadingIndicator/style.js

@@ -1 +1,20 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var container=css({display:'block',padding:'1em',textAlign:'center',fontSize:'1.5em',color:"var(--color-secondary, ".concat(colors.accent,")")});export var imgContainer=css({display:'flex',justifyContent:'center',' img':{maxWidth:'50vw',maxHeight:'50vh'}});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+export const container = css({
+  display: 'block',
+  padding: '1em',
+  textAlign: 'center',
+  fontSize: '1.5em',
+  color: `var(--color-secondary, ${colors.accent})`
+});
+export const imgContainer = css({
+  display: 'flex',
+  justifyContent: 'center',
+  ' img': {
+    maxWidth: '50vw',
+    maxHeight: '50vh'
+  }
+});

package/Manufacturer/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 manufacturer component.
  * @param {Object} props The component props.
  * @param {string} props.text The manufacturer name.
  * @param {string} [props.className] CSS classes.
  * @return {JSX}
- */var Manufacturer=function Manufacturer(_ref){var className=_ref.className,text=_ref.text;return React.createElement("div",{className:"".concat(styles," ").concat(className," ui-shared__manufacturer")},React.createElement("span",{dangerouslySetInnerHTML:{__html:text}}));};Manufacturer.defaultProps={className:''};export default Manufacturer;
+ */
+const Manufacturer = ({
+  className,
+  text
+}) => /*#__PURE__*/React.createElement("div", {
+  className: `${styles} ${className} ui-shared__manufacturer`
+}, /*#__PURE__*/React.createElement("span", {
+  dangerouslySetInnerHTML: {
+    __html: text
+  }
+}));
+Manufacturer.defaultProps = {
+  className: ''
+};
+export default Manufacturer;

package/Manufacturer/style.js

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

package/MessageBar/index.js

@@ -1,8 +1,42 @@
-import React,{memo}from'react';import classnames from'classnames';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import styles from"./style";/**
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core';
+import styles from "./style";
+
+/**
  * The MessageBar component.
  * @param {Object} props The component props.
  * @param {Array} props.messages The message content.
  * @param {Object} props.classNames Styling.
  * @returns {JSX}
  * @deprecated Please import from `@shopgate/engage/components` instead.
- */var MessageBar=memo(function(_ref){var messages=_ref.messages,classNames=_ref.classNames;return React.createElement("div",{className:classnames(styles.container,classNames.container,'ui-shared__message-bar'),role:messages.length>0?'alert':null},messages.map(function(item){var _item$type=item.type,type=_item$type===void 0?'info':_item$type,message=item.message,_item$messageParams=item.messageParams,messageParams=_item$messageParams===void 0?null:_item$messageParams,translated=item.translated;var messageOutput=!translated?i18n.text(message,messageParams):message;return React.createElement("div",{key:"".concat(type,"-").concat(message),className:classnames(classNames.message,styles[type])},React.createElement("span",{"aria-hidden":true},messageOutput));}));});MessageBar.defaultProps={classNames:{container:null,message:null}};export default MessageBar;
+ */
+const MessageBar = /*#__PURE__*/memo(({
+  messages,
+  classNames
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classnames(styles.container, classNames.container, 'ui-shared__message-bar'),
+  role: messages.length > 0 ? 'alert' : null
+}, messages.map(item => {
+  const {
+    type = 'info',
+    message,
+    messageParams = null,
+    translated
+  } = item;
+  const messageOutput = !translated ? i18n.text(message, messageParams) : message;
+  return /*#__PURE__*/React.createElement("div", {
+    key: `${type}-${message}`,
+    className: classnames(classNames.message, styles[type])
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true
+  }, messageOutput));
+})));
+MessageBar.defaultProps = {
+  classNames: {
+    container: null,
+    message: null
+  }
+};
+export default MessageBar;

package/MessageBar/spec.js

@@ -1 +1,79 @@
-import React from'react';import{mount}from'enzyme';import MessageBar from"./index";var MESSAGE1='This is some information';var MESSAGE2='This is an error that happened here.';var MESSAGE3='This is just a warning. Nothing to freak out about.';var MESSAGE4='Normal pre-translated message.';var MESSAGE5='Normal pre-translated message two.';var MESSAGE6='some.translation.string';var MESSAGE7='Message with messageParams';describe('<MessageBar />',function(){describe('General rendering',function(){it('should be empty if no messages have been set',function(){var wrapper=mount(React.createElement(MessageBar,{messages:[]}));expect(wrapper).toMatchSnapshot();});it('should render a message as info if type is missing',function(){var wrapper=mount(React.createElement(MessageBar,{messages:[{message:'something'}]}));expect(wrapper).toMatchSnapshot();});});describe('Multiple messages rendering',function(){it('should render messages without frontend translation',function(){var wrapper=mount(React.createElement(MessageBar,{messages:[{type:'info',message:MESSAGE1},{type:'error',message:MESSAGE2},{type:'warning',message:MESSAGE3},{message:MESSAGE4,translated:null},{message:MESSAGE5,translated:true}]}));expect(wrapper).toMatchSnapshot();});it('should translate and render all given messages',function(){var wrapper=mount(React.createElement(MessageBar,{messages:[{message:MESSAGE6,translated:false},{message:MESSAGE7,messageParams:{myCustomParam1:'-> TEST-VALUE #1 <-',myCustomParam2:'-> TEST-VALUE #2 <-'},translated:false}]}));expect(wrapper).toMatchSnapshot();});it('should render with custom classNames',function(){var wrapper=mount(React.createElement(MessageBar,{messages:[{message:MESSAGE1}],classNames:{container:'cls-container',message:'cls-message'}}));expect(wrapper).toMatchSnapshot();});});});
+import React from 'react';
+import { mount } from 'enzyme';
+import MessageBar from "./index";
+const MESSAGE1 = 'This is some information';
+const MESSAGE2 = 'This is an error that happened here.';
+const MESSAGE3 = 'This is just a warning. Nothing to freak out about.';
+const MESSAGE4 = 'Normal pre-translated message.';
+const MESSAGE5 = 'Normal pre-translated message two.';
+const MESSAGE6 = 'some.translation.string';
+const MESSAGE7 = 'Message with messageParams';
+describe('<MessageBar />', () => {
+  describe('General rendering', () => {
+    it('should be empty if no messages have been set', () => {
+      const wrapper = mount(/*#__PURE__*/React.createElement(MessageBar, {
+        messages: []
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should render a message as info if type is missing', () => {
+      const wrapper = mount(/*#__PURE__*/React.createElement(MessageBar, {
+        messages: [{
+          message: 'something'
+        }]
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('Multiple messages rendering', () => {
+    it('should render messages without frontend translation', () => {
+      const wrapper = mount(/*#__PURE__*/React.createElement(MessageBar, {
+        messages: [{
+          type: 'info',
+          message: MESSAGE1
+        }, {
+          type: 'error',
+          message: MESSAGE2
+        }, {
+          type: 'warning',
+          message: MESSAGE3
+        }, {
+          message: MESSAGE4,
+          translated: null
+        }, {
+          message: MESSAGE5,
+          translated: true
+        }]
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should translate and render all given messages', () => {
+      const wrapper = mount(/*#__PURE__*/React.createElement(MessageBar, {
+        messages: [{
+          message: MESSAGE6,
+          translated: false
+        }, {
+          message: MESSAGE7,
+          messageParams: {
+            myCustomParam1: '-> TEST-VALUE #1 <-',
+            myCustomParam2: '-> TEST-VALUE #2 <-'
+          },
+          translated: false
+        }]
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should render with custom classNames', () => {
+      const wrapper = mount(/*#__PURE__*/React.createElement(MessageBar, {
+        messages: [{
+          message: MESSAGE1
+        }],
+        classNames: {
+          container: 'cls-container',
+          message: 'cls-message'
+        }
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/MessageBar/style.js

@@ -1 +1,38 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var container=css({background:colors.background,display:'flex',flexDirection:'column',flexShrink:0}).toString();var messageBase={padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),fontSize:'0.875rem',fontWeight:500,':not(:last-child)':{marginBottom:variables.gap.small*0.5}};var info=css(messageBase,{background:"var(--color-secondary, ".concat(colors.accent,")"),color:"var(--color-secondary-contrast, ".concat(colors.accentContrast,")")}).toString();var error=css(messageBase,{background:colors.error,color:colors.light}).toString();var warning=css(messageBase,{background:colors.warning,color:colors.light}).toString();export default{container:container,info:info,error:error,warning:warning};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+const container = css({
+  background: colors.background,
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0
+}).toString();
+const messageBase = {
+  padding: `${variables.gap.small}px ${variables.gap.big}px`,
+  fontSize: '0.875rem',
+  fontWeight: 500,
+  ':not(:last-child)': {
+    marginBottom: variables.gap.small * 0.5
+  }
+};
+const info = css(messageBase, {
+  background: `var(--color-secondary, ${colors.accent})`,
+  color: `var(--color-secondary-contrast, ${colors.accentContrast})`
+}).toString();
+const error = css(messageBase, {
+  background: colors.error,
+  color: colors.light
+}).toString();
+const warning = css(messageBase, {
+  background: colors.warning,
+  color: colors.light
+}).toString();
+export default {
+  container,
+  info,
+  error,
+  warning
+};

package/NoResults/components/Icon/index.js

@@ -1,5 +1,133 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import CryptoJs from'crypto-js';import styles from"./style";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import CryptoJs from 'crypto-js';
+import styles from "./style";
+
+/**
  * The no search results icon component.
  * @param {Object} props Props of the component
  * @returns {JSX}
- */var NoResultIcon=function NoResultIcon(props){var filterId=useMemo(function(){var prefix='no-search-results-shadow';var hash=CryptoJs.MD5("".concat(prefix,"-").concat(Date.now()+Math.random())).toString();return"".concat(prefix,"-").concat(hash);},[]);return React.createElement("svg",{className:props.className,viewBox:"-2698 6977 216 216",xmlns:"http://www.w3.org/2000/svg"},React.createElement("defs",null,React.createElement("filter",{id:filterId,height:"130%"},React.createElement("feGaussianBlur",{"in":"SourceAlpha",stdDeviation:"3"}),React.createElement("feOffset",{dx:"2",dy:"2",result:"offsetblur"}),React.createElement("feComponentTransfer",null,React.createElement("feFuncA",{type:"linear",slope:"0.1"})),React.createElement("feMerge",null,React.createElement("feMergeNode",null),React.createElement("feMergeNode",{"in":"SourceGraphic"})))),React.createElement("g",{transform:"translate(-2770 6819)"},React.createElement("g",{transform:"translate(0 46)"},React.createElement("circle",{className:styles.background,cx:"104",cy:"104",r:"104",transform:"translate(76 116)"})),React.createElement("g",{transform:"translate(-4 42)"},React.createElement("circle",{className:styles.background,cx:"108",cy:"108",r:"108",transform:"translate(76 116)"})),React.createElement("g",null,React.createElement("circle",{className:styles.circle,cx:"104",cy:"104",r:"104",transform:"translate(76 162)"}),React.createElement("circle",{className:styles.circle,cx:"92",cy:"92",r:"92",transform:"translate(88 174)"}),React.createElement("circle",{className:styles.circle,cx:"80",cy:"80",r:"80",transform:"translate(100 186)"})),React.createElement("g",{name:"cloud",filter:"url(#".concat(filterId,")"),transform:"translate(83.6 235.124)"},React.createElement("g",{transform:"matrix(1, 0, 0, 1, 2686.4, -7054.12)"},React.createElement("path",{className:styles.background,d:"M90.216,116.652a24.732,24.732,0,0,1-20.61-10.992,13.394,13.394,0,0,1-7.263-1.374,20,20,0,0,1-7.655,1.767,20.473,20.473,0,0,1-18.255-10.6,20.009,20.009,0,0,1-6.478.981A23.584,23.584,0,0,1,6.4,73.076c0-10.6,6.085-19.236,15.507-22.181V50.11A13.07,13.07,0,0,1,34.862,37.155a13.905,13.905,0,0,1,2.748.2A18.6,18.6,0,0,1,52.724,29.7,19.248,19.248,0,0,1,65.876,35,14.4,14.4,0,0,1,75.1,31.659a13.191,13.191,0,0,1,6.281,1.963,24.851,24.851,0,0,1,40.239,1.767,21.962,21.962,0,0,1,20.61,5.3c.393-.2.589-.393.981-.589a16.9,16.9,0,0,1,7.459-1.963,15.491,15.491,0,0,1,15.311,13.937A22.951,22.951,0,0,1,181.49,64.439c2.944,6.478,2.355,13.544-1.57,20.218a21.266,21.266,0,0,1-18.059,10.011h-.2c-4.122,0-7.459-.785-10.207-2.552a13.109,13.109,0,0,1-7.263.393,24.871,24.871,0,0,1-15.311,15.114,24.1,24.1,0,0,1-18.451-.981A25.762,25.762,0,0,1,90.216,116.652Z",transform:"translate(-2686.4 7054.12)"}))),React.createElement("g",{name:"magnifier",filter:"url(#".concat(filterId,")")},React.createElement("g",{transform:"matrix(1, 0, 0, 1, 2770, -6819)"},React.createElement("rect",{className:styles.magnifier,width:"13.003",height:"3.855",transform:"matrix(0.53, 0.85, -0.85, 0.53, -2613.92, 7029.38)"})),React.createElement("g",{transform:"matrix(1, 0, 0, 1, 2770, -6819)"},React.createElement("rect",{className:styles.magnifier,width:"3.855",height:"13.003",transform:"translate(-2566.07 7029.56) rotate(37.01)"})),React.createElement("g",{transform:"matrix(1, 0, 0, 1, 2770, -6819)"},React.createElement("rect",{className:styles.magnifier,width:"3.856",height:"13.002",transform:"translate(-2592.67 7023)"})),React.createElement("circle",{className:styles.background,cx:"34",cy:"34",r:"34",transform:"translate(147 223)"}),React.createElement("g",{transform:"translate(136 -7)"},React.createElement("g",{transform:"translate(10.699 229.942)"},React.createElement("g",{transform:"translate(0 0)"},React.createElement("g",{transform:"matrix(1, 0, 0, 1, 2623.3, -7041.94)"},React.createElement("path",{className:styles.magnifier,d:"M83.335,33.853a34.228,34.228,0,1,0-1.494,49.8l4.482,4.482L84.63,89.829a1.926,1.926,0,0,0,0,2.789l17.032,16.932a1.926,1.926,0,0,0,2.789,0l5.677-5.677a1.926,1.926,0,0,0,0-2.789L93.1,84.152a1.926,1.926,0,0,0-2.789,0l-1.1,1.1-4.482-4.482A34.352,34.352,0,0,0,83.335,33.853Zm22.51,68.625-2.789,2.789L88.912,91.124,91.7,88.335ZM37.718,79.47a30.214,30.214,0,1,1,42.729,0A30.3,30.3,0,0,1,37.718,79.47Z",transform:"translate(-2648.22 7018.1)"})),React.createElement("path",{className:styles.magnifier,d:"M111.291,55.583a1.972,1.972,0,1,0,2.789-2.789,28.585,28.585,0,0,0-40.338-.1,1.972,1.972,0,0,0,2.789,2.789A24.557,24.557,0,0,1,111.291,55.583Z",transform:"translate(-59.748 -38.701)"})))))));};NoResultIcon.defaultProps={className:''};export default NoResultIcon;
+ */
+const NoResultIcon = props => {
+  const filterId = useMemo(() => {
+    const prefix = 'no-search-results-shadow';
+    const hash = CryptoJs.MD5(`${prefix}-${Date.now() + Math.random()}`).toString();
+    return `${prefix}-${hash}`;
+  }, []);
+  return /*#__PURE__*/React.createElement("svg", {
+    className: props.className,
+    viewBox: "-2698 6977 216 216",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: filterId,
+    height: "130%"
+  }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+    in: "SourceAlpha",
+    stdDeviation: "3"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dx: "2",
+    dy: "2",
+    result: "offsetblur"
+  }), /*#__PURE__*/React.createElement("feComponentTransfer", null, /*#__PURE__*/React.createElement("feFuncA", {
+    type: "linear",
+    slope: "0.1"
+  })), /*#__PURE__*/React.createElement("feMerge", null, /*#__PURE__*/React.createElement("feMergeNode", null), /*#__PURE__*/React.createElement("feMergeNode", {
+    in: "SourceGraphic"
+  })))), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-2770 6819)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0 46)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: styles.background,
+    cx: "104",
+    cy: "104",
+    r: "104",
+    transform: "translate(76 116)"
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-4 42)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: styles.background,
+    cx: "108",
+    cy: "108",
+    r: "108",
+    transform: "translate(76 116)"
+  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("circle", {
+    className: styles.circle,
+    cx: "104",
+    cy: "104",
+    r: "104",
+    transform: "translate(76 162)"
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: styles.circle,
+    cx: "92",
+    cy: "92",
+    r: "92",
+    transform: "translate(88 174)"
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: styles.circle,
+    cx: "80",
+    cy: "80",
+    r: "80",
+    transform: "translate(100 186)"
+  })), /*#__PURE__*/React.createElement("g", {
+    name: "cloud",
+    filter: `url(#${filterId})`,
+    transform: "translate(83.6 235.124)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "matrix(1, 0, 0, 1, 2686.4, -7054.12)"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: styles.background,
+    d: "M90.216,116.652a24.732,24.732,0,0,1-20.61-10.992,13.394,13.394,0,0,1-7.263-1.374,20,20,0,0,1-7.655,1.767,20.473,20.473,0,0,1-18.255-10.6,20.009,20.009,0,0,1-6.478.981A23.584,23.584,0,0,1,6.4,73.076c0-10.6,6.085-19.236,15.507-22.181V50.11A13.07,13.07,0,0,1,34.862,37.155a13.905,13.905,0,0,1,2.748.2A18.6,18.6,0,0,1,52.724,29.7,19.248,19.248,0,0,1,65.876,35,14.4,14.4,0,0,1,75.1,31.659a13.191,13.191,0,0,1,6.281,1.963,24.851,24.851,0,0,1,40.239,1.767,21.962,21.962,0,0,1,20.61,5.3c.393-.2.589-.393.981-.589a16.9,16.9,0,0,1,7.459-1.963,15.491,15.491,0,0,1,15.311,13.937A22.951,22.951,0,0,1,181.49,64.439c2.944,6.478,2.355,13.544-1.57,20.218a21.266,21.266,0,0,1-18.059,10.011h-.2c-4.122,0-7.459-.785-10.207-2.552a13.109,13.109,0,0,1-7.263.393,24.871,24.871,0,0,1-15.311,15.114,24.1,24.1,0,0,1-18.451-.981A25.762,25.762,0,0,1,90.216,116.652Z",
+    transform: "translate(-2686.4 7054.12)"
+  }))), /*#__PURE__*/React.createElement("g", {
+    name: "magnifier",
+    filter: `url(#${filterId})`
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "matrix(1, 0, 0, 1, 2770, -6819)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    className: styles.magnifier,
+    width: "13.003",
+    height: "3.855",
+    transform: "matrix(0.53, 0.85, -0.85, 0.53, -2613.92, 7029.38)"
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "matrix(1, 0, 0, 1, 2770, -6819)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    className: styles.magnifier,
+    width: "3.855",
+    height: "13.003",
+    transform: "translate(-2566.07 7029.56) rotate(37.01)"
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "matrix(1, 0, 0, 1, 2770, -6819)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    className: styles.magnifier,
+    width: "3.856",
+    height: "13.002",
+    transform: "translate(-2592.67 7023)"
+  })), /*#__PURE__*/React.createElement("circle", {
+    className: styles.background,
+    cx: "34",
+    cy: "34",
+    r: "34",
+    transform: "translate(147 223)"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(136 -7)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(10.699 229.942)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0 0)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "matrix(1, 0, 0, 1, 2623.3, -7041.94)"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: styles.magnifier,
+    d: "M83.335,33.853a34.228,34.228,0,1,0-1.494,49.8l4.482,4.482L84.63,89.829a1.926,1.926,0,0,0,0,2.789l17.032,16.932a1.926,1.926,0,0,0,2.789,0l5.677-5.677a1.926,1.926,0,0,0,0-2.789L93.1,84.152a1.926,1.926,0,0,0-2.789,0l-1.1,1.1-4.482-4.482A34.352,34.352,0,0,0,83.335,33.853Zm22.51,68.625-2.789,2.789L88.912,91.124,91.7,88.335ZM37.718,79.47a30.214,30.214,0,1,1,42.729,0A30.3,30.3,0,0,1,37.718,79.47Z",
+    transform: "translate(-2648.22 7018.1)"
+  })), /*#__PURE__*/React.createElement("path", {
+    className: styles.magnifier,
+    d: "M111.291,55.583a1.972,1.972,0,1,0,2.789-2.789,28.585,28.585,0,0,0-40.338-.1,1.972,1.972,0,0,0,2.789,2.789A24.557,24.557,0,0,1,111.291,55.583Z",
+    transform: "translate(-59.748 -38.701)"
+  })))))));
+};
+NoResultIcon.defaultProps = {
+  className: ''
+};
+export default NoResultIcon;

package/NoResults/components/Icon/style.js

@@ -1 +1,17 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var magnifier=css({fill:'currentColor'}).toString();var background=css({fill:themeColors.light}).toString();var circle=css({fill:'currentColor',opacity:0.065}).toString();export default{magnifier:magnifier,background:background,circle:circle};
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+const magnifier = css({
+  fill: 'currentColor'
+}).toString();
+const background = css({
+  fill: themeColors.light
+}).toString();
+const circle = css({
+  fill: 'currentColor',
+  opacity: 0.065
+}).toString();
+export default {
+  magnifier,
+  background,
+  circle
+};

package/NoResults/index.js

@@ -1,5 +1,49 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{svgToDataUrl}from'@shopgate/engage/core';import Icon from"./components/Icon";import styles from"./style";var _ref=themeConfig||{},_ref$svgImages=_ref.svgImages,svgImages=_ref$svgImages===void 0?{}:_ref$svgImages;var _ref2=svgImages||{},_ref2$noResultsImage=_ref2.noResultsImage,noResultsImage=_ref2$noResultsImage===void 0?'':_ref2$noResultsImage;/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { svgToDataUrl } from '@shopgate/engage/core';
+import Icon from "./components/Icon";
+import styles from "./style";
+const {
+  svgImages = {}
+} = themeConfig || {};
+const {
+  noResultsImage = ''
+} = svgImages || {};
+
+/**
  * The NoResults component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var NoResults=function NoResults(props){var imageSRC=useMemo(function(){return svgToDataUrl(noResultsImage);},[]);return React.createElement("div",{className:classNames(styles.wrapper,props.className,' ui-shared__no-results'),"data-test-id":"noResults"},React.createElement("div",{className:classNames(styles.icon,'no-results__image')},noResultsImage?React.createElement("img",{src:imageSRC,alt:""}):React.createElement(Icon,null)),React.createElement("div",{role:"alert","aria-atomic":"true"},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;
+ */
+const NoResults = props => {
+  const imageSRC = useMemo(() => svgToDataUrl(noResultsImage), []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.wrapper, props.className, ' ui-shared__no-results'),
+    "data-test-id": "noResults"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.icon, 'no-results__image')
+  }, noResultsImage ? /*#__PURE__*/React.createElement("img", {
+    src: imageSRC,
+    alt: ""
+  }) : /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement("div", {
+    role: "alert",
+    "aria-atomic": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.headline
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: props.headlineText,
+    params: props
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.text
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: props.bodyText,
+    params: props
+  }))));
+};
+NoResults.defaultProps = {
+  className: null
+};
+export default NoResults;