Skip to content
Snippets Groups Projects
Commit e792fbfa authored by Alexander Reifschneider's avatar Alexander Reifschneider
Browse files

OZG-6242 Add ghost variant

parent 02ad430e
No related branches found
No related tags found
1 merge request!47OZG 6242 button enhancement
......@@ -31,7 +31,7 @@
>
<ng-container *ngIf="bescheidDraftStateResource$ | async as bescheidStateResource">
<ods-button
variant="icon"
variant="ghost"
size="fit"
class="absolute right-0 top-0 text-text"
(clickEmitter)="cancelWizard(bescheidStateResource.resource)"
......
......@@ -36,7 +36,7 @@ type IconVariants = VariantProps<typeof iconVariants>;
imports: [CommonModule, ButtonComponent, SaveIconComponent],
template: `<ods-button
[dataTestId]="dataTestId"
variant="icon"
variant="ghost"
size="fit"
spinnerSize="small"
[isLoading]="isLoading"
......
......@@ -30,16 +30,15 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
export const buttonVariants = cva(
[
'flex items-center gap-4 rounded-md disabled:cursor-wait text-sm font-medium box-border',
'flex items-center gap-4 rounded-md text-sm font-medium box-border',
'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
],
{
variants: {
variant: {
primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
outline:
'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
icon: 'border border-transparent hover:border-primary',
outline: 'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
ghost: 'border-2 border-transparent hover:border-primary-hover text-primary',
},
size: {
medium: 'h-9 py-2 px-4 min-w-32',
......@@ -61,8 +60,8 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
template: `<button
type="button"
[ngClass]="buttonVariants({ size, variant })"
[disabled]="isLoading"
[attr.aria-disabled]="isLoading"
[disabled]="isDisabled"
[attr.aria-disabled]="isDisabled"
[attr.aria-label]="text"
[attr.data-test-id]="dataTestId"
(click)="clickEmitter.emit()"
......@@ -75,6 +74,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
export class ButtonComponent {
@Input() text: string = '';
@Input() dataTestId: string = '';
@Input() disabled: boolean = false;
@Input() isLoading: boolean = false;
@Input() variant: ButtonVariants['variant'];
@Input() size: ButtonVariants['size'];
......@@ -82,5 +82,9 @@ export class ButtonComponent {
@Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
buttonVariants = buttonVariants;
get isDisabled() {
return this.disabled || this.isLoading;
}
readonly buttonVariants = buttonVariants;
}
......@@ -45,6 +45,7 @@ export const Default: Story = {
args: {
text: 'Hello world!',
isLoading: false,
disabled: false,
variant: 'primary',
size: 'medium',
spinnerSize: 'medium',
......@@ -55,19 +56,43 @@ export const Default: Story = {
control: { type: 'radio' },
table: { defaultValue: { summary: 'primary' } },
},
size: {
options: ['medium', 'fit'],
control: { type: 'select' },
table: { defaultValue: { summary: 'medium' } },
},
spinnerSize: {
description: 'Size of loading spinner',
options: ['small', 'medium', 'large', 'extra-large', 'xxl', 'full'],
control: { type: 'select' },
table: { defaultValue: { summary: 'medium' } },
},
isLoading: { description: 'Show spinner icon if true' },
},
};
export const WithIcon: Story = {
export const PrimaryWithIcon: Story = {
args: {
text: 'I have an icon',
variant: 'primary',
},
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
<ods-save-icon icon size="small" class="fill-whitetext" />
</ods-button>`,
}),
};
export const SecondaryWithIcon: Story = {
args: {
text: 'I have an icon too',
variant: 'outline',
size: 'medium',
},
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
<ods-save-icon icon size='small'></ods-save-icon>
<ods-save-icon icon size="small" />
</ods-button>`,
}),
};
......@@ -80,15 +105,36 @@ export const IsLoading: Story = {
},
};
export const OnlyIcon: Story = {
export const GhostIcon: Story = {
args: {
variant: 'ghost',
size: 'fit',
},
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
<ods-save-icon icon size='medium' />
</ods-button>`,
}),
};
export const GhostLoadingIcon: Story = {
args: {
variant: 'icon',
variant: 'ghost',
size: 'fit',
isLoading: true,
},
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
<ods-save-icon icon size='medium'></ods-save-icon>
<ods-save-icon icon size='medium' />
</ods-button>`,
}),
};
export const GhostButton: Story = {
args: {
variant: 'ghost',
text: 'I am ghosted',
},
};
......@@ -24,7 +24,7 @@
-->
<ods-button
variant="icon"
variant="ghost"
size="fit"
data-test-class="edit-zustaendige-stelle-button"
[dataTestId]="dataTestId"
......
......@@ -26,7 +26,7 @@
<div class="my-32 flex h-screen flex-col gap-2">
<div class="flex gap-48 py-6 lg:gap-96">
<h1 class="text-xl font-bold text-primary">{{ title }}</h1>
<ods-button variant="icon" size="fit" (clickEmitter)="closeDialog()" dataTestId="close-search-dialog">
<ods-button variant="ghost" size="fit" (clickEmitter)="closeDialog()" dataTestId="close-search-dialog">
<ods-close-icon class="fill-primary" icon />
</ods-button>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment