diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html index 8eeb902456893fa2965b8844104646b860c43ec4..91e8c3f79a3f60c18d7bcbfe94f1d1bf4faaeb9e 100644 --- a/alfa-client/apps/demo/src/app/app.component.html +++ b/alfa-client/apps/demo/src/app/app.component.html @@ -58,10 +58,9 @@ </form> <app-bescheid-dialog-button></app-bescheid-dialog-button> <div class="my-4 flex gap-4"> - <ods-button size="small" text="Button 1" /> + <ods-button text="Button 1" /> <ods-button size="medium" [isLoading]="true" text="Button 2" /> - <ods-button size="small" type="secondary" text="Button 3" /> - <ods-button size="medium" /> + <ods-button type="outline" text="Button 3" /> </div> <div class="text-warning">Achtung</div> <div class="text-primary">Achtung</div> diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts index d9ade06f5569c600a98622ba1158d26d4cf7e18d..e7180e08cf4c2e473a2367db3873033508b06247 100644 --- a/alfa-client/libs/design-system/src/lib/button/button.component.ts +++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts @@ -10,12 +10,11 @@ const buttonVariants = cva( variants: { type: { primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm', - secondary: + outline: 'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100', }, size: { - small: 'h-9 py-2 px-4', - medium: 'h-12 py-3 px-6', + medium: 'h-9 py-2 px-4', }, }, defaultVariants: { @@ -34,6 +33,8 @@ type ButtonVariants = VariantProps<typeof buttonVariants>; type="button" [ngClass]="buttonVariants({ size, type })" [disabled]="isLoading" + [attr.aria-disabled]="isLoading" + [attr.aria-label]="text" (click)="clickEmitter.emit()" > <ng-content *ngIf="!isLoading" select="[icon]"></ng-content> @@ -45,7 +46,7 @@ export class ButtonComponent { @Input() text: string = ''; @Input() isLoading: boolean = false; @Input() type: ButtonVariants['type'] = 'primary'; - @Input() size: ButtonVariants['size'] = 'small'; + @Input() size: ButtonVariants['size'] = 'medium'; @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>(); diff --git a/alfa-client/libs/design-system/src/lib/button/button.stories.ts b/alfa-client/libs/design-system/src/lib/button/button.stories.ts index e888d33210d18004683b1b12bf945eb84a0680b2..7fb9851bd7c89b37ecd3e7a8265f3d2d4e1e567d 100644 --- a/alfa-client/libs/design-system/src/lib/button/button.stories.ts +++ b/alfa-client/libs/design-system/src/lib/button/button.stories.ts @@ -20,20 +20,16 @@ export default meta; type Story = StoryObj<ButtonComponent>; export const Default: Story = { - args: { text: 'Hello world!', isLoading: false, type: 'primary', size: 'small' }, + args: { text: 'Hello world!', isLoading: false, type: 'primary' }, argTypes: { type: { - options: ['primary', 'secondary'], - control: { type: 'radio' }, - }, - size: { - options: ['small', 'medium'], + options: ['primary', 'outline'], control: { type: 'radio' }, }, }, }; export const WithIcon: Story = { - args: { text: 'I have an icon', isLoading: false, type: 'secondary', size: 'medium' }, + args: { text: 'I have an icon', isLoading: false, type: 'outline' }, render: (args: ButtonComponent) => ({ props: args, template: `<ods-button ${argsToTemplate(args)}> diff --git a/alfa-client/package.json b/alfa-client/package.json index fd31984dcca52afbf4eec772d193bfda2b1a2d74..51ece3379a522c1e8aba0698baeb6b7ceb2767ca 100644 --- a/alfa-client/package.json +++ b/alfa-client/package.json @@ -42,7 +42,8 @@ "cypress:version": "npx cypress version", "cypress:install": "npx cypress install", "cypress:open": "npx cypress open --project apps/alfa-e2e", - "workspace-generator": "nx workspace-generator" + "workspace-generator": "nx workspace-generator", + "storybook": "nx storybook design-system" }, "private": true, "dependencies": { @@ -159,4 +160,4 @@ "ts-node": "10.9.1", "typescript": "~5.1.3" } -} +} \ No newline at end of file