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

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

@@ -1,4 +1,36 @@
-import React from'react';import PropTypes from'prop-types';import{SurroundPortals,ToggleIcon,FlashEnabledIcon,FlashDisabledIcon}from'@shopgate/engage/components';import{SCANNER_FLASH}from'@shopgate/engage/scanner/constants';import{i18n}from'@shopgate/engage/core';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SurroundPortals, ToggleIcon, FlashEnabledIcon, FlashDisabledIcon } from '@shopgate/engage/components';
+import { SCANNER_FLASH } from '@shopgate/engage/scanner/constants';
+import { i18n } from '@shopgate/engage/core';
+import styles from "./style";
+
+/**
  * The FlashlightButton component.
  * @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;
+ */
+const FlashlightButton = ({
+  flashlightState,
+  onToggle
+}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: SCANNER_FLASH
+}, /*#__PURE__*/React.createElement("button", {
+  className: styles.button,
+  onClick: onToggle,
+  role: "link",
+  type: "button",
+  "aria-label": i18n.text(flashlightState ? 'scanner.flashlight.switchOff' : 'scanner.flashlight.switchOn')
+}, /*#__PURE__*/React.createElement(ToggleIcon, {
+  on: flashlightState,
+  onIcon: /*#__PURE__*/React.createElement(FlashEnabledIcon, {
+    className: styles.icon
+  }),
+  offIcon: /*#__PURE__*/React.createElement(FlashDisabledIcon, {
+    className: styles.icon
+  })
+})), /*#__PURE__*/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/FlashlightButton/style.js

@@ -1 +1,28 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var button=css({alignItems:'center',color:'inherit',display:'flex',flexShrink:0,fontSize:24,height:44,justifyContent:'center',outline:0,padding:0,position:'relative',width:44,zIndex:1}).toString();var iconWrapper=css({width:72}).toString();var icon=css({boxSizing:'content-box',color:"var(--color-secondary, ".concat(themeConfig.colors.accent,")")}).toString();export default{button:button,iconWrapper:iconWrapper,icon:icon};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const button = css({
+  alignItems: 'center',
+  color: 'inherit',
+  display: 'flex',
+  flexShrink: 0,
+  fontSize: 24,
+  height: 44,
+  justifyContent: 'center',
+  outline: 0,
+  padding: 0,
+  position: 'relative',
+  width: 44,
+  zIndex: 1
+}).toString();
+const iconWrapper = css({
+  width: 72
+}).toString();
+const icon = css({
+  boxSizing: 'content-box',
+  color: `var(--color-secondary, ${themeConfig.colors.accent})`
+}).toString();
+export default {
+  button,
+  iconWrapper,
+  icon
+};

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

@@ -1,4 +1,13 @@
-import React from'react';import{I18n,SurroundPortals}from'@shopgate/engage/components';import{SCANNER_INSTRUCTIONS}from'@shopgate/engage/scanner/constants';/**
+import React from 'react';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { SCANNER_INSTRUCTIONS } from '@shopgate/engage/scanner/constants';
+/**
  * 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;
+ */
+const ScannerInstructions = () => /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: SCANNER_INSTRUCTIONS
+}, /*#__PURE__*/React.createElement(I18n.Text, {
+  string: "scanner.instructions"
+}));
+export default ScannerInstructions;

package/ScannerOverlay/components/ScannerBar/index.js

@@ -1,6 +1,35 @@
-import React from'react';import{createPortal}from'react-dom';import PropTypes from'prop-types';import{Grid,SurroundPortals}from'@shopgate/engage/components';import{SCANNER_BAR}from'@shopgate/engage/scanner/constants';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, SurroundPortals } from '@shopgate/engage/components';
+import { SCANNER_BAR } from '@shopgate/engage/scanner/constants';
+import FlashlightButton from "./components/FlashlightButton";
+import ScannerInstructions from "./components/ScannerInstructions";
+import styles from "./style";
+
+/**
  * @param {Object} props The component props.
  * @param {boolean} props.flashlightState The on/off state of the flashlight.
  * @param {Function} props.onToggleFlashlight The toggle event triggered by the user.
  * @returns {React.ReactPortal} A React portal that renders the scanner bar in the AppFooter.
- */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;
+ */
+const ScannerBar = ({
+  flashlightState,
+  onToggleFlashlight
+}) => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: SCANNER_BAR,
+  portalProps: {
+    flashlightState,
+    onToggleFlashlight
+  }
+}, /*#__PURE__*/React.createElement(Grid, {
+  className: `${styles.container} ui-shared__scanner-bar`
+}, /*#__PURE__*/React.createElement(Grid.Item, {
+  className: styles.column
+}, /*#__PURE__*/React.createElement(FlashlightButton, {
+  onToggle: onToggleFlashlight,
+  flashlightState: flashlightState
+})), /*#__PURE__*/React.createElement(Grid.Item, {
+  className: styles.column
+}, /*#__PURE__*/React.createElement(ScannerInstructions, null)))), document.getElementById('AppFooter'));
+export default ScannerBar;

package/ScannerOverlay/components/ScannerBar/style.js

@@ -1 +1,20 @@
-import{css}from'glamor';import{themeShadows,themeColors,themeVariables}from'@shopgate/pwa-common/helpers/config';var container=css({bottom:0,backgroundColor:themeColors.overlay,boxShadow:themeShadows.scannerBar,fontSize:14,alignItems:'center',paddingBottom:'var(--safe-area-inset-bottom)'}).toString();var column=css({margin:"".concat(themeVariables.gap.big,"px"),':not(:first-child)':{marginLeft:0}}).toString();export default{container:container,column:column};
+import { css } from 'glamor';
+import { themeShadows, themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
+const container = css({
+  bottom: 0,
+  backgroundColor: themeColors.overlay,
+  boxShadow: themeShadows.scannerBar,
+  fontSize: 14,
+  alignItems: 'center',
+  paddingBottom: 'var(--safe-area-inset-bottom)'
+}).toString();
+const column = css({
+  margin: `${themeVariables.gap.big}px`,
+  ':not(:first-child)': {
+    marginLeft: 0
+  }
+}).toString();
+export default {
+  container,
+  column
+};

package/ScannerOverlay/index.js

@@ -1,11 +1,51 @@
-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,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import AppScanner from'@shopgate/pwa-core/classes/Scanner';import CameraOverlay from"./components/CameraOverlay";import ScannerBar from"./components/ScannerBar";/**
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import AppScanner from '@shopgate/pwa-core/classes/Scanner';
+import CameraOverlay from "./components/CameraOverlay";
+import ScannerBar from "./components/ScannerBar";
+
+/**
  * The scanner overlay component.
- */var ScannerOverlay=/*#__PURE__*/function(_PureComponent){function ScannerOverlay(props){var _this2;_classCallCheck(this,ScannerOverlay);_this2=_callSuper(this,ScannerOverlay,[props]);_defineProperty(_this2,"handleToggleFlashlight",function(){_this2.setState({flashlight:AppScanner.toggleFlashlight()});});_this2.state={flashlight:props.flashlight};return _this2;}/**
+ */
+class ScannerOverlay extends PureComponent {
+  /**
+   * Initializes the component.
+   * @param {Object} props The components props.
+   */
+  constructor(props) {
+    super(props);
+    this.handleToggleFlashlight = () => {
+      this.setState({
+        flashlight: AppScanner.toggleFlashlight()
+      });
+    };
+    this.state = {
+      flashlight: props.flashlight
+    };
+  }
+
+  /**
    * @param {Object} nextProps New props to apply.
-   */_inherits(ScannerOverlay,_PureComponent);return _createClass(ScannerOverlay,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.state.flashlight!==nextProps.flashlight){this.setState({flashlight:nextProps.flashlight});}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.state.flashlight !== nextProps.flashlight) {
+      this.setState({
+        flashlight: nextProps.flashlight
+      });
+    }
+  }
+  /**
    * Render the camera overlay and the bottom bar with its contents.
    * @returns {JSX}
-   */function render(){return React.createElement(Fragment,null,React.createElement(CameraOverlay,null),React.createElement(ScannerBar,{flashlightState:this.state.flashlight,onToggleFlashlight:this.handleToggleFlashlight}));}}]);}(PureComponent);_defineProperty(ScannerOverlay,"defaultProps",{flashlight:false/**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */});export default ScannerOverlay;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CameraOverlay, null), /*#__PURE__*/React.createElement(ScannerBar, {
+      flashlightState: this.state.flashlight,
+      onToggleFlashlight: this.handleToggleFlashlight
+    }));
+  }
+}
+ScannerOverlay.defaultProps = {
+  flashlight: false
+};
+export default ScannerOverlay;

package/Sheet/components/Header/components/SearchBar/index.js

@@ -1,3 +1,47 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState}from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import Input from'@shopgate/pwa-common/components/Input';import MagnifierIcon from"../../../../../icons/MagnifierIcon";import styles from"./style";/**
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import Input from '@shopgate/pwa-common/components/Input';
+import MagnifierIcon from "../../../../../icons/MagnifierIcon";
+import styles from "./style";
+
+/**
  * @return {JSX}
- */var SearchBar=function SearchBar(_ref){var handleChange=_ref.handleChange;var _useState=useState(''),_useState2=_slicedToArray(_useState,2),query=_useState2[0],setQuery=_useState2[1];var name='search';return React.createElement("div",{className:"ui-shared__sheet__search-field","data-test-id":"SearchField"},React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.inputWrapper},React.createElement("form",{onSubmit:function onSubmit(e){e.preventDefault();}},React.createElement("label",{htmlFor:name,className:styles.label},React.createElement("div",{className:styles.icon},React.createElement(MagnifierIcon,null)),!query.length&&React.createElement(I18n.Text,{string:"search.placeholder"})),React.createElement(Input,{name:name,autoComplete:false,className:classNames(styles.input),onChange:function onChange(value){handleChange(value);setQuery(value);},value:query,type:"search"})))));};export default SearchBar;
+ */
+const SearchBar = ({
+  handleChange
+}) => {
+  const [query, setQuery] = useState('');
+  const name = 'search';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ui-shared__sheet__search-field",
+    "data-test-id": "SearchField"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inputWrapper
+  }, /*#__PURE__*/React.createElement("form", {
+    onSubmit: e => {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: name,
+    className: styles.label
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.icon
+  }, /*#__PURE__*/React.createElement(MagnifierIcon, null)), !query.length && /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "search.placeholder"
+  })), /*#__PURE__*/React.createElement(Input, {
+    name: name,
+    autoComplete: false,
+    className: classNames(styles.input),
+    onChange: value => {
+      handleChange(value);
+      setQuery(value);
+    },
+    value: query,
+    type: "search"
+  })))));
+};
+export default SearchBar;

package/Sheet/components/Header/components/SearchBar/spec.js

@@ -1,3 +1,21 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React from'react';import{mount}from'enzyme';import SearchBar from"./index";describe('<SearchBar />',function(){it('should call handleChange on input',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var handleChange,wrapper;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:handleChange=jest.fn();_context.next=3;return mount(React.createElement(SearchBar,{handleChange:handleChange}));case 3:wrapper=_context.sent;expect(wrapper).toMatchSnapshot();// Update input
-wrapper.find('input').first().simulate('change',{target:{name:'search',value:'asdf'}});// Should call with updated state.
-expect(handleChange).toHaveBeenCalledWith('asdf');case 7:case"end":return _context.stop();}},_callee);})));});
+import React from 'react';
+import { mount } from 'enzyme';
+import SearchBar from "./index";
+describe('<SearchBar />', () => {
+  it('should call handleChange on input', async () => {
+    const handleChange = jest.fn();
+    const wrapper = await mount(/*#__PURE__*/React.createElement(SearchBar, {
+      handleChange: handleChange
+    }));
+    expect(wrapper).toMatchSnapshot();
+    // Update input
+    wrapper.find('input').first().simulate('change', {
+      target: {
+        name: 'search',
+        value: 'asdf'
+      }
+    });
+    // Should call with updated state.
+    expect(handleChange).toHaveBeenCalledWith('asdf');
+  });
+});

package/Sheet/components/Header/components/SearchBar/style.js

@@ -1 +1,47 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',flexDirection:'row',flexWrap:'nowrap',marginBottom:4,paddingLeft:16,paddingRight:16,paddingTop:5,paddingBottom:10}).toString();var inputWrapper=css({position:'relative',flexGrow:1}).toString();var input=css({borderRadius:10,width:'100%',padding:'4px 10px 4px 30px',lineHeight:'28px',outline:'none',background:themeColors.shade7,verticalAlign:'middle',WebkitAppearance:'none'}).toString();var label=css({alignItems:'center',color:themeColors.shade3,display:'flex',height:'36px',position:'absolute',pointerEvents:'none',width:'100%'}).toString();var icon=css({padding:'0 6px',color:themeColors.shade3,fontSize:'1.235rem'}).toString();export default{container:container,inputWrapper:inputWrapper,input:input,label:label,icon:icon};
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+const container = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  marginBottom: 4,
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingTop: 5,
+  paddingBottom: 10
+}).toString();
+const inputWrapper = css({
+  position: 'relative',
+  flexGrow: 1
+}).toString();
+const input = css({
+  borderRadius: 10,
+  width: '100%',
+  padding: '4px 10px 4px 30px',
+  lineHeight: '28px',
+  outline: 'none',
+  background: themeColors.shade7,
+  verticalAlign: 'middle',
+  WebkitAppearance: 'none'
+}).toString();
+const label = css({
+  alignItems: 'center',
+  color: themeColors.shade3,
+  display: 'flex',
+  height: '36px',
+  position: 'absolute',
+  pointerEvents: 'none',
+  width: '100%'
+}).toString();
+const icon = css({
+  padding: '0 6px',
+  color: themeColors.shade3,
+  fontSize: '1.235rem'
+}).toString();
+export default {
+  container,
+  inputWrapper,
+  input,
+  label,
+  icon
+};

package/Sheet/components/Header/index.js

@@ -1,12 +1,80 @@
-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,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Grid from'@shopgate/pwa-common/components/Grid';import Ripple from"../../../Ripple";import CrossIcon from"../../../icons/CrossIcon";import styles from"./style";import SearchBar from"./components/SearchBar";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import Ripple from "../../../Ripple";
+import CrossIcon from "../../../icons/CrossIcon";
+import styles from "./style";
+import SearchBar from "./components/SearchBar";
+
+/**
  * Header component.
- */var Header=/*#__PURE__*/function(_Component){function Header(){_classCallCheck(this,Header);return _callSuper(this,Header,arguments);}_inherits(Header,_Component);return _createClass(Header,[{key:"shouldComponentUpdate",value:/**
+ */
+class Header extends Component {
+  /**
    * @param {Object} nextProps Next Props
    * @returns {boolean}
-   */function shouldComponentUpdate(nextProps){return this.props.shadow!==nextProps.shadow||this.props.title!==nextProps.title;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    return this.props.shadow !== nextProps.shadow || this.props.title !== nextProps.title;
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var allowClose=this.props.allowClose;var classes=classNames(styles.wrapper);var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return React.createElement("div",{className:classNames(_defineProperty({},styles.shadow,this.props.shadow))},React.createElement(Grid,{className:classes,component:"div",wrap:false},allowClose?React.createElement("button",{className:styles.closeButton,onClick:this.props.onToggleClose,"aria-label":__('common.close'),type:"button"},React.createElement(Ripple,{className:styles.closeIcon},React.createElement(CrossIcon,{size:24}))):React.createElement("div",{className:styles.closePlaceholder}),React.createElement(Grid.Item,_extends({className:styles.title,component:"div",grow:1,role:"heading"},allowClose?{tabIndex:0}:null),this.props.title)),this.props.showSearch&&React.createElement(SearchBar,{handleChange:this.props.handleChange}));}}]);}(Component);/**
-   * The component's default props.
-   * @type {Object}
-   */_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false,allowClose:true,handleChange:function handleChange(){},showSearch:false});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;
+   */
+  render() {
+    const {
+      allowClose
+    } = this.props;
+    const classes = classNames(styles.wrapper);
+    const {
+      __
+    } = this.context.i18n();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames({
+        [styles.shadow]: this.props.shadow
+      })
+    }, /*#__PURE__*/React.createElement(Grid, {
+      className: classes,
+      component: "div",
+      wrap: false
+    }, allowClose ? /*#__PURE__*/React.createElement("button", {
+      className: styles.closeButton,
+      onClick: this.props.onToggleClose,
+      "aria-label": __('common.close'),
+      type: "button"
+    }, /*#__PURE__*/React.createElement(Ripple, {
+      className: styles.closeIcon
+    }, /*#__PURE__*/React.createElement(CrossIcon, {
+      size: 24
+    }))) : /*#__PURE__*/React.createElement("div", {
+      className: styles.closePlaceholder
+    }), /*#__PURE__*/React.createElement(Grid.Item, _extends({
+      className: styles.title,
+      component: "div",
+      grow: 1,
+      role: "heading"
+    }, allowClose ? {
+      tabIndex: 0
+    } : null), this.props.title)), this.props.showSearch && /*#__PURE__*/React.createElement(SearchBar, {
+      handleChange: this.props.handleChange
+    }));
+  }
+}
+/**
+ * The component's default props.
+ * @type {Object}
+ */
+Header.defaultProps = {
+  onToggleClose: () => {},
+  shadow: false,
+  allowClose: true,
+  handleChange: () => {},
+  showSearch: false
+};
+Header.contextTypes = {
+  i18n: PropTypes.func
+};
+export default Header;

package/Sheet/components/Header/spec.js

@@ -1 +1,14 @@
-import React from'react';import{shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import Header from"./index";describe('<Header />',function(){it('should render with correct title',function(){var title='My Title';var wrapper=shallow(React.createElement(Header,{title:title}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find('GridItem').first().props().children).toEqual(title);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import Header from "./index";
+describe('<Header />', () => {
+  it('should render with correct title', () => {
+    const title = 'My Title';
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Header, {
+      title: title
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('GridItem').first().props().children).toEqual(title);
+  });
+});

package/Sheet/components/Header/style.js

@@ -1 +1,50 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var wrapper=css({position:'relative',zIndex:2}).toString();var closePlaceholder=css({height:themeConfig.variables.navigator.height,padding:0,lineHeight:1});var closeButton=css({lineHeight:1,outline:0,padding:0,minWidth:themeConfig.variables.navigator.height,height:themeConfig.variables.navigator.height,position:'relative',zIndex:2,color:'var(--color-text-high-emphasis)'}).toString();var closeIcon=css({display:'flex',height:'100%',width:'100%',justifyContent:'center',alignItems:'center'}).toString();var title=css({fontSize:'1.25rem',fontWeight:500,position:'relative',alignItems:'center',padding:"0 ".concat(themeConfig.variables.gap.big,"px"),overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',alignSelf:'center'}).toString();var shadow=css({boxShadow:themeConfig.shadows.material});export default{wrapper:wrapper,closeButton:closeButton,closePlaceholder:closePlaceholder,closeIcon:closeIcon,title:title,shadow:shadow};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const wrapper = css({
+  position: 'relative',
+  zIndex: 2
+}).toString();
+const closePlaceholder = css({
+  height: themeConfig.variables.navigator.height,
+  padding: 0,
+  lineHeight: 1
+});
+const closeButton = css({
+  lineHeight: 1,
+  outline: 0,
+  padding: 0,
+  minWidth: themeConfig.variables.navigator.height,
+  height: themeConfig.variables.navigator.height,
+  position: 'relative',
+  zIndex: 2,
+  color: 'var(--color-text-high-emphasis)'
+}).toString();
+const closeIcon = css({
+  display: 'flex',
+  height: '100%',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center'
+}).toString();
+const title = css({
+  fontSize: '1.25rem',
+  fontWeight: 500,
+  position: 'relative',
+  alignItems: 'center',
+  padding: `0 ${themeConfig.variables.gap.big}px`,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  alignSelf: 'center'
+}).toString();
+const shadow = css({
+  boxShadow: themeConfig.shadows.material
+});
+export default {
+  wrapper,
+  closeButton,
+  closePlaceholder,
+  closeIcon,
+  title,
+  shadow
+};