@spothero/ui 15.1.0 → 15.1.1

package/styles/DateTime/DatePicker.jsx

@@ -1,281 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import uuidV4 from 'uuid/v4';
-import {document} from 'ssr-window';
-import TetherComponent from 'react-tether';
-import omit from 'lodash/omit';
-import IconCalendar from '@spothero/icons/calendar';
-import DOMUtils from '@spothero/utils/dom';
-import DatePickerCalendar from './DatePickerCalendar';
-import TextInput from '../TextInput/TextInput';
-import Portal from '../Portal/Portal';
-
-export default class DatePicker extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique ID which is used to identify this element for accessibility purposes on the client as well as the server. */
-        id: PropTypes.string.isRequired,
-        /** Additional class(es) to add to the the underlying calendar component. */
-        calendarClassName: PropTypes.string,
-        /** A unique name which is used to identify this element. If belonging to a form this is used as the key for serialization and is required. */
-        name: PropTypes.string,
-        /** A function that alters how the selected date is displayed in the input field. Takes the date in MM/DD/YYYY format and should return a string with the new format. */
-        displayFormat: PropTypes.func,
-        /** A string in the format 'MM/DD/YYYY' representing the date which should be selected. */
-        selectedDate: PropTypes.string,
-        /** Whether to show the calendar icon in the input field. */
-        useIcon: PropTypes.bool,
-        /** If using the icon, whether it should appear on the left or right side of the input field. */
-        iconPosition: PropTypes.oneOf(['left', 'right']),
-        /** Whether the DatePicker is disabled or not. */
-        disabled: PropTypes.bool,
-        /** A custom label (typically a Label component) to display above the input. */
-        label: PropTypes.element,
-        /** The placeholder text to show in the input before a selection is made. */
-        placeholder: PropTypes.string,
-        /** Whether the field should be auto focused when mounted. */
-        autoFocus: PropTypes.bool,
-        /** Whether the field should be focused when the component receives new prop of focus={true}. */
-        focus: PropTypes.bool,
-        /** Whether to disable days before today. */
-        disablePast: PropTypes.bool,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days before it should be disabled in the calendar. */
-        disableBefore: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days after it should be disabled in the calendar. */
-        disableAfter: PropTypes.string,
-        /** Puts the calendar in the center of the page with a shim behind it. */
-        useTetherShim: PropTypes.bool,
-        /** Whether to set the initial month to show in the calendar to the same month as the selected day falls within when a day is selected. */
-        overrideInitialMonthWithSelected: PropTypes.bool,
-        /**
-         * Function to execute when the selected date changes.
-         *
-         * @param {String} selectedDate - The selected date in the format 'MM/DD/YYYY'.
-         */
-        onChange: PropTypes.func,
-    };
-    static defaultProps = {
-        disablePast: true,
-        useIcon: true,
-        overrideInitialMonthWithSelected: true,
-        iconPosition: 'right',
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {id, selectedDate} = props;
-
-        if (!id) {
-            throw new Error(
-                `The prop 'id' is required to make DatePicker accessible for users using assistive technologies such as screen readers. Check the render method of DatePicker.`
-            );
-        }
-
-        this._TETHER_CLASS = `DatePicker-tether-${id}`;
-
-        this.state = {
-            showCalendar: false,
-            selectedDate,
-            tetherKey: uuidV4(),
-        };
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {useTetherShim, onChange} = this.props;
-        const {showCalendar, selectedDate} = this.state;
-        const {
-            showCalendar: prevShowCalendar,
-            selectedDate: prevSelectedDate,
-        } = prevState;
-
-        if (showCalendar && showCalendar !== prevShowCalendar) {
-            document.body.addEventListener('mousedown', this._onBodyClick);
-            document.body.addEventListener('touchstart', this._onBodyClick);
-
-            if (useTetherShim) {
-                DOMUtils.addClass('html', 'DatePicker-tether-shim-open');
-            }
-        } else {
-            this._removeBodyClickListener();
-        }
-
-        if (selectedDate !== prevSelectedDate && onChange) {
-            onChange(selectedDate);
-        }
-    }
-
-    componentWillUnmount() {
-        this._removeBodyClickListener();
-    }
-
-    _onBodyClick = evt => {
-        if (
-            (!DOMUtils.parent(evt.target, 'FormElement-control') ||
-                !DOMUtils.parent(evt.target, `.DatePicker-${this.props.id}`)) &&
-            !DOMUtils.parent(evt.target, `.${this._TETHER_CLASS}`)
-        ) {
-            this.setState({
-                showCalendar: false,
-            });
-
-            this.node.blur();
-        }
-    };
-
-    _onInputFocus = evt => {
-        this.setState({
-            showCalendar: true,
-        });
-    };
-
-    _onInputChange = selectedDate => {
-        this.setState({
-            selectedDate,
-        });
-    };
-
-    _onDateChange = selectedDate => {
-        this.setState({
-            showCalendar: false,
-            selectedDate,
-            tetherKey: uuidV4(),
-        });
-    };
-
-    _removeBodyClickListener() {
-        document.body.removeEventListener('mousedown', this._onBodyClick);
-        document.body.removeEventListener('touchstart', this._onBodyClick);
-
-        if (this.props.useTetherShim) {
-            DOMUtils.removeClass('html', 'DatePicker-tether-shim-open');
-        }
-    }
-
-    /**
-     * Getter for the input DOM element.
-     *
-     * @public
-     * @returns {Element} - The input element.
-     */
-    get node() {
-        return this._textInput.node;
-    }
-    render() {
-        const {
-            className,
-            id,
-            calendarClassName,
-            disabled,
-            disablePast,
-            disableBefore,
-            disableAfter,
-            label,
-            name,
-            useIcon,
-            iconPosition,
-            placeholder,
-            useTetherShim,
-            autoFocus,
-            focus,
-            overrideInitialMonthWithSelected,
-            displayFormat,
-            ...attrs
-        } = this.props;
-
-        const spreadProps = omit(attrs, ['onChange']);
-        const {showCalendar, tetherKey, selectedDate} = this.state;
-        const classes = classNames(
-            'DatePicker',
-            `DatePicker-${id}`,
-            {'DatePicker-disabled': disabled},
-            className
-        );
-        const containerClasses = classNames('DatePicker-input-container', {
-            'DatePicker-input-container-with-icon': useIcon,
-        });
-        const tetherClasses = classNames(
-            'DatePicker-tether',
-            {'DatePicker-tether-centered-with-shim': useTetherShim},
-            this._TETHER_CLASS
-        );
-        const inputDisplay =
-            displayFormat && selectedDate
-                ? displayFormat(selectedDate)
-                : selectedDate;
-
-        /* eslint-disable react/jsx-no-bind */
-        return (
-            <div className={classes}>
-                <div className={containerClasses}>
-                    {label}
-                    <TetherComponent
-                        key={tetherKey}
-                        className={tetherClasses}
-                        attachment="top left"
-                        targetAttachment="bottom left"
-                        constraints={[
-                            {
-                                to: 'window',
-                                pin: true,
-                            },
-                        ]}
-                        renderTarget={ref => {
-                            return (
-                                <span ref={ref}>
-                                    <TextInput
-                                        ref={node => {
-                                            this._textInput = node;
-                                        }}
-                                        name={name}
-                                        disabled={disabled}
-                                        defaultValue={inputDisplay}
-                                        onFocus={this._onInputFocus}
-                                        icon={
-                                            useIcon ? (
-                                                <IconCalendar className="Icon-calendar" />
-                                            ) : null
-                                        }
-                                        iconPosition={iconPosition}
-                                        autoFocus={autoFocus}
-                                        focus={focus}
-                                        placeholder={placeholder}
-                                        readOnly
-                                        // TODO: Figure out why `aria-label` attribute gets removed after spreading
-                                        {...spreadProps}
-                                    />
-                                </span>
-                            );
-                        }}
-                        renderElement={ref => {
-                            return (
-                                showCalendar && (
-                                    <DatePickerCalendar
-                                        ref={ref}
-                                        className={calendarClassName}
-                                        onChange={this._onDateChange}
-                                        selectedDate={selectedDate}
-                                        disablePast={disablePast}
-                                        disableBefore={disableBefore}
-                                        disableAfter={disableAfter}
-                                        overrideInitialMonthWithSelected={
-                                            overrideInitialMonthWithSelected
-                                        }
-                                    />
-                                )
-                            );
-                        }}
-                    />
-                    {useTetherShim && showCalendar && (
-                        <Portal>
-                            <div className="DatePicker-calendar-shim" />
-                        </Portal>
-                    )}
-                </div>
-            </div>
-        );
-        /* eslint-ensable react/jsx-no-bind */
-    }
-}

package/styles/DateTime/DatePicker.spec.js

@@ -1,186 +0,0 @@
-import moment from 'moment';
-import DateTimeAssertions from './date-time-assertions';
-
-describe('<DatePicker />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            const dateTodayFormatted = moment().format('MM/DD/YYYY');
-
-            beforeEach(() => {
-                cy.visitStory('v1/DatePicker/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onDatePickerChange = selectedDate => {
-                            console.log('selected date:', selectedDate); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onDatePickerChange').as(
-                            'onChange'
-                        );
-                    },
-                })
-                    .get('.FormElement-item')
-                    .as('asInput');
-            });
-
-            it('Renders properly', () => {
-                cy.get('.DatePicker')
-                    .should('have.class', 'DatePicker')
-                    .find('.Icon-calendar');
-            });
-
-            it('Shows the calendar on focus', () => {
-                cy.get('@asInput').focus().get('.DatePicker-calendar');
-            });
-
-            it('Populates the input with the default selected date', () => {
-                cy.get('@asInput')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('@asInput')
-                    .should('have.value', dateTodayFormatted);
-            });
-
-            it('Disables all dates in the past', () => {
-                DateTimeAssertions.pastDatesDisabled('.FormElement-item');
-            });
-
-            it('Fires `onChange` properly', () => {
-                cy.get('@asInput')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('@onChange')
-                    .should('be.calledWith', dateTodayFormatted);
-            });
-        });
-
-        context('Classes', () => {
-            it('Has custom class names on DatePicker and DatePickerCalendar components', () => {
-                cy.visitStory('v1/DatePicker/Display', 'Classes')
-                    .get('.DatePickerClasses')
-                    .should('have.class', 'DatePickerClasses')
-                    .should('have.class', 'DatePickerClasses2')
-                    .get('.FormElement-item')
-                    .focus()
-                    .get('.DatePicker-calendar')
-                    .should('have.class', 'custom-calendar-class');
-            });
-        });
-
-        context('Name', () => {
-            it('Has name property', () => {
-                cy.visitStory('v1/DatePicker/Display', 'Name')
-                    .get('.FormElement-item')
-                    .should('have.attr', 'name', 'date');
-            });
-        });
-
-        context('Selected Date', () => {
-            it('Has pre-selected date', () => {
-                cy.visitStory('v1/DatePicker/Display', 'SelectedDate')
-                    .get('.FormElement-item')
-                    .should('have.value', '01/01/2040');
-            });
-        });
-
-        context('Display Format', () => {
-            it('Formats the date displayed based on the given format method', () => {
-                cy.visitStory('v1/DatePicker/Display', 'DisplayFormat')
-                    .get('.FormElement-item')
-                    .should('have.value', 'Today');
-            });
-        });
-
-        context('Icon', () => {
-            it('Has no icon', () => {
-                cy.visitStory('v1/DatePicker/Display', 'Icon')
-                    .get('.Icon-calendar')
-                    .should('not.exist');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Has a disabled form element and does not open the calendar on focus', () => {
-                cy.visitStory('v1/DatePicker/Display', 'Disabled')
-                    .get('.FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled');
-            });
-        });
-
-        context('Label', () => {
-            it('Has a label', () => {
-                cy.visitStory('v1/DatePicker/Display', 'WithLabel')
-                    .get('.Label')
-                    .contains('Pick a date yo');
-            });
-        });
-
-        context('Placeholder', () => {
-            it('Has a placeholder', () => {
-                cy.visitStory('v1/DatePicker/Display', 'Placeholder')
-                    .get('.FormElement-item')
-                    .should('have.attr', 'placeholder', 'Select Date');
-            });
-        });
-
-        context('Spread Attributes', () => {
-            it('Has "required" and "type" attributes', () => {
-                cy.visitStory('v1/DatePicker/Display', 'SpreadAttributes')
-                    .get('.FormElement-item')
-                    .should(formEl => {
-                        expect(formEl).to.have.attr('required');
-                        expect(formEl).to.have.attr('type', 'tel');
-                    });
-            });
-        });
-    });
-
-    context('Interaction', () => {
-        context('Auto Focus', () => {
-            it('Automatically focuses the input field displaying the calendar', () => {
-                cy.visitStory('v1/DatePicker/Interaction', 'AutoFocus').get(
-                    '.DatePicker-calendar'
-                );
-            });
-        });
-
-        context('Focus', () => {
-            it('Applies autoFocus and focus settings properly', () => {
-                cy.visitStory('v1/DatePicker/Interaction', 'Focus')
-                    .get('.add-focus')
-                    .click()
-                    .focused()
-                    .should('have.class', 'FormElement-item');
-            });
-        });
-
-        context('Enable/Disable Dates', () => {
-            it('Enables dates in the past when disablePast is false', () => {
-                cy.visitStory('v1/DatePicker/Interaction', 'EnablePastDates');
-
-                DateTimeAssertions.pastDatesEnabled('.FormElement-item');
-            });
-
-            it('Disables dates before disableBefore and after disableAfter', () => {
-                cy.visitStory(
-                    'v1/DatePicker/Interaction',
-                    'DisableDatesBeforeAfter'
-                );
-
-                DateTimeAssertions.datesDisabledBeforeAndAfter(
-                    '.FormElement-item'
-                );
-            });
-        });
-
-        context('Shim', () => {
-            it('Has a calendar in the center of the page with a shim behind it', () => {
-                cy.visitStory('v1/DatePicker/Interaction', 'Shim')
-                    .get('.FormElement-item')
-                    .focus()
-                    .get('.DatePicker-tether-centered-with-shim');
-            });
-        });
-    });
-});

package/styles/DateTime/DatePickerCalendar.jsx

@@ -1,170 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import moment from 'moment';
-import DayPicker, {DateUtils as DayPickerDateUtils} from 'react-day-picker';
-import DateUtils from '@spothero/utils/date';
-import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
-
-const DATE = new Date();
-
-export default class DatePickerCalendar extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /**
-         * Function to execute when the selected date changes.
-         *
-         * @param {String} selectedDate - The selected date in the format 'MM/DD/YYYY'.
-         */
-        onChange: PropTypes.func,
-        /** A string in the format 'MM/DD/YYYY' representing the date which should be selected on the calendar. */
-        selectedDate: PropTypes.string,
-        /** A date object representing the initial month to show on the calendar. */
-        initialMonth: PropTypes.instanceOf(Date),
-        /** Whether to disable the days on the calendar that are in the past. */
-        disablePast: PropTypes.bool,
-        /** A string in the format 'MM/DD/YYYY' representing the date where any day prior is disabled. */
-        disableBefore: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date where any day past is disabled. */
-        disableAfter: PropTypes.string,
-        /** Whether to set the initial month to show in the calendar to the same month as the selected day falls within when a selectedDate is passed. */
-        overrideInitialMonthWithSelected: PropTypes.bool,
-    };
-    static defaultProps = {
-        selectedDate: '',
-        initialMonth: DATE,
-        disablePast: true,
-        overrideInitialMonthWithSelected: true,
-    };
-    state = {
-        selectedDate: this.props.selectedDate,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._weekdayTitles = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-    }
-
-    _onDaySelected = (day, {selected, disabled}, evt) => {
-        if (disabled) {
-            return;
-        }
-
-        const {onChange} = this.props;
-        const selectedDate = moment(day).format('MM/DD/YYYY');
-
-        this.setState({
-            selectedDate,
-        });
-
-        if (onChange) {
-            onChange(selectedDate);
-        }
-    };
-
-    _modifierSelected = day => {
-        const {selectedDate} = this.state;
-
-        if (!isEmpty(selectedDate)) {
-            return DayPickerDateUtils.isSameDay(
-                DateUtils.getAsDate(selectedDate),
-                day
-            );
-        } else {
-            return null;
-        }
-    };
-
-    _modifierDisabled = day => {
-        const {disablePast, disableBefore, disableAfter} = this.props;
-        let isDayDisabled = false;
-        let disableDay = false;
-
-        if (disableBefore) {
-            disableDay = DateUtils.isBefore(
-                day,
-                DateUtils.getAsDate(disableBefore)
-            );
-            isDayDisabled = disableDay;
-        }
-
-        if (disableAfter && !isDayDisabled) {
-            disableDay = DateUtils.isAfter(
-                day,
-                DateUtils.getAsDate(disableAfter)
-            );
-            isDayDisabled = disableDay;
-        }
-
-        if (disablePast && !isDayDisabled) {
-            disableDay = DayPickerDateUtils.isPastDay(day);
-        }
-
-        return disableDay;
-    };
-
-    _renderDayMarkup = day => {
-        const m = moment(day);
-        const date = `${m.format('MM')}/${m.format('DD')}/${m.format('YYYY')}`;
-
-        return <span data-date={date}>{day.getDate()}</span>;
-    };
-
-    render() {
-        const {
-            className,
-            initialMonth,
-            disablePast,
-            disableBefore,
-            disableAfter,
-            overrideInitialMonthWithSelected,
-        } = this.props;
-        const {selectedDate} = this.state;
-        const classes = classNames('DatePicker-calendar', className);
-        let firstMonth = initialMonth;
-        let fromMonth = disablePast ? DATE : null;
-        let toMonth = null;
-
-        if (disableBefore) {
-            const beforeDate = DateUtils.getAsDate(disableBefore);
-
-            if (fromMonth) {
-                if (DateUtils.isAfter(beforeDate, fromMonth)) {
-                    fromMonth = beforeDate;
-                }
-            } else {
-                fromMonth = beforeDate;
-            }
-
-            firstMonth = fromMonth;
-        }
-
-        if (disableAfter) {
-            toMonth = DateUtils.getAsDate(disableAfter);
-        }
-
-        if (selectedDate && overrideInitialMonthWithSelected) {
-            firstMonth = DateUtils.getAsDate(selectedDate);
-        }
-
-        return (
-            <div className={classes}>
-                <DayPicker
-                    selectedDays={this._modifierSelected}
-                    disabledDays={this._modifierDisabled}
-                    onDayClick={this._onDaySelected}
-                    fromMonth={fromMonth}
-                    toMonth={toMonth}
-                    initialMonth={firstMonth}
-                    renderDay={this._renderDayMarkup}
-                    weekdaysShort={this._weekdayTitles}
-                    navbarElement={<DatePickerCalendarNavigation />}
-                    showOutsideDays
-                />
-            </div>
-        );
-    }
-}

package/styles/DateTime/DatePickerCalendarNavigation.jsx

@@ -1,44 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-import {NavbarPropTypes} from 'react-day-picker';
-import IconChevronLeft from '@spothero/icons/chevron-left';
-import IconChevronRight from '@spothero/icons/chevron-right';
-import Button from 'v1/components/Button/Button';
-
-export default class DatePickerCalendarNavigation extends Component {
-    static propTypes = NavbarPropTypes;
-
-    _onPreviousClick = () => {
-        this.props.onPreviousClick();
-    };
-
-    _onNextClick = () => {
-        this.props.onNextClick();
-    };
-
-    render() {
-        const {className, showPreviousButton, showNextButton} = this.props;
-        const classes = classNames('DatePickerCalendarNavigation', className);
-
-        return (
-            <div className={classes}>
-                {showPreviousButton && (
-                    <Button
-                        className="DayPicker-NavButton DayPicker-NavButton--prev"
-                        onClick={this._onPreviousClick}
-                    >
-                        <IconChevronLeft />
-                    </Button>
-                )}
-                {showNextButton && (
-                    <Button
-                        className="DayPicker-NavButton DayPicker-NavButton--next"
-                        onClick={this._onNextClick}
-                    >
-                        <IconChevronRight />
-                    </Button>
-                )}
-            </div>
-        );
-    }
-}