feat(calendar): support time format hour12 (#1103)

components/calendar/src/vwc-calendar-event.scss

@@ -36,7 +36,7 @@ section {
 	max-block-size: calc(100% - #{$top} - #{$margin-block * 2});
 	&:focus {
 		z-index: 2000;
-		box-shadow: 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%), 0 3px 5px -1px rgb(0 0 0 / 20%);
+		filter: var(#{scheme-variables.$vvd-shadow-surface-8dp});
 		outline: none;
 	}
 }

components/calendar/src/vwc-calendar.scss

@@ -84,10 +84,10 @@ ol {
 .calendar-grid-presentation {
 	display: grid;
 	overflow: hidden;
-	background-color: var(#{scheme-variables.$vvd-color-canvas});
+	background-color: var(#{scheme-variables.$vvd-color-surface-2dp});
 	border-radius: var(#{calendar-variables.$calendar-shape});
-	box-shadow: 0 0 3.64752px rgba(0, 0, 0, 0.15);
 	counter-reset: listing;
+	filter: var(#{scheme-variables.$vvd-shadow-surface-2dp});
 	gap: calendar-variables.$gap;
 	grid-area: calendar;
 	grid-auto-flow: column;

components/calendar/src/vwc-calendar.ts

@@ -86,6 +86,18 @@ export class VWCCalendar extends LitElement {
 	})
 		locales?: string | string[] | undefined;
 
+	/**
+	 * The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.
+	 * Unless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24)
+	 *
+	 * @public
+	 * */
+	@property({
+		reflect: true,
+		type: Boolean
+	})
+		hour12?: boolean;
+
 	#daysLength = 7;
 	#hours = (Array.from({ length: TotalHours - 1 }) as Date[])
 		.fill(new Date(new Date().setHours(0, 0, 0)))
@@ -202,11 +214,15 @@ export class VWCCalendar extends LitElement {
 	 * @internal
 	 * */
 	protected renderHours(): TemplateResult {
+		const displayedFormatOptions: Intl.DateTimeFormatOptions = { hour: 'numeric', hour12: this.hour12 };
+
+		console.log(displayedFormatOptions);
+
 		return html`
 			<div class="row-headers" role="presentation">
 				${this.#hours.map(h => html`<span role="rowheader">
 					<time datetime="${new Intl.DateTimeFormat(this.locales, { hour: 'numeric', minute: 'numeric', hour12: false }).format(h)}">
-						${new Intl.DateTimeFormat(this.locales, { hour: 'numeric', hour12: true }).format(h)}
+						${new Intl.DateTimeFormat(this.locales, displayedFormatOptions).format(h)}
 					</time>
 				</span>`)}
 			</div>`;

components/calendar/stories/arg-types.js

@@ -0,0 +1,20 @@
+import { Connotation } from '@vonage/vvd-foundation/constants';
+
+export const argTypes = {
+	datetime: {
+		control: {
+			type: 'text'
+		}
+	},
+	locales: {
+		control: {
+			type: 'text'
+		}
+	},
+	hour12: {
+		control: {
+			type: 'inline-radio',
+			options: { 'true': '', 'false': undefined }
+		}
+	},
+};

components/calendar/stories/calendar.stories.js

@@ -2,10 +2,12 @@ import '@vonage/vwc-calendar/vwc-calendar.js';
 import '@vonage/vwc-calendar/vwc-calendar-event.js';
 import { html } from 'lit-element';
 import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types';
 
 export default {
 	title: 'Components/Calendar',
-	component: 'vwc-calendar'
+	component: 'vwc-calendar',
+	argTypes
 };
 
 const Calendar = args => html`<vwc-calendar ...=${spread(args)} @click=${onClick} @keydown=${onKeyDown}>

components/calendar/test/calendar.test.js

@@ -65,38 +65,30 @@ describe('calendar', () => {
 		expect(columnHeadersStylesMatch).to.equal(true);
 	});
 
-	const extractDaysTextFromHeaders = columnHeaders => Array.from(columnHeaders.querySelectorAll('h2'))
-		.map(h2 => Array.from(h2.children)
-			.reduce((acc, curr) => acc.textContent.trim() + curr.textContent.trim()));
-
-	const getWeekdays = el => extractDaysTextFromHeaders(el.shadowRoot.querySelector('.column-headers'));
-
 	describe('API', () => {
-		it('should reflect weekdays as set by property', async () => {
+		it('should match snapshot of weekdays set by property', async () => {
 			const [actualElement] = addElement(
 				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
 			);
 
 			actualElement.datetime = '2021-01-01';
 			await actualElement.updateComplete;
 
-			expect(getWeekdays(actualElement).join())
-				.to.equal('27Sun,28Mon,29Tue,30Wed,31Thu,01Fri,02Sat');
+			expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
 		});
 
-		it('should reflect weekdays as set by attribute', async () => {
+		it('should match snapshot of weekdays set by attribute', async () => {
 			const [actualElement] = addElement(
 				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
 			);
 
 			actualElement.setAttribute('datetime', '2021-01-01');
 			await actualElement.updateComplete;
 
-			expect(getWeekdays(actualElement).join())
-				.to.equal('27Sun,28Mon,29Tue,30Wed,31Thu,01Fri,02Sat');
+			expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
 		});
 
-		it('should reflect weekdays and hours as set by locales', async () => {
+		it('should match snapshot of locales weekdays', async () => {
 			const [actualElement] = addElement(
 				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
 			);
@@ -105,8 +97,19 @@ describe('calendar', () => {
 			actualElement.locales = 'zh-cn';
 			await actualElement.updateComplete;
 
-			expect(getWeekdays(actualElement).join())
-				.to.equal('27日周日,28日周一,29日周二,30日周三,31日周四,01日周五,02日周六');
+			expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+		});
+
+		it('should match snapshot of displayed timekeeping system (24h)', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+			);
+
+			actualElement.datetime = '2021-01-01';
+			actualElement.hour12 = false;
+			await actualElement.updateComplete;
+
+			expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
 		});
 
 		it('should delegate attributes to custom properties', async () => {

ui-tests/tests/vwc-calendar/index.js

@@ -22,7 +22,7 @@ const calendarSample = (attributes = {}) => {
 export function createElementVariations(wrapper) {
 	[
 		calendarSample({ datetime: '2021-01-01' }),
-		calendarSample({ datetime: '2021-01-01', locales: ['he-IL'], style: 'direction: rtl' }),
+		calendarSample({ datetime: '2021-01-01', locales: ['he-IL'], style: 'direction: rtl', hour12: true }),
 	].forEach(el => wrapper.appendChild(el));
 	return new Promise((resolve => setTimeout(resolve, 0)));
 }