@shopgate/pwa-ui-material 7.29.9 → 7.30.0-alpha.11

package/AppBar/components/Title/index.js

@@ -1,5 +1,48 @@
-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 _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+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:/**
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppBarTitle = /*#__PURE__*/function (_PureComponent) {
+  function AppBarTitle() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarTitle, _PureComponent);
+  var _proto = AppBarTitle.prototype;
+  /**
    * @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;
+   */
+  _proto.render = function render() {
+    const {
+      onClick,
+      title
+    } = this.props;
+    if (!title) return null;
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames(styles, 'theme__app-bar__title'),
+      role: "heading",
+      "aria-labelledby": "titleLabel",
+      "aria-level": "1",
+      "data-test-id": `title: ${title}`,
+      tabIndex: -1,
+      children: /*#__PURE__*/_jsx("span", {
+        role: "presentation",
+        onClick: onClick,
+        id: "titleLabel",
+        dangerouslySetInnerHTML: {
+          __html: title
+        }
+      })
+    });
+  };
+  return AppBarTitle;
+}(PureComponent);
+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'
+});

package/AppBar/index.js

@@ -1,8 +1,96 @@
-import React,{useMemo,useRef,useLayoutEffect}from'react';import PropTypes from'prop-types';import{getAbsoluteHeight}from'@shopgate/pwa-common/helpers/dom';import{themeShadows,themeColors}from'@shopgate/pwa-common/helpers/config';import{setCSSCustomProp}from'@shopgate/engage/styles';import{SurroundPortals}from'@shopgate/engage/components';import{APP_BAR_CONTENT}from'@shopgate/engage/core/constants';import Field from"./components/Field";import Icon from"./components/Icon";import Title from"./components/Title";import Right from"./components/Right";import Center from"./components/Center";import Left from"./components/Left";import Below from"./components/Below";import styles from"./style";/**
+import React, { useMemo, useRef, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
+import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+import { setCSSCustomProp } from '@shopgate/engage/styles';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { APP_BAR_CONTENT } from '@shopgate/engage/core/constants';
+import Field from "./components/Field";
+import Icon from "./components/Icon";
+import Title from "./components/Title";
+import Right from "./components/Right";
+import Center from "./components/Center";
+import Left from "./components/Left";
+import Below from "./components/Below";
+import styles from "./style";
+
+/**
  * Updates the --app-bar-height custom property
  * @param {Object} ref The app bar ref.
- */var updateAppBarHeight=function updateAppBarHeight(ref){if(!ref.current){return;}setCSSCustomProp('--app-bar-height',"".concat(getAbsoluteHeight(ref.current),"px"));};/**
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const updateAppBarHeight = ref => {
+  if (!ref.current) {
+    return;
+  }
+  setCSSCustomProp('--app-bar-height', `${getAbsoluteHeight(ref.current)}px`);
+};
+
+/**
  * The AppBar component
  * @param {Object} props The component props.
  * @returns {JSX}
- */var AppBar=function AppBar(_ref){var below=_ref.below,center=_ref.center,left=_ref.left,right=_ref.right,backgroundColor=_ref.backgroundColor,textColor=_ref.textColor,shadow=_ref.shadow;var contentRef=useRef(null);var style=useMemo(function(){return{background:backgroundColor,color:textColor,boxShadow:!shadow?'none':themeShadows.material};},[backgroundColor,shadow,textColor]);var observer=useMemo(function(){return new MutationObserver(function(){updateAppBarHeight(contentRef);});},[contentRef]);useLayoutEffect(function(){updateAppBarHeight(contentRef);observer.observe(contentRef.current,{childList:true});return function(){observer.disconnect();};},[contentRef,observer]);return React.createElement("header",{ref:contentRef,className:"".concat(styles.outer," ui-material__app-bar"),"data-test-id":"Navigator",role:"banner",style:style},React.createElement(SurroundPortals,{portalName:APP_BAR_CONTENT},React.createElement("div",{className:styles.inner},React.createElement(Left,{elements:left}),React.createElement(Center,{elements:center}),React.createElement(Right,{elements:right}))),React.createElement(Below,{elements:below}));};AppBar.defaultProps={backgroundColor:themeColors.light,below:null,center:null,left:null,right:null,shadow:true,textColor:themeColors.dark};AppBar.Field=Field;AppBar.Icon=Icon;AppBar.Title=Title;export default AppBar;
+ */
+const AppBar = ({
+  below,
+  center,
+  left,
+  right,
+  backgroundColor,
+  textColor,
+  shadow
+}) => {
+  const contentRef = useRef(null);
+  const style = useMemo(() => ({
+    background: backgroundColor,
+    color: textColor,
+    boxShadow: !shadow ? 'none' : themeShadows.material
+  }), [backgroundColor, shadow, textColor]);
+  const observer = useMemo(() => new MutationObserver(() => {
+    updateAppBarHeight(contentRef);
+  }), [contentRef]);
+  useLayoutEffect(() => {
+    updateAppBarHeight(contentRef);
+    observer.observe(contentRef.current, {
+      childList: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [contentRef, observer]);
+  return /*#__PURE__*/_jsxs("header", {
+    ref: contentRef,
+    className: `${styles.outer} ui-material__app-bar`,
+    "data-test-id": "Navigator",
+    role: "banner",
+    style: style,
+    children: [/*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: APP_BAR_CONTENT,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.inner,
+        children: [/*#__PURE__*/_jsx(Left, {
+          elements: left
+        }), /*#__PURE__*/_jsx(Center, {
+          elements: center
+        }), /*#__PURE__*/_jsx(Right, {
+          elements: right
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Below, {
+      elements: below
+    })]
+  });
+};
+AppBar.defaultProps = {
+  backgroundColor: themeColors.light,
+  below: null,
+  center: null,
+  left: null,
+  right: null,
+  shadow: true,
+  textColor: themeColors.dark
+};
+AppBar.Field = Field;
+AppBar.Icon = Icon;
+AppBar.Title = Title;
+export default AppBar;

package/AppBar/style.js

@@ -1 +1,21 @@
-import{css}from'glamor';var outer=css({boxSizing:'content-box',left:0,paddingTop:'var(--safe-area-inset-top)',position:'sticky',top:0,width:'100%',zIndex:15});var inner=css({background:'inherit',display:'flex',justifyContent:'space-between',position:'relative',zIndex:14});export default{outer:outer,inner:inner};
+import { css } from 'glamor';
+const outer = css({
+  boxSizing: 'content-box',
+  left: 0,
+  paddingTop: 'var(--safe-area-inset-top)',
+  position: 'sticky',
+  top: 0,
+  width: '100%',
+  zIndex: 15
+});
+const inner = css({
+  background: 'inherit',
+  display: 'flex',
+  justifyContent: 'space-between',
+  position: 'relative',
+  zIndex: 14
+});
+export default {
+  outer,
+  inner
+};

package/BaseDialog/components/Buttons/index.js

@@ -1,4 +1,31 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import Button from'@shopgate/pwa-ui-shared/Button';import styles from"../../style";/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import Button from '@shopgate/pwa-ui-shared/Button';
+import styles from "../../style";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Buttons=function Buttons(_ref){var actions=_ref.actions;return actions.map(function(_ref2){var label=_ref2.label,action=_ref2.action,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled;return React.createElement(Button,{key:label,className:styles.button,flat:true,type:"primary",onClick:action,disabled:disabled},React.createElement(I18n.Text,{string:label}));});};Buttons.defaultProps={actions:[]};export default memo(Buttons);
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Buttons = ({
+  actions
+}) => actions.map(({
+  label,
+  action,
+  disabled = false
+}) => /*#__PURE__*/_jsx(Button, {
+  className: styles.button,
+  flat: true,
+  type: "primary",
+  onClick: action,
+  disabled: disabled,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    string: label
+  })
+}, label));
+Buttons.defaultProps = {
+  actions: []
+};
+export default /*#__PURE__*/memo(Buttons);

package/BaseDialog/components/Buttons/spec.js

@@ -1 +1,29 @@
-import React from'react';import{shallow}from'enzyme';import Button from'@shopgate/pwa-ui-shared/Button';import Buttons from"./index";var actions=[{label:'action0',action:jest.fn()},{label:'action1',action:jest.fn()},{label:'action2',action:jest.fn()}];describe('<Buttons />',function(){it('should not render if no actions are passed',function(){var wrapper=shallow(React.createElement(Buttons,null));expect(wrapper).toMatchSnapshot();expect(wrapper.instance()).toEqual(null);});it('should render buttons',function(){var wrapper=shallow(React.createElement(Buttons,{actions:actions}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Button).length).toBe(actions.length);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Button from '@shopgate/pwa-ui-shared/Button';
+import Buttons from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+const actions = [{
+  label: 'action0',
+  action: jest.fn()
+}, {
+  label: 'action1',
+  action: jest.fn()
+}, {
+  label: 'action2',
+  action: jest.fn()
+}];
+describe('<Buttons />', () => {
+  it('should not render if no actions are passed', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should render buttons', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
+      actions: actions
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Button).length).toBe(actions.length);
+  });
+});

package/BaseDialog/components/Content/index.js

@@ -1,4 +1,25 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import styles from"../../style";/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import styles from "../../style";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Content=function Content(_ref){var content=_ref.content;if(!content){return null;}return React.createElement("div",{className:styles.body,id:"basicDialogDesc"},content);};Content.defaultProps={content:null};export default memo(Content);
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Content = ({
+  content
+}) => {
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.body,
+    id: "basicDialogDesc",
+    children: content
+  });
+};
+Content.defaultProps = {
+  content: null
+};
+export default /*#__PURE__*/memo(Content);

package/BaseDialog/components/Content/spec.js

@@ -1 +1,18 @@
-import React from'react';import{shallow}from'enzyme';import Content from"./index";describe('<Content />',function(){it('should not render if no content is passed',function(){var wrapper=shallow(React.createElement(Content,null));expect(wrapper).toMatchSnapshot();expect(wrapper.instance()).toEqual(null);});it('should render content components',function(){var wrapper=shallow(React.createElement(Content,{content:"Hello World"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Content from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('<Content />', () => {
+  it('should not render if no content is passed', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should render content components', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
+      content: "Hello World"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);
+  });
+});

package/BaseDialog/components/Title/index.js

@@ -1,4 +1,34 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import Ellipsis from'@shopgate/pwa-common/components/Ellipsis';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"../../style";/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "../../style";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Title=function Title(_ref){var title=_ref.title;if(!title){return null;}return React.createElement("div",{className:styles.title,id:"basicDialogTitle",role:"heading","aria-level":"2"},React.createElement(Ellipsis,{rows:3},typeof title==='string'?React.createElement(I18n.Text,{string:title}):title));};Title.defaultProps={title:null};export default memo(Title);
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Title = ({
+  title
+}) => {
+  if (!title) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.title,
+    id: "basicDialogTitle",
+    role: "heading",
+    "aria-level": "2",
+    children: /*#__PURE__*/_jsx(Ellipsis, {
+      rows: 3,
+      children: typeof title === 'string' ? /*#__PURE__*/_jsx(I18n.Text, {
+        string: title
+      }) : title
+    })
+  });
+};
+Title.defaultProps = {
+  title: null
+};
+export default /*#__PURE__*/memo(Title);

package/BaseDialog/components/Title/spec.js

@@ -1 +1,18 @@
-import React from'react';import{shallow}from'enzyme';import Title from"./index";describe('<Title />',function(){it('should not render without a title',function(){var wrapper=shallow(React.createElement(Title,null));expect(wrapper).toMatchSnapshot();expect(wrapper.instance()).toEqual(null);});it('should render with a title',function(){var wrapper=shallow(React.createElement(Title,{title:"Some test title"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('[id="basicDialogTitle"]').length).toBe(1);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Title from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('<Title />', () => {
+  it('should not render without a title', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should render with a title', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
+      title: "Some test title"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('[id="basicDialogTitle"]').length).toBe(1);
+  });
+});

package/BaseDialog/index.js

@@ -1,4 +1,12 @@
-import React from'react';import PropTypes from'prop-types';import{FocusTrap}from'@shopgate/engage/a11y/components';import Title from"./components/Title";import Content from"./components/Content";import Buttons from"./components/Buttons";import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FocusTrap } from '@shopgate/engage/a11y/components';
+import Title from "./components/Title";
+import Content from "./components/Content";
+import Buttons from "./components/Buttons";
+import styles from "./style";
+
+/**
  * This component renders a basic dialog in Google Material Design.
  * @param {Object} props The component props.
  * @param {ReactNode} props.children The component children to render in the dialog.
@@ -6,4 +14,40 @@ import React from'react';import PropTypes from'prop-types';import{FocusTrap}from
  * the label and the callback to invoke when the action is triggered
  * @param {string | ReactNode} props.title The title of the dialog.
  * @return {JSX.Element} The rendered dialog.
- */var BasicDialog=function BasicDialog(_ref){var children=_ref.children,actions=_ref.actions,title=_ref.title;return React.createElement(FocusTrap,null,React.createElement("div",{className:"".concat(styles.container," ui-material__base-dialog"),"data-test-id":"basicDialog",role:"alertdialog","aria-modal":true,"aria-labelledby":"basicDialogTitle basicDialogDesc"},React.createElement("div",{className:styles.content},React.createElement(Title,{title:title}),React.createElement(Content,{content:children})),React.createElement("div",{className:styles.actions},React.createElement("div",{className:styles.innerActions},React.createElement(Buttons,{actions:actions})))));};BasicDialog.defaultProps={children:null,actions:[],title:null};export default BasicDialog;
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicDialog = ({
+  children,
+  actions,
+  title
+}) => /*#__PURE__*/_jsx(FocusTrap, {
+  children: /*#__PURE__*/_jsxs("div", {
+    className: `${styles.container} ui-material__base-dialog`,
+    "data-test-id": "basicDialog",
+    role: "alertdialog",
+    "aria-modal": true,
+    "aria-labelledby": "basicDialogTitle basicDialogDesc",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.content,
+      children: [/*#__PURE__*/_jsx(Title, {
+        title: title
+      }), /*#__PURE__*/_jsx(Content, {
+        content: children
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.innerActions,
+        children: /*#__PURE__*/_jsx(Buttons, {
+          actions: actions
+        })
+      })
+    })]
+  })
+});
+BasicDialog.defaultProps = {
+  children: null,
+  actions: [],
+  title: null
+};
+export default BasicDialog;

package/BaseDialog/spec.js

@@ -1 +1,44 @@
-import React from'react';import{shallow}from'enzyme';import Title from"./components/Title";import Content from"./components/Content";import Buttons from"./components/Buttons";import BasicDialog from"./index";var props={title:'Hello World',children:React.createElement("div",null,"Hello World"),actions:[{label:'action0',action:jest.fn()},{label:'action1',action:jest.fn()},{label:'action2',action:jest.fn()}]};jest.mock('@shopgate/engage/a11y/components');describe('<BasicDialog />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(BasicDialog,{actions:[]}));expect(wrapper).toMatchSnapshot();});it('should render as expected',function(){var wrapper=shallow(React.createElement(BasicDialog,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Title).length).toBe(1);expect(wrapper.find(Title).props().title).toEqual(props.title);expect(wrapper.find(Content).length).toBe(1);expect(wrapper.find(Content).props().content).toEqual(props.children);expect(wrapper.find(Buttons).length).toBe(1);expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Title from "./components/Title";
+import Content from "./components/Content";
+import Buttons from "./components/Buttons";
+import BasicDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+const props = {
+  title: 'Hello World',
+  children: /*#__PURE__*/_jsx("div", {
+    children: "Hello World"
+  }),
+  actions: [{
+    label: 'action0',
+    action: jest.fn()
+  }, {
+    label: 'action1',
+    action: jest.fn()
+  }, {
+    label: 'action2',
+    action: jest.fn()
+  }]
+};
+jest.mock('@shopgate/engage/a11y/components');
+describe('<BasicDialog />', () => {
+  it('should render with minimal props', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render as expected', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
+      ...props
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Title).length).toBe(1);
+    expect(wrapper.find(Title).props().title).toEqual(props.title);
+    expect(wrapper.find(Content).length).toBe(1);
+    expect(wrapper.find(Content).props().content).toEqual(props.children);
+    expect(wrapper.find(Buttons).length).toBe(1);
+    expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);
+  });
+});

package/BaseDialog/style.js

@@ -1 +1,64 @@
-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';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var outerGap=40;var container=css(_defineProperty(_defineProperty({position:'relative',display:'flex',flexDirection:'column',width:"calc(100vw - ".concat(outerGap*2,"px)"),maxHeight:"calc(100vh - ".concat(outerGap*2,"px)"),borderRadius:2,boxShadow:themeConfig.shadows.dialog,background:themeConfig.colors.light},responsiveMediaQuery('>xs',{webOnly:true}),{width:"calc(80vh - ".concat(outerGap*2,"px)"),maxHeight:"calc(80vh - ".concat(outerGap*2,"px)")}),responsiveMediaQuery('>md',{webOnly:true}),{width:"calc(var(--page-content-width) * 0.5 - ".concat(outerGap*2,"px)"),maxHeight:"calc(var(--page-content-width) * 0.5 - ".concat(outerGap*2,"px)")})).toString();var content=css({padding:themeConfig.variables.gap.small*3,overflowY:'auto'}).toString();var title=css({fontSize:'1.25em',lineHeight:themeConfig.typography.lineHeight,fontWeight:500,paddingBottom:themeConfig.variables.gap.small,marginTop:'-.25em'}).toString();var body=css({color:themeConfig.colors.shade6,flexGrow:1,overflow:'auto'}).toString();var actions=css({alignSelf:'flex-end',padding:themeConfig.variables.gap.small}).toString();var innerActions=css({display:'flex',flexWrap:'wrap',justifyContent:'flex-end'}).toString();var button=css({marginRight:"-".concat(themeConfig.variables.gap.small/2,"px"),textAlign:'right'}).toString();export default{container:container,content:content,title:title,body:body,actions:actions,innerActions:innerActions,button:button};
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const outerGap = 40;
+const container = css({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  width: `calc(100vw - ${outerGap * 2}px)`,
+  maxHeight: `calc(100vh - ${outerGap * 2}px)`,
+  borderRadius: 2,
+  boxShadow: themeConfig.shadows.dialog,
+  background: themeConfig.colors.light,
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    width: `calc(80vh - ${outerGap * 2}px)`,
+    maxHeight: `calc(80vh - ${outerGap * 2}px)`
+  },
+  [responsiveMediaQuery('>md', {
+    webOnly: true
+  })]: {
+    width: `calc(var(--page-content-width) * 0.5 - ${outerGap * 2}px)`,
+    maxHeight: `calc(var(--page-content-width) * 0.5 - ${outerGap * 2}px)`
+  }
+}).toString();
+const content = css({
+  padding: themeConfig.variables.gap.small * 3,
+  overflowY: 'auto'
+}).toString();
+const title = css({
+  fontSize: '1.25em',
+  lineHeight: themeConfig.typography.lineHeight,
+  fontWeight: 500,
+  paddingBottom: themeConfig.variables.gap.small,
+  marginTop: '-.25em'
+}).toString();
+const body = css({
+  color: themeConfig.colors.shade6,
+  flexGrow: 1,
+  overflow: 'auto'
+}).toString();
+const actions = css({
+  alignSelf: 'flex-end',
+  padding: themeConfig.variables.gap.small
+}).toString();
+const innerActions = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-end'
+}).toString();
+const button = css({
+  marginRight: `-${themeConfig.variables.gap.small / 2}px`,
+  textAlign: 'right'
+}).toString();
+export default {
+  container,
+  content,
+  title,
+  body,
+  actions,
+  innerActions,
+  button
+};

package/FloatingActionButton/index.js

@@ -1,6 +1,59 @@
-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 colors from"../colors";import styles from"./style";var SIZE_BIG='big';var SIZE_SMALL='small';/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import colors from "../colors";
+import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_BIG = 'big';
+const SIZE_SMALL = 'small';
+/**
  * The FloatingActionButton component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var FloatingActionButton=function FloatingActionButton(props){var background=props.background,children=props.children,className=props.className,disabled=props.disabled,onClick=props.onClick,raised=props.raised,ref=props.ref,size=props.size,type=props.type;var classes=classNames('floating-action-button','ui-material__floating-action-button',styles.button,_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},className,className),styles.buttonSmall,size===SIZE_SMALL),styles.buttonSmall,size===SIZE_SMALL),styles.buttonLarge,size===SIZE_BIG),styles.buttonShadow,raised));return(// eslint-disable-next-line react/button-has-type
-React.createElement("button",{className:classes,disabled:disabled,onClick:onClick,ref:ref,style:{background:background},type:type,"data-test-id":props.testId},children));};FloatingActionButton.defaultProps={background:"var(--color-primary, ".concat(colors.primary,")"),className:null,disabled:false,onClick:function onClick(){},raised:true,ref:null,size:SIZE_BIG,testId:null,type:'button'};export default FloatingActionButton;
+ */
+const FloatingActionButton = props => {
+  const {
+    background,
+    children,
+    className,
+    disabled,
+    onClick,
+    raised,
+    ref,
+    size,
+    type
+  } = props;
+  const classes = classNames('floating-action-button', 'ui-material__floating-action-button', styles.button, {
+    [className]: className,
+    [styles.buttonSmall]: size === SIZE_SMALL,
+    [styles.buttonSmall]: size === SIZE_SMALL,
+    [styles.buttonLarge]: size === SIZE_BIG,
+    [styles.buttonShadow]: raised
+  });
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: disabled,
+    onClick: onClick,
+    ref: ref,
+    style: {
+      background
+    }
+    // eslint-disable-next-line react/button-has-type
+    ,
+    type: type,
+    "data-test-id": props.testId,
+    children: children
+  });
+};
+FloatingActionButton.defaultProps = {
+  background: `var(--color-primary, ${colors.primary})`,
+  className: null,
+  disabled: false,
+  onClick: () => {},
+  raised: true,
+  ref: null,
+  size: SIZE_BIG,
+  testId: null,
+  type: 'button'
+};
+export default FloatingActionButton;

package/FloatingActionButton/style.js

@@ -1 +1,33 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var shadows=themeConfig.shadows;var button=css({borderRadius:'50%',outline:0,overflow:'hidden',padding:0,position:'relative',zIndex:1,':disabled':{cursor:'not-allowed'}}).toString();var buttonSmall=css({height:40,width:40});var buttonLarge=css({height:56,width:56});var buttonShadow=css({boxShadow:shadows.buttons.elevated});export default{button:button,buttonSmall:buttonSmall,buttonLarge:buttonLarge,buttonShadow:buttonShadow};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  shadows
+} = themeConfig;
+const button = css({
+  borderRadius: '50%',
+  outline: 0,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'relative',
+  zIndex: 1,
+  ':disabled': {
+    cursor: 'not-allowed'
+  }
+}).toString();
+const buttonSmall = css({
+  height: 40,
+  width: 40
+});
+const buttonLarge = css({
+  height: 56,
+  width: 56
+});
+const buttonShadow = css({
+  boxShadow: shadows.buttons.elevated
+});
+export default {
+  button,
+  buttonSmall,
+  buttonLarge,
+  buttonShadow
+};

package/NavDrawer/components/Divider/index.js

@@ -1,3 +1,12 @@
-import React from'react';import styles from"./style";/**
+import React from 'react';
+import styles from "./style";
+
+/**
  * @returns {JSX}
- */var NavDrawerDivider=function NavDrawerDivider(){return React.createElement("hr",{"aria-hidden":true,className:styles});};export default NavDrawerDivider;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const NavDrawerDivider = () => /*#__PURE__*/_jsx("hr", {
+  "aria-hidden": true,
+  className: styles
+});
+export default NavDrawerDivider;