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

Fluid Design System Angular

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

const meta: Meta<SidepanelLayoutComponent> = {
  title: 'Components/Sidepanel/Layout',
  id: 'sidepanel-layout',
  component: SidepanelLayoutComponent,
  decorators: [
    moduleMetadata({
      imports: [
        SidepanelComponent,
        SidepanelFooterDirective,
        SidepanelHeaderDirective,
        SidepanelHeaderComponent,
        SidepanelLayoutPanelDirective,
        ButtonComponent,
        CommonModule
      ]
    }),
    applicationConfig({
      providers: [provideAnimations()]
    }),
    componentWrapperDecorator(
      (story) => `
        <div style="height: 80vh">${story}</div>
    `
    )
  ],
  parameters: {
    docs: {
      description: {
        component: 'This component is designed to display a panel beside or over a content, positioned to the right.'
      },
      imports: [
        SidepanelComponent,
        SidepanelFooterDirective,
        SidepanelHeaderComponent,
        SidepanelHeaderDirective,
        SidepanelLayoutComponent,
        SidepanelLayoutPanelDirective
      ]
    }
  },
  argTypes: {
    sidepanelVisibilityChange: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<SidepanelComponent>;

export const Basic: Story = {
  render: (args) => ({
    props: args,
    template: `
    <nj-sidepanel-layout ${argsToTemplate(
      args
    )} style="border: var(--nj-semantic-size-border-width) solid var(--nj-semantic-color-border-neutral-minimal);" #layout>
      <div style="height: 100%; width: 100%; display: grid; place-items: center">
          Main content
          <nj-button (buttonClick)="layout.showPanel()">Open panel</nj-button>
      </div>
      <nj-sidepanel *njSidepanelLayoutPanel>
        <nj-sidepanel-header *njSidepanelHeader title="Title" (closeIconClicked)="layout.hidePanel()"></nj-sidepanel-header>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ducimus laboriosam nostrum quibusdam saepe, tempore vel veritatis? Consectetur doloremque ducimus eveniet iste, maiores, minus neque nesciunt qui quos tenetur unde?

        <div *njSidepanelFooter style="display: flex; align-items: center; justify-content: flex-end;">
            <nj-button (buttonClick)="layout.hidePanel()">Close pannel</nj-button>
          </div>
      </nj-sidepanel>
    </nj-sidepanel-layout>
    `
  })
};