From 60dd7ee915387f253a73cb6930a32026f623f892 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 9 Jan 2023 16:31:26 +0100 Subject: [PATCH] add radio button list --- .../models/Umbraco.RadioButtonList.ts | 8 +++++ .../property-editors/models/manifests.ts | 8 ++--- .../shared/property-editors/uis/manifests.ts | 2 ++ .../uis/radio-button-list/manifests.ts | 24 +++++++++++++++ ...rty-editor-ui-radio-button-list.element.ts | 29 +++++++++++++++++++ ...rty-editor-ui-radio-button-list.stories.ts | 15 ++++++++++ ...operty-editor-ui-radio-button-list.test.ts | 21 ++++++++++++++ .../src/core/mocks/data/data-type.data.ts | 13 +++++++++ .../src/core/mocks/data/document.data.ts | 6 ++++ 9 files changed, 120 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.RadioButtonList.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.RadioButtonList.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.RadioButtonList.ts new file mode 100644 index 0000000000..eeaf343770 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.RadioButtonList.ts @@ -0,0 +1,8 @@ +import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorModel = { + type: 'propertyEditorModel', + name: 'Radio Button List', + alias: 'Umbraco.RadioButtonList', + meta: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts index 49621ed137..4c746f296a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts @@ -14,6 +14,7 @@ import { manifest as slider } from './Umbraco.Slider'; import { manifest as trueFalse } from './Umbraco.TrueFalse'; import { manifest as tags } from './Umbraco.Tags'; import { manifest as markdownEditor } from './Umbraco.MarkdownEditor'; +import { manifest as radioButtonList } from './Umbraco.RadioButtonList'; import type { ManifestPropertyEditorModel } from '@umbraco-cms/models'; @@ -34,6 +35,7 @@ export const manifests: Array = [ trueFalse, tags, markdownEditor, + radioButtonList, { type: 'propertyEditorModel', name: 'Decimal', @@ -100,12 +102,6 @@ export const manifests: Array = [ alias: 'Umbraco.ListView', meta: {}, }, - { - type: 'propertyEditorModel', - name: 'Radio button list', - alias: 'Umbraco.RadioButtonList', - meta: {}, - }, { type: 'propertyEditorModel', name: 'File upload', 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 92603a34d5..46e3dd09fe 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 @@ -14,6 +14,7 @@ import { manifest as slider } from './slider/manifests'; import { manifest as toggle } from './toggle/manifests'; import { manifest as tags } from './tags/manifests'; import { manifest as markdownEditor } from './markdown-editor/manifests'; +import { manifest as radioButtonList } from './radio-button-list/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; @@ -34,6 +35,7 @@ export const manifests: Array = [ toggle, tags, markdownEditor, + radioButtonList, { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.BlockList', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts new file mode 100644 index 0000000000..af657a5a82 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts @@ -0,0 +1,24 @@ +import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; + +export const manifest: ManifestPropertyEditorUI = { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.RadioButtonList', + name: 'RadioButtonList Property Editor UI', + loader: () => import('./property-editor-ui-radio-button-list.element'), + meta: { + label: 'Radio Button List', + propertyEditorModel: 'Umbraco.RadioButtonList', + icon: 'umb:target', + group: 'lists', + config: { + properties: [ + { + alias: 'options', + label: 'Add option', + description: 'Add, remove or sort options for the list.', + propertyEditorUI: 'Umb.PropertyEditorUI.MultipleTextString', + }, + ], + }, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts new file mode 100644 index 0000000000..bf409c9386 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.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-radio-button-list + */ +@customElement('umb-property-editor-ui-radio-button-list') +export class UmbPropertyEditorUIRadioButtonListElement extends LitElement { + static styles = [UUITextStyles]; + + @property() + value = ''; + + @property({ type: Array, attribute: false }) + public config = []; + + render() { + return html`
umb-property-editor-ui-radio-button-list
`; + } +} + +export default UmbPropertyEditorUIRadioButtonListElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-radio-button-list': UmbPropertyEditorUIRadioButtonListElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts new file mode 100644 index 0000000000..731d38eeab --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit-html'; + +import type { UmbPropertyEditorUIRadioButtonListElement } from './property-editor-ui-radio-button-list.element'; +import './property-editor-ui-radio-button-list.element'; + +export default { + title: 'Property Editor UIs/Radio Button List', + component: 'umb-property-editor-ui-radio-button-list', + id: 'umb-property-editor-ui-radio-button-list', +} as Meta; + +export const AAAOverview: Story = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts new file mode 100644 index 0000000000..0a89713c8c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts @@ -0,0 +1,21 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import { UmbPropertyEditorUIRadioButtonListElement } from './property-editor-ui-radio-button-list.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbPropertyEditorUIRadioButtonListElement', () => { + let element: UmbPropertyEditorUIRadioButtonListElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbPropertyEditorUIRadioButtonListElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + }); +}); diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 4a1d250c58..a0849f578d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -265,6 +265,19 @@ export const data: Array = [ propertyEditorUIAlias: 'Umb.PropertyEditorUI.MarkdownEditor', data: [], }, + { + name: 'Radio Button List', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-radioButtonList', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.RadioButtonList', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.RadioButtonList', + data: [], + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index bcbc1b91c3..01162294fc 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -102,6 +102,12 @@ export const data: Array = [ description: '', dataTypeKey: 'dt-markdownEditor', }, + { + alias: 'radioButtonList', + label: 'Radio Button List', + description: '', + dataTypeKey: 'dt-radioButtonList', + }, ], data: [], variants: [],