From a1d19ee4c8313e6ba36147c1dff0425a5003f820 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20Terelak?= <64163335+Venrofi@users.noreply.github.com> Date: Thu, 22 Sep 2022 07:56:27 +0200 Subject: [PATCH] [AAE-10281] Stories for components in Layout module in ADF Core (#7847) * [AAE-10281] Stories for components in Layout module in ADF Core * trigger travis * Lorem ipsum updates for Travis --- .../header/header.component.stories.ts | 136 +++++++++++ .../sidebar-action-menu.component.ts | 4 +- .../sidebar-action.component.stories.ts | 76 ++++++ .../sidenav-layout.component.stories.ts | 230 ++++++++++++++++++ .../sidenav-layout.component.ts | 6 +- 5 files changed, 447 insertions(+), 5 deletions(-) create mode 100644 lib/core/src/lib/layout/components/header/header.component.stories.ts create mode 100644 lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts create mode 100644 lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts diff --git a/lib/core/src/lib/layout/components/header/header.component.stories.ts b/lib/core/src/lib/layout/components/header/header.component.stories.ts new file mode 100644 index 0000000000..0421011e45 --- /dev/null +++ b/lib/core/src/lib/layout/components/header/header.component.stories.ts @@ -0,0 +1,136 @@ +/*! + * @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 { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { CoreStoryModule } from '../../../testing/core.story.module'; +import { SidenavLayoutModule } from '../../layout.module'; +import { HeaderLayoutComponent } from './header.component'; +import { RouterTestingModule } from '@angular/router/testing'; + +export default { + component: HeaderLayoutComponent, + title: 'Core/Layout/Header', + decorators: [ + moduleMetadata({ + imports: [CoreStoryModule, SidenavLayoutModule, RouterTestingModule] + }) + ], + parameters: { + docs: { + description: { + component: `This component displays a customizable header for Alfresco applications that can be reused. + Use the input properties to configure the left side (title, button) and the primary color of the header. + The right part of the header can contain other components which are transcluded in the header component.` + } + } + }, + argTypes: { + color: { + control: 'radio', + options: ['primary', 'accent', 'warn', undefined], + defaultValue: undefined, + description: `Background color for the header. + It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`, + table: { + type: { summary: 'ThemePalette' }, + defaultValue: { summary: 'undefined' } + } + }, + expandedSidenav: { + control: 'boolean', + description: 'Toggles the expanded state of the component', + defaultValue: true, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' } + } + }, + showSidenavToggle: { + control: 'boolean', + description: 'Toggles whether the sidenav button will be displayed in the header or not', + defaultValue: true, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' } + } + }, + logo: { + control: 'text', + description: 'Path to an image file for the application logo', + defaultValue: undefined, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'undefined' } + } + }, + title: { + control: 'text', + description: 'Title of the application', + defaultValue: undefined, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'undefined' } + } + }, + tooltip: { + control: 'text', + description: 'The tooltip text for the application logo', + defaultValue: undefined, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'undefined' } + } + }, + position: { + control: 'radio', + options: ['start', 'end'], + description: `The side of the page that the drawer is attached to (can be 'start' or 'end')`, + defaultValue: 'start', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'start' } + } + }, + redirectUrl: { + control: 'text', + description: 'The router link for the application logo, when clicked', + defaultValue: '/', + table: { + type: { summary: 'string | any[]' }, + defaultValue: { summary: '/' } + } + }, + clicked: { + action: 'clicked', + description: 'Emitted when the sidenav button is clicked', + table: { + type: { summary: 'EventEmitter ' }, + category: 'Actions' + } + } + } +} as Meta; + +const template: Story = (args: HeaderLayoutComponent) => ({ + props: args +}); + +export const Header = template.bind({}); +Header.args = { + title: 'Hello from Header!', + tooltip: 'Default Tooltip text' +}; diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts index 40455b206f..c32da80ddc 100644 --- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts +++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts @@ -49,5 +49,5 @@ export class SidebarActionMenuComponent { * Directive selectors without adf- prefix will be deprecated on 3.0.0 */ @Directive({ selector: '[adf-sidebar-menu-options], [sidebar-menu-options]' }) export class SidebarMenuDirective {} -@Directive({ selector: '[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { } -@Directive({ selector: '[adf-sidebar-menu-expand-icon], [sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { } +@Directive({ selector: '[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective {} +@Directive({ selector: '[adf-sidebar-menu-expand-icon], [sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective {} diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts new file mode 100644 index 0000000000..8595b020d4 --- /dev/null +++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts @@ -0,0 +1,76 @@ +/*! + * @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 { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { CoreStoryModule } from '../../../testing/core.story.module'; +import { SidenavLayoutModule } from '../../layout.module'; +import { SidebarActionMenuComponent } from './sidebar-action-menu.component'; + +export default { + component: SidebarActionMenuComponent, + title: 'Core/Layout/Sidebar Action Menu', + decorators: [ + moduleMetadata({ + imports: [CoreStoryModule, SidenavLayoutModule] + }) + ], + parameters: { + docs: { + description: { + component: `Displays a sidebar-action menu information panel.` + } + } + }, + argTypes: { + expanded: { + control: 'boolean', + description: 'Toggle the sidebar action menu on expand', + defaultValue: true, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' } + } + }, + title: { + control: 'text', + description: 'The title of the sidebar action', + defaultValue: undefined, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'undefined' } + } + }, + width: { + control: 'number', + description: 'Width in pixels for sidebar action menu options', + defaultValue: 272, + table: { + type: { summary: 'number' }, + defaultValue: { summary: '272' } + } + } + } +} as Meta; + +const template: Story = (args: SidebarActionMenuComponent) => ({ + props: args +}); + +export const SidebarActionMenu = template.bind({}); +SidebarActionMenu.args = { + title: 'Hello from Sidebar Action Menu!' +}; diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts new file mode 100644 index 0000000000..8bf31ae70d --- /dev/null +++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts @@ -0,0 +1,230 @@ +/*! + * @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 { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { CoreStoryModule } from '../../../testing/core.story.module'; +import { SidenavLayoutModule } from '../../layout.module'; +import { SidenavLayoutComponent } from './sidenav-layout.component'; +import { MatListModule } from '@angular/material/list'; +import { MatIconModule } from '@angular/material/icon'; +import { RouterTestingModule } from '@angular/router/testing'; + +export default { + component: SidenavLayoutComponent, + title: 'Core/Layout/Sidenav Layout', + decorators: [ + moduleMetadata({ + imports: [CoreStoryModule, SidenavLayoutModule, RouterTestingModule, MatIconModule, MatListModule] + }) + ], + parameters: { + docs: { + description: { + component: `Displays the standard three-region ADF application layout.` + } + } + }, + argTypes: { + expandedSidenav: { + control: 'boolean', + description: 'Toggles the expand of navigation region', + defaultValue: true, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' }, + category: 'Navigation' + } + }, + hideSidenav: { + control: 'boolean', + description: 'Toggles showing/hiding the navigation region', + defaultValue: false, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + category: 'Navigation' + } + }, + position: { + control: 'radio', + options: ['start', 'end'], + description: `The side of the page that the drawer is attached to (can be 'start' or 'end')`, + defaultValue: 'start', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'start' }, + category: 'Navigation' + } + }, + sidenavMax: { + control: 'number', + description: 'Maximum size of the navigation region', + defaultValue: undefined, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 'undefined' }, + category: 'Navigation' + } + }, + sidenavMin: { + control: 'number', + description: 'Minimum size of the navigation region', + defaultValue: undefined, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 'undefined' }, + category: 'Navigation' + } + }, + stepOver: { + control: 'number', + description: 'Screen size at which display switches from small screen to large screen configuration', + defaultValue: undefined, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 'undefined' } + } + }, + title: { + control: 'text', + description: 'Title of the application', + defaultValue: undefined, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'undefined' }, + category: 'Header' + } + }, + color: { + control: 'radio', + options: ['primary', 'accent', 'warn', undefined], + defaultValue: undefined, + description: `Background color for the header. + It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`, + table: { + type: { summary: 'ThemePalette' }, + defaultValue: { summary: 'undefined' }, + category: 'Header' + } + }, + clicked: { + action: 'expanded', + description: 'Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes', + table: { + type: { summary: 'EventEmitter ' }, + category: 'Actions' + } + } + } +} as Meta; + +const template: Story = (args: SidenavLayoutComponent) => ({ + props: args, + template: ` + +
+ + + + + + + + + + + home + Home + + + + device_hub + Content Processes + + + + folder_open + Files + + + + rowing + Quick Search + + + + cloud + Cloud + + + + settings + Settings + + + + exit_to_app + Logout + + + + + + + +
+ Thanks to transclusion you can put anything you want inside header, sidenav and this (content) sections. + ADF Layout Header component is located in header section. In navigation, there is + Angular Material Navigation list where items can contain routes to ADF components which then they will be rendered here, in content section. +

+ Bob Ross Lorem ipsum.. I'm gonna start with a little Alizarin crimson and a touch of Prussian blue No pressure. Just relax and watch it happen. In life you need colors. + This is your world, whatever makes you happy you can put in it. Go crazy. Have fun with it. + Just relax and let it flow. That easy. We might as well make some Almighty mountains today as well, what the heck. Each highlight must have it's own private shadow. + It's so important to do something every day that will make you happy. + Use your imagination, let it go. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. +

+ Brown is such a nice color. Let your imagination be your guide. You need the dark in order to show the light. + Don't be afraid to make these big decisions. Once you start, they sort of just make themselves. + Don't kill all your dark areas - you need them to show the light. We artists are a different breed of people. We're a happy bunch. + You can create the world you want to see and be a part of. You have that power. We'll have a super time. If these lines aren't straight, your water's going to run right out of your painting and get your floor wet. + Nature is so fantastic, enjoy it. Let it make you happy. Didn't you know you had that much power? + You can move mountains. You can do anything. If you do too much it's going to lose its effectiveness. Everything's not great in life, but we can still find beauty in it. + And maybe, maybe, maybe... I like to beat the brush. And maybe a little bush lives there. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals. +
+ + +
+ ` +}); + +export const SidenavLayout = template.bind({}); +SidenavLayout.args = { + sidenavMin: 85, + sidenavMax: 250, + stepOver: 600, + position: 'start', + title: 'Hello from Sidenav Layout!' +}; diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts index 8e511eeb84..8c7f1331e4 100644 --- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts +++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts @@ -155,15 +155,15 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy } get headerTemplate(): TemplateRef { - return this.headerDirective && this.headerDirective.template || this.emptyTemplate; + return this?.headerDirective?.template || this.emptyTemplate; } get navigationTemplate(): TemplateRef { - return this.navigationDirective && this.navigationDirective.template || this.emptyTemplate; + return this?.navigationDirective?.template || this.emptyTemplate; } get contentTemplate(): TemplateRef { - return this.contentDirective && this.contentDirective.template || this.emptyTemplate; + return this?.contentDirective?.template || this.emptyTemplate; } onMediaQueryChange() {