From b89623aec03906e24c185c22e32dce3abb2a7543 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Tue, 30 Apr 2024 11:39:45 +0200
Subject: [PATCH] OZG-5590 OZG-5595 refactor button variants
---
alfa-client/apps/demo/src/app/app.component.html | 5 ++---
.../design-system/src/lib/button/button.component.ts | 9 +++++----
.../design-system/src/lib/button/button.stories.ts | 10 +++-------
alfa-client/package.json | 5 +++--
4 files changed, 13 insertions(+), 16 deletions(-)
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 8eeb902456..91e8c3f79a 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 d9ade06f55..e7180e08cf 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 e888d33210..7fb9851bd7 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 fd31984dcc..51ece3379a 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
--
GitLab