@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/navigationindicator/MNavigationIndicator.spec.ts

@@ -0,0 +1,152 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MNavigationIndicator from './MNavigationIndicator.vue';
+
+const PauseCircle24 = {
+  name: 'PauseCircle24',
+  template: '<span data-testid="pause-icon"></span>',
+};
+const PlayCircle24 = {
+  name: 'PlayCircle24',
+  template: '<span data-testid="play-icon"></span>',
+};
+
+const MButton = {
+  name: 'MButton',
+  props: ['size', 'iconPosition', 'ghost'],
+  template: `
+    <button data-testid="m-button">
+      <slot />
+
+      <slot name="icon" />
+      <slot />
+    </button>
+  `,
+};
+
+const MIconButton = {
+  name: 'MIconButton',
+  props: ['size', 'ghost'],
+  template: `<button data-testid="m-icon-button"><slot name="icon" /></button>`,
+};
+
+describe('MNavigationIndicator.vue', () => {
+  it('renders the correct number of steps', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 4, modelValue: 0 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const items = wrapper.findAll('.mc-navigation-indicator__item');
+    expect(items).toHaveLength(4);
+  });
+
+  it('applies active class to the current step', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 5, modelValue: 2 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const stepButtons = wrapper.findAll(
+      '.mc-navigation-indicator__list .mc-navigation-indicator__button',
+    );
+    expect(stepButtons[2].classes()).toContain(
+      'mc-navigation-indicator__button--active',
+    );
+  });
+
+  it('emits update:modelValue when a step is clicked', async () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 0 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const stepButtons = wrapper.findAll(
+      '.mc-navigation-indicator__list .mc-navigation-indicator__button',
+    );
+    await stepButtons[1].trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0][0]).toBe(1);
+  });
+
+  it('emits update:modelValue when Enter is pressed on a step', async () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 0 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const stepButtons = wrapper.findAll(
+      '.mc-navigation-indicator__list .mc-navigation-indicator__button',
+    );
+    await stepButtons[2].trigger('keydown', { key: 'Enter' });
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0][0]).toBe(2);
+  });
+
+  it('does not emit update:modelValue when a wrong key is pressed', async () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 0 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const stepButtons = wrapper.findAll(
+      '.mc-navigation-indicator__list .mc-navigation-indicator__button',
+    );
+    await stepButtons[2].trigger('keydown', { key: 'Esc' });
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeFalsy();
+  });
+
+  it('does not render action button when player is false', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, player: false },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    expect(wrapper.find('[data-testid="m-button"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="m-icon-button"]').exists()).toBe(false);
+  });
+
+  it('renders icon-only button when no label is defined', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'resume' },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    expect(wrapper.find('[data-testid="m-icon-button"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="play-icon"]').exists()).toBe(true);
+  });
+
+  it('renders labeled button with correct label and pause icon when action is pause', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, label: 'Pause', action: 'pause' },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const button = wrapper.find('[data-testid="m-button"]');
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toContain('Pause');
+    expect(wrapper.find('[data-testid="pause-icon"]').exists()).toBe(true);
+  });
+});

package/src/components/navigationindicator/MNavigationIndicator.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MNavigationIndicator from './MNavigationIndicator.vue';
+
+const meta: Meta<typeof MNavigationIndicator> = {
+  title: 'Indicators/Navigation indicator',
+  component: MNavigationIndicator,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.',
+      },
+    },
+  },
+  args: {
+    steps: 6,
+    modelValue: 1,
+  },
+  render: (args) => ({
+    components: { MNavigationIndicator },
+    setup() {
+      const handleAction = action('action');
+      return { args, handleAction };
+    },
+    template: `
+      <MNavigationIndicator v-bind="args" v-model="args.modelValue" @action="handleAction"></MNavigationIndicator>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MNavigationIndicator>;
+
+export const Default: Story = {};
+
+export const Standalone: Story = {
+  args: {
+    player: false,
+  },
+};

package/src/components/navigationindicator/MNavigationIndicator.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="mc-navigation-indicator"
+    role="navigation"
+    aria-label="Navigations steps"
+  >
+    <ul class="mc-navigation-indicator__list">
+      <li
+        v-for="(_step, index) in steps"
+        :key="index"
+        class="mc-navigation-indicator__item"
+      >
+        <button
+          :class="{
+            'mc-navigation-indicator__button': true,
+            'mc-navigation-indicator__button--active': active === index,
+          }"
+          aria-label="Navigation step button"
+          :aria-current="active === index && 'step'"
+          @click="setActiveStep(index)"
+          @keydown="onKeydown($event, index)"
+        ></button>
+      </li>
+    </ul>
+
+    <template v-if="player">
+      <MButton
+        v-if="label"
+        size="s"
+        icon-position="left"
+        ghost
+        @click="emit('action')"
+      >
+        {{ label }}
+
+        <template #icon>
+          <component :is="actionIcon" />
+        </template>
+      </MButton>
+
+      <MIconButton
+        v-else
+        size="s"
+        ghost
+        @click="emit('action')"
+        aria-label="Control button"
+      >
+        <template #icon>
+          <component :is="actionIcon" />
+        </template>
+      </MIconButton>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MButton from '../button/MButton.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import { PauseCircle24, PlayCircle24 } from '@mozaic-ds/icons-vue';
+
+/**
+ * A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The total number of steps to display.
+     */
+    steps: number;
+    /**
+     * The index of the currently active step (zero-based).
+     */
+    modelValue: number;
+    /**
+     * The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon.
+     */
+    action?: 'pause' | 'resume';
+    /**
+     * The text label displayed in the Resume or Pause button.
+     */
+    label?: string;
+    /**
+     * If `true`, hides the Resume or Pause button next to the steps.
+     */
+    player?: boolean;
+  }>(),
+  {
+    player: true,
+    action: 'resume',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the active step changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+  /**
+   * Emits when the action button is clicked.
+   */
+  (on: 'action'): void;
+}>();
+
+const active = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: number) {
+    emit('update:modelValue', value);
+  },
+});
+
+const actionIcon = computed(() =>
+  props.action === 'pause' ? PauseCircle24 : PlayCircle24,
+);
+
+function setActiveStep(step: number) {
+  active.value = step;
+}
+
+function onKeydown(event: KeyboardEvent, step: number) {
+  if (event.key === 'Enter') {
+    setActiveStep(step);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/navigation-indicator';
+</style>

package/src/components/navigationindicator/README.md

@@ -0,0 +1,37 @@
+# MNavigationIndicator
+
+A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `steps*` | The total number of steps to display. | `number` | - |
+| `modelValue*` | The index of the currently active step (zero-based). | `number` | - |
+| `action` | The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon. | `"resume"` `"pause"` | `"resume"` |
+| `label` | The text label displayed in the Resume or Pause button. | `string` | - |
+| `player` | If `true`, hides the Resume or Pause button next to the steps. | `boolean` | `true` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the active step changes, updating the modelValue prop. | [value: number] |
+| `action` | Emits when the action button is clicked. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MIconButton](../iconbutton)
+
+### Graph
+
+```mermaid
+graph TD;
+  MNavigationIndicator --> MButton
+  MNavigationIndicator --> MIconButton
+style MNavigationIndicator fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/pageheader/MPageHeader.spec.ts

@@ -0,0 +1,142 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MPageHeader from './MPageHeader.vue';
+
+describe('MPageHeader', () => {
+  describe('Render basics', () => {
+    it('renders the title', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+      });
+
+      expect(wrapper.text()).toContain('My Page');
+    });
+
+    it('adds shadow class when shadow prop is true', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page', shadow: true },
+      });
+
+      expect(wrapper.classes()).toContain('mc-page-header--with-shadow');
+    });
+
+    it('renders content slot when provided', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+        slots: {
+          content: '<div class="slot-content">ContentSlot</div>',
+        },
+      });
+
+      expect(wrapper.find('.slot-content').exists()).toBe(true);
+    });
+
+    it('renders actions slot when provided', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+        slots: {
+          actions: '<button class="action-btn">Action</button>',
+        },
+      });
+
+      expect(wrapper.find('.action-btn').exists()).toBe(true);
+    });
+
+    it('renders tabs slot when provided', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+        slots: {
+          tabs: '<div class="tab-item">Tab 1</div>',
+        },
+      });
+
+      expect(wrapper.find('.tab-item').exists()).toBe(true);
+    });
+  });
+
+  describe('Buttons and emitted events', () => {
+    it('shows back button and emits "back" when clicked', async () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page', backButton: true },
+      });
+
+      const backBtn = wrapper.find('[aria-label="Back button"]');
+      expect(backBtn.exists()).toBe(true);
+
+      await backBtn.trigger('click');
+      expect(wrapper.emitted()).toHaveProperty('back');
+    });
+
+    it('does not render back button when backButton is false', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page', backButton: false },
+      });
+
+      expect(wrapper.find('[aria-label="Back button"]').exists()).toBe(false);
+    });
+
+    it('burger menu button emits "toggle-menu" when clicked', async () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+      });
+
+      const burger = wrapper.find('[aria-label="Burger menu"]');
+      expect(burger.exists()).toBe(true);
+
+      await burger.trigger('click');
+      expect(wrapper.emitted()).toHaveProperty('toggle-menu');
+    });
+  });
+
+  describe('Status and extra info', () => {
+    it('renders status badge when status and statusLabel are provided', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: {
+          title: 'My Page',
+          status: 'success',
+          statusLabel: 'OK',
+        },
+      });
+
+      expect(
+        wrapper.findComponent({ name: 'MStatusBadge' }).exists(),
+      ).toBe(true);
+    });
+
+    it('does not render status badge if statusLabel is missing', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: {
+          title: 'My Page',
+          status: 'success',
+        },
+      });
+
+      expect(
+        wrapper.findComponent({ name: 'MStatusBadge' }).exists(),
+      ).toBe(false);
+    });
+
+    it('renders extra info when provided', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: {
+          title: 'My Page',
+          extraInfo: 'Details',
+        },
+      });
+
+      expect(
+        wrapper.find('.mc-page-header__extra-info').text(),
+      ).toBe('Details');
+    });
+
+    it('renders info wrapper only when status or extraInfo exists', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+      });
+
+      expect(
+        wrapper.find('.mc-page-header__info-wrapper').exists(),
+      ).toBe(false);
+    });
+  });
+});

package/src/components/pageheader/MPageHeader.stories.ts

@@ -0,0 +1,125 @@
+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 MIconButton from '../iconbutton/MIconButton.vue';
+import { Search24, HelpCircle24, Notification24 } from '@mozaic-ds/icons-vue';
+import MSelect from '../select/MSelect.vue';
+
+const meta: Meta<typeof MPageHeader> = {
+  title: 'Structure/Page Header',
+  component: MPageHeader,
+  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: `
+      <MIconButton
+        ghost
+        aria-label="Search button"
+      >
+        <template #icon>
+          <Search24 />
+        </template>
+      </MIconButton>
+      <MIconButton
+        ghost
+        aria-label="Help button"
+      >
+        <template #icon>
+          <HelpCircle24 />
+        </template>
+      </MIconButton>
+      <MIconButton
+        ghost
+        aria-label="Notification button"
+      >
+        <template #icon>
+          <Notification24 />
+        </template>
+      </MIconButton>
+      <MSelect
+        id="scope-select"
+        aria-label="Scope select"
+        size="s"
+        placeholder="Choose a scope"
+        :options='[{ "text": "Option1", "value": "option1"}, { "text": "Option2", "value": "option2"}]'
+      />
+    `,
+    tabs: `
+      <MTabs :tabs='[{ "label": "Label" }, { "label": "Label" }, { "label": "Label" }, { "label": "Label" }]' />
+    `,
+  },
+  render: (args) => ({
+    components: { MPageHeader, MTabs, MIconButton, Search24, HelpCircle24, Notification24, MSelect },
+    setup() {
+      const handleBackButtonClick = action('back');
+      const handleMenuClick = action('toggle-menu');
+
+      return {
+        args,
+
+        handleBackButtonClick,
+        handleMenuClick,
+      };
+    },
+    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>
+      </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" />`,
+  }),
+};