@mozaic-ds/vue 2.12.0 → 2.13.0

package/src/components/accordionlist/MAccordionList.stories.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MAccordionList from './MAccordionList.vue';
+import MAccordionListItem from '../accordionlistitem/MAccordionListItem.vue';
+import { Wrench32, Project32, Sharpening32 } from '@mozaic-ds/icons-vue';
+
+const meta: Meta<typeof MAccordionList> = {
+  title: 'Content/Accordion list',
+  component: MAccordionList,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.',
+      },
+    },
+  },
+  args: {
+    modelValue: ['1'],
+    default: `
+      <MAccordionListItem id="1" title="How does the delivery work?">
+        <p>
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email with a tracking number as soon as your order is shipped.
+        </p>
+      </MAccordionListItem>
+
+      <MAccordionListItem id="2" title="What payment methods are accepted?">
+        <p>
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </MAccordionListItem>
+
+      <MAccordionListItem id="3" title="Can I return an item?">
+        <p>
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs are at your expense unless the product is defective.
+        </p>
+      </MAccordionListItem>
+    `,
+  },
+  render: (args) => ({
+    components: {
+      MAccordionList,
+      MAccordionListItem,
+      Wrench32,
+      Project32,
+      Sharpening32,
+    },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, Wrench32, Project32, Sharpening32, handleUpdate };
+    },
+    template: `
+      <MAccordionList v-bind="args" @update:modelValue="handleUpdate">
+        ${args.default}
+      </MAccordionList>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MAccordionList>;
+
+export const Default: Story = {};
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'ghost',
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    default: `
+      <MAccordionListItem id="1" title="How does the delivery work?" :icon="Wrench32">
+        <p>
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email with a tracking number as soon as your order is shipped.
+        </p>
+      </MAccordionListItem>
+
+      <MAccordionListItem id="2" title="What payment methods are accepted?" :icon="Project32">
+        <p>
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </MAccordionListItem>
+
+      <MAccordionListItem id="3" title="Can I return an item?" :icon="Sharpening32">
+        <p>
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs are at your expense unless the product is defective.
+        </p>
+      </MAccordionListItem>
+    `,
+  },
+};
+
+export const WithSubtitle: Story = {
+  args: {
+    default: `
+      <MAccordionListItem id="1" title="How does the delivery work?" subtitle="Shipping & tracking information">
+        <p>
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email with a tracking number as soon as your order is shipped.
+        </p>
+      </MAccordionListItem>
+
+      <MAccordionListItem id="2" title="What payment methods are accepted?" subtitle="Payments & billing options">
+        <p>
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </MAccordionListItem>
+
+      <MAccordionListItem id="3" title="Can I return an item?" subtitle="Returns & refund policy">
+        <p>
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs are at your expense unless the product is defective.
+        </p>
+      </MAccordionListItem>
+    `,
+  },
+};
+
+export const WithSingleBehavior: Story = {
+  args: {
+    behavior: 'single',
+  },
+};

package/src/components/accordionlist/MAccordionList.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="mc-accordion" :class="classObject">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, type VNode } from 'vue';
+import {
+  AccordionStateKey,
+  AccordionToggleFnKey,
+} from './m-accordion-list.const';
+
+/**
+ * An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the visual appearance of the button.
+     */
+    appearance?: 'standard' | 'ghost';
+    /**
+     * Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior..
+     */
+    behavior?: 'multiple' | 'single';
+    /**
+     * IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded.
+     */
+    modelValue?: string[];
+  }>(),
+  {
+    appearance: 'standard',
+    behavior: 'multiple',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-accordion--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the accordion items state changes.
+   */
+  (on: 'update:modelValue', value: string[]): void;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to display accordion items.
+   */
+  default: VNode;
+}>();
+
+const openIds = computed({
+  get() {
+    return props.modelValue || [];
+  },
+  set(value: string[]) {
+    emit('update:modelValue', value);
+  },
+});
+
+function toggleItem(id: string) {
+  if (props.behavior === 'single') {
+    openIds.value = openIds.value?.[0] === id ? [] : [id];
+  } else {
+    const set = new Set([...openIds.value]);
+
+    if (openIds.value?.includes(id)) {
+      set.delete(id);
+    } else {
+      set.add(id);
+    }
+
+    openIds.value = [...set];
+  }
+}
+
+provide(AccordionStateKey, openIds);
+provide(AccordionToggleFnKey, toggleItem);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/accordion-list';
+</style>

package/src/components/accordionlist/README.md

@@ -0,0 +1,24 @@
+# MAccordionList
+
+An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Defines the visual appearance of the button. | `"standard"` `"ghost"` | `"standard"` |
+| `behavior` | Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior.. | `"multiple"` `"single"` | `"multiple"` |
+| `modelValue` | IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded. | `string[]` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to display accordion items. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emitted when the accordion items state changes. | [value: string[]] |

package/src/components/accordionlist/m-accordion-list.const.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, WritableComputedRef } from 'vue';
+
+export const AccordionStateKey = Symbol() as InjectionKey<
+  WritableComputedRef<string[], string[]>
+>;
+
+export const AccordionToggleFnKey = Symbol() as InjectionKey<
+  (id: string) => void
+>;

package/src/components/accordionlistitem/MAccordionListItem.spec.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, ref, type Component } from 'vue';
+import MAccordionListItem from './MAccordionListItem.vue';
+import {
+  AccordionStateKey,
+  AccordionToggleFnKey,
+} from '../accordionlist/m-accordion-list.const';
+
+type Props = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  content?: string;
+  icon?: Component;
+};
+
+describe('MAccordionListItem', () => {
+  function mountItem(props: Props, openIds: string[] = []) {
+    const state = ref(openIds);
+    const toggle = vi.fn();
+
+    const wrapper = mount(MAccordionListItem, {
+      props,
+      global: {
+        provide: {
+          [AccordionStateKey as symbol]: state,
+          [AccordionToggleFnKey as symbol]: toggle,
+        },
+      },
+    });
+
+    return { wrapper, state, toggle };
+  }
+
+  it('renders title and content', () => {
+    const { wrapper } = mountItem({
+      id: '1',
+      title: 'My Title',
+      content: 'My Content',
+    });
+
+    expect(wrapper.find('.mc-accordion__title span').text()).toBe('My Title');
+    expect(wrapper.find('.mc-accordion__content p').text()).toBe('My Content');
+  });
+
+  it('renders subtitle if provided', () => {
+    const { wrapper } = mountItem({
+      id: '1',
+      title: 'Title',
+      subtitle: 'Subtitle',
+    });
+
+    expect(wrapper.find('.mc-accordion__subtitle').text()).toBe('Subtitle');
+  });
+
+  it('renders slot content instead of default content', () => {
+    const wrapper = mount(MAccordionListItem, {
+      props: { id: '1', title: 'Title', content: 'Default' },
+      slots: { default: '<div class="slot-content">Custom Slot</div>' },
+      global: {
+        provide: {
+          [AccordionStateKey as symbol]: ref([]),
+          [AccordionToggleFnKey as symbol]: vi.fn(),
+        },
+      },
+    });
+
+    expect(wrapper.find('.slot-content').exists()).toBe(true);
+    expect(wrapper.find('p').exists()).toBe(false);
+  });
+
+  it('sets aria-expanded correctly based on openIds', async () => {
+    const { wrapper, state } = mountItem({ id: 'item-1', title: 'Title' }, []);
+
+    const button = wrapper.find('button');
+    expect(button.attributes('aria-expanded')).toBe('false');
+
+    state.value.push('item-1');
+    await wrapper.vm.$nextTick();
+
+    expect(button.attributes('aria-expanded')).toBe('true');
+  });
+
+  it('sets aria-hidden correctly for content', async () => {
+    const { wrapper, state } = mountItem({ id: 'item-1', title: 'Title' }, []);
+
+    const content = wrapper.find('.mc-accordion__content');
+    expect(content.attributes('aria-hidden')).toBe('true');
+
+    state.value.push('item-1');
+    await wrapper.vm.$nextTick();
+    expect(content.attributes('aria-hidden')).toBe('false');
+  });
+
+  it('calls toggleItem when button is clicked', async () => {
+    const { wrapper, toggle } = mountItem({ id: 'item-1', title: 'Title' });
+
+    await wrapper.find('button').trigger('click');
+    expect(toggle).toHaveBeenCalledOnce();
+    expect(toggle).toHaveBeenCalledWith('item-1');
+  });
+
+  it('renders icon if provided', () => {
+    const DummyIcon = defineComponent({
+      template: '<svg class="dummy-icon" />',
+    });
+    const { wrapper } = mountItem({ id: '1', title: 'Title', icon: DummyIcon });
+
+    expect(wrapper.find('.mc-accordion__icon').exists()).toBe(true);
+    expect(wrapper.find('svg.dummy-icon').exists()).toBe(true);
+  });
+
+  it('sets correct aria-controls and aria-labelledby attributes', () => {
+    const { wrapper } = mountItem({ id: '42', title: 'Title' });
+    const button = wrapper.find('button');
+    const content = wrapper.find('.mc-accordion__content');
+
+    expect(button.attributes('aria-controls')).toBe('content-42');
+    expect(content.attributes('aria-labelledby')).toBe('accordion-42');
+    expect(content.attributes('role')).toBe('region');
+  });
+});

package/src/components/accordionlistitem/MAccordionListItem.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="mc-accordion__item">
+    <div class="mc-accordion__header">
+      <h2 class="mc-accordion__title">
+        <button
+          :id="`accordion-${id}`"
+          class="mc-accordion__trigger"
+          :aria-controls="`content-${id}`"
+          :aria-expanded="open"
+          @click="toggleItem(id)"
+        >
+          <component v-if="icon" :is="icon" class="mc-accordion__icon" />
+
+          <div class="mc-accordion__title-wrapper">
+            <span>{{ title }}</span>
+
+            <span v-if="subtitle" class="mc-accordion__subtitle">
+              {{ subtitle }}
+            </span>
+          </div>
+        </button>
+      </h2>
+    </div>
+    <div
+      :id="`content-${id}`"
+      class="mc-accordion__content"
+      :aria-hidden="!open"
+      :aria-labelledby="`accordion-${id}`"
+      role="region"
+    >
+      <slot>
+        <p v-if="content">{{ content }}</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  type Component,
+  type ComputedRef,
+  type Ref,
+  type VNode,
+} from 'vue';
+import {
+  AccordionStateKey,
+  AccordionToggleFnKey,
+} from '../accordionlist/m-accordion-list.const';
+
+const props = defineProps<{
+  /**
+   * A unique identifier for the accordion item.
+   * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
+   * ensuring accessibility and tracking the open/closed state.
+   * If no ID is provided, a unique one is generated automatically.
+   */
+  id: string;
+  /**
+   * The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content.
+   */
+  title: string;
+  /**
+   * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
+   */
+  subtitle?: string;
+  /**
+   * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
+   */
+  content?: string;
+  /**
+   * Icon component to display before the item title.
+   */
+  icon?: Component;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to display custom content.
+   */
+  default: VNode;
+}>();
+
+const openIds = inject<Ref<string[]> | ComputedRef<string[]>>(
+  AccordionStateKey,
+)!;
+const toggleItem = inject<(id: string) => void>(AccordionToggleFnKey)!;
+
+const open = computed(() => openIds.value.includes(props.id));
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/accordion-list';
+</style>

package/src/components/accordionlistitem/README.md

@@ -0,0 +1,23 @@
+# MAccordionListItem
+
+A unique identifier for the accordion item. It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`), ensuring accessibility and tracking the open/closed state. If no ID is provided, a unique one is generated automatically.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the accordion item.
+It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
+ensuring accessibility and tracking the open/closed state.
+If no ID is provided, a unique one is generated automatically. | `string` | - |
+| `title*` | The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content. | `string` | - |
+| `subtitle` | An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item. | `string` | - |
+| `content` | The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements. | `string` | - |
+| `icon` | Icon component to display before the item title. | `Component` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to display custom content. |

package/src/components/actionbottombar/MActionBottomBar.spec.ts

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MActionBottomBar from './MActionBottomBar.vue';
+import MDivider from '../divider/MDivider.vue';
+
+describe('ActionBottomBar component', () => {
+  it('renders the component root element', () => {
+    const wrapper = mount(MActionBottomBar);
+    expect(wrapper.classes()).toContain('mc-action-bottom-bar');
+  });
+
+  it('applies the shadow class when shadow prop is true', () => {
+    const wrapper = mount(MActionBottomBar, {
+      props: {
+        shadow: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-action-bottom-bar--shadow');
+  });
+
+  it('does not apply the shadow class when shadow prop is false', () => {
+    const wrapper = mount(MActionBottomBar, {
+      props: {
+        shadow: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-action-bottom-bar--shadow');
+  });
+
+  it('renders the left container element', () => {
+    const wrapper = mount(MActionBottomBar);
+    const left = wrapper.find('.mc-action-bottom-bar__left');
+
+    expect(left.exists()).toBe(true);
+  });
+
+  it('renders the right container element', () => {
+    const wrapper = mount(MActionBottomBar);
+    const right = wrapper.find('.mc-action-bottom-bar__right');
+
+    expect(right.exists()).toBe(true);
+  });
+
+  it('renders the divider component', () => {
+    const wrapper = mount(MActionBottomBar);
+    const divider = wrapper.findComponent(MDivider);
+
+    expect(divider.exists()).toBe(true);
+  });
+});