mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 06:51:19 +08:00
54503208a6
In 6.5 the `framework` config option was one of `react`, `angular`, etc. and included Webpack settings. In the 7.0, we’ve updated it so that these are now called `renderers`, and are builder-independent. Now, frameworks contain specific builder information, such as `cra` or `nextjs` (for specific app environments) or `react-webpack5` / `react-vite` (for custom apps). This fixes the `sb init` CLI command to use renderer-specific templates. I also call out some follow-up work to fix automigrations & telemetry
54 lines
1.0 KiB
TypeScript
54 lines
1.0 KiB
TypeScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'storybook-button',
|
|
template: ` <button
|
|
type="button"
|
|
(click)="onClick.emit($event)"
|
|
[ngClass]="classes"
|
|
[ngStyle]="{ 'background-color': backgroundColor }"
|
|
>
|
|
{{ label }}
|
|
</button>`,
|
|
styleUrls: ['./button.css'],
|
|
})
|
|
export default 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];
|
|
}
|
|
}
|