@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,34 @@
+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 = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+    getYearDisplayName: () => 'année',
+}));
+
+const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
+    const props: DatePickerProps = {
+        locale: 'fr',
+        onChange: vi.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

@@ -0,0 +1,52 @@
+import { 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

@@ -0,0 +1,91 @@
+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 = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+    getYearDisplayName: () => 'année',
+}));
+
+type SetupProps = Partial<DatePickerControlledProps>;
+
+const setup = (propsOverride: SetupProps = {}) => {
+    const props: DatePickerControlledProps = {
+        locale: 'fr',
+        onChange: vi.fn(),
+        onNextMonthChange: vi.fn(),
+        onPrevMonthChange: vi.fn(),
+        selectedMonth: mockedDate,
+        value: mockedDate,
+        nextButtonProps: { label: 'Next month' },
+        previousButtonProps: { label: 'Previous month' },
+        onMonthChange: vi.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

@@ -0,0 +1,259 @@
+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

@@ -0,0 +1,100 @@
+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 },
+                },
+            },
+        }),
+    ],
+};