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

package/Accordion/components/AccordionContent/index.js

@@ -1,5 +1,54 @@
-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*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{useSpring,animated}from'react-spring';import useMeasure from'react-use/lib/useMeasure';import*as styles from"./style";/**
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useSpring, animated } from 'react-spring';
+import useMeasure from 'react-use/lib/useMeasure';
+import * as styles from "./style";
+
+/**
  * The accordion content component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */function AccordionContent(props){var children=props.children,open=props.open,id=props.id,className=props.className;var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),contentHeight=_React$useState2[0],setContentHeight=_React$useState2[1];var _useMeasure=useMeasure(),_useMeasure2=_slicedToArray(_useMeasure,2),ref=_useMeasure2[0],height=_useMeasure2[1].height;React.useEffect(function(){setContentHeight(height);window.addEventListener('resize',setContentHeight(height));return function(){window.removeEventListener('resize',setContentHeight(height));};},[height]);var expand=useSpring({config:{duration:175,tension:100,friction:20},height:open?contentHeight:0});return React.createElement(animated.div,{className:classnames('ui-material__accordion-content',styles.content),style:expand,id:id,"aria-hidden":!open},React.createElement("div",{ref:ref},React.createElement("div",{className:classnames(styles.contentInner,className)},children)));}AccordionContent.defaultProps={open:false,className:null};export default AccordionContent;
+ */
+function AccordionContent(props) {
+  const {
+    children,
+    open,
+    id,
+    className
+  } = props;
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const [ref, {
+    height
+  }] = useMeasure();
+  React.useEffect(() => {
+    setContentHeight(height);
+    window.addEventListener('resize', setContentHeight(height));
+    return () => {
+      window.removeEventListener('resize', setContentHeight(height));
+    };
+  }, [height]);
+  const expand = useSpring({
+    config: {
+      duration: 175,
+      tension: 100,
+      friction: 20
+    },
+    height: open ? contentHeight : 0
+  });
+  return /*#__PURE__*/React.createElement(animated.div, {
+    className: classnames('ui-material__accordion-content', styles.content),
+    style: expand,
+    id: id,
+    "aria-hidden": !open
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.contentInner, className)
+  }, children)));
+}
+AccordionContent.defaultProps = {
+  open: false,
+  className: null
+};
+export default AccordionContent;

package/Accordion/components/AccordionContent/spec.js

@@ -1 +1,32 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{mount}from'enzyme';import AccordionContent from"./index";jest.mock('react-spring',function(){return _extends({},jest.requireActual('react-spring'),{useSpring:jest.fn().mockReturnValue({hook:'useSpring return value'})});});describe('<AccordionContent />',function(){it('should render as closed',function(){var wrapper=mount(React.createElement(AccordionContent,{id:"some-id"},React.createElement("div",{id:"test"},"Some Child")));expect(wrapper.find('#test').text()).toEqual('Some Child');expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(true);expect(wrapper).toMatchSnapshot();});it('should render as open',function(){var wrapper=mount(React.createElement(AccordionContent,{open:true,id:"some-id"},React.createElement("div",{id:"test"},"Some Child")));expect(wrapper.find('#test').text()).toEqual('Some Child');expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(false);expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { mount } from 'enzyme';
+import AccordionContent from "./index";
+jest.mock('react-spring', () => ({
+  ...jest.requireActual('react-spring'),
+  useSpring: jest.fn().mockReturnValue({
+    hook: 'useSpring return value'
+  })
+}));
+describe('<AccordionContent />', () => {
+  it('should render as closed', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(AccordionContent, {
+      id: "some-id"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "test"
+    }, "Some Child")));
+    expect(wrapper.find('#test').text()).toEqual('Some Child');
+    expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render as open', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(AccordionContent, {
+      open: true,
+      id: "some-id"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "test"
+    }, "Some Child")));
+    expect(wrapper.find('#test').text()).toEqual('Some Child');
+    expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(false);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/Accordion/components/AccordionContent/style.js

@@ -1 +1,9 @@
-import{css}from'glamor';export var content=css({overflow:'hidden',willChange:'height'}).toString();export var contentInner=css({padding:'0 16px 16px',overflow:'hidden'}).toString();
+import { css } from 'glamor';
+export const content = css({
+  overflow: 'hidden',
+  willChange: 'height'
+}).toString();
+export const contentInner = css({
+  padding: '0 16px 16px',
+  overflow: 'hidden'
+}).toString();

package/Accordion/index.js

@@ -1,4 +1,15 @@
-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 _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*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import noop from'lodash/noop';import{AccordionContainer,ChevronIcon}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core/helpers';import AccordionContent from"./components/AccordionContent";import*as styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.replace.js";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import noop from 'lodash/noop';
+import { AccordionContainer, ChevronIcon } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core/helpers';
+import AccordionContent from "./components/AccordionContent";
+import * as styles from "./style";
+
+/**
  * Accordion component
  * @param {Object} props The component props.
  * @param {Function} props.renderLabel Function that returns a React component used as header label
@@ -16,4 +27,81 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Function} props.renderAdditionalHeaderContent optional additional content
  * for the accordion header
  * @returns {JSX.Element}
- */function Accordion(props){var renderLabel=props.renderLabel,handleLabel=props.handleLabel,role=props.role,children=props.children,testId=props.testId,className=props.className,contentClassName=props.contentClassName,chevronClassName=props.chevronClassName,openWithChevron=props.openWithChevron,startOpened=props.startOpened,chevronPosition=props.chevronPosition,renderAdditionalHeaderContent=props.renderAdditionalHeaderContent;if(!renderLabel||!children){return null;}var controlsId=testId?"".concat(testId,"-content").replace(/[^\w\s]/gi,'-').replace(' ','-'):'accordion-content';return React.createElement("div",{className:"ui-material__accordion-container"},React.createElement(AccordionContainer,{open:startOpened},function(_ref){var handleOpen=_ref.handleOpen,handleClose=_ref.handleClose,open=_ref.open;var clickHandlers={onClick:open?handleClose:handleOpen,onKeyDown:open?handleClose:handleOpen,role:role};return React.createElement(React.Fragment,null,React.createElement("div",{className:classnames('ui-material__accordion-title',className,styles.toggle),"data-test-id":testId},React.createElement("div",_extends({},openWithChevron?{}:clickHandlers,{key:"accordion-toggle","aria-expanded":open,"aria-controls":controlsId,"aria-label":handleLabel,className:classnames(styles.labelContainer,_defineProperty({},styles.toggleLeftAligned,chevronPosition==='left'))}),renderLabel({open:open}),React.createElement("div",_extends({className:classnames(styles.chevronContainer,chevronClassName,_defineProperty({},styles.clickable,openWithChevron))},openWithChevron?clickHandlers:{},{"aria-label":i18n.text(open?'favorites.close_list':'favorites.open_list')}),React.createElement(ChevronIcon,{className:open?styles.chevronOpen:styles.chevronClosed}))),renderAdditionalHeaderContent&&React.createElement("div",null,renderAdditionalHeaderContent())),React.createElement(AccordionContent,{open:open,id:controlsId,key:controlsId,className:contentClassName},children));}));}Accordion.defaultProps={children:null,renderAdditionalHeaderContent:null,renderLabel:noop,className:null,contentClassName:null,chevronClassName:null,handleLabel:null,role:'button',testId:null,openWithChevron:false,chevronPosition:'right',startOpened:false};export default Accordion;
+ */
+function Accordion(props) {
+  const {
+    renderLabel,
+    handleLabel,
+    role,
+    children,
+    testId,
+    className,
+    contentClassName,
+    chevronClassName,
+    openWithChevron,
+    startOpened,
+    chevronPosition,
+    renderAdditionalHeaderContent
+  } = props;
+  if (!renderLabel || !children) {
+    return null;
+  }
+  const controlsId = testId ? `${testId}-content`.replace(/[^\w\s]/gi, '-').replace(' ', '-') : 'accordion-content';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ui-material__accordion-container"
+  }, /*#__PURE__*/React.createElement(AccordionContainer, {
+    open: startOpened
+  }, ({
+    handleOpen,
+    handleClose,
+    open
+  }) => {
+    const clickHandlers = {
+      onClick: open ? handleClose : handleOpen,
+      onKeyDown: open ? handleClose : handleOpen,
+      role
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames('ui-material__accordion-title', className, styles.toggle),
+      "data-test-id": testId
+    }, /*#__PURE__*/React.createElement("div", _extends({}, openWithChevron ? {} : clickHandlers, {
+      key: "accordion-toggle",
+      "aria-expanded": open,
+      "aria-controls": controlsId,
+      "aria-label": handleLabel,
+      className: classnames(styles.labelContainer, {
+        [styles.toggleLeftAligned]: chevronPosition === 'left'
+      })
+    }), renderLabel({
+      open
+    }), /*#__PURE__*/React.createElement("div", _extends({
+      className: classnames(styles.chevronContainer, chevronClassName, {
+        [styles.clickable]: openWithChevron
+      })
+    }, openWithChevron ? clickHandlers : {}, {
+      "aria-label": i18n.text(open ? 'favorites.close_list' : 'favorites.open_list')
+    }), /*#__PURE__*/React.createElement(ChevronIcon, {
+      className: open ? styles.chevronOpen : styles.chevronClosed
+    }))), renderAdditionalHeaderContent && /*#__PURE__*/React.createElement("div", null, renderAdditionalHeaderContent())), /*#__PURE__*/React.createElement(AccordionContent, {
+      open: open,
+      id: controlsId,
+      key: controlsId,
+      className: contentClassName
+    }, children));
+  }));
+}
+Accordion.defaultProps = {
+  children: null,
+  renderAdditionalHeaderContent: null,
+  renderLabel: noop,
+  className: null,
+  contentClassName: null,
+  chevronClassName: null,
+  handleLabel: null,
+  role: 'button',
+  testId: null,
+  openWithChevron: false,
+  chevronPosition: 'right',
+  startOpened: false
+};
+export default Accordion;

package/Accordion/spec.js

@@ -1 +1,39 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{mount}from'enzyme';import Accordion from"./index";jest.unmock('@shopgate/pwa-ui-shared');jest.mock('@shopgate/engage/components');jest.mock('react-spring',function(){return _extends({},jest.requireActual('react-spring'),{useSpring:jest.fn().mockReturnValue({hook:'useSpring return value'})});});describe('<Accordion />',function(){beforeEach(function(){jest.clearAllMocks();});it('should render with renderLabel prop and children',function(){var wrapper=mount(React.createElement(Accordion,{renderLabel:function renderLabel(){return React.createElement("div",null);},testId:"Some Thing"},"Some content."));expect(wrapper).toMatchSnapshot();expect(wrapper.find('AccordionContent').exists()).toBe(true);});it('should not render without a renderLabel prop',function(){var wrapper=mount(React.createElement(Accordion,{testId:"Some Thing"}));expect(wrapper).toMatchSnapshot();expect(wrapper.instance()).toEqual(null);});it('should not render without children',function(){var wrapper=mount(React.createElement(Accordion,{renderLabel:function renderLabel(){},testId:"Some Thing"}));expect(wrapper).toMatchSnapshot();expect(wrapper.instance()).toEqual(null);});});
+import React from 'react';
+import { mount } from 'enzyme';
+import Accordion from "./index";
+jest.unmock('@shopgate/pwa-ui-shared');
+jest.mock('@shopgate/engage/components');
+jest.mock('react-spring', () => ({
+  ...jest.requireActual('react-spring'),
+  useSpring: jest.fn().mockReturnValue({
+    hook: 'useSpring return value'
+  })
+}));
+describe('<Accordion />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render with renderLabel prop and children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Accordion, {
+      renderLabel: () => /*#__PURE__*/React.createElement("div", null),
+      testId: "Some Thing"
+    }, "Some content."));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('AccordionContent').exists()).toBe(true);
+  });
+  it('should not render without a renderLabel prop', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Accordion, {
+      testId: "Some Thing"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should not render without children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Accordion, {
+      renderLabel: () => {},
+      testId: "Some Thing"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+});

package/Accordion/style.js

@@ -1 +1,47 @@
-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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var toggle=css({padding:'12px 16px',position:'relative',display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',gap:12}).toString();export var clickable=css({cursor:'pointer'}).toString();export var toggleLeftAligned=css({flexDirection:'row-reverse'});export var chevronContainer=css(_defineProperty({display:'flex',flexShrink:0,fontSize:'1.5rem'},responsiveMediaQuery('>sm',{webOnly:true}),{backgroundColor:'rgba(0, 0, 0, 0.04)',borderRadius:32,padding:8})).toString();export var labelContainer=css({marginRight:'auto',display:'flex',flex:1,alignItems:'center',justifyContent:'space-between',gap:12});export var chevron=css({transformOrigin:'center center',transition:'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'});export var chevronClosed=css(chevron,{transform:'rotateZ(-90deg)'}).toString();export var chevronOpen=css(chevron,{transform:'rotateZ(90deg)'}).toString();
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+export const toggle = css({
+  padding: '12px 16px',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 12
+}).toString();
+export const clickable = css({
+  cursor: 'pointer'
+}).toString();
+export const toggleLeftAligned = css({
+  flexDirection: 'row-reverse'
+});
+export const chevronContainer = css({
+  display: 'flex',
+  flexShrink: 0,
+  fontSize: '1.5rem',
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    borderRadius: 32,
+    padding: 8
+  }
+}).toString();
+export const labelContainer = css({
+  marginRight: 'auto',
+  display: 'flex',
+  flex: 1,
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 12
+});
+export const chevron = css({
+  transformOrigin: 'center center',
+  transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+});
+export const chevronClosed = css(chevron, {
+  transform: 'rotateZ(-90deg)'
+}).toString();
+export const chevronOpen = css(chevron, {
+  transform: 'rotateZ(90deg)'
+}).toString();

package/AppBar/components/Below/index.js

@@ -1,4 +1,26 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Portal}from'@shopgate/pwa-common/components';import{APP_BAR_BELOW,APP_BAR_BELOW_BEFORE,APP_BAR_BELOW_AFTER}from'@shopgate/pwa-common/constants/Portals';/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Portal } from '@shopgate/pwa-common/components';
+import { APP_BAR_BELOW, APP_BAR_BELOW_BEFORE, APP_BAR_BELOW_AFTER } from '@shopgate/pwa-common/constants/Portals';
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */function Below(_ref){var elements=_ref.elements;return React.createElement(Fragment,{key:"below"},React.createElement(Portal,{name:APP_BAR_BELOW_BEFORE}),React.createElement(Portal,{name:APP_BAR_BELOW},elements),React.createElement(Portal,{name:APP_BAR_BELOW_AFTER}));}Below.defaultProps={elements:null};export default Below;
+ */
+function Below({
+  elements
+}) {
+  return /*#__PURE__*/React.createElement(Fragment, {
+    key: "below"
+  }, /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_BELOW_BEFORE
+  }), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_BELOW
+  }, elements), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_BELOW_AFTER
+  }));
+}
+Below.defaultProps = {
+  elements: null
+};
+export default Below;

package/AppBar/components/Center/index.js

@@ -1,4 +1,26 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Portal}from'@shopgate/pwa-common/components';import{APP_BAR_CENTER,APP_BAR_CENTER_BEFORE,APP_BAR_CENTER_AFTER}from'@shopgate/pwa-common/constants/Portals';/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Portal } from '@shopgate/pwa-common/components';
+import { APP_BAR_CENTER, APP_BAR_CENTER_BEFORE, APP_BAR_CENTER_AFTER } from '@shopgate/pwa-common/constants/Portals';
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */function Center(_ref){var elements=_ref.elements;return React.createElement(Fragment,{key:"center"},React.createElement(Portal,{name:APP_BAR_CENTER_BEFORE}),React.createElement(Portal,{name:APP_BAR_CENTER},elements),React.createElement(Portal,{name:APP_BAR_CENTER_AFTER}));}Center.defaultProps={elements:null};export default Center;
+ */
+function Center({
+  elements
+}) {
+  return /*#__PURE__*/React.createElement(Fragment, {
+    key: "center"
+  }, /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_CENTER_BEFORE
+  }), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_CENTER
+  }, elements), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_CENTER_AFTER
+  }));
+}
+Center.defaultProps = {
+  elements: null
+};
+export default Center;

package/AppBar/components/Field/index.js

@@ -1,5 +1,41 @@
-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 AppBarField component.
- */var AppBarField=/*#__PURE__*/function(_PureComponent){function AppBarField(){_classCallCheck(this,AppBarField);return _callSuper(this,AppBarField,arguments);}_inherits(AppBarField,_PureComponent);return _createClass(AppBarField,[{key:"render",value:/**
+ */
+class AppBarField extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,fieldRef=_this$props.fieldRef,onChange=_this$props.onChange,onSubmit=_this$props.onSubmit;var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return React.createElement("form",{className:styles.form,onSubmit:onSubmit},React.createElement("input",{className:styles.field,onChange:onChange,placeholder:__('search.placeholder'),ref:fieldRef,"data-test-id":"searchInput"}));}}]);}(PureComponent);_defineProperty(AppBarField,"defaultProps",{fieldRef:null,onChange:null,onSubmit:null});_defineProperty(AppBarField,"contextTypes",{i18n:PropTypes.func});export default AppBarField;
+   */
+  render() {
+    const {
+      fieldRef,
+      onChange,
+      onSubmit
+    } = this.props;
+    const {
+      __
+    } = this.context.i18n();
+    return /*#__PURE__*/React.createElement("form", {
+      className: styles.form,
+      onSubmit: onSubmit
+    }, /*#__PURE__*/React.createElement("input", {
+      className: styles.field,
+      onChange: onChange,
+      placeholder: __('search.placeholder'),
+      ref: fieldRef,
+      "data-test-id": "searchInput"
+    }));
+  }
+}
+AppBarField.defaultProps = {
+  fieldRef: null,
+  onChange: null,
+  onSubmit: null
+};
+AppBarField.contextTypes = {
+  i18n: PropTypes.func
+};
+export default AppBarField;

package/AppBar/components/Field/style.js

@@ -1 +1,14 @@
-import{css}from'glamor';var form=css({display:'flex',flexGrow:1});var field=css({outline:0,padding:'0 16px',width:'100%'});export default{form:form,field:field};
+import { css } from 'glamor';
+const form = css({
+  display: 'flex',
+  flexGrow: 1
+});
+const field = css({
+  outline: 0,
+  padding: '0 16px',
+  width: '100%'
+});
+export default {
+  form,
+  field
+};

package/AppBar/components/Icon/index.js

@@ -1,5 +1,45 @@
-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 AppBarIcon component.
- */var AppBarIcon=/*#__PURE__*/function(_PureComponent){function AppBarIcon(){_classCallCheck(this,AppBarIcon);return _callSuper(this,AppBarIcon,arguments);}_inherits(AppBarIcon,_PureComponent);return _createClass(AppBarIcon,[{key:"render",value:/**
+ */
+class AppBarIcon extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,background=_this$props.background,Badge=_this$props.badge,color=_this$props.color,Icon=_this$props.icon,onClick=_this$props.onClick,testId=_this$props.testId,ariaHidden=_this$props['aria-hidden'],ariaLabel=_this$props['aria-label'];return React.createElement("button",{className:styles,onClick:onClick,style:{background:background,color:color},"data-test-id":testId,"aria-hidden":ariaHidden,"aria-label":ariaLabel,type:"button"},React.createElement(Icon,null),Badge&&React.createElement(Badge,null));}}]);}(PureComponent);_defineProperty(AppBarIcon,"defaultProps",{'aria-hidden':null,'aria-label':null,background:'inherit',badge:null,color:'inherit',testId:null});export default AppBarIcon;
+   */
+  render() {
+    const {
+      background,
+      badge: Badge,
+      color,
+      icon: Icon,
+      onClick,
+      testId,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel
+    } = this.props;
+    return /*#__PURE__*/React.createElement("button", {
+      className: styles,
+      onClick: onClick,
+      style: {
+        background,
+        color
+      },
+      "data-test-id": testId,
+      "aria-hidden": ariaHidden,
+      "aria-label": ariaLabel,
+      type: "button"
+    }, /*#__PURE__*/React.createElement(Icon, null), Badge && /*#__PURE__*/React.createElement(Badge, null));
+  }
+}
+AppBarIcon.defaultProps = {
+  'aria-hidden': null,
+  'aria-label': null,
+  background: 'inherit',
+  badge: null,
+  color: 'inherit',
+  testId: null
+};
+export default AppBarIcon;

package/AppBar/components/Icon/style.js

@@ -1 +1,14 @@
-import{css}from'glamor';export default css({color:'inherit',display:'flex',flexShrink:0,fontSize:24,height:56,justifyContent:'center',alignItems:'center',outline:0,padding:0,position:'relative',width:56});
+import { css } from 'glamor';
+export default css({
+  color: 'inherit',
+  display: 'flex',
+  flexShrink: 0,
+  fontSize: 24,
+  height: 56,
+  justifyContent: 'center',
+  alignItems: 'center',
+  outline: 0,
+  padding: 0,
+  position: 'relative',
+  width: 56
+});

package/AppBar/components/Left/index.js

@@ -1,4 +1,26 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Portal}from'@shopgate/pwa-common/components';import{APP_BAR_LEFT,APP_BAR_LEFT_BEFORE,APP_BAR_LEFT_AFTER}from'@shopgate/pwa-common/constants/Portals';/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Portal } from '@shopgate/pwa-common/components';
+import { APP_BAR_LEFT, APP_BAR_LEFT_BEFORE, APP_BAR_LEFT_AFTER } from '@shopgate/pwa-common/constants/Portals';
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */function Left(_ref){var elements=_ref.elements;return React.createElement(Fragment,{key:"left"},React.createElement(Portal,{name:APP_BAR_LEFT_BEFORE}),React.createElement(Portal,{name:APP_BAR_LEFT},elements),React.createElement(Portal,{name:APP_BAR_LEFT_AFTER}));}Left.defaultProps={elements:null};export default Left;
+ */
+function Left({
+  elements
+}) {
+  return /*#__PURE__*/React.createElement(Fragment, {
+    key: "left"
+  }, /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_LEFT_BEFORE
+  }), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_LEFT
+  }, elements), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_LEFT_AFTER
+  }));
+}
+Left.defaultProps = {
+  elements: null
+};
+export default Left;

package/AppBar/components/Right/index.js

@@ -1,4 +1,26 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Portal}from'@shopgate/pwa-common/components';import{APP_BAR_RIGHT,APP_BAR_RIGHT_BEFORE,APP_BAR_RIGHT_AFTER}from'@shopgate/pwa-common/constants/Portals';/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Portal } from '@shopgate/pwa-common/components';
+import { APP_BAR_RIGHT, APP_BAR_RIGHT_BEFORE, APP_BAR_RIGHT_AFTER } from '@shopgate/pwa-common/constants/Portals';
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */function Right(_ref){var elements=_ref.elements;return React.createElement(Fragment,{key:"right"},React.createElement(Portal,{name:APP_BAR_RIGHT_BEFORE}),React.createElement(Portal,{name:APP_BAR_RIGHT},elements),React.createElement(Portal,{name:APP_BAR_RIGHT_AFTER}));}Right.defaultProps={elements:null};export default Right;
+ */
+function Right({
+  elements
+}) {
+  return /*#__PURE__*/React.createElement(Fragment, {
+    key: "right"
+  }, /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_RIGHT_BEFORE
+  }), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_RIGHT
+  }, elements), /*#__PURE__*/React.createElement(Portal, {
+    name: APP_BAR_RIGHT_AFTER
+  }));
+}
+Right.defaultProps = {
+  elements: null
+};
+export default Right;

package/AppBar/components/Title/index.js

@@ -1,5 +1,39 @@
-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 classNames from'classnames';import styles from"./style";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  * The AppBarTitle component.
- */var AppBarTitle=/*#__PURE__*/function(_PureComponent){function AppBarTitle(){_classCallCheck(this,AppBarTitle);return _callSuper(this,AppBarTitle,arguments);}_inherits(AppBarTitle,_PureComponent);return _createClass(AppBarTitle,[{key:"render",value:/**
+ */
+class AppBarTitle extends PureComponent {
+  /**
    * @returns {JSX.Element}
-   */function render(){var _this$props=this.props,onClick=_this$props.onClick,title=_this$props.title;if(!title)return null;return React.createElement("div",{className:classNames(styles,'theme__app-bar__title'),role:"heading","aria-labelledby":"titleLabel","aria-level":"1","data-test-id":"title: ".concat(title),tabIndex:-1},React.createElement("span",{role:"presentation",onClick:onClick,id:"titleLabel",dangerouslySetInnerHTML:{__html:title}}));}}]);}(PureComponent);_defineProperty(AppBarTitle,"defaultProps",{onClick:null});export default AppBarTitle;
+   */
+  render() {
+    const {
+      onClick,
+      title
+    } = this.props;
+    if (!title) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles, 'theme__app-bar__title'),
+      role: "heading",
+      "aria-labelledby": "titleLabel",
+      "aria-level": "1",
+      "data-test-id": `title: ${title}`,
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement("span", {
+      role: "presentation",
+      onClick: onClick,
+      id: "titleLabel",
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    }));
+  }
+}
+AppBarTitle.defaultProps = {
+  onClick: null
+};
+export default AppBarTitle;

package/AppBar/components/Title/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';export default css({fontSize:20,fontWeight:500,flexGrow:1,lineHeight:'56px',overflow:'hidden',padding:'0 16px',textOverflow:'ellipsis',whiteSpace:'nowrap'});
+import { css } from 'glamor';
+export default css({
+  fontSize: 20,
+  fontWeight: 500,
+  flexGrow: 1,
+  lineHeight: '56px',
+  overflow: 'hidden',
+  padding: '0 16px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});