@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/pageheader/MPageHeader.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    :class="{
+      'mc-page-header': true,
+      'mc-page-header--with-shadow': shadow,
+    }"
+  >
+    <div class="mc-page-header__top-wrapper">
+      <div class="mc-page-header__top-content">
+        <MIconButton
+          v-if="backButton"
+          ghost
+          aria-label="Back button"
+          @click="emit('back')"
+        >
+          <template #icon>
+            <ArrowBack24 />
+          </template>
+        </MIconButton>
+
+        <div class="mc-page-header__content-wrapper">
+          <span class="mc-page-header__title">
+            {{ title }}
+          </span>
+
+          <div
+            v-if="status || extraInfo"
+            class="mc-page-header__info-wrapper"
+          >
+            <MStatusBadge
+              v-if="statusLabel && status"
+              :label="statusLabel"
+              :status="status"
+            />
+
+            <span v-if="extraInfo" class="mc-page-header__extra-info">
+              {{ extraInfo }}
+            </span>
+          </div>
+
+          <slot name="content" />
+        </div>
+      </div>
+
+      <div class="mc-page-header__actions-wrapper">
+        <MIconButton
+          class="mc-page-header__burger-menu"
+          ghost
+          aria-label="Burger menu"
+          @click="emit('toggle-menu')"
+        >
+          <template #icon>
+            <Menu24 />
+          </template>
+        </MIconButton>
+
+        <div class="mc-page-header__actions-content">
+          <slot name="actions"/>
+        </div>
+      </div>
+    </div>
+
+    <div class="mc-page-header__tabs">
+      <slot name="tabs"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type VNode } from 'vue';
+import { ArrowBack24, Menu24 } from '@mozaic-ds/icons-vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import MStatusBadge from '../statusbadge/MStatusBadge.vue';
+/**
+ * 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.
+ */
+defineProps<{
+  /**
+   * Main title displayed in the page header.
+   */
+  title: string;
+  /**
+   * Enables a drop shadow under the page header.
+   */
+  shadow?: boolean;
+  /**
+   * Displays a back icon button in the header.
+   */
+  backButton?: boolean;
+  /**
+   * Component status.
+   */
+  status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+  /**
+   * Label text displayed inside the status badge.
+   */
+  statusLabel?: string;
+  /**
+   * Additional information text shown below the title.
+   */
+  extraInfo?: string;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emits when the back button is clicked.
+   */
+  (on: 'back'): void;
+  /**
+   * Emits when the burger menu button is clicked.
+   */
+  (on: 'toggle-menu'): void;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to insert action items in the top content.
+   */
+  actions?: VNode;
+  /**
+   * Use this slot to insert any content below the Page Header top content.
+   */
+  content?: VNode;
+  /**
+   * Use this slot to insert a tab in the header.
+   */
+  tabs?: VNode;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/page-header';
+</style>

package/src/components/pageheader/README.md

@@ -0,0 +1,46 @@
+# MPageHeader
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `title*` | Main title displayed in the page header. | `string` | - |
+| `shadow` | Enables a drop shadow under the page header. | `boolean` | - |
+| `backButton` | Displays a back icon button in the header. | `boolean` | - |
+| `status` | Component status. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | - |
+| `statusLabel` | Label text displayed inside the status badge. | `string` | - |
+| `extraInfo` | Additional information text shown below the title. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `actions` | Use this slot to insert action items in the top content. |
+| `content` | Use this slot to insert any content below the Page Header top content. |
+| `tabs` | Use this slot to insert a tab in the header. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `back` | Emits when the back button is clicked. | [] |
+| `toggle-menu` | Emits when the burger menu button is clicked. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+- [MStatusBadge](../statusbadge)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPageHeader --> MIconButton
+  MPageHeader --> MStatusBadge
+style MPageHeader fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/popover/MPopover.spec.ts

@@ -0,0 +1,106 @@
+import { h } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MPopover from './MPopover.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+
+describe('MPopover.vue', () => {
+  it('applies classes based on props', () => {
+    const wrapper = mount(MPopover, {
+      props: {
+        appearance: 'inverse',
+        position: 'right',
+        pointer: false,
+        size: 'l',
+      },
+    });
+
+    const rootDiv = wrapper.find('.mc-popover');
+    expect(rootDiv.exists()).toBe(true);
+    expect(rootDiv.classes()).toContain('mc-popover');
+    expect(rootDiv.classes()).toContain('mc-popover--inverse');
+    expect(rootDiv.classes()).toContain('mc-popover--right');
+    expect(rootDiv.classes()).toContain('mc-popover--no-pointer');
+    expect(rootDiv.classes()).toContain('mc-popover--l');
+  });
+
+  it('sets aria-labelledby and aria-describedby when title/description provided', () => {
+    const wrapper = mount(MPopover, {
+      props: { title: 'My title', description: 'My description' },
+    });
+
+    const wrapperEl = wrapper.find('.mc-popover__wrapper');
+    const id = wrapperEl.attributes('id');
+    expect(id).toBeTruthy();
+    expect(wrapperEl.attributes('aria-labelledby')).toBe(`${id}-title`);
+    expect(wrapperEl.attributes('aria-describedby')).toBe(`${id}-description`);
+  });
+
+  it('renders title and description', () => {
+    const wrapper = mount(MPopover, {
+      props: { title: 'T', description: 'D' },
+    });
+
+    const wrapperEl = wrapper.find('.mc-popover__wrapper');
+    const id = wrapperEl.attributes('id');
+
+    const title = wrapper.find(`#${id}-title`);
+    const description = wrapper.find(`#${id}-description`);
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('T');
+    expect(description.exists()).toBe(true);
+    expect(description.text()).toBe('D');
+  });
+
+  it('renders default slot content', () => {
+    const wrapper = mount(MPopover, {
+      slots: { default: '<div class="slot-content">Hello</div>' },
+    });
+
+    expect(wrapper.find('.slot-content').exists()).toBe(true);
+    expect(wrapper.find('.slot-content').text()).toBe('Hello');
+  });
+
+  it('renders footer slot when provided', () => {
+    const wrapper = mount(MPopover, {
+      slots: { footer: '<button class="footer-button">OK</button>' },
+    });
+
+    const footer = wrapper.find('.mc-popover__footer');
+    expect(footer.exists()).toBe(true);
+    const button = footer.find('button');
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe('OK');
+  });
+
+  it('renders close button when closable is true and binds id', () => {
+    const wrapper = mount(MPopover, { props: { closable: true } });
+
+    const closeButton = wrapper.findComponent(MIconButton);
+    expect(closeButton.exists()).toBe(true);
+
+    const wrapperEl = wrapper.find('.mc-popover__wrapper');
+    const id = wrapperEl.attributes('id');
+    expect(closeButton.attributes('popovertarget')).toBe(id);
+    expect(closeButton.attributes('aria-label')).toBe('Close button');
+  });
+
+  it('activator slot receives id and can bind popovertarget', () => {
+    const wrapper = mount(MPopover, {
+      slots: {
+        activator: (slotProps: { id: string }) =>
+          h(
+            'button',
+            { popovertarget: slotProps.id, class: 'activator' },
+            'Open',
+          ),
+      },
+    });
+
+    const wrapperEl = wrapper.find('.mc-popover__wrapper');
+    const id = wrapperEl.attributes('id');
+    const activator = wrapper.find('.activator');
+    expect(activator.exists()).toBe(true);
+    expect(activator.attributes('popovertarget')).toBe(id);
+  });
+});

package/src/components/popover/MPopover.stories.ts

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MPopover from './MPopover.vue';
+import MButton from '../button/MButton.vue';
+import MLink from '../link/MLink.vue';
+import { ExternalLink24 } from '@mozaic-ds/icons-vue';
+
+const meta: Meta<typeof MPopover> = {
+  title: 'Overlay/Popover',
+  component: MPopover,
+  tags: ['v2'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A popover is a small overlay that appears above other content, typically triggered by a user interaction such as clicking or hovering over an element. It is used to display contextual information, additional actions, or interactive content without navigating away from the main interface. Popovers often include a title, description, and action buttons, and they automatically close when clicking outside or selecting an action.',
+      },
+    },
+  },
+  args: {
+    title: 'Title',
+    description: 'Description',
+    footer: `
+      <MButton
+        size="s"
+        aria-label="Popover action button"
+      >
+        Button label
+      </MButton>
+    `,
+    activator: `
+      <MButton :popovertarget="id">
+        Activator
+      </MButton>
+    `,
+  },
+  render: (args) => ({
+    components: { MPopover, MButton, MLink, ExternalLink24 },
+    setup() {
+      const handleAction = action('action');
+
+      return { args, handleAction };
+    },
+    template: `
+      <MPopover
+        v-bind="args"
+        @action="handleAction"
+      >
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+        <template #activator="{ id }" v-slot:activator>${args.activator}</template>
+      </MPopover>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPopover>;
+
+export const Default: Story = {};
+
+export const Inverse = {
+  args: {
+    appearance: 'inverse',
+    footer: `
+      <MLink appearance="inverse" href="#" size="s" icon-position="right">
+        Stand-alone link
+        <template #icon><ExternalLink24 /></template>
+      </MLink>
+      <MButton appearance="inverse" size="s" aria-label="Popover action button">
+        Button label
+      </MButton>
+    `,
+  },
+};
+
+export const ValidationOnly = {
+  args: {
+    footer: `
+      <MButton size="s" aria-label="Popover action button">
+        Button label
+      </MButton>
+    `,
+  },
+};
+
+export const TwoOptions = {
+  args: {
+    footer: `
+      <MButton size="s" outlined aria-label="Popover action button">
+        Button label
+      </MButton>
+      <MButton size="s" aria-label="Popover action button">
+        Button label
+      </MButton>
+    `,
+  },
+};
+
+export const Link = {
+  args: {
+    footer: `
+      <MLink href="#" size="s" icon-position="right">
+        Stand-alone link
+        <template #icon><ExternalLink24 /></template>
+      </MLink>
+      <MButton
+        size="s"
+        aria-label="Popover action button"
+      >
+        Button label
+      </MButton>
+    `,
+  },
+};
+
+export const Navigation = {
+  args: {
+    footer: `
+      <MLink href="#" size="s" icon-position="right">
+        Stand-alone link
+        <template #icon><ExternalLink24 /></template>
+      </MLink>
+    `,
+  },
+};

package/src/components/popover/MPopover.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    :class="{
+      'mc-popover': true,
+      [`mc-popover--${appearance}`]: true,
+      [`mc-popover--${position}`]: true,
+      'mc-popover--no-pointer': !pointer,
+      [`mc-popover--${size}`]: true,
+    }"
+  >
+    <div
+      :id="id"
+      class="mc-popover__wrapper"
+      popover
+      :aria-labelledby="title && `${id}-title`"
+      :aria-describedby="description && `${id}-description`"
+    >
+      <div class="mc-popover__content">
+        <div v-if="title || description" class="mc-popover__headings">
+          <p v-if="title" :id="`${id}-title`" class="mc-popover__title">
+            {{ title }}
+          </p>
+          <p
+            v-if="description"
+            :id="`${id}-description`"
+            class="mc-popover__description"
+          >
+            {{ description }}
+          </p>
+        </div>
+
+        <div v-if="$slots.default">
+          <slot />
+        </div>
+
+        <MIconButton
+          v-if="closable"
+          ghost
+          :popovertarget="id"
+          :appearance="appearance"
+          icon-position="only"
+          aria-label="Close button"
+          class="mc-popover__close"
+        >
+          <template #icon>
+            <Cross20 />
+          </template>
+        </MIconButton>
+
+        <footer v-if="$slots.footer" class="mc-popover__footer">
+          <slot name="footer" />
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <slot name="activator" v-bind="{ id }" />
+</template>
+
+<script setup lang="ts">
+import { useId, type VNode } from 'vue';
+import { Cross20 } from '@mozaic-ds/icons-vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+/**
+ * A popover is a small overlay that appears above other content, typically triggered by a user interaction such as clicking or hovering over an element. It is used to display contextual information, additional actions, or interactive content without navigating away from the main interface. Popovers often include a title, description, and action buttons, and they automatically close when clicking outside or selecting an action.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the popover appearance.
+     */
+    appearance?: 'standard' | 'inverse';
+    /**
+     * Defines the preferred position of the popover relative to its activator.
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Controls the visibility of the popover pointer (arrow).
+     */
+    pointer?: boolean;
+    /**
+     * Sets the overall size of the popover.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * Displays a close icon button inside the popover.
+     * Clicking the button will close the popover.
+     */
+    closable?: boolean;
+    /**
+     * Title displayed at the top of the popover.
+     */
+    title?: string;
+    /**
+     * Supplementary text displayed below the title.
+     */
+    description?: string;
+  }>(),
+  {
+    closable: true,
+    pointer: true,
+    appearance: 'standard',
+    position: 'top',
+    size: 's',
+  },
+);
+
+defineSlots<{
+  /**
+   * Main content of the popover.
+   */
+  default?: () => VNode[];
+  /**
+   * Activator element that triggers the popover.
+   * Must contain a single <button> or element with [type="button"] attribute.
+   * Receives the popover `id` as a slot prop and must bind it
+   * to the `popovertarget` attribute.
+   */
+  activator?: (props: { id: string }) => VNode[];
+  /**
+   * Use this slot to insert buttons or link in the footer.
+   */
+  footer?: VNode;
+}>();
+
+const id = useId();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/popover';
+</style>

package/src/components/popover/README.md

@@ -0,0 +1,42 @@
+# MPopover
+
+A popover is a small overlay that appears above other content, typically triggered by a user interaction such as clicking or hovering over an element. It is used to display contextual information, additional actions, or interactive content without navigating away from the main interface. Popovers often include a title, description, and action buttons, and they automatically close when clicking outside or selecting an action.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Allows to define the popover appearance. | `"standard"` `"inverse"` | `"standard"` |
+| `position` | Defines the preferred position of the popover relative to its activator. | `"bottom"` `"top"` `"left"` `"right"` | `"top"` |
+| `pointer` | Controls the visibility of the popover pointer (arrow). | `boolean` | `true` |
+| `size` | Sets the overall size of the popover. | `"s"` `"m"` `"l"` | `"s"` |
+| `closable` | Displays a close icon button inside the popover.
+Clicking the button will close the popover. | `boolean` | `true` |
+| `title` | Title displayed at the top of the popover. | `string` | - |
+| `description` | Supplementary text displayed below the title. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Main content of the popover. |
+| `activator` | Activator element that triggers the popover.
+Must contain a single <button> or element with [type="button"] attribute.
+Receives the popover `id` as a slot prop and must bind it
+to the `popovertarget` attribute. |
+| `footer` | Use this slot to insert buttons or link in the footer. |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPopover --> MIconButton
+style MPopover fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/radio/README.md

@@ -25,11 +25,13 @@ A radio button is a selection control that allows users to choose a single optio
 ### Used By
 
 - [MRadioGroup](../radiogroup)
+- [MTileSelectable](../tileselectable)
 
 ### Graph
 
 ```mermaid
 graph TD;
   MRadioGroup --> MRadio
+  MTileSelectable --> MRadio
 style MRadio fill:#008240,stroke:#333,stroke-width:4px
 ```

package/src/components/select/MSelect.spec.ts

@@ -92,9 +92,10 @@ describe('Select.vue', () => {
       },
     });
 
+    const selectWrapper = wrapper.find('.mc-select');
     const select = wrapper.find('select');
 
-    expect(select.classes()).toContain('mc-select--s');
+    expect(selectWrapper.classes()).toContain('mc-select--s');
 
     expect(select.classes()).toContain('is-invalid');
   });

package/src/components/select/MSelect.vue

@@ -1,29 +1,35 @@
 <template>
-  <select
-    :id="id"
-    class="mc-select"
-    :name="name"
-    :value="modelValue"
-    :class="classObject"
-    :disabled="disabled"
-    v-bind="$attrs"
-    @change="
-      emit('update:modelValue', ($event.target as HTMLSelectElement).value)
-    "
+  <div :class="{
+    'mc-select': true,
+    [`mc-select--${size}`]: props.size && props.size != 'm',
+    }"
   >
-    <option v-if="placeholder" value="" disabled>
-      -- {{ placeholder }} --
-    </option>
-    <option
-      v-for="(option, index) in options"
-      :key="index"
-      :value="option.value"
-      v-bind="option.attributes"
-      :disabled="option.disabled"
+    <select
+      :id="id"
+      class="mc-select__control"
+      :class="classObject"
+      :name="name"
+      :value="modelValue"
+      :disabled="disabled"
+      v-bind="$attrs"
+      @change="
+        emit('update:modelValue', ($event.target as HTMLSelectElement).value)
+      "
     >
-      {{ option.text }}
-    </option>
-  </select>
+      <option v-if="placeholder" value="" disabled>
+        -- {{ placeholder }} --
+      </option>
+      <option
+        v-for="(option, index) in options"
+        :key="index"
+        :value="option.value"
+        v-bind="option.attributes"
+        :disabled="option.disabled"
+      >
+        {{ option.text }}
+      </option>
+    </select>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -84,8 +90,7 @@ const props = withDefaults(
 
 const classObject = computed(() => {
   return {
-    [`mc-select--${props.size}`]: props.size && props.size != 'm',
-    'mc-select--readonly': props.readonly,
+    'mc-select__control--readonly': props.readonly,
     'is-invalid': props.isInvalid,
   };
 });

package/src/components/sidebar/MSidebar.const.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const EXPANDED_SIDEBAR_KEY = Symbol() as InjectionKey<Ref<boolean>>;
+export const TOGGLE_SIDEBAR_KEY = Symbol() as InjectionKey<() => void>;
+export const SUB_ITEM_KEY = Symbol() as InjectionKey<boolean>;
+export const STACKED_SHORTCUTS_KEY = Symbol() as InjectionKey<boolean>;