Skip to content
Snippets Groups Projects
Commit b89623ae authored by OZGCloud's avatar OZGCloud
Browse files

OZG-5590 OZG-5595 refactor button variants

parent 0a310d82
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
......@@ -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>();
......
......@@ -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)}>
......
......@@ -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": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment