@mozaic-ds/vue/src/components/actionbottombar/MActionBottomBar.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';

import MActionBottomBar from './MActionBottomBar.vue';
import MStatusMessage from '../statusmessage/MStatusMessage.vue';
import MButton from '../button/MButton.vue';

// Icons
import { Refresh24, Cross24, Check24 } from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MActionBottomBar> = {
  title: 'Structure/Action Bottom Bar',
  component: MActionBottomBar,
  tags: ['v2'],
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '150px' },
      description: {
        component:
          'An action bottom bar is a fixed element positioned at the bottom of the screen or section, providing persistent access to key actions. It is commonly used for confirmations, validations, warnings, or bulk actions in forms, editing workflows, or data management. This component ensures that primary and secondary actions remain visible and accessible, even when scrolling.',
      },
    },
  },
  args: {
    left: `
      <MStatusMessage status="warning" label="999 unsaved changes"/>
    `,
    right: `
      <MButton size="s" ghost>
        Reset
      </MButton>
      <MButton size="s" outlined appearance="danger">
        Delete
      </MButton>
      <MButton size="s" appearance="accent">
        Save
      </MButton>
    `,
  },
  render: (args) => ({
    components: {
      MActionBottomBar,
      MStatusMessage,
      MButton,
      Refresh24,
      Cross24,
      Check24,
    },
    setup() {
      return { args };
    },
    template: `
      <MActionBottomBar v-bind="args">
        <template v-if="${'left' in args}" v-slot:left>${args.left}</template>
        <template v-if="${'right' in args}" v-slot:right>${args.right}</template>
      </MActionBottomBar>
    `,
  }),
};

export default meta;

type Story = StoryObj<typeof MActionBottomBar>;

export const Default: Story = {};

export const Shadow: Story = {
  args: {
    shadow: true,
  },
};

export const Unsaved: Story = {
  args: {
    right: `
      <MButton size="s" appearance="accent">
        Save
      </MButton>
    `,
  },
};

export const SaveInProgress: Story = {
  args: {
    left: `
      <MStatusMessage status="inprogress" label="Saving changes"/>
    `,
    right: `
      <MButton size="s" appearance="accent">
        Save
      </MButton>
    `,
  },
};

export const Saved: Story = {
  args: {
    left: `
      <MStatusMessage status="success" label="Changes saved"/>
    `,
    right: `
      <MButton size="s" appearance="accent">
        Save
      </MButton>
    `,
  },
};

export const WithoutReset: Story = {
  args: {
    right: `
      <MButton size="s" outlined appearance="danger">
        Delete
      </MButton>
      <MButton size="s" appearance="accent">
        Save
      </MButton>
    `,
  },
};

export const WithoutDelete: Story = {
  args: {
    right: `
      <MButton size="s" appearance="accent">
        Save
      </MButton>
    `,
  },
};

export const Mobile: Story = {
  args: {
    right: `
      <MButton 
        ghost 
        icon-position="only"
      >
        <template #icon>
          <Refresh24/>
        </template>
      </MButton>
      <MButton 
        outlined 
        appearance="danger" 
        icon-position="only"
      >
        <template #icon>
          <Cross24/>
        </template>
      </MButton>
      <MButton 
        appearance="accent"
        icon-position="only"
      >
        <template #icon>
          <Check24/>
        </template>
      </MButton>
    `,
  },
};