From 9cd8918e2255a0cf1c4d08f658d53ff70fbd2fe4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 8 Mar 2023 11:28:37 +0100 Subject: [PATCH] rename data interface --- .../libs/modal/modal.context.ts | 6 +++--- .../icon-picker/icon-picker-modal.element.ts | 10 +++++----- .../icon-picker/icon-picker-modal.stories.ts | 12 ++++++------ .../icon-picker/icon-picker-modal.test.ts | 10 +++++----- .../shared/modals/icon-picker/index.ts | 18 ++++++++++++++++++ .../property-editor-ui-icon-picker.stories.ts | 6 +++--- 6 files changed, 40 insertions(+), 22 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts index 6fb76226e2..68c0940a32 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts @@ -15,7 +15,7 @@ import { BehaviorSubject } from 'rxjs'; import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog'; import type { UmbModalDocumentPickerData } from '../../src/backoffice/documents/documents/modals/document-picker'; import { UmbModalChangePasswordData } from './layouts/modal-layout-change-password.element'; -import type { UmbModalIconPickerData } from '../../src/backoffice/shared/modals/icon-picker/icon-picker-modal.element'; +import type { UmbIconPickerModalData } from '../../src/backoffice/shared/modals/icon-picker/icon-picker-modal.element'; import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm.element'; import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element'; @@ -94,11 +94,11 @@ export class UmbModalContext { /** * Opens an Icon Picker sidebar modal * @public - * @param {UmbModalIconPickerData} [data] + * @param {UmbIconPickerModalData} [data] * @return {*} {UmbModalHandler} * @memberof UmbModalContext */ - public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler { + public iconPicker(data?: UmbIconPickerModalData): UmbModalHandler { return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts index af77922ada..f161a37a71 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts @@ -8,15 +8,15 @@ import { UmbModalLayoutElement } from '../../../../../libs/modal/layouts/modal-l import icons from '../../../../../public-assets/icons/icons.json'; -export interface UmbModalIconPickerData { +export interface UmbIconPickerModalData { multiple: boolean; selection: string[]; } // TODO: Make use of UmbPickerLayoutBase // TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers -@customElement('umb-modal-layout-icon-picker') -export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement { +@customElement('umb-icon-picker-modal') +export class UmbIconPickerModalElement extends UmbModalLayoutElement { static styles = [ UUITextStyles, css` @@ -211,10 +211,10 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement = () => html` +export const Overview: Story = () => html` - + `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts index e3776c06a2..6831f4a0c9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts @@ -1,16 +1,16 @@ import { expect, fixture, html } from '@open-wc/testing'; -import { UmbModalLayoutIconPickerElement } from './icon-picker-modal.element'; +import { UmbIconPickerModalElement } from './icon-picker-modal.element'; import { defaultA11yConfig } from '@umbraco-cms/test-utils'; -describe('umb-modal-layout-icon-picker', () => { - let element: UmbModalLayoutIconPickerElement; +describe('umb-icon-picker-modal', () => { + let element: UmbIconPickerModalElement; beforeEach(async () => { - element = await fixture(html` `); + element = await fixture(html` `); }); it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbModalLayoutIconPickerElement); + expect(element).to.be.instanceOf(UmbIconPickerModalElement); }); // TODO: Reinstate this test when the a11y audit is fixed on uui-color-picker diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts new file mode 100644 index 0000000000..6fb9b30151 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts @@ -0,0 +1,18 @@ +import { UmbModalToken } from 'libs/modal'; + +export interface UmbModalDocumentPickerData { + multiple?: boolean; + selection?: Array; +} + +export interface UmbModalDocumentPickerResponse { + selection: Array; +} + +export const UMB_DOCUMENT_PICKER_MODAL_TOKEN = new UmbModalToken( + 'Umb.Modal.DocumentPicker', + { + type: 'sidebar', + size: 'small', + } +); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts index 3dd25e1cac..b48f69befe 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts @@ -3,7 +3,7 @@ import { html } from 'lit-html'; import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element'; import './property-editor-ui-icon-picker.element'; -import type { UmbModalLayoutIconPickerElement } from 'src/backoffice/shared/modals/icon-picker/icon-picker-modal.element'; +import type { UmbIconPickerModalElement } from 'src/backoffice/shared/modals/icon-picker/icon-picker-modal.element'; export default { title: 'Property Editor UIs/Icon Picker', @@ -11,8 +11,8 @@ export default { id: 'umb-property-editor-ui-icon-picker', } as Meta; -export const AAAOverview: Story = () => - html``; +export const AAAOverview: Story = () => + html``; AAAOverview.storyName = 'Overview'; AAAOverview.decorators = [ (story) =>