feat(date-time-picker): add date/time input + picker

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: c70f3ed57c4e3536313872fd3d23510caa801a44
+        default: 07a5cba6726f993d5ddc38a9c30e9c9e3e94ebc7
     wireit_cache_name:
         type: string
         default: wireit

packages/calendar/package.json

@@ -69,7 +69,8 @@
         "@spectrum-web-components/reactive-controllers": "^0.41.2"
     },
     "devDependencies": {
-        "@spectrum-css/calendar": "^4.2.4"
+        "@spectrum-css/calendar": "^4.2.4",
+        "@spectrum-web-components/story-decorator": "^0.41.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/calendar/src/Calendar.ts

@@ -162,6 +162,7 @@ export class Calendar extends SpectrumElement {
                     class="spectrum-Calendar-title"
                     aria-live="assertive"
                     aria-atomic="true"
+                    data-test-id="calendar-title"
                 >
                     ${monthAndYear}
                 </div>
@@ -176,6 +177,7 @@ export class Calendar extends SpectrumElement {
                     aria-label="Previous"
                     title="Previous"
                     class="spectrum-Calendar-prevMonth"
+                    data-test-id="prev-btn"
                     ?disabled=${this.disabled}
                     @click=${this.handlePreviousMonth}
                 >
@@ -196,6 +198,7 @@ export class Calendar extends SpectrumElement {
                     aria-label="Next"
                     title="Next"
                     class="spectrum-Calendar-nextMonth"
+                    data-test-id="next-btn"
                     ?disabled=${this.disabled}
                     @click=${this.handleNextMonth}
                 >
@@ -311,12 +314,13 @@ export class Calendar extends SpectrumElement {
                 class="spectrum-Calendar-tableCell"
                 title=${currentDayTitle}
                 tabindex=${ifDefined(!isOutsideMonth ? '-1' : undefined)}
-                aria-disabled=${isOutsideMonth || this.disabled}
+                aria-disabled=${isOutsideMonth || isDisabled}
                 aria-selected=${isSelected}
             >
                 <span
                     role="presentation"
                     class=${classMap(dayClasses)}
+                    data-test-id="calendar-day"
                     @click=${() => this.handleDayClick(calendarDate)}
                 >
                     ${this.formatNumber(calendarDate.day)}
@@ -361,8 +365,9 @@ export class Calendar extends SpectrumElement {
      * defined location (Sunday, Monday, etc.)
      */
     private setWeekdays(): void {
+        const weekStart = startOfWeek(this.currentDate, this.locale);
+
         this.weekdays = [...new Array(daysInWeek).keys()].map((dayIndex) => {
-            const weekStart = startOfWeek(this.currentDate, this.locale);
             const date = weekStart.add({ days: dayIndex });
 
             return {

packages/calendar/stories/calendar.stories.ts

@@ -9,177 +9,71 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { html, render, TemplateResult } from '@spectrum-web-components/base';
+import { defaultLocale } from '@spectrum-web-components/story-decorator/src/StoryDecorator.js';
 
 import { spreadProps } from '../../../test/lit-helpers.js';
 
 import '@spectrum-web-components/calendar/sp-calendar.js';
-import '@spectrum-web-components/theme/sp-theme.js';
-
-const locales = [
-    'cs-CZ',
-    'cy-GB',
-    'da-DK',
-    'de-DE',
-    'en-GB',
-    'en-US',
-    'es-ES',
-    'fi-FI',
-    'fr-FR',
-    'hu-HU',
-    'it-IT',
-    'ja-JP',
-    'ko-KR',
-    'nb-NO',
-    'nl-NL',
-    'pl-PL',
-    'pt-BR',
-    'ru-RU',
-    'sv-SE',
-    'tr-TR',
-    'uk-UA',
-    'zh-Hans-CN',
-    'zh-Hans-CN-u-nu-hanidec',
-    'zh-Hant-TW',
-    'zz-ZY',
-    'zz-ZZ',
-] as const;
-
-const defaultLocale = 'en-US';
-
-const hiddenProperty = {
-    table: {
-        disable: true,
-    },
-};
 
 export default {
     title: 'Calendar',
     component: 'sp-calendar',
-
-    argTypes: {
-        lang: {
-            options: locales,
-            control: {
-                type: 'select',
-            },
-            table: {
-                defaultValue: {
-                    summary: defaultLocale,
-                },
-            },
-        },
-
-        // Don't render private properties and getters in the Storybook UI
-        currentDate: { ...hiddenProperty },
-        minDate: { ...hiddenProperty },
-        maxDate: { ...hiddenProperty },
-        weeksInCurrentMonth: { ...hiddenProperty },
-        weekdays: { ...hiddenProperty },
-        languageResolver: { ...hiddenProperty },
-        timeZone: { ...hiddenProperty },
-        locale: { ...hiddenProperty },
-        today: { ...hiddenProperty },
-
-        // Inherited
-        _dirParent: { ...hiddenProperty },
-        shadowRoot: { ...hiddenProperty },
-        dir: { ...hiddenProperty },
-        isLTR: { ...hiddenProperty },
-    },
-
-    args: {
-        lang: defaultLocale,
-    },
-
     parameters: {
-        controls: {
-            // Hide "This story is not configured to handle controls" warning
-            hideNoControlsWarning: true,
-        },
         actions: {
             handles: ['onChange'],
         },
     },
 };
 
-interface StoryArgs {
-    lang?: string;
-
-    padded?: boolean;
-    disabled?: boolean;
+type ComponentArgs = {
     selectedDate?: Date;
     min?: Date;
     max?: Date;
+    padded?: boolean;
+    disabled?: boolean;
+};
 
-    onChange?: (date: Date) => void;
+type StoryArgs = ComponentArgs & {
+    onChange?: (dateTime: Date) => void;
+};
 
+interface SpreadStoryArgs {
     [prop: string]: unknown;
 }
 
 const renderCalendar = (
     title: string,
     args: StoryArgs = {}
 ): TemplateResult => {
-    return html`
-        <sp-theme lang=${ifDefined(args.lang || undefined)}>
-            <h1>${title}</h1>
-            <h2>
-                Locale:
-                <code>${args.lang}</code>
-            </h2>
-
-            <hr />
-
-            <sp-calendar
-                ...=${spreadProps(args)}
-                @change=${args.onChange}
-            ></sp-calendar>
-        </sp-theme>
+    const story = html`
+        <h1>${title}</h1>
+        <hr />
+        <sp-calendar
+            ...=${spreadProps(args as SpreadStoryArgs)}
+            @change=${args.onChange}
+        ></sp-calendar>
     `;
-};
 
-export const Default = (args: StoryArgs = {}): TemplateResult => {
-    return renderCalendar('Default', args);
-};
+    const randomId = Math.floor(Math.random() * 99999);
 
-export const padded = (args: StoryArgs = {}): TemplateResult => {
-    return renderCalendar(`Padded? ${args.padded}`, args);
-};
-
-padded.argTypes = {
-    padded: {
-        control: 'boolean',
-        table: {
-            defaultValue: {
-                summary: true,
-            },
-        },
-    },
-};
-
-padded.args = {
-    padded: true,
-};
+    requestAnimationFrame(() => {
+        const container = document.querySelector(
+            `.story-container-${randomId}`
+        );
 
-export const disabled = (args: StoryArgs = {}): TemplateResult => {
-    return renderCalendar(`Disabled? ${args.disabled}`, args);
-};
+        if (container) {
+            render(story, container as HTMLElement);
+        }
+    });
 
-disabled.argTypes = {
-    disabled: {
-        control: 'boolean',
-        table: {
-            defaultValue: {
-                summary: true,
-            },
-        },
-    },
+    return html`
+        <div class="story-container-${randomId}"></div>
+    `;
 };
 
-disabled.args = {
-    disabled: true,
+export const Default = (args: StoryArgs = {}): TemplateResult => {
+    return renderCalendar('Default', args);
 };
 
 export const selectedDate = (args: StoryArgs = {}): TemplateResult => {
@@ -241,3 +135,41 @@ export const maximumDate = (args: StoryArgs = {}): TemplateResult => {
 
     return renderCalendar(`Maximum Date: ${formatted}`, args);
 };
+
+export const disabled = (args: StoryArgs = {}): TemplateResult => {
+    return renderCalendar(`Disabled? ${args.disabled}`, args);
+};
+
+disabled.argTypes = {
+    disabled: {
+        control: 'boolean',
+        table: {
+            defaultValue: {
+                summary: true,
+            },
+        },
+    },
+};
+
+disabled.args = {
+    disabled: true,
+};
+
+export const padded = (args: StoryArgs = {}): TemplateResult => {
+    return renderCalendar(`Padded? ${args.padded}`, args);
+};
+
+padded.argTypes = {
+    padded: {
+        control: 'boolean',
+        table: {
+            defaultValue: {
+                summary: true,
+            },
+        },
+    },
+};
+
+padded.args = {
+    padded: true,
+};