@shopgate/pwa-ui-shared 7.27.0-beta.3 → 7.27.1-beta.1

package/Form/Select/index.js

@@ -14,5 +14,5 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * Update state with new props.
    * @param {Object} nextProps The new props.
    */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){this.setState({value:nextProps.value});}},{key:"render",value:/**
-   * @return {JSX}
-   */function render(){var _this3=this;var _this$props2=this.props,name=_this$props2.name,options=_this$props2.options,translateErrorText=_this$props2.translateErrorText,disabled=_this$props2.disabled,multiple=_this$props2.multiple,size=_this$props2.size,showErrorText=_this$props2.showErrorText;return React.createElement(FormElement,{className:"".concat(this.props.className," ui-shared__form__select"),placeholder:this.props.placeholder,htmlFor:name,label:this.props.label,errorText:this.props.errorText,translateErrorText:translateErrorText,isFocused:this.state.isFocused,hasValue:!!this.state.value||!!options[''],hasPlaceholder:!disabled||this.state.value!=='',disabled:disabled,showErrorText:showErrorText},React.createElement("select",_extends({id:this.props.name,name:this.props.name,onChange:this.handleChange,onFocus:function onFocus(){return _this3.handleFocusChange(true);},onBlur:function onBlur(){return _this3.handleFocusChange(false);},value:this.state.value,className:classNames(styles.select,'select'),disabled:disabled},multiple&&{multiple:multiple,size:size}),Object.keys(options).map(function(key){return React.createElement("option",{className:"option",value:key,key:"".concat(name,"_").concat(key)},options[key]);})),React.createElement(Chevron,{className:styles.chevron}));}}]);}(Component);_defineProperty(Select,"defaultProps",{className:'',errorText:'',isControlled:false,placeholder:'',label:'',onChange:function onChange(){},options:{},translateErrorText:true,showErrorText:true,size:null,value:'',disabled:false,multiple:false});export default Select;
+   * @return {JSX.Element}
+   */function render(){var _this3=this;var _this$props2=this.props,name=_this$props2.name,options=_this$props2.options,translateErrorText=_this$props2.translateErrorText,disabled=_this$props2.disabled,multiple=_this$props2.multiple,size=_this$props2.size,showErrorText=_this$props2.showErrorText,className=_this$props2.className,placeholder=_this$props2.placeholder,label=_this$props2.label,errorText=_this$props2.errorText,required=_this$props2.required,ariaInvalid=_this$props2['aria-invalid'],ariaDescribedBy=_this$props2['aria-describedby'];var _this$state=this.state,value=_this$state.value,isFocused=_this$state.isFocused;return React.createElement(FormElement,{className:"".concat(className," ui-shared__form__select"),placeholder:placeholder,htmlFor:name,label:label,errorText:errorText,translateErrorText:translateErrorText,isFocused:isFocused,hasValue:!!value||!!options[''],hasPlaceholder:!disabled||value!=='',disabled:disabled,showErrorText:showErrorText},React.createElement("select",_extends({id:name,name:name,onChange:this.handleChange,onFocus:function onFocus(){return _this3.handleFocusChange(true);},onBlur:function onBlur(){return _this3.handleFocusChange(false);},value:value,className:classNames(styles.select,'select'),disabled:disabled,required:required,"aria-invalid":ariaInvalid,"aria-describedby":ariaDescribedBy},multiple&&{multiple:multiple,size:size}),Object.keys(options).map(function(key){return React.createElement("option",{className:"option",value:key,key:"".concat(name,"_").concat(key)},options[key]);})),React.createElement(Chevron,{className:styles.chevron}));}}]);}(Component);_defineProperty(Select,"defaultProps",{'aria-invalid':false,'aria-describedby':null,className:'',errorText:'',isControlled:false,placeholder:'',label:'',onChange:function onChange(){},options:{},translateErrorText:true,showErrorText:true,size:null,value:'',disabled:false,required:false,multiple:false});export default Select;

package/Form/TextField/index.js

@@ -10,5 +10,5 @@ var _excluded=["className","placeholder","label","errorText","leftElement","righ
    * @param {boolean} isFocused Whether the input component is focused.
    */_defineProperty(_this2,"handleFocusChange",function(isFocused){_this2.setState({isFocused:isFocused});_this2.props.onFocusChange(isFocused);});_this2.state={isFocused:false};return _this2;}_inherits(TextField,_Component);return _createClass(TextField,[{key:"render",value:/**
    * Renders the text field.
-   * @return {JSX}
+   * @return {JSX.Element}
    */function render(){var _this$props=this.props,className=_this$props.className,placeholder=_this$props.placeholder,label=_this$props.label,errorText=_this$props.errorText,leftElement=_this$props.leftElement,rightElement=_this$props.rightElement,hasUnderline=_this$props.hasUnderline,props=_objectWithoutProperties(_this$props,_excluded);return React.createElement(FormElement,{className:"".concat(className," ui-shared__form__text-field"),htmlFor:props.name,placeholder:placeholder,label:label,errorText:errorText,hasUnderline:hasUnderline,hasValue:!!props.value,isFocused:this.state.isFocused},React.createElement(Grid,null,leftElement&&React.createElement(Grid.Item,{grow:0,className:style.element},leftElement),React.createElement(Grid.Item,{grow:1,className:style.container},React.createElement(Input,_extends({},props,{onFocusChange:this.handleFocusChange,className:style[props.multiLine?'multiLine':'input'],validateOnBlur:true}))),rightElement&&React.createElement(Grid.Item,{grow:0,className:style.element},rightElement)));}}]);}(Component);_defineProperty(TextField,"defaultProps",{attributes:null,className:'',errorText:'',hasUnderline:true,label:'',leftElement:null,onChange:noop,onFocusChange:noop,placeholder:'',multiLine:false,rightElement:null,value:'',type:'text',maxLength:''});export default TextField;

package/FormElement/components/ErrorText/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import classNames fro
  * Error message component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var ErrorText=function ErrorText(_ref){var className=_ref.className,errorText=_ref.errorText,translate=_ref.translate;return React.createElement("div",{className:classNames(className,styles,'errorText'),role:"alert","aria-live":"assertive","aria-atomic":"true"},translate&&React.createElement(I18n.Text,{string:errorText}),!translate&&errorText);};ErrorText.defaultProps={className:null,errorText:null,translate:true};export default ErrorText;
+ */var ErrorText=function ErrorText(_ref){var className=_ref.className,errorText=_ref.errorText,translate=_ref.translate,elementName=_ref.elementName,ariaHidden=_ref.ariaHidden;return React.createElement("div",{id:"ariaError-".concat(elementName),className:classNames(className,styles,'errorText'),"aria-live":"assertive","aria-atomic":"true","aria-hidden":ariaHidden},translate&&React.createElement(I18n.Text,{string:errorText}),!translate&&errorText);};ErrorText.defaultProps={className:null,errorText:null,elementName:null,translate:true,ariaHidden:false};export default ErrorText;

package/FormElement/index.js

@@ -7,5 +7,5 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */},{key:"isPlaceholderVisible",get:function get(){return!this.props.isFocused&&!this.props.hasValue;}/**
    * @returns {boolean} Whether the hint text is currently visible.
    */},{key:"hasErrorMessage",get:function get(){return!!this.props.errorText;}/**
-   * @return {JSX}
-   */},{key:"render",value:function render(){var _this$props=this.props,isFocused=_this$props.isFocused,errorText=_this$props.errorText,translateErrorText=_this$props.translateErrorText,placeholder=_this$props.placeholder,hasPlaceholder=_this$props.hasPlaceholder,htmlFor=_this$props.htmlFor,label=_this$props.label,className=_this$props.className,disabled=_this$props.disabled,labelStatic=_this$props.labelStatic,showErrorText=_this$props.showErrorText;return React.createElement("div",{className:classNames(style.formElement,className,'formElement','ui-shared__form-element',{disabled:disabled})},hasPlaceholder&&(placeholder||label)&&React.createElement(Placeholder,{visible:this.isPlaceholderVisible,placeholder:placeholder||label,"aria-hidden":true}),label&&React.createElement(Label,{htmlFor:htmlFor,label:label,labelStatic:labelStatic,isFocused:isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),this.props.children,this.props.hasUnderline&&React.createElement(Underline,{isFocused:isFocused,hasErrorMessage:this.hasErrorMessage}),errorText&&showErrorText&&React.createElement(ErrorText,{errorText:errorText,translate:translateErrorText}));}}]);}(Component);_defineProperty(FormElement,"defaultProps",{children:null,className:'',errorText:'',placeholder:'',htmlFor:'',label:'',labelStatic:false,isFocused:false,hasValue:false,hasPlaceholder:true,hasUnderline:true,translateErrorText:true,disabled:false,showErrorText:true});export default FormElement;
+   * @return {JSX.Element}
+   */},{key:"render",value:function render(){var _this$props=this.props,isFocused=_this$props.isFocused,errorText=_this$props.errorText,translateErrorText=_this$props.translateErrorText,placeholder=_this$props.placeholder,hasPlaceholder=_this$props.hasPlaceholder,htmlFor=_this$props.htmlFor,label=_this$props.label,className=_this$props.className,disabled=_this$props.disabled,labelStatic=_this$props.labelStatic,showErrorText=_this$props.showErrorText;return React.createElement("div",{className:classNames(style.formElement,className,'formElement','ui-shared__form-element',{disabled:disabled})},hasPlaceholder&&(placeholder||label)&&React.createElement(Placeholder,{visible:this.isPlaceholderVisible,placeholder:placeholder||label,"aria-hidden":true}),label&&React.createElement(Label,{htmlFor:htmlFor,label:label,labelStatic:labelStatic,isFocused:isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),this.props.children,this.props.hasUnderline&&React.createElement(Underline,{isFocused:isFocused,hasErrorMessage:this.hasErrorMessage}),errorText&&showErrorText&&React.createElement(ErrorText,{errorText:errorText,translate:translateErrorText,elementName:htmlFor}));}}]);}(Component);_defineProperty(FormElement,"defaultProps",{children:null,className:'',errorText:'',placeholder:'',htmlFor:'',label:'',labelStatic:false,isFocused:false,hasValue:false,hasPlaceholder:true,hasUnderline:true,translateErrorText:true,disabled:false,showErrorText:true});export default FormElement;

package/TextField/components/ErrorText/index.js

@@ -1,5 +1,5 @@
 import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
  * Error message component.
  * @param {Object} props The component props.
- * @returns {JSX}
- */var ErrorText=function ErrorText(props){return React.createElement("div",{className:classNames(props.className,styles.error,'errorText')},props.translate&&React.createElement(I18n.Text,{string:props.validationError||props.errorText}),!props.translate&&(props.validationError||props.errorText));};ErrorText.defaultProps={className:'',errorText:null,translate:true,validationError:null};export default ErrorText;
+ * @returns {JSX.Element}
+ */var ErrorText=function ErrorText(_ref){var elementName=_ref.elementName,validationError=_ref.validationError,errorText=_ref.errorText,ariaHidden=_ref.ariaHidden,translate=_ref.translate,className=_ref.className;return React.createElement("div",{id:"ariaError-".concat(elementName),className:classNames(className,styles.error,'errorText'),"aria-live":"assertive","aria-atomic":"true","aria-hidden":ariaHidden},translate&&React.createElement(I18n.Text,{string:validationError||errorText}),!translate&&(validationError||errorText));};ErrorText.defaultProps={className:'',errorText:null,elementName:null,translate:true,ariaHidden:false,validationError:null};export default ErrorText;

package/TextField/components/FormElement/index.js

@@ -1,5 +1,5 @@
 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 PropTypes from'prop-types';import Input from'@shopgate/pwa-common/components/Input';import styles from"./style";/**
  * Creates an input or a multiLine based on the type prop.
  * @param {Object} props The props.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */var FormElement=function FormElement(props){var styleType=props.multiLine?'multiLine':'input';return React.createElement(Input,_extends({},props,{className:styles[styleType],validateOnBlur:true}));};FormElement.defaultProps={multiLine:false};export default FormElement;

package/TextField/components/Label/index.js

@@ -3,4 +3,4 @@ import React from'react';import PropTypes from'prop-types';import classNames fro
  * @param {Object} props The component props.
  * @return {JSX}
  */var Label=function Label(props){var labelStyles=styles.labelStyles(props.isFocused,props.isFloating,props.hasErrorMessage);return(// eslint-disable-next-line jsx-a11y/label-has-associated-control
-React.createElement("label",{htmlFor:props.name,className:classNames(labelStyles,'label',{floating:props.isFloating})},React.createElement(I18n.Text,{string:props.label})));};Label.defaultProps={name:'',label:'',isFocused:false,isFloating:false,hasErrorMessage:false};export default Label;
+React.createElement("label",{htmlFor:props.name,"aria-hidden":true,className:classNames(labelStyles,'label',{floating:props.isFloating})},React.createElement(I18n.Text,{string:props.label})));};Label.defaultProps={name:'',label:'',isFocused:false,isFloating:false,hasErrorMessage:false};export default Label;

package/TextField/components/Underline/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import classNames fro
  *  Renders the label element.
  * @param {Object} props  The component props.
  * @return {JSX}
- */var Underline=function Underline(props){return React.createElement("div",{className:classNames(styles.underlineWrapper,'underline')},React.createElement("div",{className:styles.underline,style:styles.underlineStyle(props.isFocused,props.hasErrorMessage)}));};Underline.defaultProps={isFocused:false,hasErrorMessage:false};export default Underline;
+ */var Underline=function Underline(props){return React.createElement("div",{className:classNames(styles.underlineWrapper,'underline'),"aria-hidden":true},React.createElement("div",{className:styles.underline,style:styles.underlineStyle(props.isFocused,props.hasErrorMessage)}));};Underline.defaultProps={isFocused:false,hasErrorMessage:false};export default Underline;

package/TextField/index.js

@@ -32,5 +32,5 @@ if(navigator.userAgent.includes('Firefox')&&this.props.type==='date'){return tru
    * @return {boolean} Whether the error message is set.
    */},{key:"hasErrorMessage",get:function get(){return!!(this.state.validationError||this.props.errorText);}},{key:"render",value:/**
    * Renders the text field.
-   * @return {JSX}
-   */function render(){var styleType=this.props.multiLine?'multiLine':'input';var style=styles.container[styleType];return React.createElement("div",{className:classNames(style,this.props.className,'textField','ui-shared__text-field',{disabled:this.props.disabled})},React.createElement(Hint,{visible:this.isHintVisible,hintText:this.props.hintText}),React.createElement(Label,{name:this.props.name,label:this.props.label,isFocused:this.isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),React.createElement(FormElement,{id:this.props.name,multiLine:this.props.multiLine,name:this.props.name,setRef:this.props.setRef,onFocusChange:this.handleFocusChange,onChange:this.handleChange,onSanitize:this.props.onSanitize,onValidate:this.handleValidate,password:this.props.password,type:this.props.type,value:this.props.value,isControlled:this.props.isControlled,inputComponent:this.props.inputComponent,disabled:this.props.disabled}),React.createElement(Underline,{isFocused:this.isFocused,hasErrorMessage:this.hasErrorMessage}),this.props.showErrorText&&React.createElement(ErrorText,{validationError:this.state.validationError,errorText:this.props.errorText,translate:this.props.translateErrorText}));}}]);}(Component);_defineProperty(TextField,"defaultProps",{className:'',errorText:'',showErrorText:true,setRef:function setRef(){},hintText:'',isControlled:false,label:'',multiLine:false,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},password:false,translateErrorText:true,type:'text',value:'',inputComponent:'input',disabled:false});export default hot(TextField);
+   * @return {JSX.Element}
+   */function render(){var styleType=this.props.multiLine?'multiLine':'input';var style=styles.container[styleType];var _this$props=this.props,multiLine=_this$props.multiLine,className=_this$props.className,disabled=_this$props.disabled,hintText=_this$props.hintText,name=_this$props.name,label=_this$props.label,setRef=_this$props.setRef,onSanitize=_this$props.onSanitize,password=_this$props.password,type=_this$props.type,value=_this$props.value,isControlled=_this$props.isControlled,inputComponent=_this$props.inputComponent,showErrorText=_this$props.showErrorText,errorText=_this$props.errorText,translateErrorText=_this$props.translateErrorText,required=_this$props.required;return React.createElement("div",{className:classNames(style,className,'textField','ui-shared__text-field',{disabled:disabled})},React.createElement(Hint,{visible:this.isHintVisible,hintText:hintText}),React.createElement(Label,{name:name,label:label,isFocused:this.isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),React.createElement(FormElement,{id:name,multiLine:multiLine,name:name,setRef:setRef,onFocusChange:this.handleFocusChange,onChange:this.handleChange,onSanitize:onSanitize,onValidate:this.handleValidate,password:password,type:type,value:value,isControlled:isControlled,inputComponent:inputComponent,disabled:disabled,required:required,attributes:{'aria-invalid':!!errorText,'aria-describedby':this.hasErrorMessage?"ariaError-".concat(name):null}}),React.createElement(Underline,{isFocused:this.isFocused,hasErrorMessage:this.hasErrorMessage}),showErrorText&&React.createElement(ErrorText,{validationError:this.state.validationError,errorText:errorText,translate:translateErrorText,elementName:name}));}}]);}(Component);_defineProperty(TextField,"defaultProps",{className:'',errorText:'',showErrorText:true,setRef:function setRef(){},hintText:'',isControlled:false,label:'',multiLine:false,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},required:false,password:false,translateErrorText:true,type:'text',value:'',inputComponent:'input',disabled:false});export default hot(TextField);

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.27.0-beta.3",
+  "version": "7.27.1-beta.1",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.27.0-beta.3",
-    "@shopgate/pwa-ui-material": "7.27.0-beta.3",
+    "@shopgate/pwa-ui-ios": "7.27.1-beta.1",
+    "@shopgate/pwa-ui-material": "7.27.1-beta.1",
     "react-day-picker": "^7.4.8"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.27.0-beta.3",
-    "@shopgate/pwa-common-commerce": "7.27.0-beta.3",
+    "@shopgate/pwa-common": "7.27.1-beta.1",
+    "@shopgate/pwa-common-commerce": "7.27.1-beta.1",
     "classnames": "2.5.1",
     "react": "~16.14.0"
   },