From be12bf474c77cf39e7b34d1ffdf0ccbbd71e6249 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 30 Sep 2022 15:33:28 +0200 Subject: [PATCH] move icon picker into folder --- .../property-editor-ui-icon-picker.element.ts | 48 +++++++++++++++++++ .../property-editor-ui-icon-picker.stories.ts | 15 ++++++ .../property-editor-ui-icon-picker.test.ts | 21 ++++++++ .../property-editor-icon-picker.element.ts | 41 ---------------- .../src/core/services/modal/modal.service.ts | 1 + .../src/mocks/data/property-editor.data.ts | 8 ++++ .../property-editor-ui.ts | 12 +++++ 7 files changed, 105 insertions(+), 41 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts new file mode 100644 index 0000000000..ddea6009e1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts @@ -0,0 +1,48 @@ +import { html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbContextConsumerMixin } from '../../../core/context'; +import type { UmbModalService } from '../../../core/services/modal'; + +/** + * @element umb-property-editor-ui-icon-picker + */ +@customElement('umb-property-editor-ui-icon-picker') +export class UmbPropertyEditorUIIconPickerElement extends UmbContextConsumerMixin(LitElement) { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + private _modalService?: UmbModalService; + + constructor() { + super(); + this.consumeContext('umbModalService', (modalService: UmbModalService) => { + this._modalService = modalService; + }); + } + + private _openModal() { + this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' }); + } + + render() { + return html` + + Pick an icon + + `; + } +} + +export default UmbPropertyEditorUIIconPickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-icon-picker': UmbPropertyEditorUIIconPickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts new file mode 100644 index 0000000000..183d36a9f4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element'; +import './property-editor-ui-icon-picker.element'; + +export default { + title: 'Property Editor UIs/Icon Picker', + component: 'umb-property-editor-ui-icon-picker', + id: 'umb-property-editor-ui-icon-picker', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts new file mode 100644 index 0000000000..c292f515da --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { defaultA11yConfig } from '../../../core/helpers/chai'; +import { UmbPropertyEditorUIIconPickerElement } from './umb-property-editor-ui-icon-picker.element'; + +describe('UmbPropertyEditorUIIconPickerElement', () => { + let element: UmbPropertyEditorUIIconPickerElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts deleted file mode 100644 index 9b3cbc3b92..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; - -import { UmbContextConsumerMixin } from '../../core/context'; -import { UmbModalService } from '../../core/services/modal'; - -// TODO: remove these imports when they are part of UUI -import '@umbraco-ui/uui-modal'; -import '@umbraco-ui/uui-modal-sidebar'; -import '@umbraco-ui/uui-modal-container'; -import '@umbraco-ui/uui-modal-dialog'; - -@customElement('umb-property-editor-icon-picker') -class UmbPropertyEditorIconPicker extends UmbContextConsumerMixin(LitElement) { - private _modalService?: UmbModalService; - - constructor() { - super(); - this.consumeContext('umbModalService', (modalService: UmbModalService) => { - this._modalService = modalService; - }); - } - - private _openModal() { - this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' }); - } - - render() { - return html` - - Pick an icon - - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-property-editor-icon-picker': UmbPropertyEditorIconPicker; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts index 99ec1537cc..4eb94c0a0f 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts @@ -2,6 +2,7 @@ import './layouts/confirm/modal-layout-confirm.element'; import './layouts/content-picker/modal-layout-content-picker.element'; import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; +import './layouts/icon-picker/modal-layout-icon-picker.element'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { BehaviorSubject, Observable } from 'rxjs'; diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts index 4fd61a9bff..878144f999 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts @@ -325,6 +325,14 @@ export const data: Array = [ icon: 'umb:autofill', alias: 'Umbraco.Custom', }, + { + isSystem: false, + group: 'Custom', + hasConfig: true, + name: 'Icon Picker', + icon: 'umb:autofill', + alias: 'Umbraco.IconPicker', + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts index ff1f011fcb..43fe6acdb3 100644 --- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts @@ -95,4 +95,16 @@ export const manifests: Array Promise import('../backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element'), + meta: { + label: 'Icon Picker', + propertyEditor: 'Umbraco.IconPicker', + icon: 'umb:document', + group: 'Common', + }, + }, ];