@engie-group/fluid-design-system-angular/src/components/sidebar/sidebar.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,
  CheckboxComponent,
  ListItemComponent,
  SidebarComponent,
  SidebarContentDirective,
  SidebarFooterDirective,
  SidebarItemDirective,
  SidebarLogoDirective
} from '../../public-api';

/**
 * Sidebar can contain the entire content of the product and allows users a quick access to a specific piece of content.
 * The left arrow allows the user to retract or expand the sidebar.
 */
const meta: Meta<SidebarComponent> = {
  title: 'Components/Sidebar',
  id: 'sidebar',
  component: SidebarComponent,
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
        ButtonComponent,
        SidebarContentDirective,
        SidebarLogoDirective,
        CheckboxComponent,
        ListItemComponent,
        SidebarItemDirective,
        SidebarFooterDirective
      ]
    }),
    applicationConfig({
      providers: [provideAnimations()]
    }),
    componentWrapperDecorator(
      (story) => `
        <div style="height: 80vh; position: relative">${story}</div>
    `
    )
  ],
  argTypes: {
    foldItemClicked: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [
        SidebarComponent,
        SidebarContentDirective,
        SidebarFooterDirective,
        SidebarItemDirective,
        SidebarLogoDirective
      ]
    }
  }
};

export default meta;

export const Basic: StoryObj<SidebarComponent> = {
  args: {
    isFolded: false
  },
  render: (args) => ({
    props: { ...args, shouldBeCovered: false },
    template: `
    <nj-sidebar ${argsToTemplate(args)}>
      <ng-template njSidebarLogo="let isFolded = isFolded">
        <img *ngIf="!isFolded"
            src='https://design.digital.engie.com/assets/brand/logo-engie-blue.svg'
            alt=''
            style="width: min(100%, 100px)"
          />
          <img *ngIf="isFolded"
            src='https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg'
            alt=''
            width="auto"
            height="36"
            style="padding: 0 var(--nj-semantic-size-spacing-16)"
          />
      </ng-template>
      <li nj-list-item njSidebarItem type="link" [isActive]="true" iconName="dashboard" >
          Dashboard
      </li>
      <li nj-list-item njSidebarItem type="link" iconName="report_problem">
          Alerts
      </li>
      <li nj-list-item njSidebarItem type="link" iconName="show_chart">
          Signals
      </li>
      <li nj-list-item njSidebarItem type="link" iconName="online_prediction">
          Simulation
      </li>
      <li nj-list-item njSidebarItem type="link" iconName="event">
          Event
      </li>
      <div class="nj-sidebar__divider" *njSidebarFooter></div>
      <li nj-list-item njSidebarItem *njSidebarFooter type="link" iconName="settings">
          Settings
      </li>
      <li nj-list-item njSidebarItem *njSidebarFooter type="link" iconName="account_circle">
          Profile
      </li>
      <li nj-list-item njSidebarItem *njSidebarFooter type="link" iconName="power_settings_new">
          Logout
      </li>
    </nj-sidebar>
    <div njSidebarContent [shouldBeCovered]="shouldBeCovered"
            style="padding: var(--nj-semantic-size-spacing-16); gap: var(--nj-semantic-size-spacing-16); display: flex; flex-direction: column">
      <h1>Main content</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut doloribus exercitationem id iste nobis placeat, tempore voluptates. Accusamus animi dolores ea impedit laudantium natus numquam pariatur sapiente sed veniam dolores.
      </p>
      <nj-button style="align-self: flex-end" (click)="isFolded = !isFolded">Toggle sidebar</nj-button>
      <nj-checkbox [(value)]="shouldBeCovered" style="align-self: flex-end">Is above content</nj-checkbox>
    </div>
    `
  })
};