@shopgate/pwa-ui-shared 7.30.0-alpha.7 → 7.30.0-alpha.9

package/Form/SelectContextChoices/index.js

@@ -1,5 +1,79 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useCallback,Fragment}from'react';import PropTypes from'prop-types';import pick from'lodash/pick';import{i18n}from'@shopgate/engage/core';import Chevron from"../../icons/ChevronIcon";import InfoField from"../InfoField";import ContextMenu from"../../ContextMenu";import styles from"./style";/**
+import React, { useState, useCallback, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import pick from 'lodash/pick';
+import { i18n } from '@shopgate/engage/core';
+import Chevron from "../../icons/ChevronIcon";
+import InfoField from "../InfoField";
+import ContextMenu from "../../ContextMenu";
+import styles from "./style";
+
+/**
  * @param {Object} props .
  * @returns {JSX}
- */var SelectContextChoices=function SelectContextChoices(_ref){var options=_ref.options,onChange=_ref.onChange,value=_ref.value,placeholder=_ref.placeholder,className=_ref.className,label=_ref.label,errorText=_ref.errorText,showErrorText=_ref.showErrorText;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),opened=_useState2[0],setOpened=_useState2[1];var onMenuChange=useCallback(function(_ref2){var active=_ref2.active;setOpened(active);},[]);var onItemClick=useCallback(function(key){if(key===''){onChange([]);}else if(value.includes(key)){// Eliminate value
-onChange(value.filter(function(v){return v!==key;}));}else{onChange([].concat(value,[key]));}},[onChange,value]);var hasValue=!!value&&!!value.length;var values=hasValue?Object.values(pick(options,value)):[];return React.createElement(Fragment,null,React.createElement(InfoField,{className:className,label:label,errorText:errorText,showErrorText:showErrorText,hasValue:true,rightElement:React.createElement(Chevron,{className:styles.chevron})},React.createElement("div",{role:"button",onClick:function onClick(){return setOpened(true);},"aria-hidden":true,tabIndex:"0",className:styles.toggle},!hasValue&&(placeholder||i18n.text('common.please_choose')),hasValue&&values.join(', ')),React.createElement(ContextMenu,{isOpened:opened,onStateChange:onMenuChange,showToggle:false,scroll:true},Object.keys(options).map(function(key){return React.createElement(ContextMenu.Item,{key:key,autoClose:false,onClick:function onClick(){return onItemClick(key);},className:hasValue&&value.includes(key)?styles.itemSelected:''},options[key]);}))));};SelectContextChoices.defaultProps={className:'',errorText:'',placeholder:'',label:'',onChange:function onChange(){},options:{},value:[],showErrorText:true};export default SelectContextChoices;
+ */
+const SelectContextChoices = ({
+  options,
+  onChange,
+  value,
+  placeholder,
+  className,
+  label,
+  errorText,
+  showErrorText
+}) => {
+  const [opened, setOpened] = useState(false);
+  const onMenuChange = useCallback(({
+    active
+  }) => {
+    setOpened(active);
+  }, []);
+  const onItemClick = useCallback(key => {
+    if (key === '') {
+      onChange([]);
+    } else if (value.includes(key)) {
+      // Eliminate value
+      onChange(value.filter(v => v !== key));
+    } else {
+      onChange([...value, key]);
+    }
+  }, [onChange, value]);
+  const hasValue = !!value && !!value.length;
+  const values = hasValue ? Object.values(pick(options, value)) : [];
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(InfoField, {
+    className: className,
+    label: label,
+    errorText: errorText,
+    showErrorText: showErrorText,
+    hasValue: true,
+    rightElement: /*#__PURE__*/React.createElement(Chevron, {
+      className: styles.chevron
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    onClick: () => setOpened(true),
+    "aria-hidden": true,
+    tabIndex: "0",
+    className: styles.toggle
+  }, !hasValue && (placeholder || i18n.text('common.please_choose')), hasValue && values.join(', ')), /*#__PURE__*/React.createElement(ContextMenu, {
+    isOpened: opened,
+    onStateChange: onMenuChange,
+    showToggle: false,
+    scroll: true
+  }, Object.keys(options).map(key => /*#__PURE__*/React.createElement(ContextMenu.Item, {
+    key: key,
+    autoClose: false,
+    onClick: () => onItemClick(key),
+    className: hasValue && value.includes(key) ? styles.itemSelected : ''
+  }, options[key])))));
+};
+SelectContextChoices.defaultProps = {
+  className: '',
+  errorText: '',
+  placeholder: '',
+  label: '',
+  onChange: () => {},
+  options: {},
+  value: [],
+  showErrorText: true
+};
+export default SelectContextChoices;

package/Form/SelectContextChoices/spec.js

@@ -1,4 +1,33 @@
-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{shallow}from'enzyme';import SelectContextChoices from"./index";jest.mock('@shopgate/engage/a11y/components');jest.mock('@shopgate/engage/components');describe('<SelectContextChoices />',function(){// Simple tests for snapshots
-var tests={'should render select with no options':{},// eslint-disable-next-line extra-rules/no-single-line-objects
-'should render select with 2 options':{options:{DE:'Germany',US:'United states'}},// eslint-disable-next-line extra-rules/no-single-line-objects
-'should render select with 1 selected option':{options:{DE:'Germany',US:'United states'},value:['DE']}};Object.keys(tests).forEach(function(test){it(test,function(){var testFixtures=tests[test];var wrapper=shallow(React.createElement(SelectContextChoices,_extends({},testFixtures)));expect(wrapper).toMatchSnapshot();});});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import SelectContextChoices from "./index";
+jest.mock('@shopgate/engage/a11y/components');
+jest.mock('@shopgate/engage/components');
+describe('<SelectContextChoices />', () => {
+  // Simple tests for snapshots
+  const tests = {
+    'should render select with no options': {},
+    // eslint-disable-next-line extra-rules/no-single-line-objects
+    'should render select with 2 options': {
+      options: {
+        DE: 'Germany',
+        US: 'United states'
+      }
+    },
+    // eslint-disable-next-line extra-rules/no-single-line-objects
+    'should render select with 1 selected option': {
+      options: {
+        DE: 'Germany',
+        US: 'United states'
+      },
+      value: ['DE']
+    }
+  };
+  Object.keys(tests).forEach(test => {
+    it(test, () => {
+      const testFixtures = tests[test];
+      const wrapper = shallow(/*#__PURE__*/React.createElement(SelectContextChoices, testFixtures));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/Form/SelectContextChoices/style.js

@@ -1 +1,23 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var chevron=css({position:'absolute',top:'50%',right:0,transform:'translateY(-50%) rotateZ(-90deg)',fontSize:'1.3em !important',marginTop:-3}).toString();var toggle=css({fontSize:'1rem',paddingRight:'2rem'});var itemSelected=css({backgroundColor:themeConfig.colors.shade8,fontWeight:500}).toString();export default{chevron:chevron,toggle:toggle,itemSelected:itemSelected};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const chevron = css({
+  position: 'absolute',
+  top: '50%',
+  right: 0,
+  transform: 'translateY(-50%) rotateZ(-90deg)',
+  fontSize: '1.3em !important',
+  marginTop: -3
+}).toString();
+const toggle = css({
+  fontSize: '1rem',
+  paddingRight: '2rem'
+});
+const itemSelected = css({
+  backgroundColor: themeConfig.colors.shade8,
+  fontWeight: 500
+}).toString();
+export default {
+  chevron,
+  toggle,
+  itemSelected
+};

package/Form/TextField/index.js

@@ -1,14 +1,98 @@
-var _excluded=["className","placeholder","label","errorText","leftElement","rightElement","hasUnderline"];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 _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);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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 Input from'@shopgate/pwa-common/components/Input';import Grid from'@shopgate/pwa-common/components/Grid';import FormElement from'@shopgate/pwa-ui-shared/FormElement';import style from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Input from '@shopgate/pwa-common/components/Input';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import FormElement from '@shopgate/pwa-ui-shared/FormElement';
+import style from "./style";
+
+/**
  * No operational
- */var noop=function noop(){};/**
+ */
+const noop = () => {};
+
+/**
  * TextField component
- */var TextField=/*#__PURE__*/function(_Component){/**
+ */
+class TextField extends Component {
+  /**
    * Creates a new text field component.
    * @param {Object} props The component properties.
-   */function TextField(props){var _this2;_classCallCheck(this,TextField);_this2=_callSuper(this,TextField,[props]);/**
-   * Internal focus event handler.
-   * @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:/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Internal focus event handler.
+     * @param {boolean} isFocused Whether the input component is focused.
+     */
+    this.handleFocusChange = isFocused => {
+      this.setState({
+        isFocused
+      });
+      this.props.onFocusChange(isFocused);
+    };
+    this.state = {
+      isFocused: false
+    };
+  }
+  /**
    * 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,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;
+   */
+  render() {
+    const {
+      className,
+      placeholder,
+      label,
+      errorText,
+      leftElement,
+      rightElement,
+      hasUnderline,
+      ...props
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FormElement, {
+      className: `${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
+    }, /*#__PURE__*/React.createElement(Grid, null, leftElement && /*#__PURE__*/React.createElement(Grid.Item, {
+      grow: 0,
+      className: style.element
+    }, leftElement), /*#__PURE__*/React.createElement(Grid.Item, {
+      grow: 1,
+      className: style.container
+    }, /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+      onFocusChange: this.handleFocusChange,
+      className: `
+                ${style[props.multiLine ? 'multiLine' : 'input']} 
+                ${leftElement ? style.leftOffset : ''}
+              `,
+      validateOnBlur: true
+    }))), rightElement && /*#__PURE__*/React.createElement(Grid.Item, {
+      grow: 0,
+      className: style.element
+    }, rightElement)));
+  }
+}
+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/spec.js

@@ -1 +1,110 @@
-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{mount}from'enzyme';import TextField from"./index";var inputProps={name:'test-input'};describe('<TextField>',function(){it('should render a simple text field',function(){var wrapper=mount(React.createElement(TextField,inputProps));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input').length).toBe(1);});it('should render the text field as password',function(){var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{password:true})));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[type="password"]').length).toBe(1);});it('should render the text field with a default value',function(){var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{value:"FooBar"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[value="FooBar"]').length).toBe(1);});it('should trigger the onChange callback',function(){var onChangeMock=jest.fn();var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{onChange:onChangeMock})));wrapper.find('input').simulate('change',{target:{value:'a'}});expect(onChangeMock).toHaveBeenCalledTimes(2);expect(wrapper.find('input').props().value).toEqual('a');});it('should receive the correct value while typing',function(){var wrapper=mount(React.createElement(TextField,inputProps));var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper).toMatchSnapshot();expect(input.instance().value).toBe('foobar');});it('should sanitize the input',function(){var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{onSanitize:function onSanitize(value){return value.toUpperCase();}})));var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper).toMatchSnapshot();expect(input.instance().value).toBe('FOOBAR');});it('should trigger the validation callback',function(){var onValidateMock=jest.fn();var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{onValidate:onValidateMock})));expect(wrapper).toMatchSnapshot();expect(onValidateMock).toHaveBeenCalled();});it('should focus the input',function(){var onFocusMock=jest.fn();var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{onFocusChange:onFocusMock})));var input=wrapper.find('SimpleInput');expect(wrapper).toMatchSnapshot();expect(input.instance().isFocused).toBe(false);input.simulate('focus');expect(input.instance().isFocused).toBe(true);input.simulate('blur');expect(input.instance().isFocused).toBe(false);});it('should show the error message',function(){var errorText='This is an error here';var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{errorText:errorText})));expect(wrapper).toMatchSnapshot();expect(wrapper.find('ErrorText').find('Translate').at(0).props().string).toEqual(errorText);});it('should show the label',function(){var label='This is the label';var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{label:label})));expect(wrapper).toMatchSnapshot();expect(wrapper.find('Label').find('Translate').props().string).toEqual(label);});it('should show the placeholder text',function(){var placeholder='This is the placeholder text';var wrapper=mount(React.createElement(TextField,_extends({},inputProps,{placeholder:placeholder})));expect(wrapper).toMatchSnapshot();expect(wrapper.find('Placeholder').find('Translate').at(0).props().string).toEqual(placeholder);});});
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { mount } from 'enzyme';
+import TextField from "./index";
+const inputProps = {
+  name: 'test-input'
+};
+describe('<TextField>', () => {
+  it('should render a simple text field', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, inputProps));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('input').length).toBe(1);
+  });
+  it('should render the text field as password', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      password: true
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('input[type="password"]').length).toBe(1);
+  });
+  it('should render the text field with a default value', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      value: "FooBar"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('input[value="FooBar"]').length).toBe(1);
+  });
+  it('should trigger the onChange callback', () => {
+    const onChangeMock = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      onChange: onChangeMock
+    })));
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'a'
+      }
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    expect(wrapper.find('input').props().value).toEqual('a');
+  });
+  it('should receive the correct value while typing', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, inputProps));
+    const input = wrapper.find('input');
+    input.simulate('change', {
+      target: {
+        value: 'foobar'
+      }
+    });
+    expect(wrapper).toMatchSnapshot();
+    expect(input.instance().value).toBe('foobar');
+  });
+  it('should sanitize the input', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      onSanitize: value => value.toUpperCase()
+    })));
+    const input = wrapper.find('input');
+    input.simulate('change', {
+      target: {
+        value: 'foobar'
+      }
+    });
+    expect(wrapper).toMatchSnapshot();
+    expect(input.instance().value).toBe('FOOBAR');
+  });
+  it('should trigger the validation callback', () => {
+    const onValidateMock = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      onValidate: onValidateMock
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(onValidateMock).toHaveBeenCalled();
+  });
+  it('should focus the input', () => {
+    const onFocusMock = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      onFocusChange: onFocusMock
+    })));
+    const input = wrapper.find('SimpleInput');
+    expect(wrapper).toMatchSnapshot();
+    expect(input.instance().isFocused).toBe(false);
+    input.simulate('focus');
+    expect(input.instance().isFocused).toBe(true);
+    input.simulate('blur');
+    expect(input.instance().isFocused).toBe(false);
+  });
+  it('should show the error message', () => {
+    const errorText = 'This is an error here';
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      errorText: errorText
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('ErrorText').find('Translate').at(0).props().string).toEqual(errorText);
+  });
+  it('should show the label', () => {
+    const label = 'This is the label';
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      label: label
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('Label').find('Translate').props().string).toEqual(label);
+  });
+  it('should show the placeholder text', () => {
+    const placeholder = 'This is the placeholder text';
+    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+      placeholder: placeholder
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('Placeholder').find('Translate').at(0).props().string).toEqual(placeholder);
+  });
+});

package/Form/TextField/style.js

@@ -1,12 +1,70 @@
-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';// Selects a date input that is not focused.
-var bluredDateSelector='input[type="date"]:in-range:not(:focus)';/**
+import { css } from 'glamor';
+
+// Selects a date input that is not focused.
+const bluredDateSelector = 'input[type="date"]:in-range:not(:focus)';
+
+/**
  * The styles for the container element.
- */var container=css(_defineProperty({// Fixes layout issue with webkit. Height is 0 in some webkit browsers.
-'& input[type="date"]':{minHeight:'1.3rem',appearance:'none',paddingLeft:0,marginLeft:0}},"& ".concat(bluredDateSelector,"::-webkit-datetime-edit-year-field, ")+"".concat(bluredDateSelector,"::-webkit-datetime-edit-month-field, ")+"".concat(bluredDateSelector,"::-webkit-datetime-edit-day-field, ")+"".concat(bluredDateSelector,"::-webkit-datetime-edit-text"),{padding:0,color:'transparent'})).toString();/**
+ */
+const container = css({
+  // Fixes layout issue with webkit. Height is 0 in some webkit browsers.
+  '& input[type="date"]': {
+    minHeight: '1.3rem',
+    appearance: 'none',
+    paddingLeft: 0,
+    marginLeft: 0
+  },
+  // Removes placeholder texts on chrome when input is not focused.
+  [`& ${bluredDateSelector}::-webkit-datetime-edit-year-field, ` + `${bluredDateSelector}::-webkit-datetime-edit-month-field, ` + `${bluredDateSelector}::-webkit-datetime-edit-day-field, ` + `${bluredDateSelector}::-webkit-datetime-edit-text`]: {
+    padding: 0,
+    color: 'transparent'
+  }
+}).toString();
+
+/**
  * The styles for the input field.
- */var input=css({position:'relative',padding:0,width:'100%',marginTop:24,outline:0,fontSize:16,lineHeight:'19px'}).toString();/**
+ */
+const 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,display:'flex',alignItems:'flex-end'}).toString();/**
+ */
+const 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();
+const 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};
+ */
+const leftOffset = css({
+  marginLeft: 2
+}).toString();
+export default {
+  container,
+  input,
+  multiLine,
+  element,
+  leftOffset
+};

package/Form/index.js

@@ -1,17 +1,58 @@
-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 React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+/**
  * Form component that handles keyboard submit, next buttons, ...
  * @deprecated Use `@shopgate/engage/components/Form` instead.
- */var Form=/*#__PURE__*/function(_PureComponent){function Form(props){var _this2;_classCallCheck(this,Form);_this2=_callSuper(this,Form,[props]);/**
-   * Handles the form submit.
-   * @param {Object} event The event that caused the submit.
-   */_defineProperty(_this2,"handleSubmit",function(event){event.preventDefault();var inputFocused=[].concat(_this2.formElement.current.querySelectorAll('input')).some(function(input){return document.activeElement===input;});if(inputFocused){document.activeElement.blur();}_this2.props.onSubmit();});/**
-   * Handles form submits by key.
-   * @param {Object} event The event that caused the keypress.
-   */_defineProperty(_this2,"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
-if(event.which===13){_this2.handleSubmit(event);}});_this2.formElement=React.createRef();return _this2;}_inherits(Form,_PureComponent);return _createClass(Form,[{key:"render",value:/**
-   * Renders the component.
-   * @returns {JSX}
-   */function render(){/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */return React.createElement("form",{action:"#",onSubmit:this.handleSubmit,onKeyPress:this.handleKeyPress,ref:this.formElement,className:"ui-shared__form"},this.props.children);/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */}}]);}(PureComponent);_defineProperty(Form,"defaultProps",{onSubmit:function onSubmit(){}/**
+ */
+class Form extends PureComponent {
+  /**
    * Initializes the form component.
    * @param {Object} props The components props.
-   */});export default Form;
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Handles the form submit.
+     * @param {Object} event The event that caused the submit.
+     */
+    this.handleSubmit = event => {
+      event.preventDefault();
+      const inputFocused = [...this.formElement.current.querySelectorAll('input')].some(input => document.activeElement === input);
+      if (inputFocused) {
+        document.activeElement.blur();
+      }
+      this.props.onSubmit();
+    };
+    /**
+     * Handles form submits by key.
+     * @param {Object} event The event that caused the keypress.
+     */
+    this.handleKeyPress = event => {
+      // Enter key and on iOS also the "Done" button.
+      if (event.which === 13) {
+        this.handleSubmit(event);
+      }
+    };
+    this.formElement = /*#__PURE__*/React.createRef();
+  }
+  /**
+   * Renders the component.
+   * @returns {JSX}
+   */
+  render() {
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+    return /*#__PURE__*/React.createElement("form", {
+      action: "#",
+      onSubmit: this.handleSubmit,
+      onKeyPress: this.handleKeyPress,
+      ref: this.formElement,
+      className: "ui-shared__form"
+    }, this.props.children);
+    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+  }
+}
+Form.defaultProps = {
+  onSubmit: () => {}
+};
+export default Form;

package/FormElement/components/ErrorText/index.js

@@ -1,5 +1,34 @@
-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";/**
+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.Element}
- */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;
+ */
+const ErrorText = ({
+  className,
+  errorText,
+  translate,
+  elementName,
+  ariaHidden
+}) => /*#__PURE__*/React.createElement("div", {
+  id: `ariaError-${elementName}`,
+  className: classNames(className, styles, 'errorText'),
+  "aria-live": "assertive",
+  "aria-atomic": "true",
+  "aria-hidden": ariaHidden
+}, translate && /*#__PURE__*/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/components/ErrorText/style.js

@@ -1 +1,13 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export default css({bottom:2,color:"var(--color-state-alert, ".concat(themeConfig.colors.error,")"),fontSize:12,lineHeight:'14px',overflow:'hidden',position:'absolute',textOverflow:'ellipsis',whiteSpace:'nowrap',width:'100%'}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+export default css({
+  bottom: 2,
+  color: `var(--color-state-alert, ${themeConfig.colors.error})`,
+  fontSize: 12,
+  lineHeight: '14px',
+  overflow: 'hidden',
+  position: 'absolute',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%'
+}).toString();

package/FormElement/components/Label/index.js

@@ -1,5 +1,38 @@
-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";/**
+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";
+
+/**
  * Renders the label element.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Label=function Label(_ref){var hasErrorMessage=_ref.hasErrorMessage,htmlFor=_ref.htmlFor,isFloating=_ref.isFloating,isFocused=_ref.isFocused,label=_ref.label,labelStatic=_ref.labelStatic;var labelStyles=styles.labelStyles(isFocused,isFloating,hasErrorMessage,labelStatic);return(/* eslint-disable-next-line jsx-a11y/label-has-associated-control */React.createElement("label",{htmlFor:htmlFor,className:classNames(labelStyles,'label',{floating:isFloating})},React.createElement(I18n.Text,{string:label})));};Label.defaultProps={htmlFor:'',isFocused:false,isFloating:false,hasErrorMessage:false,label:'',labelStatic:false};export default Label;
+ */
+const Label = ({
+  hasErrorMessage,
+  htmlFor,
+  isFloating,
+  isFocused,
+  label,
+  labelStatic
+}) => {
+  const labelStyles = styles.labelStyles(isFocused, isFloating, hasErrorMessage, labelStatic);
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */React.createElement("label", {
+    htmlFor: htmlFor,
+    className: classNames(labelStyles, 'label', {
+      floating: isFloating
+    })
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: label
+  }));
+};
+Label.defaultProps = {
+  htmlFor: '',
+  isFocused: false,
+  isFloating: false,
+  hasErrorMessage: false,
+  label: '',
+  labelStatic: false
+};
+export default Label;