diff --git a/lib/core/src/lib/rich-text-editor/mocks/rich-text-editor.mock.ts b/lib/core/src/lib/rich-text-editor/mocks/rich-text-editor.mock.ts new file mode 100644 index 0000000000..74b2d7343a --- /dev/null +++ b/lib/core/src/lib/rich-text-editor/mocks/rich-text-editor.mock.ts @@ -0,0 +1,54 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export const exampleData = { + time: 1663761278752, + blocks: [ + { + id: 'yOV_DfEQhC', + type: 'paragraph', + data: { + text: 'text value' + } + }, + { + id: 'IZwymOWyds', + type: 'header', + data: { + text: 'Heading value', + level: 2 + } + }, + { + id: '3JJj6A8XFO', + type: 'list', + data: { + style: 'unordered', + items: ['unordered list item A', 'unordered list item B'] + } + }, + { + id: 'q98W4eK4Nj', + type: 'list', + data: { + style: 'ordered', + items: ['ordered list item 1', 'ordered list item 2'] + } + } + ], + version: '2.25.0' +}; diff --git a/lib/core/src/lib/rich-text-editor/rich-text-editor.component.stories.ts b/lib/core/src/lib/rich-text-editor/rich-text-editor.component.stories.ts new file mode 100644 index 0000000000..f7baa082f4 --- /dev/null +++ b/lib/core/src/lib/rich-text-editor/rich-text-editor.component.stories.ts @@ -0,0 +1,86 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { RichTextEditorModule } from './rich-text-editor.module'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { CoreStoryModule } from '../testing/core.story.module'; +import { RichTextEditorComponent } from './rich-text-editor.component'; +import { exampleData } from './mocks/rich-text-editor.mock'; + +export default { + component: RichTextEditorComponent, + title: 'Core/Rich Text Editor/Rich Text Editor', + decorators: [ + moduleMetadata({ + imports: [CoreStoryModule, RichTextEditorModule] + }) + ], + argTypes: { + data: { + control: 'object', + description: 'Output data.', + table: { + type: { summary: 'OutputData' } + } + }, + readOnly: { + control: 'boolean', + defaultValue: false, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' } + } + } + } +} as Meta; + +const template: Story = (args: RichTextEditorComponent) => ({ + props: args, + template: ` + + +
+

Output data from editor:

+
{{editor.outputData$ | async | json}}
+ ` +}); + +export const defaultRichTextEditor = template.bind({}); +defaultRichTextEditor.args = { + data: { + time: 1663761278752, + blocks: [ + { + id: 'yOV_DfEQhC', + type: 'paragraph', + data: { + text: 'text' + } + } + ], + version: '2.25.0' + } +}; + +export const readOnlyRichTextEditor = template.bind({}); +readOnlyRichTextEditor.args = { + readOnly: true, + data: exampleData +};