[AAE-10202] Storybook EmptyContent component (#7745)

* [AAE-10202] Storybook add EmptyContent component stories * [AAE-10202] Storybook add documentation table for stories * [AAE-10202] Storybook change stories title path * [AAE-10202] Storybook add type for template args * Trigger travis * [AAE-10202] Storybook fix error with updated version
2025-07-24 17:32:15 +00:00 · 2022-08-17 15:29:42 +02:00
parent 104a936026
commit d3129e2ad5
1 changed files with 117 additions and 0 deletions
--- a/lib/core/templates/empty-content/empty-content.component.stories.ts
+++ b/lib/core/templates/empty-content/empty-content.component.stories.ts
@@ -0,0 +1,117 @@
+/*!
+ * @license
+ * Copyright 2022 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 { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { EmptyContentComponent } from './empty-content.component';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { TemplateModule } from '../template.module';
+
+export default {
+    component: EmptyContentComponent,
+    title: 'Core/Template/Empty Content',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, TemplateModule]
+        })
+    ],
+    argTypes: {
+        icon: {
+            description: 'Angular Material icon',
+            table: {
+                category: 'Component Inputs',
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'cake'
+                }
+            }
+        },
+        title: {
+            table: {
+                category: 'Component Inputs',
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: ''
+                }
+            }
+        },
+        subtitle: {
+            table: {
+                category: 'Component Inputs',
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: ''
+                }
+            }
+        },
+        lines: {
+            name: 'lines',
+            description: 'Content Projection Text',
+            control: {type: 'object'},
+            defaultValue: [
+                'Items you removed are moved to the Trash',
+                'Empty Trash to permanently delete items'
+            ],
+            table: {
+                category: 'Strories Controls',
+                type: {
+                    summary: 'array'
+                }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<EmptyContentComponent> = (
+    args: EmptyContentComponent
+) => ({
+    props: args
+});
+
+export const defaultStory = template.bind({});
+defaultStory.argTypes = {
+    lines: {
+        control: { disable: true }
+    }
+};
+defaultStory.args = {
+    icon: 'star_rate',
+    title: 'No favourite files or folders',
+    subtitle: 'Favourite items that you want to easily find later'
+};
+defaultStory.storyName = 'Default';
+
+export const multipleLines: Story<EmptyContentComponent> = (
+    args: EmptyContentComponent & { lines: string[] }
+) => ({
+    props: {
+        ...args
+    },
+    template: `
+    <adf-empty-content icon="delete" title="Trash is empty">
+        <p class="adf-empty-content__text" *ngFor="let line of ${JSON.stringify(
+            args.lines
+        ).replace(/\"/g, '\'')}">
+            {{ line }}
+        </p>
+    </adf-empty-content>`
+});