From f474a7b1e0412d2e0163c2c998acaa383a6e455d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 13 Jan 2023 12:51:52 +0100 Subject: [PATCH] add tags --- .../property-editors/models/Umbraco.Tags.ts | 2 +- .../shared/property-editors/uis/manifests.ts | 4 +-- .../uis/tags/config/storage-type/manifests.ts | 14 +++++++++ ...rty-editor-ui-tags-storage-type.element.ts | 29 +++++++++++++++++++ ...rty-editor-ui-tags-storage-type.stories.ts | 15 ++++++++++ ...operty-editor-ui-tags-storage-type.test.ts | 21 ++++++++++++++ .../property-editors/uis/tags/manifests.ts | 7 ++++- 7 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts index 715cd3971f..2c2ebe7ae8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Tags.ts @@ -17,7 +17,7 @@ export const manifest: ManifestPropertyEditorModel = { alias: 'storageType', label: 'Storage Type', description: '', - propertyEditorUI: 'Umb.PropertyEditorUI.Dropdown', + propertyEditorUI: 'Umb.PropertyEditorUI.Tags.StorageType', }, ], defaultData: [ 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 f3a0e89206..cc410cf4d8 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 @@ -11,7 +11,7 @@ import { manifest as multipleTextString } from './multiple-text-string/manifests import { manifest as textArea } from './textarea/manifests'; import { manifest as slider } from './slider/manifests'; import { manifest as toggle } from './toggle/manifests'; -import { manifest as tags } from './tags/manifests'; +import { manifests as tags } from './tags/manifests'; 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'; @@ -42,7 +42,6 @@ export const manifests: Array = [ textArea, slider, toggle, - tags, markdownEditor, radioButtonList, checkboxList, @@ -61,6 +60,7 @@ export const manifests: Array = [ ...blockGrid, ...collectionView, ...tinyMCE, + ...tags, { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Number', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts new file mode 100644 index 0000000000..dbcc66558b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts @@ -0,0 +1,14 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.Tags.StorageType', + name: 'Tags Storage Type Property Editor UI', + loader: () => import('./property-editor-ui-tags-storage-type.element'), + meta: { + label: 'Tags Storage Type', + propertyEditorModel: '', + icon: 'umb:autofill', + group: 'common', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts new file mode 100644 index 0000000000..83dd8314cc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.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-tags-storage-type + */ +@customElement('umb-property-editor-ui-tags-storage-type') +export class UmbPropertyEditorUITagsStorageTypeElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-tags-storage-type
`; + } +} + +export default UmbPropertyEditorUITagsStorageTypeElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-tags-storage-type': UmbPropertyEditorUITagsStorageTypeElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts new file mode 100644 index 0000000000..77f2d144f8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element'; +import './property-editor-ui-tags-storage-type.element'; + +export default { + title: 'Property Editor UIs/Tags Storage Type', + component: 'umb-property-editor-ui-tags-storage-type', + id: 'umb-property-editor-ui-tags-storage-type', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts new file mode 100644 index 0000000000..1de85497c5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUITagsStorageTypeElement', () => { + let element: UmbPropertyEditorUITagsStorageTypeElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUITagsStorageTypeElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts index 936e81dea3..d826098369 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/manifests.ts @@ -1,6 +1,7 @@ +import { manifest as storageType } from './config/storage-type/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { +const manifest: ManifestPropertyEditorUI = { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Tags', name: 'Tags Property Editor UI', @@ -12,3 +13,7 @@ export const manifest: ManifestPropertyEditorUI = { group: 'common', }, }; + +const config: Array = [storageType]; + +export const manifests = [manifest, ...config];