browser/libs/components/src/section/section.stories.ts

import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";

import { CardComponent } from "../card";
import { IconButtonModule } from "../icon-button";
import { ItemModule } from "../item";
import { TypographyModule } from "../typography";

import { SectionComponent, SectionHeaderComponent } from "./";

export default {
  title: "Component Library/Section",
  component: SectionComponent,
  decorators: [
    moduleMetadata({
      imports: [
        TypographyModule,
        SectionHeaderComponent,
        CardComponent,
        IconButtonModule,
        ItemModule,
      ],
    }),
    componentWrapperDecorator((story) => `<div class="tw-text-main">${story}</div>`),
  ],
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=21666-19363&t=k6OTDDPZOTtypRqo-11",
    },
  },
} as Meta;

type Story = StoryObj<SectionComponent>;

export const Default: Story = {
  render: () => ({
    template: /*html*/ `
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h2">Foo</h2>
          </bit-section-header>
          <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
        </bit-section>
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h2">Bar</h2>
          </bit-section-header>
          <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
        </bit-section>
        <bit-section disableMargin>
          <bit-section-header>
            <h2 bitTypography="h2">Baz</h2>
          </bit-section-header>
          <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
        </bit-section>
    `,
  }),
};

export const HeaderVariants: Story = {
  render: () => ({
    template: /*html*/ `
      <bit-section-header>
        <h2 bitTypography="h6">
          Title only
        </h2>
       </bit-section-header>
      <bit-section-header>
        <h2 bitTypography="h6">
          Title with icon button suffix
        </h2>
        <button bitIconButton="bwi-refresh" size="small"></button>
      </bit-section-header>
    `,
  }),
};

export const HeaderEndSlotVariants: Story = {
  render: () => ({
    template: /*html*/ `
      <bit-section-header>
        <h2 bitTypography="h6">
          Title with end slot text
        </h2>
        <span bitTypography="body2" slot="end">13</span>
      </bit-section-header>
      <bit-section-header>
        <h2 bitTypography="h6">
          Title with end slot icon button
        </h2>
        <button bitIconButton="bwi-star" size="small" slot="end"></button>
      </bit-section-header>
    `,
  }),
};

export const HeaderWithPadding: Story = {
  render: () => ({
    template: /*html*/ `
      <div class="tw-bg-background-alt tw-p-2">
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h6">
              Card as immediate sibling
            </h2>
            <button bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <bit-card>
            <h3 bitTypography="h3">bit-section-header has padding</h3>
          </bit-card>
        </bit-section>
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h6">
              Card nested in immediate sibling
            </h2>
            <button bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <div>
            <bit-card>
              <h3 bitTypography="h3">bit-section-header has padding</h3>
            </bit-card>
          </div>
        </bit-section>
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h6">
              Item as immediate sibling
            </h2>
            <button bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <bit-item>
            <bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
          </bit-item>
        </bit-section>
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h6">
              Item nested in immediate sibling
            </h2>
            <button bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <bit-item-group>
            <bit-item>
              <bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
            </bit-item>
          </bit-item-group>
        </bit-section>
      </div>
    `,
  }),
};

export const HeaderWithoutPadding: Story = {
  render: () => ({
    template: /*html*/ `
      <div class="tw-bg-background-alt tw-p-2">
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h6">
              No card or item used
            </h2>
            <button bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <div>
            <h3 bitTypography="h3">just a div, so bit-section-header has no padding</h3>
          </div>
        </bit-section>
        <bit-section>
          <bit-section-header>
            <h2 bitTypography="h6">
              Card nested in non-immediate sibling
            </h2>
            <button bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <div class="tw-text-main">
            a div here
          </div>
          <bit-card>
            <h3 bitTypography="h3">bit-section-header has no padding</h3>
          </bit-card>
        </bit-section>
      </div>
    `,
  }),
};