Merge pull request #221 from sharetribe/mobile-inputs

Clean up inputs

src/components/AddImages/AddImages.example.js

@@ -82,5 +82,5 @@ class AddImagesTest extends Component {
 
 export const Empty = {
   component: AddImagesTest,
-  group: 'inputs',
+  group: 'custom inputs',
 };

src/components/BirthdayInput/BirthdayInput.example.js

@@ -33,5 +33,5 @@ export const Empty = {
       console.log('birthday changed to:', birthday ? birthday.toUTCString() : birthday);
     },
   },
-  group: 'inputs',
+  group: 'custom inputs',
 };

src/components/Button/Button.example.js

@@ -53,5 +53,5 @@ const ButtonsComponent = () => {
 
 export const Buttons = {
   component: ButtonsComponent,
-  group: 'buttons',
+  group: 'inputs and buttons',
 };

src/components/CurrencyInput/CurrencyInput.example.js

@@ -39,7 +39,7 @@ export const EmptyWithEnUS = {
     currencyConfig: defaultConfig,
     locale: 'en-US',
   },
-  group: 'inputs',
+  group: 'custom inputs',
 };
 
 // Default value with fi-FI locale
@@ -50,5 +50,5 @@ export const defaultValueWithFiFI = {
     locale: 'fi-FI',
     defaultValue: 9999.99,
   },
-  group: 'inputs',
+  group: 'custom inputs',
 };

src/components/CurrencyInput/CurrencyInput.js

@@ -14,7 +14,6 @@ import {
   truncateToSubUnitPrecision,
 } from '../../util/currency';
 import * as propTypes from '../../util/propTypes';
-import { Input } from '../../components';
 
 const allowedInputProps = allProps => {
   // Strip away props that are not passed to input element (or are overwritten)
@@ -167,7 +166,7 @@ class CurrencyInput extends Component {
     const { currencyConfig, defaultValue, placeholder, intl } = this.props;
     const placeholderText = placeholder || intl.formatNumber(defaultValue, currencyConfig);
     return (
-      <Input
+      <input
         {...allowedInputProps(this.props)}
         value={this.state.value}
         onChange={this.onInputChange}

src/components/DateInput/DateInput.example.js

@@ -73,5 +73,5 @@ export const Empty = {
       console.log('Submitting a form with values:', v);
     },
   },
-  group: 'inputs',
+  group: 'custom inputs',
 };

src/components/Discussion/Discussion.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-import { Button, Input } from '../../components';
+import { Button } from '../../components';
 
 import css from './Discussion.css';
 
@@ -47,7 +47,7 @@ class Discussion extends Component {
           {this.props.messages.map(msg => <Message key={msg.id} {...msg} />)}
         </ul>
         <form className={css.sendMessageForm} onSubmit={this.handleNewMessage}>
-          <Input
+          <input
             className={css.sendMessageInput}
             autoFocus
             type="text"

src/components/Input/Input.css

@@ -1,7 +0,0 @@
-.root {
-
-}
-
-.inline {
-  display: inline-block;
-}

src/components/Input/Input.js

@@ -1,43 +0,0 @@
-import React, { PropTypes } from 'react';
-import classNames from 'classnames';
-
-import css from './Input.css';
-
-const Input = props => {
-  const { className, inline, ...rest } = props;
-
-  const classes = classNames(css.root, { [css.inline]: inline }, className);
-
-  return <input className={classes} {...rest} />;
-};
-
-const { string, bool } = PropTypes;
-
-Input.defaultProps = {
-  className: null,
-  inline: false,
-};
-
-Input.propTypes = {
-  className: string,
-  inline: bool,
-};
-
-/*
-   Creates a new Input component for Redux Form Field.
-
-   Usage:
-
-   ```
-   <Field name="password" type="password" component={Input.fieldComponent} />
-   ```
-*/
-Input.fieldComponent = props => {
-  /* eslint-disable react/prop-types */
-  const { input, type } = props;
-  /* eslint-enable react/prop-types */
-
-  return <Input type={type} {...input} />;
-};
-
-export default Input;

src/components/LabeledField/LabeledField.css

@@ -1,9 +0,0 @@
-.label {
-  margin-top: 0px;
-  margin-bottom: 10px;
-
-  /* Title: */
-  font-size: 14px;
-  letter-spacing: 0;
-  line-height: 21px;
-}

src/components/LabeledField/LabeledField.js

@@ -1,30 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Field } from 'redux-form';
-import { Input } from '../../components';
-
-import css from './LabeledField.css';
-
-const LabeledField = props => {
-  const { label, name, type } = props;
-
-  return (
-    <div>
-      <label className={css.label} htmlFor={name}>{label}</label>
-      <Field name={name} component={Input.fieldComponent} type={type} />
-    </div>
-  );
-};
-
-LabeledField.defaultProps = {
-  type: 'input',
-};
-
-const { string } = PropTypes;
-
-LabeledField.propTypes = {
-  label: string.isRequired,
-  name: string.isRequired,
-  type: string,
-};
-
-export default LabeledField;

src/components/LocationAutocompleteInput/LocationAutocompleteInput.css

@@ -40,6 +40,12 @@
   &::-webkit-input-placeholder {
     line-height:normal;
   }
+
+  &:hover,
+  &:focus {
+    border-bottom-color: var(--marketplaceColor);
+    outline: none;
+  }
 }
 
 /*

src/components/LocationAutocompleteInput/LocationAutocompleteInput.example.js

@@ -67,5 +67,5 @@ class FormContainer extends Component {
 
 export const Empty = {
   component: FormContainer,
-  group: 'inputs',
+  group: 'custom inputs',
 };

src/components/OrderDiscussionPanel/__snapshots__/OrderDiscussionPanel.test.js.snap

@@ -22,7 +22,7 @@ exports[`OrderDiscussionPanel matches snapshot 1`] = `
     onSubmit={[Function]}>
     <input
       autoFocus={true}
-      className=""
+      className={undefined}
       onChange={[Function]}
       type="text"
       value="" />

src/components/StripeBankAccountToken/StripeBankAccountToken.example.js

@@ -77,5 +77,5 @@ class FormContainer extends Component {
 
 export const Empty = {
   component: FormContainer,
-  group: 'inputs',
+  group: 'custom inputs',
 };

src/components/StripeBankAccountToken/StripeBankAccountToken.js

@@ -2,7 +2,7 @@
 import React, { Component, PropTypes } from 'react';
 import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 import { debounce } from 'lodash';
-import { Input, ValidationError } from '../../components';
+import { ValidationError } from '../../components';
 import config from '../../config';
 
 import css from './StripeBankAccountToken.css';
@@ -207,7 +207,7 @@ class StripeBankAccountToken extends Component {
         <label htmlFor="routingNumber">
           <FormattedMessage id="StripeBankAccountToken.routingNumberLabel" />
         </label>
-        <Input
+        <input
           name="routingNumber"
           value={this.state.routingNumber}
           placeholder={routingNumberPlaceholder}
@@ -232,7 +232,7 @@ class StripeBankAccountToken extends Component {
             ? <FormattedMessage id="StripeBankAccountToken.bankAccountNumberLabel" />
             : <FormattedMessage id="StripeBankAccountToken.bankAccountNumberLabelIban" />}
         </label>
-        <Input
+        <input
           value={this.state.accountNumber}
           placeholder={accountNumberPlaceholder}
           onChange={handleAccountNumberChange}

src/components/index.js

@@ -16,9 +16,7 @@ import EditListingWizard from './EditListingWizard/EditListingWizard';
 import ExternalLink from './ExternalLink/ExternalLink';
 import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
-import Input from './Input/Input';
 import InputField from './InputField/InputField';
-import LabeledField from './LabeledField/LabeledField';
 import ListingCard from './ListingCard/ListingCard';
 import ListingCardSmall from './ListingCardSmall/ListingCardSmall';
 import LocationAutocompleteInput from './LocationAutocompleteInput/LocationAutocompleteInput';
@@ -69,9 +67,7 @@ export {
   FilterPanel,
   HeroSection,
   InlineTextButton,
-  Input,
   InputField,
-  LabeledField,
   ListingCard,
   ListingCardSmall,
   LocationAutocompleteInput,

src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button, Input } from '../../components';
+import { Button } from '../../components';
 
 const ChangeAccountPasswordForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="newPassword1">New password</label>
-      <Field name="newPassword1" component={Input.fieldComponent} type="password" />
+      <Field name="newPassword1" component="input" type="password" />
       <label htmlFor="newPassword2">New password, again</label>
-      <Field name="newPassword2" component={Input.fieldComponent} type="password" />
+      <Field name="newPassword2" component="input" type="password" />
       <label htmlFor="password">Current password</label>
-      <Field name="password" component={Input.fieldComponent} type="password" />
+      <Field name="password" component="input" type="password" />
       <p>Delete account (module)</p>
       <Button type="submit" disabled={pristine || submitting}>Save changes</Button>
     </form>

src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap

@@ -6,7 +6,6 @@ exports[`ChangeAccountPasswordForm matches snapshot 1`] = `
     New password
   </label>
   <input
-    className=""
     name="newPassword1"
     onBlur={[Function]}
     onChange={[Function]}
@@ -20,7 +19,6 @@ exports[`ChangeAccountPasswordForm matches snapshot 1`] = `
     New password, again
   </label>
   <input
-    className=""
     name="newPassword2"
     onBlur={[Function]}
     onChange={[Function]}
@@ -34,7 +32,6 @@ exports[`ChangeAccountPasswordForm matches snapshot 1`] = `
     Current password
   </label>
   <input
-    className=""
     name="password"
     onBlur={[Function]}
     onChange={[Function]}

src/containers/ChangePasswordForm/ChangePasswordForm.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button, Input } from '../../components';
+import { Button } from '../../components';
 
 const ChangePasswordForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="newPassword1">New password</label>
-      <Field name="newPassword1" component={Input.fieldComponent} type="password" />
+      <Field name="newPassword1" component="input" type="password" />
       <label htmlFor="newPassword2">New password, again</label>
-      <Field name="newPassword2" component={Input.fieldComponent} type="password" />
+      <Field name="newPassword2" component="input" type="password" />
       <Button type="submit" disabled={pristine || submitting}>Change password</Button>
     </form>
   );

src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap

@@ -6,7 +6,6 @@ exports[`ChangePasswordForm matches snapshot 1`] = `
     New password
   </label>
   <input
-    className=""
     name="newPassword1"
     onBlur={[Function]}
     onChange={[Function]}
@@ -20,7 +19,6 @@ exports[`ChangePasswordForm matches snapshot 1`] = `
     New password, again
   </label>
   <input
-    className=""
     name="newPassword2"
     onBlur={[Function]}
     onChange={[Function]}

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -6,7 +6,7 @@ import { isEqual } from 'lodash';
 import { arrayMove } from 'react-sortable-hoc';
 import classNames from 'classnames';
 import { noEmptyArray } from '../../util/validators';
-import { AddImages, Button, Input, ValidationError } from '../../components';
+import { AddImages, Button, ValidationError } from '../../components';
 
 import css from './EditListingPhotosForm.css';
 
@@ -20,7 +20,7 @@ const RenderAddImage = props => {
   return (
     <div className={css.addImageWrapper}>
       <div className={css.aspectRatioWrapper}>
-        <Input {...inputProps} className={css.addImageInput} />
+        <input {...inputProps} className={css.addImageInput} />
         <label htmlFor={name} className={css.addImage}>{label}</label>
       </div>
     </div>
@@ -99,7 +99,7 @@ export class EditListingPhotosFormComponent extends Component {
               const { input, type, meta } = props;
               return (
                 <div className={css.imageRequiredWrapper}>
-                  <Input {...input} type={type} />
+                  <input {...input} type={type} />
                   <ValidationError fieldMeta={meta} />
                 </div>
               );

src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap

@@ -8,7 +8,6 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
       className="">
       <input
         autoFocus={true}
-        className=""
         label={null}
         onBlur={[Function]}
         onChange={[Function]}

src/containers/PasswordForgottenForm/PasswordForgottenForm.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button, Input } from '../../components';
+import { Button } from '../../components';
 
 const PasswordForgottenForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="email">Email</label>
-      <Field name="email" component={Input.fieldComponent} type="email" />
+      <Field name="email" component="input" type="email" />
       <p>We will send you instructions to your email.</p>
       <Button type="submit" disabled={pristine || submitting}>Send</Button>
     </form>

src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap

@@ -6,7 +6,6 @@ exports[`PasswordForgottenForm matches snapshot 1`] = `
     Email
   </label>
   <input
-    className=""
     name="email"
     onBlur={[Function]}
     onChange={[Function]}

src/containers/StyleguidePage/StyleguidePage.js

@@ -162,7 +162,7 @@ const examplesFor = (examples, group, componentName, exampleName) => {
 
 const StyleguidePage = props => {
   const { params, raw } = props;
-  const group = params.group || ALL;
+  const group = params.group ? decodeURIComponent(params.group) : ALL;
   const componentName = params.component || ALL;
   const exampleName = params.example || ALL;
 

src/marketplace.css

@@ -336,6 +336,37 @@
       border-color: var(--matterColorAnti);
     }
   }
+
+  /* Inputs */
+  --marketplaceInputStyles: {
+
+    /* Dimensions */
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 13px 0;
+
+    /* Borders */
+    border: none;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--marketplaceColor);
+    border-radius: 0;
+
+    &::placeholder {
+      color: var(--matterColorAnti);
+    }
+
+    /* Effects */
+
+    transition: border-bottom-color var(--transitionStyle);
+
+    &:hover,
+    &:focus {
+      border-bottom-color: var(--matterColor);
+      outline: none;
+    }
+  }
 }
 
 /* ================ Custom media queries ================ */
@@ -402,42 +433,12 @@ select {
   border: none;
 }
 
+input {
+  @apply --marketplaceInputStyles;
+}
+
 textarea {
-  width: 100%;
+  @apply --marketplaceInputStyles;
   min-height: 48px;
   padding: 0 0 5px 0;
-
-  /* Borders */
-  border: none;
-  border-bottom-width: 3px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--marketplaceColor);
-  border-radius: 0;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-input {
-  display: block;
-  width: 100%;
-  margin: 0;
-  padding: 13px 0;
-
-  border: none;
-  border-bottom-width: 3px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--marketplaceColor);
-  border-radius: 0;
-
-  transition: border-bottom-color var(--transitionStyle);
-
-  &::placeholder {
-    color: var(--matterColorAnti);
-  }
-
-  &:focus {
-    outline: none;
-  }
 }

src/util/forms.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Input, ValidationError } from '../components';
+import { ValidationError } from '../components';
 
 /**
  * Hoc to convert a component used within a Field to one that renders
@@ -36,7 +36,7 @@ export const enhancedField = (Comp, options = {}) => {
       } else if (Comp === 'textarea') {
         component = <textarea {...otherProps} {...input} placeholder={placeholder} />;
       } else {
-        component = <Input {...otherProps} {...input} type={type} placeholder={placeholder} />;
+        component = <input {...otherProps} {...input} type={type} placeholder={placeholder} />;
       }
       const labelInfo = label
         ? <label className={labelClassName} htmlFor={input.name}>{label}</label>