From 6c2a566016aa4e7d99f0cbaad6ff2c5583cfa1e9 Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Mon, 6 Mar 2023 16:13:16 +1000 Subject: [PATCH] config ui --- ...ny-mce-dimensions-configuration.element.ts | 28 +++++++ ...ny-mce-dimensions-configuration.stories.ts | 15 ++++ ...-tiny-mce-dimensions-configuration.test.ts | 21 ++++++ .../config/configuration/manifests.ts | 74 ++++++++++++++++--- ...-mce-maximagesize-configuration.element.ts | 27 +++++++ ...-mce-maximagesize-configuration.stories.ts | 15 ++++ ...iny-mce-maximagesize-configuration.test.ts | 21 ++++++ ...-ui-tiny-mce-mode-configuration.element.ts | 72 ++++++++++++++++++ ...-ui-tiny-mce-mode-configuration.stories.ts | 15 ++++ ...tor-ui-tiny-mce-mode-configuration.test.ts | 21 ++++++ ...ditor-ui-tiny-mce-configuration.element.ts | 30 -------- ...ditor-ui-tiny-mce-configuration.stories.ts | 15 ---- ...y-editor-ui-tiny-mce-configuration.test.ts | 21 ------ ...y-mce-stylesheets-configuration.element.ts | 40 ++++++++++ ...y-mce-stylesheets-configuration.stories.ts | 15 ++++ ...tiny-mce-stylesheets-configuration.test.ts | 21 ++++++ ...-tiny-mce-toolbar-configuration.element.ts | 41 ++++++++++ ...-tiny-mce-toolbar-configuration.stories.ts | 15 ++++ ...-ui-tiny-mce-toolbar-configuration.test.ts | 21 ++++++ .../uis/tiny-mce/manifests.ts | 11 +-- 20 files changed, 453 insertions(+), 86 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.test.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.stories.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.test.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts new file mode 100644 index 0000000000..bd3543e676 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts @@ -0,0 +1,28 @@ +import { html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; + +/** + * @element umb-property-editor-ui-tiny-mce-dimensions-configuration + */ +@customElement('umb-property-editor-ui-tiny-mce-dimensions-configuration') +export class UmbPropertyEditorUITinyMceDimensionsConfigurationElement extends UmbLitElement { + static styles = [UUITextStyles]; + + @property() + value: { width?: number; height?: number } = {}; + + render() { + return html` x + pixels`; + } +} + +export default UmbPropertyEditorUITinyMceDimensionsConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-tiny-mce-dimensions-configuration': UmbPropertyEditorUITinyMceDimensionsConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts new file mode 100644 index 0000000000..819760fe65 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element'; +import './property-editor-ui-tiny-mce-dimensions-configuration.element'; + +export default { + title: 'Property Editor UIs/Tiny Mce Dimensions Configuration', + component: 'umb-property-eDitor-ui-tiny-mce-dimensions-configuration', + id: 'umb-property-editor-ui-tiny-mce-dimensions-configuration', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts new file mode 100644 index 0000000000..9ffd813eca --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUITinyMceDimensionsConfigurationElement', () => { + let element: UmbPropertyEditorUITinyMceDimensionsConfigurationElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceDimensionsConfigurationElement); + }); + + 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/tiny-mce/config/configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts index 853af4e856..558284efca 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/manifests.ts @@ -1,14 +1,66 @@ import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; -export const manifest: ManifestPropertyEditorUI = { - type: 'propertyEditorUI', - alias: 'Umb.PropertyEditorUI.TinyMCE', - name: 'TinyMCE Property Editor UI', - loader: () => import('./property-editor-ui-tiny-mce-configuration.element'), - meta: { - label: 'Rich Text Editor Configuration', - propertyEditorModel: 'Umbraco.TinyMCE.Configuration', - icon: 'umb:autofill', - group: 'common', +const configurationManifests: Array = [ + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE.ToolbarConfiguration', + name: 'TinyMCE Toolbar Property Editor UI', + loader: () => import('./toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element'), + meta: { + label: 'TinyMCE Toolbar Configuration', + propertyEditorModel: 'Umbraco.TinyMCE.Configuration', + icon: 'umb:autofill', + group: 'common', + }, }, -}; + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE.StylesheetsConfiguration', + name: 'TinyMCE Stylesheets Property Editor UI', + loader: () => import('./stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element'), + meta: { + label: 'TinyMCE Stylesheets Configuration', + propertyEditorModel: 'Umbraco.TinyMCE.Configuration', + icon: 'umb:autofill', + group: 'common', + }, + }, + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE.DimensionsConfiguration', + name: 'TinyMCE Dimensions Property Editor UI', + loader: () => import('./dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element'), + meta: { + label: 'TinyMCE Dimensions Configuration', + propertyEditorModel: 'Umbraco.TinyMCE.Configuration', + icon: 'umb:autofill', + group: 'common', + }, + }, + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE.MaxImageSizeConfiguration', + name: 'TinyMCE Max Image Size Property Editor UI', + loader: () => import('./max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element'), + meta: { + label: 'TinyMCE Max Image Size Configuration', + propertyEditorModel: 'Umbraco.TinyMCE.Configuration', + icon: 'umb:autofill', + group: 'common', + }, + }, + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TinyMCE.ModeConfiguration', + name: 'TinyMCE Mode Property Editor UI', + loader: () => import('./mode/property-editor-ui-tiny-mce-mode-configuration.element'), + meta: { + label: 'TinyMCE Mode Configuration', + propertyEditorModel: 'Umbraco.TinyMCE.Configuration', + icon: 'umb:autofill', + group: 'common', + }, + }, +]; + +export const manifests = [...configurationManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts new file mode 100644 index 0000000000..d2591afd73 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts @@ -0,0 +1,27 @@ +import { html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; + +/** + * @element umb-property-editor-ui-tiny-mce-maximagesize-configuration + */ +@customElement('umb-property-editor-ui-tiny-mce-maximagesize-configuration') +export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement extends UmbLitElement { + static styles = [UUITextStyles]; + + @property() + value?: number; + + render() { + return html``; + } +} + +export default UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-tiny-mce-maximagesize-configuration': UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts new file mode 100644 index 0000000000..422b738d92 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element'; +import './property-editor-ui-tiny-mce-maximagesize-configuration.element'; + +export default { + title: 'Property Editor UIs/Tiny Mce Max Image Size Configuration', + component: 'umb-property-eDitor-ui-tiny-mce-maximagesize-configuration', + id: 'umb-property-editor-ui-tiny-mce-maximagesize-configuration', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts new file mode 100644 index 0000000000..0e8bf30a3e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUITinyMceMaxImSizeConfigurationElement', () => { + let element: UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement); + }); + + 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/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts new file mode 100644 index 0000000000..b89099e5bc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.element.ts @@ -0,0 +1,72 @@ +import { css, html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; +import { UUISelectEvent } from '@umbraco-ui/uui'; +import { UmbLitElement } from '@umbraco-cms/element'; + +/** + * @element umb-property-editor-ui-tiny-mce-mode-configuration + */ +@customElement('umb-property-editor-ui-tiny-mce-mode-configuration') +export class UmbPropertyEditorUITinyMceModeConfigurationElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + :host { + display:block; + width:220px; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + uui-select { + max-width:220px; + } + `, + ]; + + @property({ type: String }) + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + options: Array