generate ui files

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.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-color-picker
+ */
+@customElement('umb-property-editor-ui-color-picker')
+export class UmbPropertyEditorUIColorPickerElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-color-picker</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIColorPickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-color-picker': UmbPropertyEditorUIColorPickerElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIColorPickerElement } from './property-editor-ui-color-picker.element';
+import './property-editor-ui-color-picker.element';
+
+export default {
+	title: 'Property Editor UIs/Color Picker',
+	component: 'umb-property-editor-ui-color-picker',
+	id: 'umb-property-editor-ui-color-picker',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIColorPickerElement> = () =>
+	html`<umb-property-editor-ui-color-picker></umb-property-editor-ui-color-picker>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.test.ts

@@ -0,0 +1,19 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIColorPickerElement } from './property-editor-ui-color-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIColorPickerElement', () => {
+	let element: UmbPropertyEditorUIColorPickerElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-color-picker></umb-property-editor-ui-color-picker> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIColorPickerElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});