@vonage/vivid 3.0.0-next.4 → 3.0.0-next.7

package/src/lib/calendar/calendar.scss

@@ -0,0 +1,176 @@
+@use 'partials/variables' as variables;
+@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
+@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
+
+
+ol {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+[role="grid"i] {
+	position: relative;
+	z-index: 0;
+	display: grid;
+	margin: auto;
+	grid-template-areas:
+		'. column-headers'
+		'row-headers calendar';
+	grid-template-columns: min-content auto;
+	inline-size: max(100%, 500px);
+	min-inline-size: 880px;
+}
+
+.row-headers {
+	display: grid;
+	grid-area: row-headers;
+	grid-template-rows: repeat(variables.$total-rows, 1fr);
+	margin-inline-end: 2px;
+	> [role="rowheader"i] {
+		display: flex;
+		align-items: flex-end;
+		justify-content: flex-end;
+		> time {
+			@include typography.typography-cat-shorthand('caption');
+
+			font-size: small;
+			line-height: 1;
+			text-transform: uppercase;
+			white-space: nowrap;
+		}
+	}
+}
+
+
+.calendar-row {
+	display: contents;
+}
+
+.calendar-grid-presentation {
+	display: grid;
+	overflow: hidden;
+	background-color: var(#{theme-consts.$vvd-color-surface-2dp});
+	border-radius: 6px;
+	counter-reset: listing;
+	filter: var(#{theme-consts.$vvd-shadow-surface-2dp});
+	gap: variables.$gap;
+	grid-area: calendar;
+	grid-auto-flow: column;
+	grid-template: repeat(variables.$total-rows, 1fr) / repeat(
+		variables.$total-columns,
+		1fr
+	);
+}
+
+.hours {
+	display: contents;
+	> [role="listitem"i] {
+		position: relative;
+		grid-column: 1 / 8;
+		grid-row: var(--row);
+		min-block-size: 48px;
+		pointer-events: none;
+		&:not(:first-child)::after {
+			position: absolute;
+			border-block-end: var(#{theme-consts.$vvd-color-neutral-20}) 1px solid;
+			content: '';
+			inline-size: 100%;
+			margin-block-start: -1px;
+		}
+
+		@for $i from 1 through variables.$total-rows {
+			$current-row: $i;
+			&:nth-child(#{variables.$total-rows}n + #{$i}) {
+				--row: #{$current-row};
+			}
+		}
+	}
+}
+
+[role="gridcell"i] {
+	display: grid;
+	gap: variables.$gap;
+	grid-auto-flow: column;
+
+	// grid-template-rows: repeat(variables.$total-rows * variables.$fraction, 1fr);
+}
+
+[role="gridcell"i],
+[role="columnheader"i],
+[role="columnheader"i] [role="button"i] {
+	position: relative;
+	&::before {
+		position: absolute;
+		z-index: -1;
+		background-color: var(#{theme-consts.$vvd-color-info-10});
+		content: '';
+		@supports (inset: 0) {
+			inset: 0;
+		}
+		@supports not (inset: 0) {
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+		}
+	}
+	&:focus {
+		outline: none;
+	}
+	&:not(:focus)::before {
+		display: none;
+	}
+}
+
+.columns {
+	display: contents;
+	> [role="gridcell"i] {
+		position: relative;
+		grid-column: var(--column);
+		grid-row: 1 / #{variables.$total-rows + 1};
+		@for $i from 1 through variables.$total-columns {
+			&:nth-child(#{$i}) {
+				--column: #{$i};
+			}
+		}
+		&:not(:first-child)::after {
+			position: absolute;
+			block-size: 100%;
+			border-inline-end: var(#{theme-consts.$vvd-color-neutral-20}) 1px solid;
+			content: '';
+			margin-inline-start: -1px;
+		}
+	}
+}
+
+.column-headers {
+	display: grid;
+	grid-area: column-headers;
+	grid-template-columns: repeat(variables.$total-columns, 1fr);
+	[role="columnheader"i] {
+		h2 {
+			@include typography.typography-cat-shorthand('subtitle-2');
+
+			display: grid;
+			align-items: baseline;
+			margin: 0;
+			grid-template-columns: 1fr auto 1fr;
+			> em {
+				font: inherit;
+				inline-size: min-content;
+				@supports (inset: 0) {
+					inset-inline-start: 0;
+				}
+				@supports not (inset: 0) {
+					left: 0;
+				}
+			}
+			> small {
+				@include typography.typography-cat-shorthand('caption');
+
+				text-transform: uppercase;
+			}
+		}
+	}
+}

package/src/lib/calendar/calendar.spec.ts

@@ -0,0 +1,341 @@
+import { elementUpdated, fixture } from '@vivid-nx/shared';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Calendar } from './calendar';
+import '.';
+import { getValidDateString } from './helpers/calendar.date-functions';
+import type { CalendarEventContext } from './helpers/calendar.event-context';
+
+expect.extend(toHaveNoViolations);
+
+
+const COMPONENT_TAG = 'vwc-calendar';
+
+describe('vwc-calendar', () => {
+	let element: Calendar;
+
+	beforeEach(async () => {
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as Calendar;
+	});
+
+	describe('basic', () => {
+		it('should be initialized as a vwc-calendar', async () => {
+			expect(element).toBeInstanceOf(Calendar);
+			expect(element.datetime).toBeUndefined();
+			expect(element.startDay).toBeUndefined();
+			expect(element.locales).toBeUndefined();
+			expect(element.hour12).toBeFalsy();
+		});
+	});
+
+	describe('datetime', () => {
+		it('should show recent monday as first day of this week', async () => {
+			const firstColumnDate = getFirstColumnDate(element);
+
+			const today = getValidDateString(new Date());
+			const monday = getMondayOfWeek(today);
+
+			expect(firstColumnDate).toEqual(monday);
+		});
+
+		it('should show recent monday as first day of \'2022-01-01\' week', async () => {
+			const date = '2022-01-01';
+
+			element.datetime = date;
+			await elementUpdated(element);
+
+			const firstColumnDate = getFirstColumnDate(element);
+			const monday = getMondayOfWeek(date);
+
+			expect(firstColumnDate).toEqual(monday);
+		});
+	});
+
+	describe('startDay', () => {
+		it('should show recent sunday as first day of this week', async () => {
+			element.startDay = 'sunday';
+			await elementUpdated(element);
+
+			const firstColumnDate = getFirstColumnDate(element);
+
+			const today = getValidDateString(new Date());
+			const sunday = getSundayOfWeek(today);
+
+			expect(firstColumnDate).toEqual(sunday);
+		});
+
+		it('should show recent sunday as first day of \'2022-01-01\' week', async () => {
+			element.startDay = 'sunday';
+			const date = '2022-01-01';
+
+			element.datetime = date;
+			await elementUpdated(element);
+
+			const firstColumnDate = getFirstColumnDate(element);
+			const sunday = getSundayOfWeek(date);
+
+			expect(firstColumnDate).toEqual(sunday);
+		});
+	});
+
+	describe('locales', () => {
+		it('should set hebrew locales', async () => {
+			const date = '2022-01-01';
+			element.datetime = date;
+			element.locales = 'he-il';
+
+			await elementUpdated(element);
+
+			const firstColumnDate = element.shadowRoot?.querySelector('.column-headers > :first-child small') as HTMLElement;
+
+			expect(firstColumnDate.textContent?.trim()).toEqual('יום ב׳');
+		});
+	});
+
+	describe('hour12', () => {
+		it('should set hebrew locales', async () => {
+			element.hour12 = true;
+
+			await elementUpdated(element);
+
+			const hour13th = element.shadowRoot?.querySelector('.row-headers > :nth-child(13)') as HTMLSpanElement;
+
+			expect(hour13th.textContent?.trim()).toEqual('1 PM');
+		});
+	});
+
+	describe('Event Context', () => {
+		let gridCell: HTMLElement;
+		let context: CalendarEventContext | null;
+
+		beforeEach(async () => {
+			gridCell = element.shadowRoot?.querySelector('[role="gridcell"i]:nth-child(3)') as HTMLElement;
+		});
+
+		it('should return correct day and hour from mouse clicking inside one of the columns cells', async () => {
+			const e = new MouseEvent('click', { composed: true, clientY: 54 });
+			e.composedPath = jest.fn().mockReturnValue([gridCell]);
+			gridCell.getBoundingClientRect = jest.fn().mockReturnValue({ height: 1175, y: 28 });
+
+			context = element.getEventContext(e);
+
+			expect(context?.day).toEqual(2);
+			expect(context?.hour).toEqual(0.53);
+		});
+
+		it('should return hour from mouse clicking on a row header', async () => {
+			const rowHeader  = element.shadowRoot?.querySelector('[role="rowheader"]:nth-child(3)') as HTMLElement;
+			rowHeader.getBoundingClientRect = jest.fn().mockReturnValue({ height: 49, y: 85 });
+
+			const rowHeaderTimeElement = rowHeader.querySelector('time') as HTMLElement;
+
+			const e = new MouseEvent('click', { composed: true, clientX: 25, clientY: 174 });
+			e.composedPath = jest.fn().mockReturnValue([rowHeaderTimeElement]);
+
+			context = element.getEventContext(e);
+
+			expect(context?.day).toBeUndefined();
+			expect(context?.hour).toEqual(43.59);
+		});
+
+		it('should return null if mouse click outside grid managed area', async () => {
+			const grid  = element.shadowRoot?.querySelector('[role="grid"]') as HTMLElement;
+
+			const e = new MouseEvent('click', { composed: true, clientX: 0, clientY: 0 });
+			e.composedPath = jest.fn().mockReturnValue([grid]);
+
+			context = element.getEventContext(e);
+
+			expect(context).toBeNull();
+		});
+
+		it('should throw if unsupported event passed', async () => {
+			const e = new FocusEvent('focus');
+			e.composedPath = jest.fn().mockReturnValue([gridCell]);
+
+			const getEventContext = () => element.getEventContext(e as MouseEvent);
+
+			expect(getEventContext).toThrow('Invalid event. Event must be instance of KeyboardEvent or MouseEvent');
+		});
+
+		it('should throw if event is missing a target', async () => {
+			const e = new MouseEvent('click', { composed: true, clientY: 54 });
+			gridCell.getBoundingClientRect = jest.fn().mockReturnValue({ height: 1175, y: 28 });
+
+			const getEventContext = () => element.getEventContext(e);
+
+			expect(getEventContext).toThrow('Invalid event. Event must contain a target object which is a direct descendant of calendar');
+		});
+
+		it('should return day from keydown \'space\' in grid cell', async () => {
+			element.addEventListener('keydown', e => context = element.getEventContext(e) as CalendarEventContext);
+
+			gridCell.dispatchEvent(new KeyboardEvent('keydown', { composed: true, keyCode: 13 }));
+
+			expect(context?.day).toEqual(2);
+			expect(context?.hour).toBeUndefined();
+		});
+
+		it('should emit \'enter\' keydown event with day and hour when focused on grid cell', async () => {
+			element.addEventListener('keydown', e => context = element.getEventContext(e) as CalendarEventContext);
+
+			gridCell.dispatchEvent(new KeyboardEvent('keydown', { composed: true, keyCode: 32 }));
+
+			expect(context?.day).toEqual(2);
+			expect(context?.hour).toEqual(undefined);
+		});
+	});
+
+	describe('focus management', () => {
+		let grid: HTMLElement;
+		let shadowRoot: ShadowRoot;
+
+		const hitKey = (key: string) => {
+			grid.dispatchEvent(new KeyboardEvent('keydown', { key }));
+		};
+
+		beforeEach(async () => {
+			shadowRoot = element.shadowRoot as ShadowRoot;
+			grid = element.shadowRoot?.querySelector('[role="grid"i]') as HTMLElement;
+		});
+
+		it('should focus to default on initial keyboard interaction', async () => {
+			grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+
+			const defaultFocusElement = grid.querySelector('[role="columnheader"i]');
+
+			expect(shadowRoot.activeElement).toEqual(defaultFocusElement);
+		});
+
+		it('should keep focus if not arrow key event', async () => {
+
+			const gridCell = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(3)') as HTMLElement;
+
+			gridCell.focus();
+
+			hitKey('Home');
+			expect(shadowRoot.activeElement).toEqual(gridCell);
+		});
+
+		it('should change focus on keyboard arrow interactions', async () => {
+
+			const gridCell = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(3)') as HTMLElement;
+
+			gridCell.focus();
+
+			hitKey('ArrowRight');
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="columnheader"i]:nth-child(4)')
+			);
+
+			hitKey('ArrowLeft');
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="columnheader"i]:nth-child(3)')
+			);
+
+			hitKey('ArrowUp');
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="gridcell"i]:nth-child(3)')
+			);
+
+			hitKey('ArrowDown');
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="columnheader"i]:nth-child(3)')
+			);
+		});
+
+		it('should circle back focus from last column to first', async () => {
+
+			const gridCell = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(7)') as HTMLElement;
+
+			gridCell.focus();
+
+			hitKey('ArrowRight');
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="columnheader"i]:nth-child(1)')
+			);
+
+			hitKey('ArrowLeft');
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="columnheader"i]:nth-child(7)')
+			);
+		});
+
+		it('should only apply arrow down on focused "em" (tabindexed) element', async () => {
+
+			const em = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(4) em') as HTMLElement;
+
+			em.focus();
+
+			hitKey('ArrowUp');
+			expect(shadowRoot.activeElement).toEqual(em);
+
+			hitKey('ArrowRight');
+			expect(shadowRoot.activeElement).toEqual(em);
+
+			hitKey('ArrowLeft');
+			expect(shadowRoot.activeElement).toEqual(em);
+
+			hitKey('ArrowDown');
+			expect(shadowRoot.activeElement).toEqual(grid.querySelector('[role="gridcell"i]:nth-child(4)'));
+		});
+
+		it('should move focus from column header button to gridcell of same block on \'arrowDown\'', async () => {
+			const columnHeader = shadowRoot.querySelector('[role="columnheader"i]:nth-child(3)');
+			const button = columnHeader?.querySelector('[role="button"i]') as HTMLButtonElement;
+			button.focus();
+
+			grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="gridcell"i]:nth-child(3)')
+			);
+		});
+	});
+
+	describe('a11y', () => {
+		it('should pass accessibility test', async () => {
+			const { shadowRoot } = element;
+			if (!shadowRoot) { return; }
+
+			const results = await axe(shadowRoot.innerHTML, {
+				rules: {
+					// components should not be tested as page content
+					'region': { enabled: false }
+				}
+			});
+
+			expect(results).toHaveNoViolations();
+		});
+	});
+});
+
+/**
+ * @param element
+ */
+function getFirstColumnDate(element: Calendar) {
+	const firstColumnTimeEl = element.shadowRoot?.querySelector('.column-headers > :first-child time') as HTMLTimeElement;
+	const firstDatetime = firstColumnTimeEl?.getAttribute('datetime') as string;
+	return new Date(firstDatetime);
+}
+
+/**
+ * @param d
+ */
+function getMondayOfWeek(d: Date | string) {
+	d = new Date(d);
+	const day = d.getDay(),
+		diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
+	return new Date(d.setDate(diff));
+}
+
+/**
+ * @param d
+ */
+function getSundayOfWeek(d: Date | string) {
+	d = new Date(d);
+	const day = d.getDay(),
+		diff = d.getDate() - day;
+	return new Date(d.setDate(diff));
+}

package/src/lib/calendar/calendar.template.ts

@@ -0,0 +1,93 @@
+import { html, repeat } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
+import type { Calendar } from './calendar';
+import {
+	getFirstDateOfTheWeek,
+	getValidDateString
+} from './helpers/calendar.date-functions';
+
+
+/**
+ * the html days markup
+ *
+ * @internal
+ */
+const HoursTemplate = () => {
+	return html`
+  <div class="row-headers" role="presentation">
+    ${repeat(x => x.hoursAsDatetime, html<string>`<span role="rowheader">
+      <time datetime="${(x: Date, c) =>	new Intl.DateTimeFormat(c.parent.locales, {
+		hour: 'numeric', minute: 'numeric',	hour12: false
+	}).format(x)}">
+						${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		hour: 'numeric', hour12: c.parent.hour12
+	}).format(x)}
+					</time>
+				</span>`)}
+  </div>`;
+};
+
+/**
+ * The html days markup
+ *
+ * @internal
+ */
+const DaysTemplate = () => {
+	return html`
+			<div class="column-headers" role="row">
+				${repeat(x => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html<string>`
+						<div role="columnheader" tabindex="-1">
+              <time datetime=${(x: Date) => getValidDateString(x)}>
+                <h2>
+									<!-- TODO add to column aria-labelledby or describedby to count
+                  events and related day e.g. "3 events, Sunday, March 8" -->
+									<em tabindex="0" role="button" aria-label=${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		weekday: 'long', month: 'long', day: 'numeric'
+	}).format(x)}>
+										${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, { day: '2-digit' }).format(x)}
+									</em>
+									<small aria-hidden="true">
+										${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: 'short' }).format(x)}
+									</small>
+                </h2>
+              </time>
+						</div>`)}
+			</div>`;
+};
+
+const ColumnTemplate = html<string>`
+            <div role="gridcell" tabindex="-1">
+              <slot name="day-${(_, c) => c.index}"></slot>
+            </div>
+          `;
+/**
+ * The template for the {@link @microsoft/fast-foundation#Calendar} component.
+ *
+ * @param context
+ * @public
+ */
+export const CalendarTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<Calendar> = () => html`
+  <div role="grid" @keydown=${(x, c) => x.onKeydown(c.event as KeyboardEvent)}>
+    ${DaysTemplate}
+    <div role="row" class="calendar-row">
+      ${HoursTemplate}
+      <div class="calendar-grid-presentation" role="presentation">
+        <div class="hours" role="list">
+          ${repeat(x => Array.from({ length: x.hoursAsDatetime.length + 1 }),	html<string>`
+            <div role="listitem"></div>`)}
+        </div>
+        <div class="columns" role="presentation">
+          ${repeat(x => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+`;