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