From 662b8bff7a8fbfb580e116931ce6278a3133facd Mon Sep 17 00:00:00 2001 From: yinon Date: Fri, 22 Oct 2021 18:54:22 +0300 Subject: [PATCH] feat(calendar): support time format hour12 (#1103) --- __snapshots__/calendar.md | 1626 +++++++++++++++++ .../calendar/src/vwc-calendar-event.scss | 2 +- components/calendar/src/vwc-calendar.scss | 4 +- components/calendar/src/vwc-calendar.ts | 18 +- components/calendar/stories/arg-types.js | 20 + .../calendar/stories/calendar.stories.js | 4 +- components/calendar/test/calendar.test.js | 33 +- ui-tests/tests/vwc-calendar/index.js | 2 +- 8 files changed, 1688 insertions(+), 21 deletions(-) create mode 100644 components/calendar/stories/arg-types.js diff --git a/__snapshots__/calendar.md b/__snapshots__/calendar.md index e24e8c400..1a4bf0d3f 100644 --- a/__snapshots__/calendar.md +++ b/__snapshots__/calendar.md @@ -406,3 +406,1629 @@ ``` +## `API` + +#### `should match snapshot of weekdays set by property` + +```html +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +``` + +#### `should match snapshot of weekdays set by attribute` + +```html +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +``` + +#### `should match snapshot of locales weekdays` + +```html +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +``` + +#### `should match snapshot of displayed timekeeping system (24h)` + +```html +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +``` + diff --git a/components/calendar/src/vwc-calendar-event.scss b/components/calendar/src/vwc-calendar-event.scss index a60e25bf9..78e9fc9aa 100644 --- a/components/calendar/src/vwc-calendar-event.scss +++ b/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; } } diff --git a/components/calendar/src/vwc-calendar.scss b/components/calendar/src/vwc-calendar.scss index e0c640b42..e247f054b 100644 --- a/components/calendar/src/vwc-calendar.scss +++ b/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; diff --git a/components/calendar/src/vwc-calendar.ts b/components/calendar/src/vwc-calendar.ts index 2241b9275..2b7b4624e 100644 --- a/components/calendar/src/vwc-calendar.ts +++ b/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` `; diff --git a/components/calendar/stories/arg-types.js b/components/calendar/stories/arg-types.js new file mode 100644 index 000000000..613c3e95f --- /dev/null +++ b/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 } + } + }, +}; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index 7aaa3d06c..0c749eb49 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/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` diff --git a/components/calendar/test/calendar.test.js b/components/calendar/test/calendar.test.js index 48f9726e0..011fd4ae9 100644 --- a/components/calendar/test/calendar.test.js +++ b/components/calendar/test/calendar.test.js @@ -65,14 +65,8 @@ 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}>`) ); @@ -80,11 +74,10 @@ describe('calendar', () => { 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}>`) ); @@ -92,11 +85,10 @@ describe('calendar', () => { 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}>`) ); @@ -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}>`) + ); + + 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 () => { diff --git a/ui-tests/tests/vwc-calendar/index.js b/ui-tests/tests/vwc-calendar/index.js index a9e44814e..ed364d205 100644 --- a/ui-tests/tests/vwc-calendar/index.js +++ b/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))); }