@engie-group/fluid-design-system-angular/src/components/sidepanel/sidepanel.stories.ts

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig, argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import {
  ButtonComponent,
  IconButtonComponent,
  LinkComponent,
  SidepanelComponent,
  SidepanelFooterDirective,
  SidepanelHeaderComponent,
  SidepanelHeaderDirective
} from '../../public-api';

/**
 * Side-panel is a component typically located on the side of the interface.
 * It commonly contains contextual information or additional tools related to the primary content.
 * This component remains hidden until the user activates it, providing a discreet way to access supplementary information or functionalities.
 */
const meta: Meta<SidepanelComponent> = {
  title: 'Components/Sidepanel',
  id: 'sidepanel',
  component: SidepanelComponent,
  decorators: [
    moduleMetadata({
      imports: [
        LinkComponent,
        ButtonComponent,
        IconButtonComponent,
        SidepanelHeaderDirective,
        SidepanelHeaderComponent,
        SidepanelFooterDirective,
        CommonModule
      ]
    }),
    applicationConfig({
      providers: [provideAnimations()]
    })
  ],
  parameters: {
    docs: {
      imports: [SidepanelComponent, SidepanelFooterDirective, SidepanelHeaderComponent, SidepanelHeaderDirective]
    }
  }
};

export default meta;

export const Basic: StoryObj<SidepanelComponent & { title: string; footerContent: string; content: string }> = {
  args: {
    title: 'Title',
    content: 'Main content',
    footerContent: 'Footer content'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-sidepanel ${argsToTemplate(args, { exclude: ['title', 'footerContent', 'content'] })}>
      <ng-container *ngIf="title">
        <nj-sidepanel-header *njSidepanelHeader [title]="title"></nj-sidepanel-header>
      </ng-container>

      {{content}}

      <ng-container *ngIf="footerContent">
        <ng-template njSidepanelFooter>{{footerContent}}</ng-template>
      </ng-container>
    </nj-sidepanel>
    `
  })
};