From c8e74699d5f05f80a97f8137c5941bf1d6d1c28c Mon Sep 17 00:00:00 2001 From: Robert Duda Date: Tue, 2 Aug 2022 13:24:02 +0200 Subject: [PATCH] [AAE-10103] language-menu storybook (#7732) --- NX | 0 .../language-menu.component.stories.ts | 82 +++++++++++++++++++ .../language-menu/language-menu.module.ts | 16 +++- .../language-picker.component.stories.ts | 60 ++++++++++++++ .../language-picker.component.ts | 11 ++- lib/core/mock/language.service.mock.ts | 55 +++++++++++++ .../services/language.service.interface.ts | 26 ++++++ lib/core/services/language.service.ts | 7 +- 8 files changed, 247 insertions(+), 10 deletions(-) create mode 100644 NX create mode 100644 lib/core/language-menu/language-menu.component.stories.ts create mode 100644 lib/core/language-menu/language-picker.component.stories.ts create mode 100644 lib/core/mock/language.service.mock.ts create mode 100644 lib/core/services/language.service.interface.ts diff --git a/NX b/NX new file mode 100644 index 0000000000..e69de29bb2 diff --git a/lib/core/language-menu/language-menu.component.stories.ts b/lib/core/language-menu/language-menu.component.stories.ts new file mode 100644 index 0000000000..8ab0ec8a70 --- /dev/null +++ b/lib/core/language-menu/language-menu.component.stories.ts @@ -0,0 +1,82 @@ +/*! + * @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 { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular'; +import { action } from '@storybook/addon-actions'; +import { CoreStoryModule } from '../testing/core.story.module'; + +import { LanguageMenuModule } from './language-menu.module'; +import { LanguageMenuComponent } from './language-menu.component'; + +import { LanguageService } from '../services/language.service'; +import { LanguageServiceMock } from '../mock/language.service.mock'; + +export default { + component: LanguageMenuComponent, + title: 'Core/Components/Language Menu/Language Menu', + decorators: [ + moduleMetadata({ + imports: [CoreStoryModule, LanguageMenuModule], + providers: [ + { provide: LanguageService, useClass: LanguageServiceMock } + ] + }) + ] +} as Meta; + +const languageMenuComponentTemplate: Story = (args: LanguageMenuComponent) => ({ + props: { + ...args, + changedLanguage: action('changedLanguage') + } +}); + +export const asMainMenu = languageMenuComponentTemplate.bind({}); +asMainMenu.decorators = [ + componentWrapperDecorator(story => ` + + + ${story} + + `) +]; + +export const asNestedMenu = languageMenuComponentTemplate.bind({}); +asNestedMenu.decorators = [ + componentWrapperDecorator(story => ` + + + + + + ${story} + + `) +]; diff --git a/lib/core/language-menu/language-menu.module.ts b/lib/core/language-menu/language-menu.module.ts index 2af3b8b2ce..a67df443bf 100644 --- a/lib/core/language-menu/language-menu.module.ts +++ b/lib/core/language-menu/language-menu.module.ts @@ -17,16 +17,21 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MaterialModule } from '../material.module'; +import { TranslateModule } from '@ngx-translate/core'; + +import { MatMenuModule } from '@angular/material/menu'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; import { LanguageMenuComponent } from './language-menu.component'; import { LanguagePickerComponent } from './language-picker.component'; -import { TranslateModule } from '@ngx-translate/core'; @NgModule({ imports: [ CommonModule, - MaterialModule, + MatMenuModule, + MatIconModule, + MatButtonModule, TranslateModule ], declarations: [ @@ -35,7 +40,10 @@ import { TranslateModule } from '@ngx-translate/core'; ], exports: [ LanguageMenuComponent, - LanguagePickerComponent + LanguagePickerComponent, + MatMenuModule, + MatIconModule, + MatButtonModule ] }) export class LanguageMenuModule {} diff --git a/lib/core/language-menu/language-picker.component.stories.ts b/lib/core/language-menu/language-picker.component.stories.ts new file mode 100644 index 0000000000..b1a775f6b8 --- /dev/null +++ b/lib/core/language-menu/language-picker.component.stories.ts @@ -0,0 +1,60 @@ +/*! + * @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 { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular'; +import { action } from '@storybook/addon-actions'; +import { CoreStoryModule } from '../testing/core.story.module'; + +import { LanguageMenuModule } from './language-menu.module'; +import { LanguagePickerComponent } from './language-picker.component'; + +import { LanguageService } from '../services/language.service'; +import { LanguageServiceMock } from '../mock/language.service.mock'; + +export default { + component: LanguagePickerComponent, + title: 'Core/Components/Language Menu/Language Picker', + decorators: [ + moduleMetadata({ + imports: [CoreStoryModule, LanguageMenuModule], + providers: [ + { provide: LanguageService, useClass: LanguageServiceMock } + ] + }) + ] +} as Meta; + +const languagePickerComponentTemplate: Story = (args: LanguagePickerComponent) => ({ + props: { + ...args, + changedLanguage: action('changedLanguage') + } +}); + +export const primary = languagePickerComponentTemplate.bind({}); + +export const asNestedMenu = languagePickerComponentTemplate.bind({}); +asNestedMenu.decorators = [ + componentWrapperDecorator(story => ` + + + ${story} + + `) +]; diff --git a/lib/core/language-menu/language-picker.component.ts b/lib/core/language-menu/language-picker.component.ts index 890d5f75b8..385fea956a 100644 --- a/lib/core/language-menu/language-picker.component.ts +++ b/lib/core/language-menu/language-picker.component.ts @@ -15,7 +15,8 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, EventEmitter, Output } from '@angular/core'; +import { LanguageItem } from '../services/language-item.interface'; @Component({ selector: 'adf-picker-button', @@ -25,8 +26,12 @@ import { Component } from '@angular/core'; {{ 'ADF.LANGUAGE' | translate }} - + ` }) -export class LanguagePickerComponent {} +export class LanguagePickerComponent { + @Output() + public changedLanguage = new EventEmitter(); + +} diff --git a/lib/core/mock/language.service.mock.ts b/lib/core/mock/language.service.mock.ts new file mode 100644 index 0000000000..82365a22b7 --- /dev/null +++ b/lib/core/mock/language.service.mock.ts @@ -0,0 +1,55 @@ +/*! + * @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 { LanguageServiceInterface } from './../services/language.service.interface'; +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { LanguageItem } from '../services/language-item.interface'; + +@Injectable() +export class LanguageServiceMock implements LanguageServiceInterface { + + private languages = new BehaviorSubject([ + {key: 'de', label: 'Deutsch'}, + {key: 'en', label: 'English'}, + {key: 'es', label: 'Español'}, + {key: 'fr', label: 'Français'}, + {key: 'it', label: 'Italiano'}, + {key: 'ja', label: '日本語'}, + {key: 'nb', label: 'Bokmål'}, + {key: 'nl', label: 'Nederlands'}, + {key: 'pt-BR', label: 'Português (Brasil)'}, + {key: 'ru', label: 'Русский'}, + {key: 'zh-CN', label: '中文简体'}, + {key: 'cs', label: 'Čeština'}, + {key: 'da', label: 'Dansk'}, + {key: 'fi', label: 'Suomi'}, + {key: 'pl', label: 'Polski'}, + {key: 'sv', label: 'Svenska'}, + {key: 'ar', label: 'العربية', direction: 'rtl'} + ]); + + languages$ = this.languages.asObservable(); + + changeLanguage(_language: LanguageItem): void { + } + + setLanguages(items: LanguageItem[]): void { + if (items?.length > 0) { + this.languages.next(items); + } + } +} diff --git a/lib/core/services/language.service.interface.ts b/lib/core/services/language.service.interface.ts new file mode 100644 index 0000000000..7f7b581218 --- /dev/null +++ b/lib/core/services/language.service.interface.ts @@ -0,0 +1,26 @@ +/*! + * @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 { Observable } from 'rxjs'; +import { LanguageItem } from './language-item.interface'; + +export interface LanguageServiceInterface { + + languages$: Observable; + changeLanguage(language: LanguageItem): void; + setLanguages(items: LanguageItem[]): void; +} diff --git a/lib/core/services/language.service.ts b/lib/core/services/language.service.ts index 4c0a26b737..014e3cd019 100644 --- a/lib/core/services/language.service.ts +++ b/lib/core/services/language.service.ts @@ -1,6 +1,6 @@ /*! * @license - * Copyright 2019 Alfresco Software, Ltd. + * 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. @@ -15,6 +15,7 @@ * limitations under the License. */ +import { LanguageServiceInterface } from './language.service.interface'; import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { AppConfigService, AppConfigValues } from '../app-config/app-config.service'; @@ -22,7 +23,7 @@ import { LanguageItem } from './language-item.interface'; import { UserPreferencesService } from './user-preferences.service'; @Injectable({providedIn: 'root'}) -export class LanguageService { +export class LanguageService implements LanguageServiceInterface { private languages = new BehaviorSubject([ {key: 'de', label: 'Deutsch'}, @@ -60,7 +61,7 @@ export class LanguageService { } setLanguages(items: LanguageItem[]) { - if (items && items.length > 0) { + if (items?.length > 0) { this.languages.next(items); } }