From 280b7f4d67cdcdb1a7f554bddd5835d67a3450e7 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:00:54 +0200
Subject: [PATCH] date-picker timezone init

---
 .../input-date-picker.element.ts              | 99 +++++++++++++++++++
 .../input-date-picker.stories.ts              | 23 +++++
 .../input-date-picker.test.ts                 | 18 ++++
 .../src/core/mocks/data/data-type.data.ts     | 14 ++-
 4 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.element.ts
new file mode 100644
index 0000000000..6fe7f4b181
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.element.ts
@@ -0,0 +1,99 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UUIInputEvent, UUISelectEvent } from '@umbraco-ui/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-input-date-picker')
+export class UmbInputDatePickerElement extends FormControlMixin(UmbLitElement) {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+			}
+		`,
+	];
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	@property({ type: String })
+	type = 'date';
+
+	@property({ type: String })
+	datetime = '';
+
+	@property({ type: Boolean })
+	enableTimezones = false;
+
+	@state()
+	private _currentTimezone?: string;
+
+	constructor() {
+		super();
+	}
+
+	options: Array<Option> = [
+		{ name: 'Carrot', value: 'orange' },
+		{ name: 'Cucumber', value: 'green' },
+		{ name: 'Aubergine', value: 'purple' },
+		{ name: 'Blueberry', value: 'Blue' },
+		{ name: 'Banana', value: 'yellow' },
+		{ name: 'Strawberry', value: 'red' },
+	];
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.value = this.datetime;
+	}
+
+	#onDatetimeChange(e: UUIInputEvent) {
+		e.stopPropagation();
+
+		this.datetime = e.target.value as string;
+		const append = this._currentTimezone ? `,${this._currentTimezone}` : '';
+		this.value = this.datetime + append;
+
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	#onTimezoneChange(e: UUISelectEvent) {
+		e.stopPropagation();
+
+		const tz = e.target.value as string;
+		this._currentTimezone = tz;
+		this.value = `${this.datetime},${tz}`;
+
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	render() {
+		return html`<uui-input
+				id="datetime"
+				@change="${this.#onDatetimeChange}"
+				label="Pick a date or time"
+				.type="${this.type}"
+				.value="${this.datetime}"></uui-input>
+			${this.enableTimezones ? this.#renderTimezone() : nothing}`;
+	}
+
+	#renderTimezone() {
+		return html`<uui-select
+			id="timezone"
+			@change="${this.#onTimezoneChange}"
+			label="Select timezone"
+			placeholder="Pick timezone"
+			.options="${this.options}"></uui-select>`;
+	}
+}
+
+export default UmbInputDatePickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-date-picker': UmbInputDatePickerElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.stories.ts
new file mode 100644
index 0000000000..89d74872b2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.stories.ts
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-date-picker.element';
+import type { UmbInputDatePickerElement } from './input-date-picker.element';
+
+const meta: Meta<UmbInputDatePickerElement> = {
+	title: 'Components/Inputs/Date Picker',
+	component: 'umb-input-date-picker',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputDatePickerElement>;
+
+export const Overview: Story = {
+	args: {},
+};
+
+export const WithOpacity: Story = {
+	args: {},
+};
+
+export const WithSwatches: Story = {
+	args: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.test.ts
new file mode 100644
index 0000000000..60a3629b78
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-date-picker/input-date-picker.test.ts
@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputDatePickerElement } from './input-date-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+describe('UmbInputDatePickerElement', () => {
+	let element: UmbInputDatePickerElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-input-date-picker></umb-input-date-picker> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbInputDatePickerElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 88fc3f752c..fac2cbe79d 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -223,12 +223,17 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		values: [
 			{
 				alias: 'format',
-				value: 'YYYY-MM-DD',
+				value: 'YYYY-MM-DDTHH:mm',
 			},
 			{
 				alias: 'offsetTime',
 				value: true,
 			},
+			{
+				alias: 'enableTimezones',
+				value: true,
+			},
+			{},
 		],
 	},
 	{
@@ -571,7 +576,12 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		parentId: null,
 		propertyEditorAlias: 'Umbraco.Decimal',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Decimal',
-		values: [],
+		values: [
+			{
+				alias: 'step',
+				value: 0.01,
+			},
+		],
 	},
 	{
 		$type: '',