@shopgate/pwa-ui-shared 7.27.2-beta.3 → 7.27.2-beta.6

package/Form/TextField/index.js

@@ -11,4 +11,4 @@ var _excluded=["className","placeholder","label","errorText","leftElement","righ
    */_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.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;
+   */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,hasLeftElement:!!leftElement,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:"\n                ".concat(style[props.multiLine?'multiLine':'input']," \n                ").concat(leftElement?style.leftOffset:'',"\n              "),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/Form/TextField/style.js

@@ -7,4 +7,6 @@ var bluredDateSelector='input[type="date"]:in-range:not(:focus)';/**
  */var input=css({position:'relative',padding:0,width:'100%',marginTop:24,outline:0,fontSize:16,lineHeight:'19px'}).toString();/**
  * The styles for the multiLine.
  */var multiLine=css({position:'relative',marginTop:24,marginBottom:3,padding:0,width:'100%',outline:0,height:19,minHeight:19,lineHeight:'19px',verticalAlign:'top'// Important to avoid bottom whitespace.
-}).toString();var element=css({marginTop:16}).toString();export default{container:container,input:input,multiLine:multiLine,element:element};
+}).toString();var element=css({marginTop:16,display:'flex',alignItems:'flex-end'}).toString();/**
+ * Additional left spacing when a left element is present
+ */var leftOffset=css({marginLeft:2}).toString();export default{container:container,input:input,multiLine:multiLine,element:element,leftOffset:leftOffset};

package/FormElement/components/Placeholder/index.js

@@ -2,5 +2,7 @@ import React from'react';import PropTypes from'prop-types';import classNames fro
  * The form element placeholder component.
  * @param {string} placeholder The placeholder text.
  * @param {boolean} visible Sets the placeholder visibility.
- * @return {JSX}
- */var Placeholder=function Placeholder(_ref){var placeholder=_ref.placeholder,visible=_ref.visible,ariaHidden=_ref['aria-hidden'];return React.createElement("div",{className:classNames(styles.placeholderStyles(visible),'placeholder'),"aria-hidden":ariaHidden},React.createElement(I18n.Text,{string:placeholder}));};Placeholder.defaultProps={'aria-hidden':null,placeholder:'',visible:false};export default Placeholder;
+ * @param {boolean} props['aria-hidden'] Accessibility attribute to mark the placeholder as hidden
+ * @param {boolean} hasLeftElement Whether a left element is present
+ * @return {JSX.Element}
+ */var Placeholder=function Placeholder(_ref){var placeholder=_ref.placeholder,visible=_ref.visible,ariaHidden=_ref['aria-hidden'],hasLeftElement=_ref.hasLeftElement;return React.createElement("div",{className:classNames(styles.placeholderStyles(visible,hasLeftElement),'placeholder'),"aria-hidden":ariaHidden},React.createElement(I18n.Text,{string:placeholder}));};Placeholder.defaultProps={'aria-hidden':null,hasLeftElement:false,placeholder:'',visible:false};export default Placeholder;

package/FormElement/components/Placeholder/style.js

@@ -2,10 +2,13 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * The style object for a one line text element with an ellipsis on overflow.
  */var ellipsisLine={overflow:'hidden',width:'100%',whiteSpace:'nowrap',textOverflow:'ellipsis'};var easing='450ms cubic-bezier(0.23, 1, 0.32, 1)';/**
  * The styles for the placeholder text.
- */var placeholder=css(_extends({position:'absolute',pointerEvents:'none',top:24,color:themeConfig.colors.shade4,willChange:'transform',transition:"opacity ".concat(easing)},ellipsisLine)).toString();/**
+ */var placeholder=css(_extends({position:'absolute',pointerEvents:'none',top:24,color:"var(--color-text-medium-emphasis, ".concat(themeConfig.colors.shade6,")"),willChange:'transform',transition:"opacity ".concat(easing)},ellipsisLine)).toString();/**
  * The styles for the invisible hint text.
  */var placeholderInactive=css({opacity:0}).toString();/**
+ * Additional left spacing when a left element is present
+ */var leftOffset=css({left:26}).toString();/**
  * Gets the style classes for the underline element.
  * @param {boolean} visible Whether the hint is visible.
+ * @param {boolean} hasLeftElement - Whether a left element is present.
  * @return {string} The style classes.
- */var placeholderStyles=function placeholderStyles(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;return classNames(placeholder,_defineProperty({},placeholderInactive,!visible));};export default{placeholderStyles:placeholderStyles};
+ */var placeholderStyles=function placeholderStyles(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var hasLeftElement=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return classNames(placeholder,_defineProperty(_defineProperty({},placeholderInactive,!visible),leftOffset,hasLeftElement));};export default{placeholderStyles:placeholderStyles};

package/FormElement/index.js

@@ -8,4 +8,4 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * @returns {boolean} Whether the hint text is currently visible.
    */},{key:"hasErrorMessage",get:function get(){return!!this.props.errorText;}/**
    * @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;
+   */},{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,hasLeftElement=_this$props.hasLeftElement,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,hasLeftElement:hasLeftElement,"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,hasLeftElement:false,hasValue:false,hasPlaceholder:true,hasUnderline:true,translateErrorText:true,disabled:false,showErrorText:true});export default FormElement;

package/package.json

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