[AAE-10102] Storybook stories for Buttons Menu component ()

* Storybook stories for Buttons Menu component

* Storybook change button icons

* Storybook add isMobile property

* [AAE-10102] Storybook reduce module imports

* [10102] Fix wrong buttons styling

* [10102] Storybook change story name

* [10102] Storybook add component documentation table

* [AAE-10102] change name of story

* [AAE-10102] fix invalid licence header

* enable browser protractor run

* exclude 2 failing tests + defaultValue: true

Co-authored-by: Rafal Szmit <rafal.szmit@hyland.com>
This commit is contained in:
Marcin Krueger 2022-09-27 12:54:33 +02:00 committed by GitHub
parent ec284d176c
commit caec4a208d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 129 additions and 9 deletions

@ -2,5 +2,7 @@
"C269081": "https://alfresco.atlassian.net/browse/ADF-5385",
"C272819": "https://alfresco.atlassian.net/browse/ADF-5385",
"C362241": "https://alfresco.atlassian.net/browse/ADF-5385",
"C260040": "https://alfresco.atlassian.net/browse/AAE-8041"
"C260040": "https://alfresco.atlassian.net/browse/AAE-8041",
"C260125": "https://alfresco.atlassian.net/browse/AAE-10744",
"C274688": "https://alfresco.atlassian.net/browse/AAE-10744"
}

@ -0,0 +1,119 @@
/*!
* @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 { ButtonsMenuComponent } from './buttons-menu.component';
import { ButtonsMenuModule } from './buttons-menu.module';
export default {
component: ButtonsMenuComponent,
title: 'Core/Buttons Menu/Buttons Menu',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ButtonsMenuModule]
})
],
argTypes: {
mobile: {
type: { name: 'boolean' },
name: 'isMobile',
description:
'Determines whether it is displayed on a mobile device',
defaultValue: true,
control: {
disable: false
},
table: {
category: 'Component methods',
type: {
summary: '() => boolean'
}
}
},
isMenuEmpty: {
description: 'Determines whether it has anything to display',
table: {
category: 'Component properties',
type: {
summary: 'boolean'
}
}
}
}
} as Meta;
export const sixButtons: Story = args => ({
props: {
...args,
isMenuEmpty: false,
isMobile() {
return args.mobile;
}
},
template: `
<adf-buttons-action-menu>
<button mat-menu-item>
<mat-icon>settings</mat-icon><span> Settings </span>
</button>
<button mat-menu-item>
<mat-icon>home</mat-icon><span> Home </span>
</button>
<button mat-menu-item>
<mat-icon>search</mat-icon><span> Search </span>
</button>
<button mat-menu-item>
<mat-icon>done</mat-icon><span> Done </span>
</button>
<button mat-menu-item>
<mat-icon>delete</mat-icon><span> Delete </span>
</button>
<button mat-menu-item>
<mat-icon>block</mat-icon><span> Block </span>
</button>
</adf-buttons-action-menu>
`
});
export const oneButton: Story = args => ({
props: {
...args,
isMenuEmpty: false,
isMobile() {
return args.mobile;
}
},
template: `
<adf-buttons-action-menu>
<button mat-menu-item>
<mat-icon>settings</mat-icon><span> Settings </span>
</button>
</adf-buttons-action-menu>
`
});
export const noButtons: Story = args => ({
props: {
...args,
isMenuEmpty: true,
isMobile() {
return args.mobile;
}
},
template: `
<adf-buttons-action-menu></adf-buttons-action-menu>`
});

@ -18,22 +18,21 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { ButtonsMenuComponent } from './buttons-menu.component';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
CommonModule,
MaterialModule,
MatIconModule,
MatMenuModule,
TranslateModule,
FlexLayoutModule
],
declarations: [
ButtonsMenuComponent
],
exports: [
ButtonsMenuComponent
]
declarations: [ButtonsMenuComponent],
exports: [ButtonsMenuComponent, MatIconModule, MatMenuModule, MatButtonModule]
})
export class ButtonsMenuModule {}