refactor(sbb-calendar): implement initial support for other date libr…

…aries (#2511) BREAKING CHANGE: The `SbbDatepicker` property `selectedDate` has been renamed to `selected`. This also applies to the attribute `selected-date`, which has been renamed to `selected`. Additionally the `DateAdapter` (and `NativeDateAdapter`) have been superficially refactored. An important change is that the month is now `1`-based, instead of `0`-based.
sbb-design-systems · Mar 21, 2024 · 6d4e9c2 · 6d4e9c2
1 parent 3b1be32
commit 6d4e9c2
Show file tree

Hide file tree

Showing 12 changed files with 423 additions and 437 deletions.
diff --git a/src/components/calendar/calendar.e2e.ts b/src/components/calendar/calendar.e2e.ts
@@ -6,8 +6,9 @@ import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing';
 
 import { SbbCalendarElement } from './calendar';
 
-describe('sbb-calendar', () => {
-  const selected = new Date(2023, 0, 15).getTime() / 1000;
+import '../button';
+
+describe(`sbb-calendar`, () => {
   let element: SbbCalendarElement;
   const waitForTransition = async (): Promise<void> => {
     await waitForLitRender(element);
@@ -16,7 +17,7 @@ describe('sbb-calendar', () => {
 
   beforeEach(async () => {
     element = await fixture(
-      html`<sbb-calendar data-now="1673348400000" selected-date="${selected}"></sbb-calendar>`,
+      html`<sbb-calendar data-now="1673348400000" selected="1673744400"></sbb-calendar>`,
     );
   });
 
@@ -185,7 +186,13 @@ describe('sbb-calendar', () => {
     expect(monthCells.length).to.be.equal(12);
     expect(monthCells[0]).dom.to.be.equal(`
       <td class="sbb-calendar__table-data sbb-calendar__table-month">
-        <button aria-disabled="false" aria-label="January 2023" aria-pressed="true" class="sbb-calendar__cell sbb-calendar__pill sbb-calendar__selected sbb-calendar__cell-current" tabindex="0">
+        <button
+          aria-disabled="false"
+          aria-label="January 2023"
+          aria-pressed="true"
+          class="sbb-calendar__cell sbb-calendar__pill sbb-calendar__selected sbb-calendar__cell-current"
+          data-month="1"
+          tabindex="0">
           Jan
         </button>
       </td>
@@ -317,7 +324,7 @@ describe('sbb-calendar', () => {
   describe('navigation for year view', () => {
     beforeEach(async () => {
       element = await fixture(
-        html`<sbb-calendar data-now="1673348400000" selected-date="${selected}"></sbb-calendar>`,
+        html`<sbb-calendar data-now="1673348400000" selected="1673737200"></sbb-calendar>`,
       );
 
       const yearSelectionButton: HTMLElement = element.shadowRoot!.querySelector(

diff --git a/src/components/calendar/calendar.spec.ts b/src/components/calendar/calendar.spec.ts
@@ -9,23 +9,20 @@ import './calendar';
 describe('sbb-calendar', () => {
   it('renders', async () => {
     const root = await fixture(
-      html`<sbb-calendar
-        selected-date="2023-01-20T00:00:00"
-        data-now="1672790400000"
-      ></sbb-calendar>`,
+      html`<sbb-calendar selected="2023-01-20T00:00:00" data-now="1672790400000"></sbb-calendar>`,
     );
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(
-      `<sbb-calendar data-now="1672790400000" selected-date="2023-01-20T00:00:00"></sbb-calendar>`,
+      `<sbb-calendar data-now="1672790400000" selected="2023-01-20T00:00:00"></sbb-calendar>`,
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with min and max', async () => {
     const page: HTMLElement = await fixture(
       html`<sbb-calendar
-        selected-date="2023-01-20T00:00:00"
+        selected="2023-01-20T00:00:00"
         min="2023-01-09T00:00:00"
         max="2023-01-29T00:00:00"
       ></sbb-calendar>`,
@@ -59,10 +56,7 @@ describe('sbb-calendar', () => {
   });
 
   testA11yTreeSnapshot(
-    html`<sbb-calendar
-      selected-date="2023-01-20T00:00:00"
-      data-now="1672790400000"
-    ></sbb-calendar>`,
+    html`<sbb-calendar selected="2023-01-20T00:00:00" data-now="1672790400000"></sbb-calendar>`,
     undefined,
     { safari: true }, // We skip safari because it has an inconsistent behavior on ci environment
   );

diff --git a/src/components/calendar/calendar.stories.ts b/src/components/calendar/calendar.stories.ts
@@ -6,25 +6,26 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { defaultDateAdapter } from '../core/datetime';
 import { sbbSpread } from '../core/dom';
 
 import { SbbCalendarElement } from './calendar';
 import readme from './readme.md?raw';
 
-const getCalendarAttr = (min: Date | string, max: Date | string): Record<string, Date> => {
-  const attr: Record<string, Date> = {};
+const getCalendarAttr = (min: Date | string, max: Date | string): Record<string, string> => {
+  const attr: Record<string, string> = {};
   if (min) {
-    attr.min = new Date(min);
+    attr.min = defaultDateAdapter.toIso8601(new Date(min));
   }
   if (max) {
-    attr.max = new Date(max);
+    attr.max = defaultDateAdapter.toIso8601(new Date(max));
   }
   return attr;
 };
 
-const Template = ({ min, max, selectedDate, dateFilter, ...args }: Args): TemplateResult => html`
+const Template = ({ min, max, selected, dateFilter, ...args }: Args): TemplateResult => html`
   <sbb-calendar
-    .selectedDate=${new Date(selectedDate)}
+    .selected=${new Date(selected)}
     .dateFilter=${dateFilter}
     ${sbbSpread(getCalendarAttr(min, max))}
     ${sbbSpread(args)}
@@ -34,13 +35,13 @@ const Template = ({ min, max, selectedDate, dateFilter, ...args }: Args): Templa
 const TemplateDynamicWidth = ({
   min,
   max,
-  selectedDate,
+  selected,
   dateFilter,
   ...args
 }: Args): TemplateResult => html`
   <sbb-calendar
     style=${styleMap({ width: '900px' })}
-    .selectedDate=${new Date(selectedDate)}
+    .selected=${new Date(selected)}
     .dateFilter=${dateFilter}
     ${sbbSpread(getCalendarAttr(min, max))}
     ${sbbSpread(args)}
@@ -56,7 +57,7 @@ const wide: InputType = {
   },
 };
 
-const selectedDate: InputType = {
+const selected: InputType = {
   control: {
     type: 'date',
   },
@@ -119,7 +120,7 @@ const dateFilter: InputType = {
 
 const defaultArgTypes: ArgTypes = {
   wide,
-  selectedDate,
+  selected,
   min,
   max,
   dateFilter,
@@ -131,7 +132,7 @@ today.setDate(today.getDate() >= 15 ? 8 : 18);
 
 const defaultArgs: Args = {
   wide: false,
-  selectedDate: isChromatic() ? new Date(2023, 0, 20) : today,
+  selected: isChromatic() ? new Date(2023, 0, 20) : today,
   dataNow: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
 };