[AAE-10453] Stories for rich-text-editor component (#7846)

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'
+};

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<RichTextEditorComponent> = (args: RichTextEditorComponent) => ({
+    props: args,
+    template: `
+    <adf-rich-text-editor
+        [data]=data
+        [readOnly]=readOnly
+        #editor >
+    </adf-rich-text-editor>
+    <hr/>
+    <h3>Output data from editor:</h3>
+    <pre>{{editor.outputData$ | async | json}}</pre>
+    `
+});
+
+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
+};