@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/src/components/date-picker/DatePicker.stories.tsx

@@ -1,118 +0,0 @@
-import { DatePicker, GridColumn } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-
-export default {
-    title: 'LumX components/date-picker/DatePicker',
-    component: DatePicker,
-    argTypes: {
-        onChange: { action: true },
-    },
-    decorators: [withValueOnChange(), withNestedProps()],
-};
-
-/**
- * Default date picker
- */
-export const Default = {
-    args: {
-        defaultMonth: new Date('2023-02'),
-        'nextButtonProps.label': 'Next month',
-        'previousButtonProps.label': 'Previous month',
-    },
-};
-
-/**
- * Demonstrate variations based on the given locale code
- */
-export const LocalesVariations = {
-    ...Default,
-    decorators: [
-        withCombinations({
-            combinations: { sections: { key: 'locale', options: ['fr', 'en-US', 'ar', 'zh-HK', 'ar-eg'] } },
-        }),
-        withWrapper({ maxColumns: 5, itemMinWidth: 300 }, GridColumn),
-    ],
-};
-
-/**
- * Demo LumX CSS theming variables
- */
-export const Theming = {
-    args: { ...Default.args, value: new Date('2023-02-15') },
-    decorators: [
-        withTheming({
-            values: `
-            --lumx-button-border-radius: 10px;
-
-            /////////////
-            --lumx-button-emphasis-low-state-default-padding-horizontal: 1px;
-            --lumx-button-emphasis-low-state-default-border-width: 1px;
-            --lumx-button-emphasis-low-state-hover-padding-horizontal: 2px;
-            --lumx-button-emphasis-low-state-hover-border-width: 1px;
-            --lumx-button-emphasis-low-state-active-padding-horizontal: 3px;
-            --lumx-button-emphasis-low-state-active-border-width: 1px;
-
-            --lumx-button-emphasis-low-state-default-theme-light-background-color: rgb(from green r g b / 10%);
-            --lumx-button-emphasis-low-state-default-theme-light-color: black;
-            --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
-            --lumx-button-emphasis-low-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-light-color: crimson;
-            --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
-            --lumx-button-emphasis-low-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-light-color: firebrick;
-            --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
-
-            /////////////
-            --lumx-button-emphasis-selected-state-default-padding-horizontal: 1px;
-            --lumx-button-emphasis-selected-state-default-border-width: 1px;
-            --lumx-button-emphasis-selected-state-hover-padding-horizontal: 2px;
-            --lumx-button-emphasis-selected-state-hover-border-width: 1px;
-            --lumx-button-emphasis-selected-state-active-padding-horizontal: 3px;
-            --lumx-button-emphasis-selected-state-active-border-width: 1px;
-
-            --lumx-button-emphasis-selected-state-default-theme-light-background-color: rgb(from green r g b / 50%);
-            --lumx-button-emphasis-selected-state-default-theme-light-color: green;
-            --lumx-button-emphasis-selected-state-default-theme-light-border-color: currentcolor;
-            --lumx-button-emphasis-selected-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
-            --lumx-button-emphasis-selected-state-hover-theme-light-color: crimson;
-            --lumx-button-emphasis-selected-state-hover-theme-light-border-color: currentcolor;
-            --lumx-button-emphasis-selected-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
-            --lumx-button-emphasis-selected-state-active-theme-light-color: firebrick;
-            --lumx-button-emphasis-selected-state-active-theme-light-border-color: currentcolor;
-
-            /////////
-            --lumx-text-field-input-min-height: 26px;
-            --lumx-text-field-input-padding-horizontal: 5px;
-            --lumx-text-field-input-border-radius: 10px;
-            --lumx-text-field-state-default-input-border-top-width: 0;
-            --lumx-text-field-state-default-input-border-right-width: 0;
-            --lumx-text-field-state-default-input-border-bottom-width: 0;
-            --lumx-text-field-state-default-input-border-left-width: 0;
-            --lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-default-theme-light-input-background-color: rgb(from green r g b / 10%);
-            --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4);
-            --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-hover-input-border-top-width: 1px;
-            --lumx-text-field-state-hover-input-border-right-width: 1px;
-            --lumx-text-field-state-hover-input-border-bottom-width: 1px;
-            --lumx-text-field-state-hover-input-border-left-width: 1px;
-            --lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-hover-theme-light-input-background-color: rgb(from green r g b / 30%);
-            --lumx-text-field-state-hover-theme-light-input-border-color: green;
-            --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-focus-input-border-top-width: 2px;
-            --lumx-text-field-state-focus-input-border-right-width: 2px;
-            --lumx-text-field-state-focus-input-border-bottom-width: 2px;
-            --lumx-text-field-state-focus-input-border-left-width: 2px;
-            --lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-focus-theme-light-input-background-color: rgb(from green r g b / 50%);
-            --lumx-text-field-state-focus-theme-light-input-border-color: green;
-            --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
-        `,
-        }),
-    ],
-};

package/src/components/date-picker/DatePicker.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { DatePickerProps } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-
-import { DatePicker } from '.';
-import { CLASSNAME } from './constants';
-
-const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
-    getYearDisplayName: () => 'année',
-}));
-
-const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
-    const props: DatePickerProps = {
-        locale: 'fr',
-        onChange: jest.fn(),
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        ...propsOverride,
-    };
-    render(<DatePicker {...props} />);
-    const datePicker = getByClassName(document.body, CLASSNAME);
-    return { props, datePicker };
-};
-
-describe(`<${DatePicker.displayName}>`, () => {
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardRef: 'datePicker',
-    });
-});

package/src/components/date-picker/DatePicker.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-
-import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
-import { isDateValid } from '@lumx/react/utils/date/isDateValid';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { CLASSNAME, COMPONENT_NAME } from './constants';
-import { DatePickerControlled } from './DatePickerControlled';
-import { DatePickerProps } from './types';
-
-/**
- * DatePicker component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DatePicker = forwardRef<DatePickerProps, HTMLDivElement>((props, ref) => {
-    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
-
-    let referenceDate = value || defaultMonth || new Date();
-    if (!isDateValid(referenceDate)) {
-        // eslint-disable-next-line no-console
-        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
-        referenceDate = new Date();
-    }
-
-    const [selectedMonth, setSelectedMonth] = useState(referenceDate);
-    const setPrevMonth = () => setSelectedMonth((current) => addMonthResetDay(current, -1));
-    const setNextMonth = () => setSelectedMonth((current) => addMonthResetDay(current, +1));
-
-    const onDatePickerChange = (newDate?: Date) => {
-        onChange(newDate);
-    };
-
-    return (
-        <DatePickerControlled
-            ref={ref}
-            {...forwardedProps}
-            defaultMonth={defaultMonth}
-            locale={locale}
-            value={value}
-            onPrevMonthChange={setPrevMonth}
-            onNextMonthChange={setNextMonth}
-            selectedMonth={selectedMonth}
-            onChange={onDatePickerChange}
-            onMonthChange={setSelectedMonth}
-        />
-    );
-});
-DatePicker.displayName = COMPONENT_NAME;
-DatePicker.className = CLASSNAME;

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-
-import { render, screen, waitFor } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import userEvent from '@testing-library/user-event';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-
-import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
-import { CLASSNAME } from './constants';
-
-const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
-    getYearDisplayName: () => 'année',
-}));
-
-type SetupProps = Partial<DatePickerControlledProps>;
-
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: DatePickerControlledProps = {
-        locale: 'fr',
-        onChange: jest.fn(),
-        onNextMonthChange: jest.fn(),
-        onPrevMonthChange: jest.fn(),
-        selectedMonth: mockedDate,
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        onMonthChange: jest.fn(),
-        ...propsOverride,
-    };
-    render(<DatePickerControlled {...props} />);
-    const datePickerControlled = getByClassName(document.body, CLASSNAME);
-    return { props, datePickerControlled };
-};
-
-const queries = {
-    getYear: () =>
-        screen.getByRole('spinbutton', {
-            name: /année/i,
-        }),
-    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, VISUALLY_HIDDEN),
-};
-
-describe(`<${DatePickerControlled.displayName}>`, () => {
-    it('should render', () => {
-        const { datePickerControlled } = setup();
-        expect(datePickerControlled).toBeInTheDocument();
-
-        const month = queryByClassName(datePickerControlled, `${CLASSNAME}__month`);
-        expect(month).toHaveTextContent('février');
-
-        expect(queries.getYear()).toBeInTheDocument();
-        expect(queries.getYear()).toHaveAttribute('value', '2017');
-        expect(queries.getYear()).toHaveAttribute('aria-label', 'année');
-
-        const toolbar = getByClassName(document.body, 'lumx-toolbar__label');
-        expect(queries.getAccessibleMonthYear(toolbar)).toBeInTheDocument();
-        expect(queries.getAccessibleMonthYear(toolbar)).toHaveTextContent('février 2017');
-
-        const selected = queryByClassName(datePickerControlled, `lumx-button--is-selected`);
-        expect(selected).toBe(screen.queryByRole('button', { name: /22 février 2017/i }));
-    });
-
-    it('should validate year when pressing Enter', async () => {
-        const { datePickerControlled, props } = setup();
-        expect(datePickerControlled).toBeInTheDocument();
-
-        expect(queries.getYear()).toHaveAttribute('value', '2017');
-
-        await userEvent.type(queries.getYear(), '{Backspace}6{Enter}'); // set year to 2016
-        await waitFor(() => expect(props.onMonthChange).toHaveBeenCalledTimes(1));
-        expect(props.onMonthChange).toHaveBeenCalledWith(new Date(1454284800000)); // 2017 - 12 months = 2016
-    });
-
-    it('should validate year when on Blur', async () => {
-        const { datePickerControlled, props } = setup();
-        expect(datePickerControlled).toBeInTheDocument();
-
-        expect(queries.getYear()).toHaveAttribute('value', '2017');
-
-        await userEvent.type(queries.getYear(), '{Backspace}5'); // change value to 2015
-        await userEvent.tab(); // set year to 2015
-        await waitFor(() => expect(props.onMonthChange).toHaveBeenCalledTimes(1));
-        expect(props.onMonthChange).toHaveBeenCalledWith(new Date(1422748800000)); // 2017 - 24 months = 2015
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardRef: 'datePickerControlled',
-    });
-});

package/src/components/date-picker/DatePickerControlled.tsx

@@ -1,259 +0,0 @@
-import React, { KeyboardEventHandler } from 'react';
-
-import classNames from 'classnames';
-
-import {
-    Button,
-    DatePickerProps,
-    Emphasis,
-    FlexBox,
-    IconButton,
-    Text,
-    TextField,
-    TextFieldProps,
-    Toolbar,
-} from '@lumx/react';
-import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
-import { isSameDay } from '@lumx/react/utils/date/isSameDay';
-import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
-import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
-import { Locale } from '@lumx/react/utils/locale/types';
-import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
-import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
-import { onEnterPressed } from '@lumx/core/js/utils';
-import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
-import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { CLASSNAME } from './constants';
-
-/**
- * Defines the props of the component.
- */
-export interface DatePickerControlledProps extends DatePickerProps {
-    /** Selected month to display. */
-    selectedMonth: Date;
-    /** On previous month change callback. */
-    onPrevMonthChange(): void;
-    /** On next month change callback. */
-    onNextMonthChange(): void;
-    /** On month/year change callback. */
-    onMonthChange?: (newMonth: Date) => void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DatePickerControlled';
-
-/**
- * DatePickerControlled component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DatePickerControlled = forwardRef<DatePickerControlledProps, HTMLDivElement>((props, ref) => {
-    const {
-        locale = getCurrentLocale(),
-        maxDate,
-        minDate,
-        nextButtonProps,
-        onChange,
-        onNextMonthChange,
-        onPrevMonthChange,
-        previousButtonProps,
-        selectedMonth,
-        todayOrSelectedDateRef,
-        value,
-        onMonthChange,
-        style,
-    } = props;
-    const { weeks, weekDays } = React.useMemo(() => {
-        const localeObj = parseLocale(locale) as Locale;
-        return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
-    }, [locale, minDate, maxDate, selectedMonth]);
-
-    const selectedYear = selectedMonth.getFullYear();
-    const formattedYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric' }).slice(0, 4);
-    const [currentYear, setCurrentYear] = React.useState(String(selectedYear));
-
-    // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
-    const updateMonthOffset = React.useCallback(
-        (newYearValue: string) => {
-            const yearNumber = Number(newYearValue);
-            if (yearNumber < 0 && yearNumber >= 9999) {
-                return;
-            }
-
-            const previousYearNumber = selectedMonth.getFullYear();
-            const offset = (yearNumber - previousYearNumber) * 12;
-            onMonthChange?.(addMonthResetDay(selectedMonth, offset));
-        },
-        [selectedMonth, onMonthChange],
-    );
-
-    const onYearChange = React.useCallback<TextFieldProps['onChange']>(
-        (newYearValue, _, event) => {
-            setCurrentYear(newYearValue);
-
-            // Detect if change is coming from the spin up/down arrows
-            const inputType = (event?.nativeEvent as any)?.inputType;
-            if (
-                // Chrome/Safari
-                !inputType ||
-                // Firefox
-                inputType === 'insertReplacementText'
-            ) {
-                updateMonthOffset(newYearValue);
-            }
-        },
-        [updateMonthOffset],
-    );
-
-    const updateYear = React.useCallback(() => {
-        updateMonthOffset(currentYear);
-    }, [updateMonthOffset, currentYear]);
-
-    const updateYearOnEnterPressed: KeyboardEventHandler = React.useMemo(
-        () => onEnterPressed(updateYear),
-        [updateYear],
-    );
-
-    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
-
-    // Update current year when selected year changes
-    React.useEffect(() => {
-        setCurrentYear(String(selectedYear));
-    }, [selectedYear]);
-
-    const prevSelectedMonth = usePreviousValue(selectedMonth);
-    const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
-
-    // Only set the aria-live after the month has changed otherwise it can get announced on mount when used in the popover dialog
-    const [labelAriaLive, setLabelAriaLive] = React.useState<'polite'>();
-    React.useEffect(() => {
-        if (monthHasChanged) setLabelAriaLive('polite');
-    }, [monthHasChanged]);
-
-    const yearLabel = getYearDisplayName(locale);
-
-    return (
-        <div ref={ref} className={`${CLASSNAME}`} style={style}>
-            <Toolbar
-                className={`${CLASSNAME}__toolbar`}
-                after={
-                    <IconButton
-                        {...nextButtonProps}
-                        emphasis={Emphasis.low}
-                        icon={mdiChevronRight}
-                        onClick={onNextMonthChange}
-                    />
-                }
-                before={
-                    <IconButton
-                        {...previousButtonProps}
-                        emphasis={Emphasis.low}
-                        icon={mdiChevronLeft}
-                        onClick={onPrevMonthChange}
-                    />
-                }
-                label={
-                    <>
-                        <span aria-live={labelAriaLive} className={onMonthChange ? VISUALLY_HIDDEN : ''} dir="auto">
-                            {monthYear}
-                        </span>
-                        {onMonthChange && (
-                            <FlexBox
-                                className={`${CLASSNAME}__month`}
-                                orientation="horizontal"
-                                hAlign="center"
-                                gap="regular"
-                                vAlign="center"
-                                dir="auto"
-                            >
-                                {RegExp(`(.*)(${formattedYear})(.*)`)
-                                    .exec(monthYear)
-                                    ?.slice(1)
-                                    .filter((part) => part !== '')
-                                    .map((part) =>
-                                        part === formattedYear ? (
-                                            <TextField
-                                                value={currentYear}
-                                                aria-label={yearLabel}
-                                                onChange={onYearChange}
-                                                type="number"
-                                                max={9999}
-                                                min={0}
-                                                onBlur={updateYear}
-                                                onKeyPress={updateYearOnEnterPressed}
-                                                key="year"
-                                                className={`${CLASSNAME}__year`}
-                                            />
-                                        ) : (
-                                            <Text as="p" key={part}>
-                                                {part}
-                                            </Text>
-                                        ),
-                                    )}
-                            </FlexBox>
-                        )}
-                    </>
-                }
-            />
-            <div className={`${CLASSNAME}__calendar`}>
-                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>
-                    {weekDays.map(({ letter, number, long }) => (
-                        <div key={number} className={`${CLASSNAME}__day-wrapper`}>
-                            <span className={`${CLASSNAME}__week-day`} aria-hidden>
-                                {letter.toLocaleUpperCase()}
-                            </span>
-                            <span className="visually-hidden">{long}</span>
-                        </div>
-                    ))}
-                </div>
-
-                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>
-                    {weeks.flatMap((week, weekIndex) => {
-                        return weekDays.map((weekDay, dayIndex) => {
-                            const { date, isOutOfRange } = week[weekDay.number] || {};
-                            const key = `${weekIndex}-${dayIndex}`;
-                            const isToday = !isOutOfRange && date && isSameDay(date, new Date());
-                            const isSelected = date && value && isSameDay(value, date);
-
-                            return (
-                                <div key={key} className={`${CLASSNAME}__day-wrapper`}>
-                                    {date && (
-                                        <Button
-                                            ref={isSelected || (!value && isToday) ? todayOrSelectedDateRef : null}
-                                            className={classNames(`${CLASSNAME}__month-day`, {
-                                                [`${CLASSNAME}__month-day--is-today`]: isToday,
-                                            })}
-                                            disabled={isOutOfRange}
-                                            isSelected={isSelected}
-                                            emphasis="low"
-                                            onClick={() => onChange(date)}
-                                        >
-                                            <span aria-hidden>{formatDayNumber(locale, date)}</span>
-                                            <span className={VISUALLY_HIDDEN}>
-                                                {date.toLocaleDateString(locale, {
-                                                    day: 'numeric',
-                                                    month: 'long',
-                                                    year: 'numeric',
-                                                })}
-                                            </span>
-                                        </Button>
-                                    )}
-                                </div>
-                            );
-                        });
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-});
-DatePickerControlled.displayName = COMPONENT_NAME;
-DatePickerControlled.className = CLASSNAME;

package/src/components/date-picker/DatePickerField.stories.tsx

@@ -1,100 +0,0 @@
-import { DatePickerField } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/date-picker/DatePickerField',
-    component: DatePickerField,
-    args: {
-        ...DatePickerField.defaultProps,
-        'nextButtonProps.label': 'Next month',
-        'previousButtonProps.label': 'Previous month',
-    },
-    decorators: [withValueOnChange(), withNestedProps()],
-};
-
-/**
- * Default date picker fields with only the required fields
- */
-export const Default = {};
-
-/**
- * With label, placeholder and helper
- */
-export const LabelPlaceholderAndHelper = {
-    args: {
-        label: 'Date picker label',
-        placeholder: 'Pick a date',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * Error state
- */
-export const Error = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        hasError: true,
-    },
-};
-
-/**
- * With default value selected
- */
-export const DefaultValue = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        value: new Date('2019-02-28'),
-    },
-};
-/**
- * With default value selected and restricted range
- */
-export const Restricted = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        value: new Date(new Date().setDate(10)),
-        minDate: new Date(new Date().setDate(4)),
-        maxDate: new Date(new Date().setDate(24)),
-    },
-};
-
-/**
- * With default value selected and restricted range
- */
-export const RestrictedEmpty = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        minDate: new Date(new Date().setDate(4)),
-        maxDate: new Date(new Date().setDate(24)),
-    },
-};
-/**
- * With default month
- */
-export const DefaultMonth = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        defaultMonth: new Date('2019-07-14'),
-    },
-};
-
-/**
- * Disabled states
- */
-export const Disabled = {
-    args: DefaultValue.args,
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { disabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};