@shopgate/pwa-ui-material 7.25.0-beta.2 → 7.26.0-beta.1

package/Accordion/index.js

@@ -13,5 +13,6 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {string} [props.contentClassName] Class name for the content wrapper
  * @param {string} [props.testId] Test ID for the component
  * @param {React.ReactNode} props.children Children used for the content section of the accordion
+ * @param {React.ReactNode} props.header 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;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,tabIndex:'0'};return React.createElement(React.Fragment,null,React.createElement("div",_extends({},openWithChevron?{}:clickHandlers,{className:classnames('ui-material__accordion-title',className,styles.toggle,_defineProperty(_defineProperty({},styles.toggleLeftAligned,chevronPosition==='left'),styles.clickable,!openWithChevron)),"data-test-id":testId,key:"accordion-toggle","aria-expanded":open,"aria-controls":controlsId,"aria-label":handleLabel}),React.createElement("div",{className:styles.labelContainer},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}))),React.createElement(AccordionContent,{open:open,id:controlsId,key:controlsId,className:contentClassName},children));}));}Accordion.defaultProps={children: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){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,header=props.header;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}))),React.createElement("div",null,header)),React.createElement(AccordionContent,{open:open,id:controlsId,key:controlsId,className:contentClassName},children));}));}Accordion.defaultProps={children:null,header: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/style.js

@@ -1 +1 @@
-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'});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();
+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',marginRight:10},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'});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();

package/AppBar/components/Title/index.js

@@ -1,7 +1,8 @@
 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";/**
  * 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:/**
-   * @returns {JSX}
-   */function render(){var _this$props=this.props,onClick=_this$props.onClick,title=_this$props.title;/* eslint-disable jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-tabindex */return React.createElement("div",{className:styles,role:"heading","aria-labelledby":"titleLabel","aria-level":"1","data-test-id":"title: ".concat(title),tabIndex:0},React.createElement("span",{onClick:onClick,id:"titleLabel",dangerouslySetInnerHTML:{__html:title}}));/* eslint-enable jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-tabindex */}}]);}(PureComponent);_defineProperty(AppBarTitle,"defaultProps",{onClick:null});export default AppBarTitle;
+ */var AppBarTitle=/*#__PURE__*/function(_PureComponent){function AppBarTitle(){var _this2;_classCallCheck(this,AppBarTitle);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,AppBarTitle,[].concat(args));_defineProperty(_this2,"titleRef",React.createRef());return _this2;}_inherits(AppBarTitle,_PureComponent);return _createClass(AppBarTitle,[{key:"componentDidMount",value:/**
+   * focus the title for screen readers when page loads
+   */function componentDidMount(){var _this3=this;// Delay focus slightly to ensure it is recognized by screen readers
+setTimeout(function(){if(_this3.titleRef.current){_this3.titleRef.current.focus();}},100);}},{key:"render",value:/**
+   * @returns {JSX.Element}
+   */function render(){var _this$props=this.props,onClick=_this$props.onClick,title=_this$props.title;return React.createElement("div",{ref:this.titleRef,className:styles,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;

package/BaseDialog/index.js

@@ -1,9 +1,9 @@
-import React from'react';import PropTypes from'prop-types';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'focus-trap-react';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} children The component children to render in the dialog.
  * @param {Object[]} actions The dialog actions.
  * @param {string} actions.label The label of the action.
  * @param {Function} actions.action The callback to invoke when the action is triggered.
  * @param {string|ReactElement} title The title of the dialog.
- * @return {JSX} The rendered dialog.
- */var BasicDialog=function BasicDialog(_ref){var children=_ref.children,actions=_ref.actions,title=_ref.title;return 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;
+ * @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;

package/NavDrawer/components/Item/index.js

@@ -1,8 +1,7 @@
-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,{Component}from'react';import PropTypes from'prop-types';import{UIEvents}from'@shopgate/pwa-core';import{withForwardedRef}from'@shopgate/engage/core';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+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,{Component}from'react';import PropTypes from'prop-types';import{UIEvents}from'@shopgate/pwa-core';import{withForwardedRef}from'@shopgate/engage/core';import{I18n}from'@shopgate/engage/components';import styles from"./style";/**
  * The NavDrawerItem component.
  */var NavDrawerItem=/*#__PURE__*/function(_Component){function NavDrawerItem(){var _this2;_classCallCheck(this,NavDrawerItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,NavDrawerItem,[].concat(args));/**
    * Handles an Item click by executing it's href.
-   * @param {Object} props The component props.
    */_defineProperty(_this2,"handleClick",function(){UIEvents.emit('navdrawer_close');setTimeout(_this2.props.onClick,300);});return _this2;}_inherits(NavDrawerItem,_Component);return _createClass(NavDrawerItem,[{key:"shouldComponentUpdate",value:/**
    * Only re-render when the label prop changes.
    * @param {Object} nextProps The next component props.

package/NavDrawer/components/Title/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export default css({color:themeColors.shade3,fontSize:'0.875rem',fontWeight:500,margin:'16px 0 0 16px'});
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export default css({color:themeColors.shade11,fontSize:'0.875rem',fontWeight:500,margin:'16px 0 0 16px'});

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.25.0-beta.2",
+  "version": "7.26.0-beta.1",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.25.0-beta.2",
+    "@shopgate/pwa-common": "7.26.0-beta.1",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
     "redux": "^4.2.1"