@mozaic-ds/vue/src/components/pageheader/MPageHeader.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';
import MPageHeader from './MPageHeader.vue';
import MTabs from '../tabs/MTabs.vue';
import MPageHeaderFeature from '../pageheaderfeature/MPageHeaderFeature.vue';
import MPageHeaderContext from '../pageheadercontext/MPageHeaderContext.vue';
import { HelpCircle20, Search20, Notification20 } from '@mozaic-ds/icons-vue';
import { ref } from 'vue';

const meta: Meta<typeof MPageHeader> = {
  title: 'Structure/Page Header',
  component: MPageHeader,
  subcomponents: {
    MPageHeaderFeature,
    MPageHeaderContext,
  },
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '250px' },
      description: {
        component:
          'The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.',
      },
    },
  },
  args: {
    title: 'Page header title',
    backButton: true,
    status: 'info',
    statusLabel: 'Information',
    extraInfo: 'Additional information',
    actions: `
      <MPageHeaderFeature
        label="Search"
        :icon="Search20"
        @action="handleFeatureClick"
      />

      <MPageHeaderFeature
        label="Help"
        :icon="HelpCircle20"
        @action="handleFeatureClick"
      />

      <MPageHeaderFeature
        label="Notifications"
        :icon="Notification20"
        @action="handleFeatureClick"
      />
      `,
    context: `<MPageHeaderContext v-model="context" :options="[{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }]" />`,
    tabs: `
      <MTabs size="s" :tabs='[{ "label": "Label" }, { "label": "Label" }, { "label": "Label" }, { "label": "Label" }]' />
    `,
  },
  render: (args) => ({
    components: {
      MPageHeader,
      MTabs,
      MPageHeaderFeature,
      MPageHeaderContext,
    },
    setup() {
      const handleBackButtonClick = action('back');
      const handleMenuClick = action('toggle-menu');
      const handleFeatureClick = action('action');
      const context = ref('');

      return {
        args,
        context,
        HelpCircle20,
        Search20,
        Notification20,
        handleBackButtonClick,
        handleMenuClick,
        handleFeatureClick,
      };
    },
    template: `
      <MPageHeader
        v-bind="args"
        @back="handleBackButtonClick"
        @toggle-menu="handleMenuClick"
      >
        <template v-if="${'tabs' in args}" v-slot:tabs>${args.tabs}</template>
        <template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
        <template v-if="${'context' in args}" v-slot:context>${args.context}</template>
      </MPageHeader>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MPageHeader>;

export const Default: Story = {};

export const Basic: Story = {
  args: {
    backButton: false,
    status: undefined,
    tabs: undefined,
    extraInfo: '',
  },
  render: (args) => ({
    components: { MPageHeader },
    setup() {
      return { args };
    },
    template: `<MPageHeader v-bind="args" />`,
  }),
};

export const Shadow: Story = {
  args: {
    shadow: true,
    backButton: false,
    status: undefined,
    extraInfo: '',
  },
  render: (args) => ({
    components: { MPageHeader },
    setup() {
      return { args };
    },
    template: `<MPageHeader v-bind="args" />`,
  }),
};