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

package/Form/Builder/spec.js

@@ -1,16 +1,300 @@
-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);}/* eslint-disable extra-rules/no-single-line-objects */import React from'react';import{mount}from'enzyme';import FormBuilder from'.';describe('<FormBuilder />',function(){it('should render empty form',function(){var wrapper=mount(React.createElement(FormBuilder,{config:{fields:{}},name:"foo",handleUpdate:function handleUpdate(){}}));expect(wrapper).toMatchSnapshot();});it('should render two text fields',function(){var wrapper=mount(React.createElement(FormBuilder,{config:{fields:{firstName:{label:'foo',type:'text',visible:true},lastName:{label:'bar',type:'text',visible:true}}},name:"foo",handleUpdate:function handleUpdate(){}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextField').length).toEqual(2);});it('should not render invisible field',function(){var wrapper=mount(React.createElement(FormBuilder,{config:{fields:{firstName:{label:'foo',type:'text',visible:false}}},name:"foo",handleUpdate:function handleUpdate(){}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextField').length).toEqual(0);});it('should hide element if setVisibilty rule applies',function(){var wrapper=mount(React.createElement(FormBuilder,{config:{fields:{foo:{label:'foo',type:'text',visible:true},bar:{label:'bar',type:'text',actions:[{type:'setVisibility',rules:[{context:'foo',type:'notIn',data:['abc']}]}]}}},name:"foo",handleUpdate:function handleUpdate(){}}));// Both should be visible at the beginning.
-expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextField').length).toEqual(2);// Simulate user input to the text field.
-wrapper.find('input').first().simulate('change',{target:{value:'abc'}});// Second field should be hidden now.
-expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextField').length).toEqual(1);});it('should reset value when rule applies',function(){var wrapper=mount(React.createElement(FormBuilder,{config:{fields:{foo:{label:'foo',type:'text',visible:true,"default":'default'},bar:{label:'bar',type:'text',"default":'default',actions:[{type:'setValue',params:{value:'cheat',type:'fixed'},rules:[{context:'foo',type:'notIn',data:['default']}]}]}}},name:"foo",handleUpdate:function handleUpdate(){}}));// Default values should be in the inputs.
-expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextField').length).toEqual(2);expect(wrapper.find('input').at(0).props().value).toEqual('default');expect(wrapper.find('input').at(1).props().value).toEqual('default');// Simulate text input to trigger rule.
-wrapper.find('input').first().simulate('change',{target:{value:'abc'}});wrapper.update();// Second field should be hidden now.
-expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextField').length).toEqual(2);expect(wrapper.find('input').at(0).props().value).toEqual('abc');expect(wrapper.find('input').at(1).props().value).toEqual('cheat');});it('should call onChange callback when input is changed',function(){var handleUpdate=jest.fn();var wrapper=mount(React.createElement(FormBuilder,{config:{fields:{foo:{label:'foo',type:'text',visible:true,"default":'default'}}},name:"foo",id:"foo",handleUpdate:handleUpdate}));// Should call with initial state.
-expect(wrapper).toMatchSnapshot();expect(handleUpdate).toHaveBeenCalledWith({foo:'default'},false);handleUpdate.mockClear();// Update input
-wrapper.find('input').first().simulate('change',{target:{value:'abc'}});// Should call with updated state.
-expect(handleUpdate).toHaveBeenCalledWith({foo:'abc'},false);});describe('FormBuilder::elementChangeHandler',function(){it('should take the updated state from action listener',function(){// Create mocked Form builder.
-var handleUpdate=jest.fn();var builder=new FormBuilder({validationErrors:[],config:{fields:{foo:{label:'foo',type:'text',visible:true,"default":'default'}}},handleUpdate:handleUpdate});builder.actionListener.notify=function(){return{formData:{foo:'bar'},errors:{},elementVisibility:{foo:true}};};// Trigger update
-builder.elementChangeHandler('foo','bar');// Test
-expect(handleUpdate).toHaveBeenCalledWith({foo:'bar'},false);});it('should consider backend validations',function(){// Create mocked Form builder.
-var handleUpdate=jest.fn();var builder=new FormBuilder({validationErrors:[{}],config:{fields:{foo:{label:'foo',type:'text',visible:true,"default":'default'}}},handleUpdate:handleUpdate});builder.actionListener.notify=function(){return{formData:{foo:'bar'},errors:{},elementVisibility:{foo:true}};};// Trigger update
-builder.elementChangeHandler('foo','bar');// Test
-expect(handleUpdate).toHaveBeenCalledWith({foo:'bar'},true);});});describe('FormBuilder::elementSortFunc',function(){var builder=new FormBuilder({validationErrors:[{}],config:{fields:{}},handleUpdate:jest.fn()});var field1={id:'foo',label:'foo'};var field2={id:'foo2',label:'foo2'};it('should keep sortOrder for undefined',function(){expect([field2,field1].sort(builder.elementSortFunc)).toEqual([field2,field1]);});it('should sort elements',function(){var fields=[_extends({},field1,{sortOrder:2}),_extends({},field2,{sortOrder:1})];expect(fields.sort(builder.elementSortFunc)).toEqual(fields.reverse());});it('should keep sortOrder',function(){var fields=[_extends({},field2,{sortOrder:1}),_extends({},field1,{sortOrder:2})];expect(fields.sort(builder.elementSortFunc)).toEqual([].concat(fields));});});});/* eslint-enable extra-rules/no-single-line-objects */
+/* eslint-disable extra-rules/no-single-line-objects */
+import React from 'react';
+import { mount } from 'enzyme';
+import FormBuilder from '.';
+describe('<FormBuilder />', () => {
+  it('should render empty form', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+      config: {
+        fields: {}
+      },
+      name: "foo",
+      handleUpdate: () => {}
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render two text fields', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+      config: {
+        fields: {
+          firstName: {
+            label: 'foo',
+            type: 'text',
+            visible: true
+          },
+          lastName: {
+            label: 'bar',
+            type: 'text',
+            visible: true
+          }
+        }
+      },
+      name: "foo",
+      handleUpdate: () => {}
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextField').length).toEqual(2);
+  });
+  it('should not render invisible field', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+      config: {
+        fields: {
+          firstName: {
+            label: 'foo',
+            type: 'text',
+            visible: false
+          }
+        }
+      },
+      name: "foo",
+      handleUpdate: () => {}
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextField').length).toEqual(0);
+  });
+  it('should hide element if setVisibilty rule applies', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+      config: {
+        fields: {
+          foo: {
+            label: 'foo',
+            type: 'text',
+            visible: true
+          },
+          bar: {
+            label: 'bar',
+            type: 'text',
+            actions: [{
+              type: 'setVisibility',
+              rules: [{
+                context: 'foo',
+                type: 'notIn',
+                data: ['abc']
+              }]
+            }]
+          }
+        }
+      },
+      name: "foo",
+      handleUpdate: () => {}
+    }));
+
+    // Both should be visible at the beginning.
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextField').length).toEqual(2);
+
+    // Simulate user input to the text field.
+    wrapper.find('input').first().simulate('change', {
+      target: {
+        value: 'abc'
+      }
+    });
+
+    // Second field should be hidden now.
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextField').length).toEqual(1);
+  });
+  it('should reset value when rule applies', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+      config: {
+        fields: {
+          foo: {
+            label: 'foo',
+            type: 'text',
+            visible: true,
+            default: 'default'
+          },
+          bar: {
+            label: 'bar',
+            type: 'text',
+            default: 'default',
+            actions: [{
+              type: 'setValue',
+              params: {
+                value: 'cheat',
+                type: 'fixed'
+              },
+              rules: [{
+                context: 'foo',
+                type: 'notIn',
+                data: ['default']
+              }]
+            }]
+          }
+        }
+      },
+      name: "foo",
+      handleUpdate: () => {}
+    }));
+
+    // Default values should be in the inputs.
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextField').length).toEqual(2);
+    expect(wrapper.find('input').at(0).props().value).toEqual('default');
+    expect(wrapper.find('input').at(1).props().value).toEqual('default');
+
+    // Simulate text input to trigger rule.
+    wrapper.find('input').first().simulate('change', {
+      target: {
+        value: 'abc'
+      }
+    });
+    wrapper.update();
+
+    // Second field should be hidden now.
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextField').length).toEqual(2);
+    expect(wrapper.find('input').at(0).props().value).toEqual('abc');
+    expect(wrapper.find('input').at(1).props().value).toEqual('cheat');
+  });
+  it('should call onChange callback when input is changed', () => {
+    const handleUpdate = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+      config: {
+        fields: {
+          foo: {
+            label: 'foo',
+            type: 'text',
+            visible: true,
+            default: 'default'
+          }
+        }
+      },
+      name: "foo",
+      id: "foo",
+      handleUpdate: handleUpdate
+    }));
+
+    // Should call with initial state.
+    expect(wrapper).toMatchSnapshot();
+    expect(handleUpdate).toHaveBeenCalledWith({
+      foo: 'default'
+    }, false);
+    handleUpdate.mockClear();
+
+    // Update input
+    wrapper.find('input').first().simulate('change', {
+      target: {
+        value: 'abc'
+      }
+    });
+
+    // Should call with updated state.
+    expect(handleUpdate).toHaveBeenCalledWith({
+      foo: 'abc'
+    }, false);
+  });
+  describe('FormBuilder::elementChangeHandler', () => {
+    it('should take the updated state from action listener', () => {
+      // Create mocked Form builder.
+      const handleUpdate = jest.fn();
+      const builder = new FormBuilder({
+        validationErrors: [],
+        config: {
+          fields: {
+            foo: {
+              label: 'foo',
+              type: 'text',
+              visible: true,
+              default: 'default'
+            }
+          }
+        },
+        handleUpdate
+      });
+      builder.actionListener.notify = () => ({
+        formData: {
+          foo: 'bar'
+        },
+        errors: {},
+        elementVisibility: {
+          foo: true
+        }
+      });
+
+      // Trigger update
+      builder.elementChangeHandler('foo', 'bar');
+
+      // Test
+      expect(handleUpdate).toHaveBeenCalledWith({
+        foo: 'bar'
+      }, false);
+    });
+    it('should consider backend validations', () => {
+      // Create mocked Form builder.
+      const handleUpdate = jest.fn();
+      const builder = new FormBuilder({
+        validationErrors: [{}],
+        config: {
+          fields: {
+            foo: {
+              label: 'foo',
+              type: 'text',
+              visible: true,
+              default: 'default'
+            }
+          }
+        },
+        handleUpdate
+      });
+      builder.actionListener.notify = () => ({
+        formData: {
+          foo: 'bar'
+        },
+        errors: {},
+        elementVisibility: {
+          foo: true
+        }
+      });
+
+      // Trigger update
+      builder.elementChangeHandler('foo', 'bar');
+
+      // Test
+      expect(handleUpdate).toHaveBeenCalledWith({
+        foo: 'bar'
+      }, true);
+    });
+  });
+  describe('FormBuilder::elementSortFunc', () => {
+    const builder = new FormBuilder({
+      validationErrors: [{}],
+      config: {
+        fields: {}
+      },
+      handleUpdate: jest.fn()
+    });
+    const field1 = {
+      id: 'foo',
+      label: 'foo'
+    };
+    const field2 = {
+      id: 'foo2',
+      label: 'foo2'
+    };
+    it('should keep sortOrder for undefined', () => {
+      expect([field2, field1].sort(builder.elementSortFunc)).toEqual([field2, field1]);
+    });
+    it('should sort elements', () => {
+      const fields = [{
+        ...field1,
+        sortOrder: 2
+      }, {
+        ...field2,
+        sortOrder: 1
+      }];
+      expect(fields.sort(builder.elementSortFunc)).toEqual(fields.reverse());
+    });
+    it('should keep sortOrder', () => {
+      const fields = [{
+        ...field2,
+        sortOrder: 1
+      }, {
+        ...field1,
+        sortOrder: 2
+      }];
+      expect(fields.sort(builder.elementSortFunc)).toEqual([...fields]);
+    });
+  });
+});
+/* eslint-enable extra-rules/no-single-line-objects */

package/Form/Checkbox/index.js

@@ -1,4 +1,13 @@
-var _excluded=["name","label","onChange","className","errorText","translateErrorText","showErrorText","checkboxClassName"];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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import UICheckbox from'@shopgate/pwa-ui-shared/Checkbox';import FormElement from'@shopgate/pwa-ui-shared/FormElement';import style from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import UICheckbox from '@shopgate/pwa-ui-shared/Checkbox';
+import FormElement from '@shopgate/pwa-ui-shared/FormElement';
+import style from "./style";
+
+/**
  * @typedef {Object} Props
  * @property {string} label Label for the checkbox
  * @property {string} name Name for the form element that's used as "htmlFor" attribute to create
@@ -11,10 +20,63 @@ var _excluded=["name","label","onChange","className","errorText","translateError
  * @property {boolean} [showErrorText] Whether to show the error text when present (default `true`)
  * @property {boolean} [translateErrorText] Whether `errorText` is a translation key
  * @property {Function} [onChange] Change handler for the checkbox
- */ /**
+ */
+
+/**
  * A component that provides a styled checkbox field.
  * @extends {React.Component<Props>}
  * @returns {JSX.Element}
- */var Checkbox=/*#__PURE__*/function(_PureComponent){function Checkbox(){_classCallCheck(this,Checkbox);return _callSuper(this,Checkbox,arguments);}_inherits(Checkbox,_PureComponent);return _createClass(Checkbox,[{key:"render",value:/**
+ */
+class Checkbox extends PureComponent {
+  /**
    * @return {JSX}
-   */function render(){var _this$props=this.props,name=_this$props.name,label=_this$props.label,onChange=_this$props.onChange,className=_this$props.className,errorText=_this$props.errorText,translateErrorText=_this$props.translateErrorText,showErrorText=_this$props.showErrorText,checkboxClassName=_this$props.checkboxClassName,restProps=_objectWithoutProperties(_this$props,_excluded);return React.createElement(FormElement,{className:classNames(className,style.root,'checkbox','ui-shared__form__checkbox'),htmlFor:name,errorText:errorText,translateErrorText:translateErrorText,hasUnderline:false,hasPlaceholder:false,disabled:restProps.disabled,showErrorText:showErrorText},React.createElement(UICheckbox,_extends({},restProps,{className:checkboxClassName,name:name,onCheck:onChange,checkedClassName:"".concat(className," ").concat(style.checked),unCheckedClassName:className,labelPosition:"right",label:typeof label==='string'?React.createElement("div",{className:classNames(style.labelWrapper,'label')},React.createElement(I18n.Text,{className:style.label,string:label})):label})));}}]);}(PureComponent);_defineProperty(Checkbox,"defaultProps",{className:'',checkboxClassName:undefined,defaultChecked:undefined,errorText:'',label:'',onChange:function onChange(){},translateErrorText:true,disabled:false,showErrorText:true});export default Checkbox;
+   */
+  render() {
+    const {
+      name,
+      label,
+      onChange,
+      className,
+      errorText,
+      translateErrorText,
+      showErrorText,
+      checkboxClassName,
+      ...restProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FormElement, {
+      className: classNames(className, style.root, 'checkbox', 'ui-shared__form__checkbox'),
+      htmlFor: name,
+      errorText: errorText,
+      translateErrorText: translateErrorText,
+      hasUnderline: false,
+      hasPlaceholder: false,
+      disabled: restProps.disabled,
+      showErrorText: showErrorText
+    }, /*#__PURE__*/React.createElement(UICheckbox, _extends({}, restProps, {
+      className: checkboxClassName,
+      name: name,
+      onCheck: onChange,
+      checkedClassName: `${className} ${style.checked}`,
+      unCheckedClassName: className,
+      labelPosition: "right",
+      label: typeof label === 'string' ? /*#__PURE__*/React.createElement("div", {
+        className: classNames(style.labelWrapper, 'label')
+      }, /*#__PURE__*/React.createElement(I18n.Text, {
+        className: style.label,
+        string: label
+      })) : label
+    })));
+  }
+}
+Checkbox.defaultProps = {
+  className: '',
+  checkboxClassName: undefined,
+  defaultChecked: undefined,
+  errorText: '',
+  label: '',
+  onChange: () => {},
+  translateErrorText: true,
+  disabled: false,
+  showErrorText: true
+};
+export default Checkbox;

package/Form/Checkbox/style.js

@@ -1,2 +1,25 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var root=css({marginLeft:-2,// Removes margin caused by svg.
-cursor:'pointer','& svg':{"float":'left'}}).toString();var label=css({lineHeight:1.6}).toString();var labelWrapper=css({marginLeft:themeConfig.variables.gap.xbig}).toString();var checked=css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();export default{root:root,label:label,labelWrapper:labelWrapper,checked:checked};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const root = css({
+  marginLeft: -2,
+  // Removes margin caused by svg.
+  cursor: 'pointer',
+  '& svg': {
+    float: 'left'
+  }
+}).toString();
+const label = css({
+  lineHeight: 1.6
+}).toString();
+const labelWrapper = css({
+  marginLeft: themeConfig.variables.gap.xbig
+}).toString();
+const checked = css({
+  color: `var(--color-primary, ${themeConfig.colors.primary})`
+}).toString();
+export default {
+  root,
+  label,
+  labelWrapper,
+  checked
+};

package/Form/InfoField/index.js

@@ -1,4 +1,52 @@
-import React from'react';import PropTypes from'prop-types';import Grid from'@shopgate/pwa-common/components/Grid';import FormElement from"../../FormElement";import style from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import FormElement from "../../FormElement";
+import style from "./style";
+
+/**
  * @param {Object} props .
  * @returns {JSX}
- */var InfoField=function InfoField(props){var className=props.className,label=props.label,errorText=props.errorText,leftElement=props.leftElement,rightElement=props.rightElement,hasUnderline=props.hasUnderline,children=props.children,hasValue=props.hasValue,showErrorText=props.showErrorText;return React.createElement(FormElement,{className:className,label:label,errorText:errorText,hasUnderline:hasUnderline,isFocused:false,hasValue:hasValue,showErrorText:showErrorText},React.createElement(Grid,null,leftElement&&React.createElement(Grid.Item,{grow:0,className:style.element},leftElement),React.createElement(Grid.Item,{grow:1,className:"".concat(style.info," info-field")},children),rightElement&&React.createElement(Grid.Item,{grow:0,className:style.element},rightElement)));};InfoField.defaultProps={className:'',errorText:'',hasUnderline:true,hasValue:false,label:'',leftElement:null,rightElement:null,showErrorText:true};export default InfoField;
+ */
+const InfoField = props => {
+  const {
+    className,
+    label,
+    errorText,
+    leftElement,
+    rightElement,
+    hasUnderline,
+    children,
+    hasValue,
+    showErrorText
+  } = props;
+  return /*#__PURE__*/React.createElement(FormElement, {
+    className: className,
+    label: label,
+    errorText: errorText,
+    hasUnderline: hasUnderline,
+    isFocused: false,
+    hasValue: hasValue,
+    showErrorText: showErrorText
+  }, /*#__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.info} info-field`
+  }, children), rightElement && /*#__PURE__*/React.createElement(Grid.Item, {
+    grow: 0,
+    className: style.element
+  }, rightElement)));
+};
+InfoField.defaultProps = {
+  className: '',
+  errorText: '',
+  hasUnderline: true,
+  hasValue: false,
+  label: '',
+  leftElement: null,
+  rightElement: null,
+  showErrorText: true
+};
+export default InfoField;

package/Form/InfoField/spec.js

@@ -1 +1,9 @@
-import React from'react';import{shallow}from'enzyme';import InfoField from"./index";describe('<InfoField>',function(){it('should render info field',function(){var wrapper=shallow(React.createElement(InfoField,null,'Some info text'));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import InfoField from "./index";
+describe('<InfoField>', () => {
+  it('should render info field', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(InfoField, null, 'Some info text'));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/Form/InfoField/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';var info=css({paddingTop:24}).toString();var element=css({marginTop:16}).toString();export default{info:info,element:element};
+import { css } from 'glamor';
+const info = css({
+  paddingTop: 24
+}).toString();
+const element = css({
+  marginTop: 16
+}).toString();
+export default {
+  info,
+  element
+};

package/Form/Password/index.js

@@ -1,10 +1,55 @@
-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 _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 ToggleIcon from"../../ToggleIcon";import VisibilityIcon from"../../icons/VisibilityIcon";import VisibilityOffIcon from"../../icons/VisibilityOffIcon";import TextField from"../TextField";import style from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import ToggleIcon from "../../ToggleIcon";
+import VisibilityIcon from "../../icons/VisibilityIcon";
+import VisibilityOffIcon from "../../icons/VisibilityOffIcon";
+import TextField from "../TextField";
+import style from "./style";
+
+/**
  * A component that provides a password field with visibility toggle.
- */var Password=/*#__PURE__*/function(_Component){/**
+ */
+class Password extends Component {
+  /**
    * Initializes the component.
    * @param {Object} props The components props.
-   */function Password(props){var _this2;_classCallCheck(this,Password);_this2=_callSuper(this,Password,[props]);/**
-   * @param {boolean} isVisible The next isVisible state.
-   */_defineProperty(_this2,"togglePasswordVisibility",function(isVisible){_this2.setState({isVisible:isVisible});});_this2.state={isVisible:false};return _this2;}_inherits(Password,_Component);return _createClass(Password,[{key:"render",value:/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * @param {boolean} isVisible The next isVisible state.
+     */
+    this.togglePasswordVisibility = isVisible => {
+      this.setState({
+        isVisible
+      });
+    };
+    this.state = {
+      isVisible: false
+    };
+  }
+  /**
    * @return {*}
-   */function render(){var isVisible=this.state.isVisible;return React.createElement(TextField,_extends({},this.props,{className:"ui-shared__form__password ".concat(this.props.className),rightElement:React.createElement(ToggleIcon,{on:isVisible,onIcon:React.createElement(VisibilityIcon,{size:24}),offIcon:React.createElement(VisibilityOffIcon,{size:24,className:style.visOff}),toggleHandler:this.togglePasswordVisibility}),type:isVisible?'text':'password'}));}}]);}(Component);export default Password;
+   */
+  render() {
+    const {
+      isVisible
+    } = this.state;
+    return /*#__PURE__*/React.createElement(TextField, _extends({}, this.props, {
+      className: `ui-shared__form__password ${this.props.className}`,
+      rightElement: /*#__PURE__*/React.createElement(ToggleIcon, {
+        on: isVisible,
+        onIcon: /*#__PURE__*/React.createElement(VisibilityIcon, {
+          size: 24
+        }),
+        offIcon: /*#__PURE__*/React.createElement(VisibilityOffIcon, {
+          size: 24,
+          className: style.visOff
+        }),
+        toggleHandler: this.togglePasswordVisibility
+      }),
+      type: isVisible ? 'text' : 'password'
+    }));
+  }
+}
+export default Password;

package/Form/Password/spec.js

@@ -1 +1,34 @@
-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 Password from"./index";var inputProps={name:'test-input'};describe('<Password>',function(){it('should render a password field',function(){var wrapper=mount(React.createElement(Password,inputProps));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[type="password"]').length).toBe(1);});it('should trigger the onChange callback',function(){var onChangeMock=jest.fn();var wrapper=mount(React.createElement(Password,_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 toggle password visibility',function(){var wrapper=mount(React.createElement(Password,inputProps));var input=wrapper.find('ToggleIcon');expect(wrapper.find('input[type="password"]').length).toBe(1);input.simulate('click');expect(wrapper.find('input[type="text"]').length).toBe(1);});});
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { mount } from 'enzyme';
+import Password from "./index";
+const inputProps = {
+  name: 'test-input'
+};
+describe('<Password>', () => {
+  it('should render a password field', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Password, inputProps));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('input[type="password"]').length).toBe(1);
+  });
+  it('should trigger the onChange callback', () => {
+    const onChangeMock = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(Password, _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 toggle password visibility', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Password, inputProps));
+    const input = wrapper.find('ToggleIcon');
+    expect(wrapper.find('input[type="password"]').length).toBe(1);
+    input.simulate('click');
+    expect(wrapper.find('input[type="text"]').length).toBe(1);
+  });
+});

package/Form/Password/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var visOff=css({color:colors.shade4}).toString();export default{visOff:visOff};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const visOff = css({
+  color: colors.shade4
+}).toString();
+export default {
+  visOff
+};