[AAE-10103] language-menu storybook (#7732)

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<LanguageMenuComponent> = (args: LanguageMenuComponent) => ({
+    props: {
+        ...args,
+        changedLanguage: action('changedLanguage')
+    }
+});
+
+export const asMainMenu = languageMenuComponentTemplate.bind({});
+asMainMenu.decorators = [
+    componentWrapperDecorator(story => `
+      <button mat-icon-button [matMenuTriggerFor]="langMenu">
+        <mat-icon>
+          language
+        </mat-icon>
+      </button>
+      <mat-menu #langMenu="matMenu">
+        ${story}
+      </mat-menu>
+    `)
+];
+
+export const asNestedMenu = languageMenuComponentTemplate.bind({});
+asNestedMenu.decorators = [
+    componentWrapperDecorator(story => `
+      <button mat-icon-button [matMenuTriggerFor]="profileMenu">
+        <mat-icon>
+          more_vert
+        </mat-icon>
+      </button>
+      <mat-menu #profileMenu="matMenu">
+        <button mat-menu-item [matMenuTriggerFor]="langMenu">
+          <mat-icon>
+            language
+          </mat-icon>
+          Language
+        </button>
+      </mat-menu>
+      <mat-menu #langMenu="matMenu">
+        ${story}
+      </mat-menu>
+    `)
+];

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 {}

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<LanguagePickerComponent> = (args: LanguagePickerComponent) => ({
+    props: {
+        ...args,
+        changedLanguage: action('changedLanguage')
+    }
+});
+
+export const primary = languagePickerComponentTemplate.bind({});
+
+export const asNestedMenu = languagePickerComponentTemplate.bind({});
+asNestedMenu.decorators = [
+    componentWrapperDecorator(story => `
+      <button mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        ${story}
+      </mat-menu>
+    `)
+];

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 }}
         </button>
         <mat-menu #langMenu="matMenu">
-            <adf-language-menu></adf-language-menu>
+            <adf-language-menu (changedLanguage)="changedLanguage.emit($event)"></adf-language-menu>
         </mat-menu>
     `
 })
-export class LanguagePickerComponent {}
+export class LanguagePickerComponent {
+    @Output()
+    public changedLanguage = new EventEmitter<LanguageItem>();
+
+}

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<LanguageItem[]>([
+        {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);
+        }
+    }
+}

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<LanguageItem[]>;
+    changeLanguage(language: LanguageItem): void;
+    setLanguages(items: LanguageItem[]): void;
+}

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<LanguageItem[]>([
         {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);
         }
     }