From 0ccd622e011cbc6f3bc0ba113b2ba8b6e5e0c927 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 10 Jan 2023 08:58:51 +0100
Subject: [PATCH] add number range property editor ui

---
 .../shared/property-editors/uis/manifests.ts  |  2 ++
 .../uis/number-range/manifests.ts             | 14 +++++++++
 ...property-editor-ui-number-range.element.ts | 29 +++++++++++++++++++
 ...property-editor-ui-number-range.stories.ts | 15 ++++++++++
 .../property-editor-ui-number-range.test.ts   | 21 ++++++++++++++
 5 files changed, 81 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
index ed83d207a0..31a274ac7f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
@@ -17,6 +17,7 @@ import { manifest as markdownEditor } from './markdown-editor/manifests';
 import { manifest as radioButtonList } from './radio-button-list/manifests';
 import { manifest as checkboxList } from './checkbox-list/manifests';
 import { manifest as blockList } from './block-list/manifests';
+import { manifest as numberRange } from './number-range/manifests';
 
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
@@ -40,6 +41,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	radioButtonList,
 	checkboxList,
 	blockList,
+	numberRange,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Number',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/manifests.ts
new file mode 100644
index 0000000000..4c739b3240
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.NumberRange',
+	name: 'Number Range Property Editor UI',
+	loader: () => import('./property-editor-ui-number-range.element'),
+	meta: {
+		label: 'Number Range',
+		propertyEditorModel: '',
+		icon: 'umb:autofill',
+		group: 'common',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
new file mode 100644
index 0000000000..c209d2a4a6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-number-range
+ */
+@customElement('umb-property-editor-ui-number-range')
+export class UmbPropertyEditorUINumberRangeElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-number-range</div>`;
+	}
+}
+
+export default UmbPropertyEditorUINumberRangeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-number-range': UmbPropertyEditorUINumberRangeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts
new file mode 100644
index 0000000000..b3b0027c60
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUINumberRangeElement } from './property-editor-ui-number-range.element';
+import './property-editor-ui-number-range.element';
+
+export default {
+	title: 'Property Editor UIs/Number Range',
+	component: 'umb-property-editor-ui-number-range',
+	id: 'umb-property-editor-ui-number-range',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUINumberRangeElement> = () =>
+	html`<umb-property-editor-ui-number-range></umb-property-editor-ui-number-range>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.test.ts
new file mode 100644
index 0000000000..b6bfe9d109
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUINumberRangeElement } from './property-editor-ui-number-range.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUINumberRangeElement', () => {
+  let element: UmbPropertyEditorUINumberRangeElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-number-range></umb-property-editor-ui-number-range> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUINumberRangeElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});