@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.spec.ts

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { defineComponent } from 'vue';
+import MSidebarShortcutItem from './MSidebarShortcutItem.vue';
+import {
+  EXPANDED_SIDEBAR_KEY,
+  STACKED_SHORTCUTS_KEY,
+} from '../sidebar/MSidebar.const';
+
+const TestIcon = defineComponent({
+  name: 'TestIcon',
+  template: '<svg data-testid="test-icon"></svg>',
+});
+
+describe('MSidebarShortcutItem', () => {
+  it('renders label and href', () => {
+    const wrapper = mount(MSidebarShortcutItem, {
+      props: { label: 'Dashboard', href: '/dashboard' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: true,
+          [STACKED_SHORTCUTS_KEY]: true,
+        },
+      },
+    });
+    const link = wrapper.find('a.mc-sidebar__shortcut-link');
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe('/dashboard');
+    expect(wrapper.text()).toContain('Dashboard');
+  });
+
+  it('renders icon when provided', () => {
+    const wrapper = mount(MSidebarShortcutItem, {
+      props: { label: 'WithIcon', href: '#', icon: TestIcon },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: true,
+          [STACKED_SHORTCUTS_KEY]: true,
+        },
+      },
+    });
+    expect(wrapper.find('.mc-sidebar__shortcut-icon').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="test-icon"]').exists()).toBe(true);
+  });
+
+  it('does not render icon when not provided', () => {
+    const wrapper = mount(MSidebarShortcutItem, {
+      props: { label: 'NoIcon', href: '#' },
+      global: {
+        provide: {
+          [EXPANDED_SIDEBAR_KEY]: true,
+          [STACKED_SHORTCUTS_KEY]: true,
+        },
+      },
+    });
+    expect(wrapper.find('.mc-sidebar__shortcut-icon').exists()).toBe(false);
+    expect(wrapper.find('svg').exists()).toBe(false);
+  });
+});

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <li
+    :class="[
+      'mc-sidebar__shortcut-item',
+      !stacked && expanded
+        ? 'mc-sidebar__shortcut-item--grid'
+        : 'mc-sidebar__shortcut-item--stacked',
+    ]"
+    role="menuitem"
+  >
+    <a :href="props.href" class="mc-sidebar__shortcut-link">
+      <component
+        v-if="props.icon"
+        :is="props.icon"
+        class="mc-sidebar__shortcut-icon"
+      />
+      <span class="mc-sidebar__shortcut-label">{{ props.label }}</span>
+    </a>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { inject, type Component } from 'vue';
+import {
+  EXPANDED_SIDEBAR_KEY,
+  STACKED_SHORTCUTS_KEY,
+} from '../sidebar/MSidebar.const';
+/**
+ * SidebarShortcutItem is a component that renders a sidebar shortcut link with an optional icon and label, providing quick access to a specific URL.
+ */
+const props = defineProps<{
+  /**
+   * The text label displayed for the shortcut item.
+   */
+  label: string;
+  /**
+   * The URL the shortcut item links to.
+   */
+  href: string;
+  /**
+   * Optional icon component displayed alongside the label.
+   */
+  icon?: Component;
+}>();
+
+const stacked = inject(STACKED_SHORTCUTS_KEY);
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarshortcutitem/README.md

@@ -0,0 +1,32 @@
+# MSidebarShortcutItem
+
+SidebarShortcutItem is a component that renders a sidebar shortcut link with an optional icon and label, providing quick access to a specific URL.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | The text label displayed for the shortcut item. | `string` | - |
+| `href*` | The URL the shortcut item links to. | `string` | - |
+| `icon` | Optional icon component displayed alongside the label. | `Component` | - |
+
+## Dependencies
+
+### Used By
+
+- [DefaultCase.stories](../sidebar/stories)
+- [WithExpandOnly.stories](../sidebar/stories)
+- [WithProfileInfoOnly.stories](../sidebar/stories)
+- [WithSingleLevel.stories](../sidebar/stories)
+
+### Graph
+
+```mermaid
+graph TD;
+  DefaultCase.stories --> MSidebarShortcutItem
+  WithExpandOnly.stories --> MSidebarShortcutItem
+  WithProfileInfoOnly.stories --> MSidebarShortcutItem
+  WithSingleLevel.stories --> MSidebarShortcutItem
+style MSidebarShortcutItem fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/sidebarshortcuts/MSidebarShortcuts.spec.ts

@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { nextTick, ref } from 'vue';
+
+const floatingItemIsDisplayed = ref(false);
+const showFloatingItem = vi.fn(() => (floatingItemIsDisplayed.value = true));
+const hideFloatingItem = vi.fn(() => (floatingItemIsDisplayed.value = false));
+const onTriggerKeydown = vi.fn();
+const onListboxKeydown = vi.fn();
+
+vi.mock('../sidebar/use-floating-item.composable', () => {
+  return {
+    useFloatingItem: () => ({
+      floatingItemIsDisplayed,
+      showFloatingItem,
+      hideFloatingItem,
+      onTriggerKeydown,
+      onListboxKeydown,
+    }),
+  };
+});
+
+import MSidebarShortcuts from './MSidebarShortcuts.vue';
+import { EXPANDED_SIDEBAR_KEY } from '../sidebar/MSidebar.const';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('MSidebarShortcuts', () => {
+  it('renders expanded view when expanded is true', () => {
+    const wrapper = mount(MSidebarShortcuts, {
+      props: { menuLabel: 'Shortcuts' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY as symbol]: true },
+        components: { ViewGridX424: { template: '<svg />' } },
+      },
+    });
+
+    expect(wrapper.find('section').exists()).toBe(true);
+    expect(wrapper.find('.mc-sidebar__trigger').exists()).toBe(false);
+  });
+
+  it('renders trigger when collapsed and responds to interactions', async () => {
+    const wrapper = mount(MSidebarShortcuts, {
+      props: { menuLabel: 'Shortcuts' },
+      attachTo: document.body,
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY as symbol]: false },
+        components: { ViewGridX424: { template: '<svg />' } },
+        stubs: {
+          Teleport: true,
+        },
+      },
+    });
+
+    const trigger = wrapper.find('.mc-sidebar__trigger');
+    expect(trigger.exists()).toBe(true);
+
+    await trigger.trigger('mouseenter');
+    expect(showFloatingItem).toHaveBeenCalled();
+    await nextTick();
+    expect(trigger.attributes('aria-expanded')).toBe('true');
+
+    await trigger.trigger('mouseleave');
+    expect(hideFloatingItem).toHaveBeenCalled();
+    await nextTick();
+    expect(trigger.attributes('aria-expanded')).toBe('false');
+
+    await trigger.trigger('focus');
+    expect(showFloatingItem).toHaveBeenCalled();
+
+    await trigger.trigger('blur');
+    expect(hideFloatingItem).toHaveBeenCalled();
+
+    await trigger.trigger('keydown', { key: 'ArrowDown' });
+    expect(onTriggerKeydown).toHaveBeenCalled();
+
+    const floating = wrapper.find('.mc-sidebar__floating-item');
+    expect(floating.exists()).toBe(true);
+    await floating.trigger('keydown', { key: 'Escape' });
+    expect(onListboxKeydown).toHaveBeenCalled();
+
+    await floating.trigger('mouseleave');
+    expect(hideFloatingItem).toHaveBeenCalled();
+  });
+});

package/src/components/sidebarshortcuts/MSidebarShortcuts.vue

@@ -0,0 +1,101 @@
+<template>
+  <section v-if="expanded">
+    <nav role="navigation" aria-label="shortcut items">
+      <ul
+        :class="{
+          'mc-sidebar__shortcut-list': true,
+          'mc-sidebar__shortcut-list--stacked': props.stacked,
+          'mc-sidebar__shortcut-list--grid': !props.stacked,
+        }"
+        role="menu"
+      >
+        <slot name="default" />
+      </ul>
+    </nav>
+  </section>
+
+  <div v-else class="mc-sidebar__shortcut-wrapper">
+    <button
+      ref="trigger"
+      :id="`trigger-${id}`"
+      class="mc-sidebar__shortcut-item mc-sidebar__trigger"
+      aria-label="Sidebar shortcuts"
+      aria-haspopup="menu"
+      :aria-expanded="floatingItemIsDisplayed"
+      :aria-controls="`listbox-${id}`"
+      @mouseenter="showFloatingItem"
+      @focus="showFloatingItem"
+      @keydown="onTriggerKeydown"
+      @mouseleave="hideFloatingItem"
+      @blur="hideFloatingItem"
+    >
+      <ViewGridX424 />
+    </button>
+
+    <div
+      ref="listbox"
+      :id="`listbox-${id}`"
+      tabindex="0"
+      role="menu"
+      class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden"
+      @keydown="onListboxKeydown"
+      @mouseleave="hideFloatingItem"
+      @blur="hideFloatingItem"
+    >
+      <div class="mc-sidebar__listbox">
+        <ul
+          class="mc-sidebar__shortcut-list mc-sidebar__shortcut-list--floating mc-sidebar__shortcut-list mc-sidebar__shortcut-list--stacked"
+        >
+          <slot name="default" />
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ViewGridX424 } from '@mozaic-ds/icons-vue';
+import { inject, provide, useId, useTemplateRef, type VNode } from 'vue';
+import { useFloatingItem } from '../sidebar/use-floating-item.composable';
+import {
+  EXPANDED_SIDEBAR_KEY,
+  STACKED_SHORTCUTS_KEY,
+} from '../sidebar/MSidebar.const';
+/**
+ * SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.
+ */
+const props = defineProps<{
+  /**
+   * Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout.
+   */
+  stacked?: boolean;
+}>();
+
+defineSlots<{
+  /**
+   * Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components.
+   */
+  default: VNode[];
+}>();
+
+const expanded = inject(EXPANDED_SIDEBAR_KEY);
+
+const id = useId();
+
+const trigger = useTemplateRef('trigger');
+const listbox = useTemplateRef('listbox');
+
+const {
+  floatingItemIsDisplayed,
+  hideFloatingItem,
+  showFloatingItem,
+  onTriggerKeydown,
+  onListboxKeydown,
+} = useFloatingItem(trigger, listbox);
+
+provide(STACKED_SHORTCUTS_KEY, props.stacked);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/sidebar';
+</style>

package/src/components/sidebarshortcuts/README.md

@@ -0,0 +1,36 @@
+# MSidebarShortcuts
+
+SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `stacked` | Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components. |
+
+## Dependencies
+
+### Used By
+
+- [DefaultCase.stories](../sidebar/stories)
+- [WithExpandOnly.stories](../sidebar/stories)
+- [WithProfileInfoOnly.stories](../sidebar/stories)
+- [WithSingleLevel.stories](../sidebar/stories)
+
+### Graph
+
+```mermaid
+graph TD;
+  DefaultCase.stories --> MSidebarShortcuts
+  WithExpandOnly.stories --> MSidebarShortcuts
+  WithProfileInfoOnly.stories --> MSidebarShortcuts
+  WithSingleLevel.stories --> MSidebarShortcuts
+style MSidebarShortcuts fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/statusbadge/README.md

@@ -23,3 +23,15 @@ graph TD;
   MStatusBadge --> MStatusDot
 style MStatusBadge fill:#008240,stroke:#333,stroke-width:4px
 ```
+
+### Used By
+
+- [MPageHeader](../pageheader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPageHeader --> MStatusBadge
+style MStatusBadge fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/textinput/MTextInput.stories.ts

@@ -33,7 +33,7 @@ const meta: Meta<typeof MTextInput> = {
       return { args, modelValue, handleUpdate };
     },
     template: `
-      <MTextInput 
+      <MTextInput
         v-bind="{ ...args, modelValue }"
         @update:modelValue="handleUpdate"
       />
@@ -111,3 +111,15 @@ export const Invalid: Story = {
     isInvalid: true,
   },
 };
+
+export const WithPrefix = {
+  args: {
+    prefix: 'Prefix',
+  },
+};
+
+export const WithSuffix = {
+  args: {
+    suffix: 'Suffix',
+  },
+};

package/src/components/textinput/MTextInput.vue

@@ -4,6 +4,8 @@
       <slot name="icon" />
     </span>
 
+    <span v-if="prefix" class="mc-text-input__addon">{{ prefix }}</span>
+
     <input
       :id="id"
       class="mc-text-input__control"
@@ -20,6 +22,8 @@
       "
     />
 
+    <span v-if="suffix" class="mc-text-input__addon">{{ suffix }}</span>
+
     <div v-if="isClearable && modelValue" class="mc-controls-options">
       <button
         type="button"
@@ -96,6 +100,14 @@ const props = withDefaults(
      * The label text for the clear button.
      */
     clearLabel?: string;
+    /**
+     * Displays additional text inside the component, before the input.
+     */
+    prefix?: string;
+    /**
+     * Displays additional text inside the component, after the input.
+     */
+    suffix?: string;
   }>(),
   {
     inputType: 'text',

package/src/components/textinput/README.md

@@ -11,13 +11,15 @@ A text input is a single-line input that allows users to enter and edit short te
 | `name` | The name attribute for the input element, typically used for form submission. | `string` | - |
 | `modelValue` | The current value of the input field. | `string` `number` | - |
 | `placeholder` | A placeholder text to show in the input when it is empty. | `string` | - |
-| `inputType` | Defines the type of input. | `"number"` `"text"` `"date"` `"email"` `"password"` `"search"` `"tel"` | `"text"` |
+| `inputType` | Defines the type of input. | `"number"` `"text"` `"search"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
 | `isInvalid` | If `true`, applies an invalid state to the input. | `boolean` | - |
 | `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
 | `size` | Determines the size of the input. | `"s"` `"m"` | `"m"` |
 | `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
 | `isClearable` | If `true`, a clear button will appear when the input has a value. | `boolean` | - |
 | `clearLabel` | The label text for the clear button. | `string` | `"clear content"` |
+| `prefix` | Displays additional text inside the component, before the input. | `string` | - |
+| `suffix` | Displays additional text inside the component, after the input. | `string` | - |
 
 ## Slots
 

package/src/components/tile/MTile.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MTile from './MTile.vue';
+
+describe('MTile', () => {
+  it('does not apply appearance modifier when appearance is primary', () => {
+    const wrapper = mount(MTile, {
+      props: {
+        appearance: 'primary',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--primary');
+  });
+
+  it('applies appearance modifier when appearance is not primary', () => {
+    const wrapper = mount(MTile, {
+      props: {
+        appearance: 'secondary',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--secondary');
+  });
+
+  it('applies bordered class when bordered is true', () => {
+    const wrapper = mount(MTile, {
+      props: {
+        bordered: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--bordered');
+  });
+
+  it('does not apply bordered class when bordered is false', () => {
+    const wrapper = mount(MTile, {
+      props: {
+        bordered: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--bordered');
+  });
+
+  it('does not render details container when slot is missing', () => {
+    const wrapper = mount(MTile);
+
+    expect(wrapper.find('.mc-tile__content').exists()).toBe(false);
+  });
+
+  it('renders details container when slot is provided', () => {
+    const wrapper = mount(MTile, {
+      slots: {
+        details: '<span>Details</span>',
+      },
+    });
+
+    expect(wrapper.find('.mc-tile__content').exists()).toBe(true);
+  });
+});

package/src/components/tile/MTile.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MTile from './MTile.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import {
+  OptionsVertical24,
+  Copy20,
+  ArrowTopRight20,
+  Download20,
+  Trash20,
+} from '@mozaic-ds/icons-vue';
+import MActionListbox from '../actionlistbox/MActionListbox.vue';
+
+const meta: Meta<typeof MTile> = {
+  title: 'Content/Tile/Base',
+  component: MTile,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.',
+      },
+    },
+  },
+  args: {
+    appearance: 'primary',
+    bordered: true,
+    default: `
+      <div class="placeholder-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+  render: (args) => ({
+    components: {
+      MTile,
+      MIconButton,
+      OptionsVertical24,
+      MActionListbox,
+      Copy20,
+      ArrowTopRight20,
+      Download20,
+      Trash20,
+    },
+    setup() {
+      const items = [
+        {
+          label: 'Duplicate',
+          icon: Copy20,
+          disabled: true,
+        },
+        {
+          label: 'Move to...',
+          icon: ArrowTopRight20,
+        },
+        {
+          label: 'Download',
+          icon: Download20,
+        },
+        {
+          label: 'Delete',
+          icon: Trash20,
+          appearance: 'danger',
+          divider: true,
+        },
+      ];
+      return { args, items };
+    },
+    template: `
+      <MTile v-bind="args">
+        ${args.default}
+        <template v-if="args.action" #action>
+          ${args.action}
+        </template>
+      </MTile>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTile>;
+
+export const Default: Story = {};
+
+export const WithAction: Story = {
+  args: {
+    action: `
+      <MActionListbox position="left" :items="items">
+        <template #activator="{id}">
+          <MIconButton
+            :popovertarget="id"
+            ghost
+            class="mc-tile__action-button"
+            aria-label="Action button"
+          >
+            <template #icon>
+              <OptionsVertical24 />
+            </template>
+          </MIconButton>
+        </template>
+      </MActionListbox>
+    `,
+  },
+};