49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'storybook-button',
|
||
|
|
standalone: true,
|
||
|
|
imports: [CommonModule],
|
||
|
|
template: ` <button
|
||
|
|
type="button"
|
||
|
|
(click)="onClick.emit($event)"
|
||
|
|
[ngClass]="classes"
|
||
|
|
[ngStyle]="{ 'background-color': backgroundColor }"
|
||
|
|
>
|
||
|
|
{{ label }}
|
||
|
|
</button>`,
|
||
|
|
styleUrls: ['./button.css'],
|
||
|
|
})
|
||
|
|
export class ButtonComponent {
|
||
|
|
/** Is this the principal call to action on the page? */
|
||
|
|
@Input()
|
||
|
|
primary = false;
|
||
|
|
|
||
|
|
/** What background color to use */
|
||
|
|
@Input()
|
||
|
|
backgroundColor?: string;
|
||
|
|
|
||
|
|
/** How large should the button be? */
|
||
|
|
@Input()
|
||
|
|
size: 'small' | 'medium' | 'large' = 'medium';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Button contents
|
||
|
|
*
|
||
|
|
* @required
|
||
|
|
*/
|
||
|
|
@Input()
|
||
|
|
label = 'Button';
|
||
|
|
|
||
|
|
/** Optional click handler */
|
||
|
|
@Output()
|
||
|
|
onClick = new EventEmitter<Event>();
|
||
|
|
|
||
|
|
public get classes(): string[] {
|
||
|
|
const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||
|
|
|
||
|
|
return ['storybook-button', `storybook-button--${this.size}`, mode];
|
||
|
|
}
|
||
|
|
}
|