Enums in Storybook

export enum ButtonIcon {
    DEFAULT = 'only text',
    ICON_LEFT = 'icon left',
    ICON_RIGHT = 'icon right',
    ICON = 'icon',
  }

<button [ngClass]="classes" (click)="buttonClick.emit($event)" type="button">
    <ng-container *ngIf="buttonIcon === ButtonIcon.DEFAULT"> Default </ng-container>
    <ng-container *ngIf="buttonIcon === ButtonIcon.ICON_LEFT"> Icon left </ng-container>
    <ng-container *ngIf="buttonIcon === ButtonIcon.ICON_RIGHT"> Icon right </ng-container>
    <ng-container *ngIf="buttonIcon === ButtonIcon.ICON"> Icon </ng-container>
  </button>
  

import { CommonModule } from '@angular/common';
  import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
  import { ButtonGroup, ButtonIcon } from '@app/lib/definitions/buttons.enum';
  
  import { IconsComponent } from '../icons/icons.component';
  
  @Component({
    selector: 'app-button-primary',
    standalone: true,
    imports: [CommonModule, IconsComponent],
    templateUrl: './button-primary.component.html',
    styleUrl: './button-primary.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class ButtonPrimaryComponent {
    @Input() primary = false;
    @Input() backgroundColor?: string;
    @Input() label = 'Button';
    @Input() iconColor = 'white';
    @Input() buttonGroup: ButtonGroup = ButtonGroup.DEFAULT;
    @Input() buttonIcon: ButtonIcon = ButtonIcon.DEFAULT;
  
    @Output() buttonClick = new EventEmitter<Event>();
  
    ButtonIcon = ButtonIcon;
  
    public get classes(): string[] {
      const groupClass = `app-button--${this.buttonGroup}`;
      const iconClass = `app-button--${this.buttonIcon}`;
      return ['app-button', groupClass, iconClass];
    }
  }
  

import { ButtonGroup, ButtonIcon } from '@app/lib/definitions/buttons.enum';
  import type { Meta, StoryObj } from '@storybook/angular';
  import { fn } from '@storybook/test';
  
  import { ButtonPrimaryComponent } from './button-primary.component';
  
  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
  const meta: Meta<ButtonPrimaryComponent> = {
    title: 'app/Buttons/Button Primary',
    component: ButtonPrimaryComponent,
    tags: ['autodocs'],
    argTypes: {
      backgroundColor: {
        control: 'color',
      },
    },
    // Use `fn` to spy on the buttonClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
    args: { buttonClick: fn() },
  };
  
  export default meta;
  type Story = StoryObj<ButtonPrimaryComponent>;
  
  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
  export const Default: Story = {
    args: {
      primary: true,
      label: 'Button',
      buttonGroup: ButtonGroup.DEFAULT,
      buttonIcon: ButtonIcon.DEFAULT,
    },
  };
  
  export const Outlined: Story = {
    args: {
      label: 'Button',
      buttonGroup: ButtonGroup.OUTLINED,
      buttonIcon: ButtonIcon.DEFAULT,
    },
  };
  
  export const Underlined: Story = {
    args: {
      label: 'Button',
      buttonGroup: ButtonGroup.UNDERLINED,
    },
  };
  
  export const Text: Story = {
    args: {
      label: 'Button',
      buttonGroup: ButtonGroup.TEXT,
    },
  };