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

package/FormElement/components/Label/style.js

@@ -1,21 +1,89 @@
-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;}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{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * 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)';/**
+ */
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+
+/**
  * The styles for the error label.
- */var labelError=css({color:"var(--color-state-alert, ".concat(themeConfig.colors.error,")")}).toString();/**
+ */
+const labelError = css({
+  color: `var(--color-state-alert, ${themeConfig.colors.error})`
+}).toString();
+
+/**
  * Regular label is hidden, because placeholder is visible
- */var labelRegular=css({opacity:0}).toString();/**
+ */
+const labelRegular = css({
+  opacity: 0
+}).toString();
+
+/**
  * The styles for the focused label.
- */var labelFocus=css({color:themeConfig.colors.focus}).toString();/**
+ */
+const labelFocus = css({
+  color: themeConfig.colors.focus
+}).toString();
+
+/**
  * The styles for the floating label.
- */var labelFloating=css({transform:'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)',opacity:1}).toString();/**
+ */
+const labelFloating = css({
+  transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)',
+  opacity: 1
+}).toString();
+
+/**
  * The basic styles for the label.
  * @type {string}
- */var label=css(_extends({position:'absolute',left:0,top:24,lineHeight:'19px',pointerEvents:'none',userSelect:'none',color:themeConfig.colors.shade12,transformOrigin:'left top 0px',willChange:'transform, color',overflow:'visible',transition:"transform ".concat(easing,", color ").concat(easing)},ellipsisLine)).toString();var labelStatic=css({opacity:1,lineHeight:'19px',pointerEvents:'none',userSelect:'none',color:themeConfig.colors.shade12}).toString();/**
+ */
+const label = css({
+  position: 'absolute',
+  left: 0,
+  top: 24,
+  lineHeight: '19px',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  color: themeConfig.colors.shade12,
+  transformOrigin: 'left top 0px',
+  willChange: 'transform, color',
+  overflow: 'visible',
+  transition: `transform ${easing}, color ${easing}`,
+  ...ellipsisLine
+}).toString();
+const labelStatic = css({
+  opacity: 1,
+  lineHeight: '19px',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  color: themeConfig.colors.shade12
+}).toString();
+
+/**
  * Gets the style classes for the label.
  * @param {boolean} focused Whether the input field is focused.
  * @param {boolean} floating Whether the label is floating.
  * @param {boolean} error Whether the input field shows an error message.
  * @param {boolean} isStatic Whether the label is static.
  * @return {string} The style classes.
- */var labelStyles=function labelStyles(){var focused=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var floating=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var error=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var isStatic=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;return classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},label,!isStatic),labelStatic,isStatic),labelFloating,floating),labelRegular,!focused),labelFocus,!error&&focused),labelError,error&&focused));};export default{labelStyles:labelStyles};
+ */
+const labelStyles = (focused = false, floating = false, error = false, isStatic = false) => classNames({
+  [label]: !isStatic,
+  [labelStatic]: isStatic,
+  [labelFloating]: floating,
+  [labelRegular]: !focused,
+  [labelFocus]: !error && focused,
+  [labelError]: error && focused
+});
+export default {
+  labelStyles
+};

package/FormElement/components/Placeholder/index.js

@@ -1,8 +1,32 @@
-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";
+
+/**
  * The form element placeholder component.
  * @param {string} placeholder The placeholder text.
  * @param {boolean} visible Sets the placeholder visibility.
  * @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;
+ */
+const Placeholder = ({
+  placeholder,
+  visible,
+  'aria-hidden': ariaHidden,
+  hasLeftElement
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classNames(styles.placeholderStyles(visible, hasLeftElement), 'placeholder'),
+  "aria-hidden": ariaHidden
+}, /*#__PURE__*/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

@@ -1,14 +1,56 @@
-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;}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{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * 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)';/**
+ */
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const 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:"var(--color-text-medium-emphasis, ".concat(themeConfig.colors.shade6,")"),willChange:'transform',transition:"opacity ".concat(easing)},ellipsisLine)).toString();/**
+ */
+const placeholder = css({
+  position: 'absolute',
+  pointerEvents: 'none',
+  top: 24,
+  color: `var(--color-text-medium-emphasis, ${themeConfig.colors.shade6})`,
+  willChange: 'transform',
+  transition: `opacity ${easing}`,
+  ...ellipsisLine
+}).toString();
+
+/**
  * The styles for the invisible hint text.
- */var placeholderInactive=css({opacity:0}).toString();/**
+ */
+const placeholderInactive = css({
+  opacity: 0
+}).toString();
+
+/**
  * Additional left spacing when a left element is present
- */var leftOffset=css({left:'var(--form-element-left-offset, 26px)',width:'calc(100% - var(--form-element-left-offset, 26px))'}).toString();/**
+ */
+const leftOffset = css({
+  left: 'var(--form-element-left-offset, 26px)',
+  width: 'calc(100% - var(--form-element-left-offset, 26px))'
+}).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;var hasLeftElement=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return classNames(placeholder,_defineProperty(_defineProperty({},placeholderInactive,!visible),leftOffset,hasLeftElement));};export default{placeholderStyles:placeholderStyles};
+ */
+const placeholderStyles = (visible = false, hasLeftElement = false) => classNames(placeholder, {
+  [placeholderInactive]: !visible,
+  [leftOffset]: hasLeftElement
+});
+export default {
+  placeholderStyles
+};

package/FormElement/components/Underline/index.js

@@ -1,5 +1,21 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  *  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;
+ */
+const Underline = props => /*#__PURE__*/React.createElement("div", {
+  className: classNames(styles.underlineWrapper, 'underline')
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles.underline,
+  style: styles.underlineStyle(props.isFocused, props.hasErrorMessage)
+}));
+Underline.defaultProps = {
+  isFocused: false,
+  hasErrorMessage: false
+};
+export default Underline;

package/FormElement/components/Underline/style.js

@@ -1,13 +1,60 @@
-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{css}from'glamor';import color from'color';import{getCSSCustomProp}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var easing='450ms cubic-bezier(0.23, 1, 0.32, 1)';/**
+import { css } from 'glamor';
+import color from 'color';
+import { getCSSCustomProp } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+
+/**
  * The styles for the underline wrapper element.
- */var underlineWrapper=css({position:'relative',width:'100%',borderBottom:"1px solid ".concat(colors.shade12),marginTop:2,marginBottom:7}).toString();/**
+ */
+const underlineWrapper = css({
+  position: 'relative',
+  width: '100%',
+  borderBottom: `1px solid ${colors.shade12}`,
+  marginTop: 2,
+  marginBottom: 7
+}).toString();
+
+/**
  * The styles for the underline element.
  * @param {boolean} focused Whether the input field is focused.
  * @param {boolean} error Whether the input field shows an error message.
  * @return {string} The style class.
- */var underline=css({position:'relative',width:'100%',top:1,borderBottomWidth:2,borderBottomStyle:'solid',willChange:'transform',transition:"transform ".concat(easing)}).toString();/**
+ */
+const underline = css({
+  position: 'relative',
+  width: '100%',
+  top: 1,
+  borderBottomWidth: 2,
+  borderBottomStyle: 'solid',
+  willChange: 'transform',
+  transition: `transform ${easing}`
+}).toString();
+
+/**
  * Returns the underline style.
  * @param {boolean} focused Is focused set or not.
  * @param {boolean} hasError Has error set or not.
  * @return {Object} style
- */var underlineStyle=function underlineStyle(focused,hasError){var primaryColor=getCSSCustomProp('--color-primary')||colors.primary;var focusColor='--color-primary';if(color(primaryColor).luminosity()>=0.8){focusColor='--color-secondary';}return _extends({borderBottomColor:hasError?"var(--color-state-alert, ".concat(colors.error,")"):"var(".concat(focusColor,", ").concat(colors.focus,")")},!focused&&!hasError&&{transform:'scale3d(0,1,1)'});};export default{underline:underline,underlineWrapper:underlineWrapper,underlineStyle:underlineStyle};
+ */
+const underlineStyle = (focused, hasError) => {
+  const primaryColor = getCSSCustomProp('--color-primary') || colors.primary;
+  let focusColor = '--color-primary';
+  if (color(primaryColor).luminosity() >= 0.8) {
+    focusColor = '--color-secondary';
+  }
+  return {
+    borderBottomColor: hasError ? `var(--color-state-alert, ${colors.error})` : `var(${focusColor}, ${colors.focus})`,
+    ...(!focused && !hasError && {
+      transform: 'scale3d(0,1,1)'
+    })
+  };
+};
+export default {
+  underline,
+  underlineWrapper,
+  underlineStyle
+};

package/FormElement/index.js

@@ -1,11 +1,96 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Label from"./components/Label";import Underline from"./components/Underline";import ErrorText from"./components/ErrorText";import Placeholder from"./components/Placeholder";import style from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Label from "./components/Label";
+import Underline from "./components/Underline";
+import ErrorText from "./components/ErrorText";
+import Placeholder from "./components/Placeholder";
+import style from "./style";
+
+/**
  * A component that provides a styled form element in material design.
- */var FormElement=/*#__PURE__*/function(_Component){function FormElement(){_classCallCheck(this,FormElement);return _callSuper(this,FormElement,arguments);}_inherits(FormElement,_Component);return _createClass(FormElement,[{key:"isLabelFloating",get:/**
+ */
+class FormElement extends Component {
+  /**
    * @returns {boolean} Whether the label is currently floating.
-   */function get(){return!this.props.labelStatic&&(this.props.isFocused||this.props.hasValue);}/**
+   */
+  get isLabelFloating() {
+    return !this.props.labelStatic && (this.props.isFocused || this.props.hasValue);
+  }
+
+  /**
    * @returns {boolean} Whether the hint text is currently visible.
-   */},{key:"isPlaceholderVisible",get:function get(){return!this.props.isFocused&&!this.props.hasValue;}/**
+   */
+  get isPlaceholderVisible() {
+    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;}/**
+   */
+  get hasErrorMessage() {
+    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,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;
+   */
+  render() {
+    const {
+      isFocused,
+      errorText,
+      translateErrorText,
+      placeholder,
+      hasLeftElement,
+      hasPlaceholder,
+      htmlFor,
+      label,
+      className,
+      disabled,
+      labelStatic,
+      showErrorText
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(style.formElement, className, 'formElement', 'ui-shared__form-element', {
+        disabled
+      })
+    }, hasPlaceholder && (placeholder || label) && /*#__PURE__*/React.createElement(Placeholder, {
+      visible: this.isPlaceholderVisible,
+      placeholder: placeholder || label,
+      hasLeftElement: hasLeftElement,
+      "aria-hidden": true
+    }), label && /*#__PURE__*/React.createElement(Label, {
+      htmlFor: htmlFor,
+      label: label,
+      labelStatic: labelStatic,
+      isFocused: isFocused,
+      isFloating: this.isLabelFloating,
+      hasErrorMessage: this.hasErrorMessage
+    }), this.props.children, this.props.hasUnderline && /*#__PURE__*/React.createElement(Underline, {
+      isFocused: isFocused,
+      hasErrorMessage: this.hasErrorMessage
+    }), errorText && showErrorText && /*#__PURE__*/React.createElement(ErrorText, {
+      errorText: errorText,
+      translate: translateErrorText,
+      elementName: htmlFor
+    }));
+  }
+}
+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/FormElement/spec.js

@@ -1,2 +1,67 @@
-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 FormElement from"./index";var inputProps={htmlFor:'test-input'};describe('<FormElement />',function(){// Simple tests for snapshots
-var tests={'should render a form element with no children':{props:{}},'should render a form element with 1 child':{props:{children:[React.createElement("input",{key:"test-key"})]}},'should render a focused form element':{props:{isFocused:true}},'should show the label':{props:{label:'The label'},find:'Label',equal:'The label'},'should show the error message':{props:{errorText:'The error text'},find:'ErrorText',equal:'The error text'},'should show the placeholder text':{props:{placeholder:'The placeholder'},find:'Placeholder',equal:'The placeholder'}};Object.keys(tests).forEach(function(test){it(test,function(){var testFixtures=tests[test];var wrapper=mount(React.createElement(FormElement,_extends({},inputProps,{},testFixtures.props)));expect(wrapper).toMatchSnapshot();if(testFixtures.find){expect(wrapper.find(testFixtures.find).find('Translate').props().string).toEqual(testFixtures.equal);}});});it('Should hide placeholder with hasValue',function(){var wrapper=mount(React.createElement(FormElement,_extends({label:"testlabel"},inputProps,{hasValue:true})));expect(wrapper).toMatchSnapshot();expect(wrapper.find('Placeholder').props().visible).toEqual(false);});});
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { mount } from 'enzyme';
+import FormElement from "./index";
+const inputProps = {
+  htmlFor: 'test-input'
+};
+describe('<FormElement />', () => {
+  // Simple tests for snapshots
+  const tests = {
+    'should render a form element with no children': {
+      props: {}
+    },
+    'should render a form element with 1 child': {
+      props: {
+        children: [/*#__PURE__*/React.createElement("input", {
+          key: "test-key"
+        })]
+      }
+    },
+    'should render a focused form element': {
+      props: {
+        isFocused: true
+      }
+    },
+    'should show the label': {
+      props: {
+        label: 'The label'
+      },
+      find: 'Label',
+      equal: 'The label'
+    },
+    'should show the error message': {
+      props: {
+        errorText: 'The error text'
+      },
+      find: 'ErrorText',
+      equal: 'The error text'
+    },
+    'should show the placeholder text': {
+      props: {
+        placeholder: 'The placeholder'
+      },
+      find: 'Placeholder',
+      equal: 'The placeholder'
+    }
+  };
+  Object.keys(tests).forEach(test => {
+    it(test, () => {
+      const testFixtures = tests[test];
+      const wrapper = mount(/*#__PURE__*/React.createElement(FormElement, _extends({}, inputProps, testFixtures.props)));
+      expect(wrapper).toMatchSnapshot();
+      if (testFixtures.find) {
+        expect(wrapper.find(testFixtures.find).find('Translate').props().string).toEqual(testFixtures.equal);
+      }
+    });
+  });
+  it('Should hide placeholder with hasValue', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(FormElement, _extends({
+      label: "testlabel"
+    }, inputProps, {
+      hasValue: true
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('Placeholder').props().visible).toEqual(false);
+  });
+});

package/FormElement/style.js

@@ -1,3 +1,14 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * The styles for the container element.
- */var formElement=css({position:'relative',paddingBottom:themeConfig.variables.gap.big,width:'100%'}).toString();export default{formElement:formElement};
+ */
+const formElement = css({
+  position: 'relative',
+  paddingBottom: themeConfig.variables.gap.big,
+  width: '100%'
+}).toString();
+export default {
+  formElement
+};

package/Glow/index.js

@@ -1,13 +1,96 @@
-var _excluded=["children","styles","forwardedRef","className","color"];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 classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withForwardedRef } from '@shopgate/engage/core';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import styles from "./style";
+
+/**
  * Renders a glowing component that is visible when the user interacts with the element.
- */var Glow=/*#__PURE__*/function(_Component){/**
+ */
+class Glow extends Component {
+  /**
    * The component constructor.
    * @param {Object} props The component props.
-   */function Glow(props){var _this2;_classCallCheck(this,Glow);_this2=_callSuper(this,Glow,[props]);_defineProperty(_this2,"handleTouchTap",function(){if(_this2.props.disabled){return;}_this2.setState({hover:true});_this2.timeout=setTimeout(function(){_this2.setState({hover:false});},250);});_this2.timeout=null;_this2.state={hover:false};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    this.handleTouchTap = () => {
+      if (this.props.disabled) {
+        return;
+      }
+      this.setState({
+        hover: true
+      });
+      this.timeout = setTimeout(() => {
+        this.setState({
+          hover: false
+        });
+      }, 250);
+    };
+    this.timeout = null;
+    this.state = {
+      hover: false
+    };
+  }
+
+  /**
    * Clears any previously set timeout.
-   */_inherits(Glow,_Component);return _createClass(Glow,[{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.timeout);}},{key:"render",value:/**
+   */
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */function render(){var _this$props=this.props,children=_this$props.children,propStyles=_this$props.styles,forwardedRef=_this$props.forwardedRef,className=_this$props.className,color=_this$props.color,rest=_objectWithoutProperties(_this$props,_excluded);var innerInlineStyles;if(this.state.hover){innerInlineStyles=_extends({},propStyles.glow,{},propStyles.hover,{background:color});}else{innerInlineStyles=_extends({},propStyles.glow);}/* eslint-disable jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events */return React.createElement("div",_extends({},rest,{className:classNames(styles.container,className,'ui-shared__glow'),onClick:this.handleTouchTap,style:propStyles.container,ref:forwardedRef}),React.createElement("div",{className:styles.glow,style:innerInlineStyles}),children);/* eslint-enable jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events */}}]);}(Component);_defineProperty(Glow,"defaultProps",{color:themeConfig.colors.shade8,className:null,forwardedRef:null,disabled:false,styles:{container:null,glow:null,hover:null}});export default withForwardedRef(Glow);
+   */
+  render() {
+    const {
+      children,
+      styles: propStyles,
+      forwardedRef,
+      className,
+      color,
+      ...rest
+    } = this.props;
+    let innerInlineStyles;
+    if (this.state.hover) {
+      innerInlineStyles = {
+        ...propStyles.glow,
+        ...propStyles.hover,
+        background: color
+      };
+    } else {
+      innerInlineStyles = {
+        ...propStyles.glow
+      };
+    }
+
+    /* eslint-disable jsx-a11y/no-static-element-interactions,
+    jsx-a11y/click-events-have-key-events */
+    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+      className: classNames(styles.container, className, 'ui-shared__glow'),
+      onClick: this.handleTouchTap,
+      style: propStyles.container,
+      ref: forwardedRef
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.glow,
+      style: innerInlineStyles
+    }), children);
+    /* eslint-enable jsx-a11y/no-static-element-interactions,
+    jsx-a11y/click-events-have-key-events */
+  }
+}
+Glow.defaultProps = {
+  color: themeConfig.colors.shade8,
+  className: null,
+  forwardedRef: null,
+  disabled: false,
+  styles: {
+    container: null,
+    glow: null,
+    hover: null
+  }
+};
+export default withForwardedRef(Glow);

package/Glow/spec.js

@@ -1 +1,9 @@
-import React from'react';import{mount}from'enzyme';import Glow from"./index";describe('<Glow />',function(){it('should render with a smile',function(){var wrapper=mount(React.createElement(Glow,null,React.createElement("p",null,"Glowing!")));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { mount } from 'enzyme';
+import Glow from "./index";
+describe('<Glow />', () => {
+  it('should render with a smile', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Glow, null, /*#__PURE__*/React.createElement("p", null, "Glowing!")));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/Glow/style.js

@@ -1 +1,18 @@
-import{css}from'glamor';var container=css({position:'relative'}).toString();var glow=css({position:'absolute',left:0,top:0,width:'100%',height:'100%',background:'transparent',transition:'background 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',zIndex:0}).toString();export default{container:container,glow:glow};
+import { css } from 'glamor';
+const container = css({
+  position: 'relative'
+}).toString();
+const glow = css({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%',
+  background: 'transparent',
+  transition: 'background 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+  zIndex: 0
+}).toString();
+export default {
+  container,
+  glow
+};