@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/tileexpandable/MTileExpandable.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    :class="{
+      'mc-tile mc-tile--expandable': true,
+      [`mc-tile--${appearance}`]: props.appearance !== 'primary',
+      'mc-tile--bordered': props.bordered,
+      [`mc-tile--trigger-${props.trigger}`]: props.trigger !== 'container',
+    }"
+  >
+    <component
+      :is="isContainerTriggered ? 'button' : 'div'"
+      class="mc-tile__header"
+      v-bind="
+        isContainerTriggered
+          ? {
+              type: 'button',
+              ['aria-controls']: `content-${id}`,
+              ['aria-expanded']: open,
+              onclick: toggle,
+            }
+          : {}
+      "
+    >
+      <div class="mc-tile__body">
+        <slot />
+      </div>
+
+      <div class="mc-tile__action">
+        <MIconButton
+          v-if="props.trigger === 'icon'"
+          class="mc-tile__action-button"
+          ghost
+          :aria-controls="`content-${id}`"
+          :aria-expanded="open"
+          aria-label="Expansion trigger button"
+          @click="toggle"
+        >
+          <template #icon>
+            <ChevronDown24 />
+          </template>
+        </MIconButton>
+
+        <MButton
+          v-else-if="props.trigger === 'button'"
+          class="mc-tile__action-button"
+          ghost
+          icon-position="right"
+          :aria-controls="`content-${id}`"
+          :aria-expanded="open"
+          aria-label="Expansion trigger button"
+          @click="toggle"
+        >
+          <span class="mc-tile__action-label">
+            {{ props.label }}
+          </span>
+
+          <template #icon>
+            <ChevronDown24 />
+          </template>
+        </MButton>
+      </div>
+    </component>
+
+    <div class="mc-tile__content" :id="`content-${id}`" :aria-hidden="!open">
+      <slot name="details" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId, type VNode } from 'vue';
+import MButton from '../button/MButton.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import { ChevronDown24 } from '@mozaic-ds/icons-vue';
+
+/**
+ * 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.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the visual style of the tile.
+     */
+    appearance?: 'primary' | 'secondary';
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+    /**
+     * Determines how the tile expansion is triggered.
+     */
+    trigger?: 'container' | 'icon' | 'button';
+    /**
+     * Label for the action button (only used when trigger is 'button').
+     */
+    label?: string;
+  }>(),
+  {
+    appearance: 'primary',
+    label: 'See more',
+    trigger: 'icon',
+    bordered: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * Default slot for the main content of the tile.
+   */
+  default?: VNode[];
+  /**
+   * Named slot for expandable content shown when the tile is opened.
+   */
+  details?: VNode[];
+}>();
+
+const id = useId();
+
+const open = ref(false);
+
+const isContainerTriggered = computed(() => props.trigger === 'container');
+
+function toggle() {
+  open.value = !open.value;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tile';
+</style>

package/src/components/tileexpandable/README.md

@@ -0,0 +1,36 @@
+# MTileExpandable
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Defines the visual style of the tile. | `"primary"` `"secondary"` | `"primary"` |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+| `trigger` | Determines how the tile expansion is triggered. | `"icon"` `"button"` `"container"` | `"icon"` |
+| `label` | Label for the action button (only used when trigger is 'button'). | `string` | `"See more"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Default slot for the main content of the tile. |
+| `details` | Named slot for expandable content shown when the tile is opened. |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MIconButton](../iconbutton)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTileExpandable --> MButton
+  MTileExpandable --> MIconButton
+style MTileExpandable fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/tileselectable/MTileSelectable.spec.ts

@@ -0,0 +1,177 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MTileSelectable from './MTileSelectable.vue';
+
+vi.mock('../checkbox/MCheckbox.vue', () => ({
+  default: {
+    name: 'MCheckbox',
+    props: ['modelValue', 'id', 'name'],
+    emits: ['update:modelValue'],
+    template: `
+      <input
+        type="checkbox"
+        :id="id"
+        :checked="modelValue"
+        @change="$emit('update:modelValue', !$props.modelValue)"
+      />
+    `,
+  },
+}));
+
+vi.mock('../radio/MRadio.vue', () => ({
+  default: {
+    name: 'MRadio',
+    props: ['modelValue', 'id', 'name'],
+    emits: ['update:modelValue'],
+    template: `
+      <input
+        type="radio"
+        :id="id"
+        :checked="modelValue"
+        @change="$emit('update:modelValue', true)"
+      />
+    `,
+  },
+}));
+
+describe('MTileSelectable', () => {
+  it('applies bordered class when bordered is true', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        bordered: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--bordered');
+  });
+
+  it('does not apply bordered class when bordered is false', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        bordered: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--bordered');
+  });
+
+  it('applies selected class when modelValue is true', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--selected');
+  });
+
+  it('does not apply selected class when modelValue is false', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--selected');
+  });
+
+  it('applies input left class when inputPosition is left', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        inputPosition: 'left',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--input-left');
+  });
+
+  it('applies input center class when centered is true', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        centered: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--input-center');
+  });
+
+  it('renders checkbox by default', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+      },
+    });
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
+    expect(wrapper.find('input[type="radio"]').exists()).toBe(false);
+  });
+
+  it('renders radio when inputType is radio', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        inputType: 'radio',
+      },
+    });
+
+    expect(wrapper.find('input[type="radio"]').exists()).toBe(true);
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false);
+  });
+
+  it('emits update:modelValue when checkbox value changes', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+      },
+    });
+
+    await wrapper.find('input[type="checkbox"]').trigger('change');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([true]);
+  });
+
+  it('emits update:modelValue when radio button value changes', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        inputType: 'radio',
+        modelValue: false,
+      },
+    });
+
+    await wrapper.find('input[type="radio"]').trigger('change');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([true]);
+  });
+
+  it('renders header and content when details slot is provided', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+      },
+      slots: {
+        default: 'Main content',
+        details: 'Details content',
+      },
+    });
+
+    expect(wrapper.find('.mc-tile__header').exists()).toBe(true);
+    expect(wrapper.find('.mc-tile__content').exists()).toBe(true);
+    expect(wrapper.text()).toContain('Details content');
+  });
+
+  it('does not render content container when details slot is missing', () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+      },
+    });
+
+    expect(wrapper.find('.mc-tile__content').exists()).toBe(false);
+  });
+});

package/src/components/tileselectable/MTileSelectable.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MTileSelectable from './MTileSelectable.vue';
+
+const meta: Meta<typeof MTileSelectable> = {
+  title: 'Content/Tile/Selectable',
+  component: MTileSelectable,
+  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: {
+    modelValue: false,
+    inputType: 'checkbox',
+    inputPosition: 'right',
+    bordered: true,
+    default: `
+      <div class="placeholder-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+  render: (args) => ({
+    components: { MTileSelectable },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+      return { args, handleUpdate };
+    },
+    template: `
+      <MTileSelectable v-bind="args" v-model="args.modelValue" @update:modelValue="handleUpdate">
+        ${args.default}
+      </MTileSelectable>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTileSelectable>;
+
+export const Default: Story = {};
+
+export const RadioButton: Story = {
+  args: {
+    inputType: 'radio',
+  },
+};
+
+export const LeftPositionInput: Story = {
+  args: {
+    inputPosition: 'left',
+  },
+};

package/src/components/tileselectable/MTileSelectable.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    :class="{
+      'mc-tile mc-tile--selectable': true,
+      'mc-tile--selected': checked,
+      'mc-tile--bordered': props.bordered,
+      'mc-tile--input-left': props.inputPosition === 'left',
+      'mc-tile--input-center': props.centered,
+      'mc-tile--no-input': props.hideInput,
+    }"
+    v-bind="props.hideInput && { onClick: () => (checked = !checked) }"
+  >
+    <div v-if="$slots.details" class="mc-tile__header">
+      <div class="mc-tile__body">
+        <slot />
+      </div>
+
+      <div class="mc-tile__action">
+        <MCheckbox
+          v-if="inputType === 'checkbox'"
+          v-model="checked"
+          :id="`checkbox-${id}`"
+          name="tile-select-group"
+          aria-label="Tile checkbox"
+        />
+
+        <MRadio
+          v-else
+          v-model="checked"
+          :id="`radio-${id}`"
+          name="tile-select-group"
+          aria-label="Tile radio button"
+        />
+      </div>
+    </div>
+
+    <template v-else>
+      <div class="mc-tile__body">
+        <slot />
+      </div>
+
+      <div class="mc-tile__action">
+        <MCheckbox
+          v-if="inputType === 'checkbox'"
+          v-model="checked"
+          :id="`checkbox-${id}`"
+          name="tile-select-group"
+          aria-label="Tile checkbox"
+        />
+
+        <MRadio
+          v-else
+          v-model="checked"
+          :id="`radio-${id}`"
+          name="tile-select-group"
+          aria-label="Tile radio button"
+        />
+      </div>
+    </template>
+
+    <div v-if="$slots.details" class="mc-tile__content">
+      <slot name="details" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId, type VNode } from 'vue';
+import MCheckbox from '../checkbox/MCheckbox.vue';
+import MRadio from '../radio/MRadio.vue';
+
+/**
+ * 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.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current value of the tile (selected or not).
+     */
+    modelValue: boolean;
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+    /**
+     * Type of input used for selection.
+     */
+    inputType?: 'checkbox' | 'radio';
+    /**
+     * Position of the input relative to the tile content.
+     */
+    inputPosition?: 'left' | 'right';
+    /**
+     * Vertical alignment of the input.
+     */
+    centered?: boolean;
+    /**
+     * If `true`, hides the input and makes the whole tile selectable.
+     */
+    hideInput?: boolean;
+  }>(),
+  {
+    inputType: 'checkbox',
+    inputPosition: 'right',
+    bordered: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * Default slot for the main content of the tile.
+   */
+  default?: VNode[];
+  /**
+   * Named slot for additional content shown below the main content.
+   */
+  details?: VNode[];
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emits when the value changes.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
+
+const id = useId();
+
+const checked = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tile';
+</style>

package/src/components/tileselectable/README.md

@@ -0,0 +1,44 @@
+# MTileSelectable
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue*` | The current value of the tile (selected or not). | `boolean` | - |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+| `inputType` | Type of input used for selection. | `"checkbox"` `"radio"` | `"checkbox"` |
+| `inputPosition` | Position of the input relative to the tile content. | `"left"` `"right"` | `"right"` |
+| `centered` | Vertical alignment of the input. | `boolean` | - |
+| `hideInput` | If `true`, hides the input and makes the whole tile selectable. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Default slot for the main content of the tile. |
+| `details` | Named slot for additional content shown below the main content. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the value changes. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MCheckbox](../checkbox)
+- [MRadio](../radio)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTileSelectable --> MCheckbox
+  MTileSelectable --> MRadio
+style MTileSelectable fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/toaster/README.md

@@ -8,7 +8,7 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `open` | If `true`, display the Toaster. | `boolean` | - |
-| `position` | Position of the toaster. | `"top"` `"bottom"` `"top-center"` `"bottom-center"` | - |
+| `position` | Position of the toaster. | `"bottom"` `"top"` `"top-center"` `"bottom-center"` | - |
 | `description*` | Description of the toaster. | `string` | - |
 | `status` | Allows to define the toaster style. | `"info"` `"warning"` `"error"` `"success"` | `"info"` |
 | `closable` | If `true`, display the close button. | `boolean` | `true` |

package/src/components/tooltip/MTooltip.vue

@@ -30,6 +30,10 @@ const props = withDefaults(
      * If `true`, the tooltip display a pointer.
      */
     pointer?: boolean;
+    /**
+     * Standalone tooltip
+     */
+    standalone?: boolean;
   }>(),
   {
     position: 'top',
@@ -48,6 +52,7 @@ const classObject = computed(() => {
   return {
     [`mc-tooltip--${props.position}`]: props.position,
     'mc-tooltip--no-pointer': !props.pointer,
+    'mc-tooltip--standalone': props.standalone,
   };
 });
 </script>

package/src/components/tooltip/README.md

@@ -9,11 +9,26 @@ A tooltip is a small, contextual message that appears when users hover over, foc
 | --- | --- | --- | --- | 
 | `id*` | A unique identifier for the tooltip, used to describe the tooltip. | `string` | - |
 | `text*` | Content of the tooltip. | `string` | - |
-| `position` | Determines the position of the tooltip. | `"left"` `"right"` `"top"` `"bottom"` | `"top"` |
+| `position` | Determines the position of the tooltip. | `"bottom"` `"top"` `"left"` `"right"` | `"top"` |
 | `pointer` | If `true`, the tooltip display a pointer. | `boolean` | `true` |
+| `standalone` | Standalone tooltip | `boolean` | - |
 
 ## Slots
 
 | Name | Description |
 | --- | --- |
 | `default` | The tooltip will point to the content of the slot. |
+
+## Dependencies
+
+### Used By
+
+- [MSidebarNavItem](../sidebarnavitem)
+
+### Graph
+
+```mermaid
+graph TD;
+  MSidebarNavItem --> MTooltip
+style MTooltip fill:#008240,stroke:#333,stroke-width:4px
+```