yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve stories with value/config

Browse Source
This commit is contained in:
Nathan Woulfe
2023-03-08 15:43:17 +10:00
parent 16d5f11242
commit f3afbdbbce
6 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
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
View File

@@ -1,15 +1,20 @@
import { Meta, Story } from '@storybook/web-components';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
import type { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element';
import './property-editor-ui-tiny-mce-dimensions-configuration.element';
const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
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<UmbPropertyEditorUITinyMceDimensionsConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-dimensions-configuration></umb-property-editor-ui-tiny-mce-dimensions-configuration>`;
export const AAAOverview = ({ value }: any) =>
html`<umb-property-editor-ui-tiny-mce-dimensions-configuration .value=${value}></umb-property-editor-ui-tiny-mce-dimensions-configuration>`;
AAAOverview.storyName = 'Overview';
AAAOverview.args = {
value: dataTypeData?.data?.find((x) => x.alias === 'dimensions')?.value,
};

14
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
View File

@@ -1,15 +1,21 @@
import { Meta, Story } from '@storybook/web-components';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
import type { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element';
import './property-editor-ui-tiny-mce-maximagesize-configuration.element';
const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
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<UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-maximagesize-configuration></umb-property-editor-ui-tiny-mce-maximagesize-configuration>`;
export const AAAOverview = ({ value }: any) =>
html`<umb-property-editor-ui-tiny-mce-maximagesize-configuration
.value=${value}></umb-property-editor-ui-tiny-mce-maximagesize-configuration>`;
AAAOverview.storyName = 'Overview';
AAAOverview.args = {
value: dataTypeData?.data?.find((x) => x.alias === 'maxImageSize')?.value,
};

13
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
View File

@@ -1,15 +1,20 @@
import { Meta, Story } from '@storybook/web-components';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
import type { UmbPropertyEditorUITinyMceModeConfigurationElement } from './property-editor-ui-tiny-mce-mode-configuration.element';
import './property-editor-ui-tiny-mce-mode-configuration.element';
const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
export default {
title: 'Property Editor UIs/Tiny Mce Mode Configuration',
component: 'umb-property-editor-ui-tiny-mce-mode-configuration',
id: 'umb-property-editor-ui-tiny-mce-mode-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceModeConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-mode-configuration></umb-property-editor-ui-tiny-mce-mode-configuration>`;
export const AAAOverview = ({ value }: any) =>
html`<umb-property-editor-ui-tiny-mce-mode-configuration .value=${value}></umb-property-editor-ui-tiny-mce-mode-configuration>`;
AAAOverview.storyName = 'Overview';
AAAOverview.args = {
value: dataTypeData?.data?.find((x) => x.alias === 'mode')?.value,
};

13
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
View File

@@ -1,15 +1,20 @@
import { Meta, Story } from '@storybook/web-components';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
import type { UmbPropertyEditorUITinyMceStylesheetsConfigurationElement } from './property-editor-ui-tiny-mce-stylesheets-configuration.element';
import './property-editor-ui-tiny-mce-stylesheets-configuration.element';
const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
export default {
title: 'Property Editor UIs/Tiny Mce Stylesheets Configuration',
component: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
id: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceStylesheetsConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-stylesheets-configuration></umb-property-editor-ui-tiny-mce-stylesheets-configuration>`;
export const AAAOverview = ({ value }: any) =>
html`<umb-property-editor-ui-tiny-mce-stylesheets-configuration .value=${value}></umb-property-editor-ui-tiny-mce-stylesheets-configuration>`;
AAAOverview.storyName = 'Overview';
AAAOverview.args = {
value: dataTypeData?.data?.find(x => x.alias === 'stylesheets')?.value ?? []
}

17
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
View File

@@ -1,15 +1,22 @@
import { Meta, Story } from '@storybook/web-components';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
import type { UmbPropertyEditorUITinyMceToolbarConfigurationElement } from './property-editor-ui-tiny-mce-toolbar-configuration.element';
import './property-editor-ui-tiny-mce-toolbar-configuration.element';
const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
export default {
title: 'Property Editor UIs/Tiny Mce Toolbar Configuration',
component: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
id: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceToolbarConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-toolbar-configuration></umb-property-editor-ui-tiny-mce-toolbar-configuration>`;
AAAOverview.storyName = 'Overview';
export const AAAOverview = ({ value }: any) =>
html`<umb-property-editor-ui-tiny-mce-toolbar-configuration .value=${value}></umb-property-editor-ui-tiny-mce-toolbar-configuration>`;
AAAOverview.storyName = 'Overview';
AAAOverview.args = {
value: dataTypeData?.data?.find(x => x.alias === 'toolbar')?.value ?? []
}

16
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
View File

@@ -1,15 +1,23 @@
import { Meta, Story } from '@storybook/web-components';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
import type { UmbPropertyEditorUITinyMceElement } from './property-editor-ui-tiny-mce.element';
import './property-editor-ui-tiny-mce.element';
const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
export default {
title: 'Property Editor UIs/Tiny Mce',
component: 'umb-property-editor-ui-tiny-mce',
id: 'umb-property-editor-ui-tiny-mce',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceElement> = () =>
html`<umb-property-editor-ui-tiny-mce></umb-property-editor-ui-tiny-mce>`;
export const AAAOverview = ({ config, value }: any) =>
html`<umb-property-editor-ui-tiny-mce .config=${config} .value=${value}></umb-property-editor-ui-tiny-mce>`;
AAAOverview.storyName = 'Overview';
AAAOverview.args = {
config: dataTypeData?.data,
value: 'I am a default value for the TinyMCE text editor story.',
}