diff --git a/src/components/FieldGroupCheckbox/FieldCheckbox.css b/src/components/FieldGroupCheckbox/FieldCheckbox.css deleted file mode 100644 index a295dbf0..00000000 --- a/src/components/FieldGroupCheckbox/FieldCheckbox.css +++ /dev/null @@ -1,68 +0,0 @@ -@import '../../marketplace.css'; - -.root { - position: relative; -} - -.input { - position: absolute; - opacity: 0; - height: 0; - width: 0; - - /* Highlight the borders if the checkbox is hovered, focused or checked */ - &:hover + label .box, - &:focus + label .box, - &:checked + label .box { - stroke: var(--marketplaceColor); - } - - /* Display the "check" when checked */ - &:checked + label .checked { - display: inline; - stroke: var(--marketplaceColor); - stroke-width: 1px; - } - - /* Hightlight the text on checked, hover and focus */ - &:focus + label .text, - &:hover + label .text, - &:checked + label .text { - color: var(--matterColorDark); - } -} - -.label { - display: flex; - align-items: center; - padding: 0; -} - -.checkboxWrapper { - /* This should follow line-height */ - height: 32px; - margin-top: -1px; - margin-right: 12px; - align-self: baseline; - - display: inline-flex; - align-items: center; - cursor: pointer; -} - -.checked { - display: none; - fill: var(--marketplaceColor); -} - -.box { - stroke: var(--matterColorAnti); -} - -.text { - @apply --marketplaceListingAttributeFontStyles; - color: var(--matterColor); - margin-top: -1px; - margin-bottom: 1px; - cursor: pointer; -} diff --git a/src/components/FieldGroupCheckbox/FieldCheckbox.js b/src/components/FieldGroupCheckbox/FieldCheckbox.js deleted file mode 100644 index cad10ef6..00000000 --- a/src/components/FieldGroupCheckbox/FieldCheckbox.js +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import { any, node, string, object, shape } from 'prop-types'; -import classNames from 'classnames'; -import { Field } from 'react-final-form'; -import { ValidationError } from '../../components'; - -import css from './FieldCheckbox.css'; - -const IconCheckbox = props => { - return ( - - - - - - - - - - ); -}; - -IconCheckbox.defaultProps = { className: null }; - -IconCheckbox.propTypes = { className: string }; - -const FieldCheckboxComponent = props => { - const { rootClassName, className, svgClassName, id, label, input, meta, ...rest } = props; - - const classes = classNames(rootClassName || css.root, className); - - const { value, ...inputProps } = input; - const checked = value === true; - - const checkboxProps = { - id, - className: css.input, - type: 'checkbox', - checked, - ...inputProps, - ...rest, - }; - - return ( - - - - - - ); -}; - -FieldCheckboxComponent.defaultProps = { - className: null, - rootClassName: null, - svgClassName: null, - label: null, -}; - -FieldCheckboxComponent.propTypes = { - className: string, - rootClassName: string, - svgClassName: string, - id: string.isRequired, - label: node, - - // FieldRenderProps - input: shape({ value: any }).isRequired, - meta: object.isRequired, -}; - -const FieldCheckbox = props => { - return ; -}; - -export default FieldCheckbox; diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.css b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.css deleted file mode 100644 index 0550ae37..00000000 --- a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.css +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../marketplace.css'; - -.root { - margin: 0; - padding: 0; - border: none; -} - -.list { - margin: 0; -} - -.twoColumns { - @media (--viewportMedium) { - columns: 2; - } -} - -.item { - padding: 2px 0; - - /* Fix broken multi-column layout in Chrome */ - page-break-inside: avoid; - - @media (--viewportMedium) { - padding: 4px 0; - } -} diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js deleted file mode 100644 index 54c43adc..00000000 --- a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js +++ /dev/null @@ -1,108 +0,0 @@ -import React from 'react'; -import { reduxForm, propTypes as formPropTypes } from 'redux-form'; -import { Button } from '../../components'; -import FieldGroupCheckbox from './FieldGroupCheckbox'; -import { requiredFieldArrayCheckbox } from '../../util/validators'; - -const formName = 'Styleguide.FieldGroupCheckboxForm'; -const formNameRequired = 'Styleguide.FieldGroupCheckboxFormRequired'; - -const label =

Amenities

; - -const commonProps = { - label: label, - options: [ - { - key: 'towels', - label: 'Towels', - }, - { - key: 'bathroom', - label: 'Bathroom', - }, - { - key: 'swimming_pool', - label: 'Swimming pool', - }, - { - key: 'own_drinks', - label: 'Own drinks allowed', - }, - { - key: 'jacuzzi', - label: 'Jacuzzi', - }, - { - key: 'audiovisual_entertainment', - label: 'Audiovisual entertainment', - }, - { - key: 'barbeque', - label: 'Barbeque', - }, - { - key: 'own_food_allowed', - label: 'Own food allowed', - }, - ], - twoColumns: true, -}; - -const optionalProps = { - name: 'amenities-optional', - id: `${formName}.amenities-optional`, - ...commonProps, -}; - -const requiredProps = { - name: 'amenities-required', - id: `${formNameRequired}.amenities-required`, - ...commonProps, - validate: requiredFieldArrayCheckbox('this is required'), -}; - -const FormComponent = props => { - const { handleSubmit, invalid, submitting, componentProps } = props; - - const submitDisabled = invalid || submitting; - - return ( -
- - - - - ); -}; - -FormComponent.propTypes = formPropTypes; - -const Form = formName => { - return reduxForm({ - form: formName, - })(FormComponent); -}; - -export const Optional = { - component: Form(formName), - props: { - onSubmit: values => { - console.log('Submit values: ', values); - }, - componentProps: optionalProps, - }, - group: 'inputs', -}; - -export const Required = { - component: Form(formNameRequired), - props: { - onSubmit: values => { - console.log('Submit values: ', values); - }, - componentProps: requiredProps, - }, - group: 'inputs', -}; diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js deleted file mode 100644 index 14876e96..00000000 --- a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js +++ /dev/null @@ -1,92 +0,0 @@ -/* - * Renders a group of checkboxes that can be used to select - * multiple values from a set of options. - * - * The corresponding component when rendering the selected - * values is PropertyGroup. - * - */ - -import React, { Component } from 'react'; -import { arrayOf, bool, node, shape, string } from 'prop-types'; -import classNames from 'classnames'; -import { FieldArray } from 'redux-form'; -import { ValidationError } from '../../components'; - -import FieldCheckbox from './FieldCheckbox'; -import css from './FieldGroupCheckbox.css'; - -class FieldCheckboxRenderer extends Component { - constructor(props) { - super(props); - this.state = { touched: false }; - } - - componentWillReceiveProps(nextProps) { - // FieldArray doesn't have touched prop, so we'll keep track of it - if (!this.state.touched) { - this.setState({ touched: nextProps.meta.dirty }); - } - } - - render() { - const { className, rootClassName, label, twoColumns, id, options, meta, name } = this.props; - - const touched = this.state.touched; - - const classes = classNames(rootClassName || css.root, className); - const listClasses = twoColumns ? classNames(css.list, css.twoColumns) : css.list; - - return ( -
- {label ? {label} : null} -
    - {options.map(option => { - const fieldId = `${id}.${option.key}`; - return ( -
  • - -
    • - ); - })} -
- -
- ); - } -} - -FieldCheckboxRenderer.defaultProps = { - rootClassName: null, - className: null, - label: null, - twoColumns: false, -}; - -FieldCheckboxRenderer.propTypes = { - rootClassName: string, - className: string, - id: string.isRequired, - label: node, - options: arrayOf( - shape({ - key: string.isRequired, - label: node.isRequired, - }) - ).isRequired, - twoColumns: bool, -}; - -// Redux Form: the name of FieldArray must be unique -// https://github.com/erikras/redux-form/issues/2740 -const FieldGroupCheckbox = props => ( - -); - -// Name and component are required fields for FieldArray. -// Component-prop we define in this file, name needs to be passed in -FieldGroupCheckbox.propTypes = { - name: string.isRequired, -}; - -export default FieldGroupCheckbox; diff --git a/src/components/SelectField/SelectField.css b/src/components/SelectField/SelectField.css deleted file mode 100644 index 0aa58c74..00000000 --- a/src/components/SelectField/SelectField.css +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../marketplace.css'; - -.root { -} - -.select { - color: var(--matterColorAnti); - border-bottom-color: var(--attentionColor); -} - -.selectSuccess { - color: var(--matterColor); - border-bottom-color: var(--successColor); -} - -.selectError { - border-bottom-color: var(--failColor); -} diff --git a/src/components/SelectField/SelectField.example.js b/src/components/SelectField/SelectField.example.js deleted file mode 100644 index a348c25d..00000000 --- a/src/components/SelectField/SelectField.example.js +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable no-console */ -import React from 'react'; -import { reduxForm, propTypes as formPropTypes } from 'redux-form'; -import * as validators from '../../util/validators'; -import { Button } from '../../components'; -import SelectField from './SelectField'; - -const formName = 'Styleguide.SelectField.Form'; - -const FormComponent = props => { - const { form, handleSubmit, invalid, pristine, submitting } = props; - const required = validators.required('This field is required'); - const submitDisabled = invalid || pristine || submitting; - return ( -
- - - - - - -
- ); -}; - -FormComponent.propTypes = formPropTypes; - -const Form = reduxForm({ - form: formName, -})(FormComponent); - -export const Select = { - component: Form, - props: { - onSubmit: values => { - console.log('submit values:', values); - }, - }, - group: 'inputs', -}; diff --git a/src/components/SelectField/SelectField.js b/src/components/SelectField/SelectField.js deleted file mode 100644 index c733916c..00000000 --- a/src/components/SelectField/SelectField.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * DEPRECATED: this component is part of Redux Form - we are migrating to react-final-form. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import { Field } from 'redux-form'; -import classNames from 'classnames'; -import { ValidationError } from '../../components'; - -import css from './SelectField.css'; - -const SelectFieldComponent = props => { - const { rootClassName, className, id, label, input, meta, children, ...rest } = props; - - if (label && !id) { - throw new Error('id required when a label is given'); - } - - const { valid, invalid, touched, error } = meta; - - // Error message and input error styles are only shown if the - // field has been touched and the validation has failed. - const hasError = touched && invalid && error; - - const selectClasses = classNames(css.select, { - [css.selectSuccess]: valid, - [css.selectError]: hasError, - }); - const selectProps = { className: selectClasses, id, ...input, ...rest }; - - const classes = classNames(rootClassName || css.root, className); - return ( -
- {label ? : null} - - -
- ); -}; - -SelectFieldComponent.defaultProps = { - rootClassName: null, - className: null, - id: null, - label: null, - children: null, -}; - -const { string, object, node } = PropTypes; - -SelectFieldComponent.propTypes = { - rootClassName: string, - className: string, - - // Label is optional, but if it is given, an id is also required so - // the label can reference the input in the `for` attribute - id: string, - label: string, - - // Generated by redux-form's Field component - input: object.isRequired, - meta: object.isRequired, - - children: node, -}; - -const SelectField = props => { - return ; -}; - -export default SelectField; diff --git a/src/components/TextInputField/TextInputField.css b/src/components/TextInputField/TextInputField.css deleted file mode 100644 index 2294a88d..00000000 --- a/src/components/TextInputField/TextInputField.css +++ /dev/null @@ -1,19 +0,0 @@ -@import '../../marketplace.css'; - -.root { -} - -.input { - border-bottom-color: var(--attentionColor); -} - -.inputSuccess { - border-bottom-color: var(--successColor); -} - -.inputError { - border-bottom-color: var(--failColor); -} - -.textarea { -} diff --git a/src/components/TextInputField/TextInputField.example.css b/src/components/TextInputField/TextInputField.example.css deleted file mode 100644 index 9fe2d13d..00000000 --- a/src/components/TextInputField/TextInputField.example.css +++ /dev/null @@ -1,7 +0,0 @@ -.field { - margin-top: 24px; -} - -.submit { - margin-top: 24px; -} diff --git a/src/components/TextInputField/TextInputField.example.js b/src/components/TextInputField/TextInputField.example.js deleted file mode 100644 index 4007f50d..00000000 --- a/src/components/TextInputField/TextInputField.example.js +++ /dev/null @@ -1,81 +0,0 @@ -/* eslint-disable no-console */ -import React from 'react'; -import { reduxForm, propTypes as formPropTypes } from 'redux-form'; -import * as validators from '../../util/validators'; -import { Button } from '../../components'; -import TextInputField from './TextInputField'; - -import css from './TextInputField.example.css'; - -const formName = 'Styleguide.TextInputField.Form'; - -const FormComponent = props => { - const { handleSubmit, invalid, pristine, submitting } = props; - const required = validators.required('This field is required'); - const submitDisabled = invalid || pristine || submitting; - return ( -
- - - - - - - - - ); -}; - -FormComponent.propTypes = formPropTypes; - -const Form = reduxForm({ - form: formName, -})(FormComponent); - -export const Inputs = { - component: Form, - props: { - onSubmit: values => { - console.log('submit values:', values); - }, - }, - group: 'inputs', -}; diff --git a/src/components/TextInputField/TextInputField.js b/src/components/TextInputField/TextInputField.js deleted file mode 100644 index 0014a58c..00000000 --- a/src/components/TextInputField/TextInputField.js +++ /dev/null @@ -1,117 +0,0 @@ -/** - * DEPRECATED: this component is part of Redux Form - we are migrating to react-final-form. - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Field } from 'redux-form'; -import classNames from 'classnames'; -import { ValidationError, ExpandingTextarea } from '../../components'; - -import css from './TextInputField.css'; - -const CONTENT_MAX_LENGTH = 5000; - -class TextInputFieldComponent extends Component { - componentWillUnmount() { - if (this.props.clearOnUnmount) { - this.props.input.onChange(''); - } - } - render() { - /* eslint-disable no-unused-vars */ - const { - rootClassName, - className, - inputRootClass, - clearOnUnmount, - customErrorText, - id, - label, - type, - input, - meta, - ...rest - } = this.props; - /* eslint-enable no-unused-vars */ - - if (label && !id) { - throw new Error('id required when a label is given'); - } - - const { valid, invalid, touched, error } = meta; - const isTextarea = type === 'textarea'; - - const errorText = customErrorText || error; - - // Error message and input error styles are only shown if the - // field has been touched and the validation has failed. - const hasError = touched && invalid && errorText; - - const fieldMeta = { touched, error: errorText }; - - const inputClasses = - inputRootClass || - classNames(css.input, { - [css.inputSuccess]: valid, - [css.inputError]: hasError, - [css.textarea]: isTextarea, - }); - const inputProps = isTextarea - ? { className: inputClasses, id, rows: 1, maxLength: CONTENT_MAX_LENGTH, ...input, ...rest } - : { className: inputClasses, id, type, ...input, ...rest }; - - const classes = classNames(rootClassName || css.root, className); - return ( -
- {label ? : null} - {isTextarea ? : } - -
- ); - } -} - -TextInputFieldComponent.defaultProps = { - rootClassName: null, - className: null, - inputRootClass: null, - clearOnUnmount: false, - customErrorText: null, - id: null, - label: null, -}; - -const { string, bool, shape, func, object } = PropTypes; - -TextInputFieldComponent.propTypes = { - rootClassName: string, - className: string, - inputRootClass: string, - - clearOnUnmount: bool, - - // Error message that can be manually passed to input field, - // overrides default validation message - customErrorText: string, - - // Label is optional, but if it is given, an id is also required so - // the label can reference the input in the `for` attribute - id: string, - label: string, - - // Either 'textarea' or something that is passed to the input element - type: string.isRequired, - - // Generated by redux-form's Field component - input: shape({ - onChange: func.isRequired, - }).isRequired, - meta: object.isRequired, -}; - -const TextInputField = props => { - return ; -}; - -export default TextInputField; diff --git a/src/components/index.js b/src/components/index.js index 3d5a5b8d..57108049 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -36,7 +36,6 @@ export { default as FieldCheckboxGroup } from './FieldCheckboxGroup/FieldCheckbo export { default as FieldCurrencyInput } from './FieldCurrencyInput/FieldCurrencyInput'; export { default as FieldDateInput } from './FieldDateInput/FieldDateInput'; export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateRangeInput'; -export { default as FieldGroupCheckbox } from './FieldGroupCheckbox/FieldGroupCheckbox'; export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput'; export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating'; export { default as FieldSelect } from './FieldSelect/FieldSelect'; @@ -115,7 +114,6 @@ export { default as SectionHero } from './SectionHero/SectionHero'; export { default as SectionHowItWorks } from './SectionHowItWorks/SectionHowItWorks'; export { default as SectionLocations } from './SectionLocations/SectionLocations'; export { default as SectionThumbnailLinks } from './SectionThumbnailLinks/SectionThumbnailLinks'; -export { default as SelectField } from './SelectField/SelectField'; export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter'; export { default as SelectMultipleFilterPlain, @@ -131,7 +129,6 @@ export { default as TabNav } from './TabNav/TabNav'; export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal'; export { default as Tabs } from './Tabs/Tabs'; export { default as TermsOfService } from './TermsOfService/TermsOfService'; -export { default as TextInputField } from './TextInputField/TextInputField'; export { default as Topbar } from './Topbar/Topbar'; export { default as TopbarDesktop } from './TopbarDesktop/TopbarDesktop'; export { default as TopbarMobileMenu } from './TopbarMobileMenu/TopbarMobileMenu'; diff --git a/src/ducks/index.js b/src/ducks/index.js index 0f451fe7..9987e5c1 100644 --- a/src/ducks/index.js +++ b/src/ducks/index.js @@ -4,7 +4,6 @@ * https://github.com/erikras/ducks-modular-redux */ -import { reducer as form } from 'redux-form'; import Auth from './Auth.duck'; import EmailVerification from './EmailVerification.duck'; import FlashNotification from './FlashNotification.duck'; @@ -21,7 +20,6 @@ export { LocationFilter, Routing, UI, - form, marketplaceData, user, }; diff --git a/src/examples.js b/src/examples.js index 846be757..c8c5994e 100644 --- a/src/examples.js +++ b/src/examples.js @@ -12,7 +12,6 @@ import * as FieldCheckboxGroup from './components/FieldCheckboxGroup/FieldCheckb import * as FieldCurrencyInput from './components/FieldCurrencyInput/FieldCurrencyInput.example'; import * as FieldDateInput from './components/FieldDateInput/FieldDateInput.example'; import * as FieldDateRangeInput from './components/FieldDateRangeInput/FieldDateRangeInput.example'; -import * as FieldGroupCheckbox from './components/FieldGroupCheckbox/FieldGroupCheckbox.example'; import * as FieldPhoneNumberInput from './components/FieldPhoneNumberInput/FieldPhoneNumberInput.example'; import * as FieldReviewRating from './components/FieldReviewRating/FieldReviewRating.example'; import * as FieldSelect from './components/FieldSelect/FieldSelect.example'; @@ -49,14 +48,12 @@ import * as ResponsiveImage from './components/ResponsiveImage/ResponsiveImage.e import * as ReviewRating from './components/ReviewRating/ReviewRating.example'; import * as Reviews from './components/Reviews/Reviews.example'; import * as SectionThumbnailLinks from './components/SectionThumbnailLinks/SectionThumbnailLinks.example'; -import * as SelectField from './components/SelectField/SelectField.example'; import * as SelectMultipleFilter from './components/SelectMultipleFilter/SelectMultipleFilter.example'; import * as SelectMultipleFilterPlain from './components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example'; import * as StripeBankAccountTokenInputField from './components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example'; import * as TabNav from './components/TabNav/TabNav.example'; import * as TabNavHorizontal from './components/TabNavHorizontal/TabNavHorizontal.example'; import * as Tabs from './components/Tabs/Tabs.example'; -import * as TextInputField from './components/TextInputField/TextInputField.example'; import * as TopbarDesktop from './components/TopbarDesktop/TopbarDesktop.example'; import * as UserCard from './components/UserCard/UserCard.example'; @@ -107,7 +104,6 @@ export { FieldCurrencyInput, FieldDateInput, FieldDateRangeInput, - FieldGroupCheckbox, FieldPhoneNumberInput, FieldReviewRating, FieldSelect, @@ -149,7 +145,6 @@ export { ReviewRating, Reviews, SectionThumbnailLinks, - SelectField, SelectMultipleFilter, SelectMultipleFilterPlain, SendMessageForm, @@ -159,7 +154,6 @@ export { TabNav, TabNavHorizontal, Tabs, - TextInputField, TopbarDesktop, Typography, UserCard, diff --git a/src/util/data.js b/src/util/data.js index bca9bd21..45595c7b 100644 --- a/src/util/data.js +++ b/src/util/data.js @@ -1,6 +1,5 @@ import isArray from 'lodash/isArray'; import reduce from 'lodash/reduce'; -import toPairs from 'lodash/toPairs'; /** * Combine the given relationships objects @@ -283,39 +282,3 @@ export const overrideArrays = (objValue, srcValue, key, object, source, stack) = return srcValue; } }; - -/** - * Converts an array of strings into an object where the array items - * are keys and values in all fields are true. This kind of object - * can be passed as initialValues parameter to a ReduxForm that contains - * checkbox inputs. - * - * @param {Array} array An array of strings - * - * @return {Object} An object containing the array items as keys and all - * the values set to true - * - * A complementary function to formValuesToArray. - * - */ -export const arrayToFormValues = array => { - return array.reduce((map, key) => { - map[key] = true; - return map; - }, {}); -}; - -/** - * Converts a values object received form a Redux Form containing - * checkboxes into an array that contains only the values. - * - * @param {Object} formValues A values object received from a Redux Form - * - * @return {Array} An array containing the keys of the formValues parameter - * - * A complementary function to arrayToFormValues. - */ -export const formValuesToArray = formValues => { - const entries = toPairs(formValues); - return entries.filter(entry => entry[1] === true).map(entry => entry[0]); -}; diff --git a/src/util/data.test.js b/src/util/data.test.js index aa9ed9df..f19e5e73 100644 --- a/src/util/data.test.js +++ b/src/util/data.test.js @@ -328,38 +328,4 @@ describe('data utils', () => { ]); }); }); - - describe('arrayToFormValues()', () => { - it('converts an empty array', () => { - expect(arrayToFormValues([])).toEqual({}); - }); - it('converts multiple values', () => { - const array = ['one', 'two', 'three']; - const formValues = { one: true, two: true, three: true }; - expect(arrayToFormValues(array)).toEqual(formValues); - }); - }); - - describe('formValuesToArray()', () => { - it('converts an empty object', () => { - expect(formValuesToArray({})).toEqual([]); - }); - it('converts multiple values', () => { - const formValues = { one: true, two: true, three: true }; - const array = ['one', 'two', 'three']; - expect(formValuesToArray(formValues)).toEqual(array); - }); - it('it skips non-true values form input object', () => { - const formValues = { - one: true, - two: null, - three: 'true', - four: false, - five: '', - six: true, - }; - const array = ['one', 'six']; - expect(formValuesToArray(formValues)).toEqual(array); - }); - }); });