diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js index 690dc274..f83e840d 100644 --- a/src/components/AddImages/AddImages.example.js +++ b/src/components/AddImages/AddImages.example.js @@ -82,5 +82,5 @@ class AddImagesTest extends Component { export const Empty = { component: AddImagesTest, - group: 'inputs', + group: 'custom inputs', }; diff --git a/src/components/BirthdayInput/BirthdayInput.example.js b/src/components/BirthdayInput/BirthdayInput.example.js index 0ac1acc1..f0486d00 100644 --- a/src/components/BirthdayInput/BirthdayInput.example.js +++ b/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', }; diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js index bd7b8d09..3125f2b3 100644 --- a/src/components/Button/Button.example.js +++ b/src/components/Button/Button.example.js @@ -53,5 +53,5 @@ const ButtonsComponent = () => { export const Buttons = { component: ButtonsComponent, - group: 'buttons', + group: 'inputs and buttons', }; diff --git a/src/components/CurrencyInput/CurrencyInput.example.js b/src/components/CurrencyInput/CurrencyInput.example.js index ba37dcdd..ed5508bf 100644 --- a/src/components/CurrencyInput/CurrencyInput.example.js +++ b/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', }; diff --git a/src/components/CurrencyInput/CurrencyInput.js b/src/components/CurrencyInput/CurrencyInput.js index 0c45d7cb..b6526679 100644 --- a/src/components/CurrencyInput/CurrencyInput.js +++ b/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 ( - )}
- { - const { className, inline, ...rest } = props; - - const classes = classNames(css.root, { [css.inline]: inline }, className); - - return ; -}; - -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: - - ``` - - ``` -*/ -Input.fieldComponent = props => { - /* eslint-disable react/prop-types */ - const { input, type } = props; - /* eslint-enable react/prop-types */ - - return ; -}; - -export default Input; diff --git a/src/components/LabeledField/LabeledField.css b/src/components/LabeledField/LabeledField.css deleted file mode 100644 index 27073f20..00000000 --- a/src/components/LabeledField/LabeledField.css +++ /dev/null @@ -1,9 +0,0 @@ -.label { - margin-top: 0px; - margin-bottom: 10px; - - /* Title: */ - font-size: 14px; - letter-spacing: 0; - line-height: 21px; -} diff --git a/src/components/LabeledField/LabeledField.js b/src/components/LabeledField/LabeledField.js deleted file mode 100644 index 85c5fbd2..00000000 --- a/src/components/LabeledField/LabeledField.js +++ /dev/null @@ -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 ( -
- - -
- ); -}; - -LabeledField.defaultProps = { - type: 'input', -}; - -const { string } = PropTypes; - -LabeledField.propTypes = { - label: string.isRequired, - name: string.isRequired, - type: string, -}; - -export default LabeledField; diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 235da7b9..6edb244f 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -40,6 +40,12 @@ &::-webkit-input-placeholder { line-height:normal; } + + &:hover, + &:focus { + border-bottom-color: var(--marketplaceColor); + outline: none; + } } /* diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.example.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.example.js index 3934f573..d928438a 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.example.js +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.example.js @@ -67,5 +67,5 @@ class FormContainer extends Component { export const Empty = { component: FormContainer, - group: 'inputs', + group: 'custom inputs', }; diff --git a/src/components/OrderDiscussionPanel/__snapshots__/OrderDiscussionPanel.test.js.snap b/src/components/OrderDiscussionPanel/__snapshots__/OrderDiscussionPanel.test.js.snap index 76ed4649..0d6e147a 100644 --- a/src/components/OrderDiscussionPanel/__snapshots__/OrderDiscussionPanel.test.js.snap +++ b/src/components/OrderDiscussionPanel/__snapshots__/OrderDiscussionPanel.test.js.snap @@ -22,7 +22,7 @@ exports[`OrderDiscussionPanel matches snapshot 1`] = ` onSubmit={[Function]}> diff --git a/src/components/StripeBankAccountToken/StripeBankAccountToken.example.js b/src/components/StripeBankAccountToken/StripeBankAccountToken.example.js index b392b143..c8e9fa04 100644 --- a/src/components/StripeBankAccountToken/StripeBankAccountToken.example.js +++ b/src/components/StripeBankAccountToken/StripeBankAccountToken.example.js @@ -77,5 +77,5 @@ class FormContainer extends Component { export const Empty = { component: FormContainer, - group: 'inputs', + group: 'custom inputs', }; diff --git a/src/components/StripeBankAccountToken/StripeBankAccountToken.js b/src/components/StripeBankAccountToken/StripeBankAccountToken.js index 9ed8a5e7..3ec54420 100644 --- a/src/components/StripeBankAccountToken/StripeBankAccountToken.js +++ b/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 { - : } - { const { handleSubmit, pristine, submitting } = props; return ( - + - + - +

Delete account (module)

diff --git a/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap b/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap index ecfbfba0..4b071114 100644 --- a/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap +++ b/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap @@ -6,7 +6,6 @@ exports[`ChangeAccountPasswordForm matches snapshot 1`] = ` New password { const { handleSubmit, pristine, submitting } = props; return (
- + - + ); diff --git a/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap b/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap index d7606fb3..8c64f698 100644 --- a/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap +++ b/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap @@ -6,7 +6,6 @@ exports[`ChangePasswordForm matches snapshot 1`] = ` New password { return (
- +
@@ -99,7 +99,7 @@ export class EditListingPhotosFormComponent extends Component { const { input, type, meta } = props; return (
- +
); diff --git a/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap b/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap index 0fa6ca4c..e199427c 100644 --- a/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap +++ b/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap @@ -8,7 +8,6 @@ exports[`EditListingPricingForm matches snapshot 1`] = ` className=""> { const { handleSubmit, pristine, submitting } = props; return (
- +

We will send you instructions to your email.

diff --git a/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap b/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap index fd455265..abe77199 100644 --- a/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap +++ b/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap @@ -6,7 +6,6 @@ exports[`PasswordForgottenForm matches snapshot 1`] = ` Email { 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; diff --git a/src/marketplace.css b/src/marketplace.css index 526047e2..b342925b 100644 --- a/src/marketplace.css +++ b/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; - } } diff --git a/src/util/forms.js b/src/util/forms.js index c8c7121c..d5da2c02 100644 --- a/src/util/forms.js +++ b/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 =