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

package/AppBar/index.js

@@ -1,8 +1,92 @@
-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"));};/**
+ */
+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__*/React.createElement("header", {
+    ref: contentRef,
+    className: `${styles.outer} ui-material__app-bar`,
+    "data-test-id": "Navigator",
+    role: "banner",
+    style: style
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: APP_BAR_CONTENT
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement(Left, {
+    elements: left
+  }), /*#__PURE__*/React.createElement(Center, {
+    elements: center
+  }), /*#__PURE__*/React.createElement(Right, {
+    elements: right
+  }))), /*#__PURE__*/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;

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,30 @@
-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);
+ */
+const Buttons = ({
+  actions
+}) => actions.map(({
+  label,
+  action,
+  disabled = false
+}) => /*#__PURE__*/React.createElement(Button, {
+  key: label,
+  className: styles.button,
+  flat: true,
+  type: "primary",
+  onClick: action,
+  disabled: disabled
+}, /*#__PURE__*/React.createElement(I18n.Text, {
+  string: label
+})));
+Buttons.defaultProps = {
+  actions: []
+};
+export default /*#__PURE__*/memo(Buttons);

package/BaseDialog/components/Buttons/spec.js

@@ -1 +1,28 @@
-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";
+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__*/React.createElement(Buttons, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should render buttons', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Buttons, {
+      actions: actions
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Button).length).toBe(actions.length);
+  });
+});

package/BaseDialog/components/Content/index.js

@@ -1,4 +1,23 @@
-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);
+ */
+const Content = ({
+  content
+}) => {
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.body,
+    id: "basicDialogDesc"
+  }, content);
+};
+Content.defaultProps = {
+  content: null
+};
+export default /*#__PURE__*/memo(Content);

package/BaseDialog/components/Content/spec.js

@@ -1 +1,17 @@
-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";
+describe('<Content />', () => {
+  it('should not render if no content is passed', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Content, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should render content components', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Content, {
+      content: "Hello World"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);
+  });
+});

package/BaseDialog/components/Title/index.js

@@ -1,4 +1,31 @@
-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);
+ */
+const Title = ({
+  title
+}) => {
+  if (!title) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.title,
+    id: "basicDialogTitle",
+    role: "heading",
+    "aria-level": "2"
+  }, /*#__PURE__*/React.createElement(Ellipsis, {
+    rows: 3
+  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(I18n.Text, {
+    string: title
+  }) : title));
+};
+Title.defaultProps = {
+  title: null
+};
+export default /*#__PURE__*/memo(Title);

package/BaseDialog/components/Title/spec.js

@@ -1 +1,17 @@
-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";
+describe('<Title />', () => {
+  it('should not render without a title', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Title, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.instance()).toEqual(null);
+  });
+  it('should render with a title', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(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,33 @@ 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;
+ */
+const BasicDialog = ({
+  children,
+  actions,
+  title
+}) => /*#__PURE__*/React.createElement(FocusTrap, null, /*#__PURE__*/React.createElement("div", {
+  className: `${styles.container} ui-material__base-dialog`,
+  "data-test-id": "basicDialog",
+  role: "alertdialog",
+  "aria-modal": true,
+  "aria-labelledby": "basicDialogTitle basicDialogDesc"
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles.content
+}, /*#__PURE__*/React.createElement(Title, {
+  title: title
+}), /*#__PURE__*/React.createElement(Content, {
+  content: children
+})), /*#__PURE__*/React.createElement("div", {
+  className: styles.actions
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles.innerActions
+}, /*#__PURE__*/React.createElement(Buttons, {
+  actions: actions
+})))));
+BasicDialog.defaultProps = {
+  children: null,
+  actions: [],
+  title: null
+};
+export default BasicDialog;

package/BaseDialog/spec.js

@@ -1 +1,39 @@
-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";
+const props = {
+  title: 'Hello World',
+  children: /*#__PURE__*/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 />', () => {
+  it('should render with minimal props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(BasicDialog, {
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render as expected', () => {
+    const wrapper = shallow(/*#__PURE__*/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);
+  });
+});

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";
+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__*/
+    // eslint-disable-next-line react/button-has-type
+    React.createElement("button", {
+      className: classes,
+      disabled: disabled,
+      onClick: onClick,
+      ref: ref,
+      style: {
+        background
+      },
+      type: type,
+      "data-test-id": props.testId
+    }, 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,11 @@
-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;
+ */
+const NavDrawerDivider = () => /*#__PURE__*/React.createElement("hr", {
+  "aria-hidden": true,
+  className: styles
+});
+export default NavDrawerDivider;

package/NavDrawer/components/Divider/spec.js

@@ -1 +1,9 @@
-import React from'react';import{mount}from'enzyme';import Divider from"./index";describe('<NavDrawerDivider />',function(){it('should match the snapshot',function(){var wrapper=mount(React.createElement(Divider,null));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { mount } from 'enzyme';
+import Divider from "./index";
+describe('<NavDrawerDivider />', () => {
+  it('should match the snapshot', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Divider, null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/NavDrawer/components/Divider/style.js

@@ -1,2 +1,12 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export default css({// prevent two consecutive dividers
-' + hr':{display:'none'},background:themeColors.darkGray,border:0,height:1,margin:'16px 0'});
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+export default css({
+  // prevent two consecutive dividers
+  ' + hr': {
+    display: 'none'
+  },
+  background: themeColors.darkGray,
+  border: 0,
+  height: 1,
+  margin: '16px 0'
+});