@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/src/lib/calendar/calendar.scss

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

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

@@ -1,93 +0,0 @@
-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>
-`;