@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/tile/MTile.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    :class="{
+      'mc-tile': true,
+      [`mc-tile--${appearance}`]: props.appearance !== 'primary',
+      'mc-tile--bordered': props.bordered,
+    }"
+  >
+    <div class="mc-tile__header">
+      <div class="mc-tile__body">
+        <slot />
+      </div>
+
+      <div v-if="slots.action" class="mc-tile__action">
+        <slot name="action" />
+      </div>
+    </div>
+
+    <div v-if="$slots.details" class="mc-tile__content">
+      <slot name="details" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VNode } from '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' | 'inverse';
+
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+  }>(),
+  {
+    appearance: 'primary',
+    bordered: true,
+  },
+);
+
+const slots = defineSlots<{
+  /**
+   * Default slot for the main content of the tile.
+   */
+  default?: VNode[];
+  /**
+   * Named slot for additional content shown below the main content.
+   */
+  details?: VNode[];
+  /**
+   * Named slot for action element, such as a button or link.
+   */
+  action?: VNode[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tile';
+</style>

package/src/components/tile/README.md

@@ -0,0 +1,19 @@
+# MTile
+
+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. | `"inverse"` `"primary"` `"secondary"` | `"primary"` |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Default slot for the main content of the tile. |
+| `details` | Named slot for additional content shown below the main content. |
+| `action` | Named slot for action element, such as a button or link. |

package/src/components/tileclickable/MTileClickable.spec.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MTileClickable from './MTileClickable.vue';
+
+describe('MTileClickable', () => {
+  it('renders as a button by default', () => {
+    const wrapper = mount(MTileClickable);
+
+    expect(wrapper.element.tagName).toBe('BUTTON');
+    expect(wrapper.attributes('type')).toBe('button');
+  });
+
+  it('renders as a link when href is provided', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        href: 'https://example.com',
+      },
+    });
+
+    expect(wrapper.element.tagName).toBe('A');
+    expect(wrapper.attributes('href')).toBe('https://example.com');
+  });
+
+  it('emits action event when clicked as a button', async () => {
+    const wrapper = mount(MTileClickable);
+
+    await wrapper.trigger('click');
+
+    expect(wrapper.emitted('action')).toBeTruthy();
+    expect(wrapper.emitted('action')?.length).toBe(1);
+  });
+
+  it('does not emit action event when rendered as a link', async () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        href: 'https://example.com',
+      },
+    });
+
+    await wrapper.trigger('click');
+
+    expect(wrapper.emitted('action')).toBeFalsy();
+  });
+
+  it('applies appearance modifier when appearance is not primary', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        appearance: 'secondary',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--secondary');
+  });
+
+  it('does not apply appearance modifier when appearance is primary', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        appearance: 'primary',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--primary');
+  });
+
+  it('applies bordered class when bordered is true', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        bordered: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--bordered');
+  });
+
+  it('does not apply bordered class when bordered is false', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        bordered: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--bordered');
+  });
+
+  it('applies icon right position class when iconPosition is right', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        iconPosition: 'right',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--action-right');
+  });
+
+  it('does not apply right position class when iconPosition is bottom', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        iconPosition: 'bottom',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-tile--action-right');
+  });
+
+  it('applies external link behavior class when href is set', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        href: 'https://example.com',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--external-link');
+  });
+
+  it('applies navigate behavior class when to is set', () => {
+    const wrapper = mount(MTileClickable, {
+      props: {
+        to: '/dashboard',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--navigate');
+  });
+
+  it('applies open behavior class when neither href nor to is set', () => {
+    const wrapper = mount(MTileClickable);
+
+    expect(wrapper.classes()).toContain('mc-tile--open');
+  });
+});

package/src/components/tileclickable/MTileClickable.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MTileClickable from './MTileClickable.vue';
+
+const meta: Meta<typeof MTileClickable> = {
+  title: 'Content/Tile/Clickable',
+  component: MTileClickable,
+  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',
+    iconPosition: 'right',
+    bordered: true,
+    default: `
+      <div class="placeholder-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+  render: (args) => ({
+    components: { MTileClickable },
+    setup() {
+      const handleAction = action('action');
+      return { args, handleAction };
+    },
+    template: `
+      <MTileClickable v-bind="args" @action="handleAction">
+        ${args.default}
+      </MTileClickable>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTileClickable>;
+
+export const Default: Story = {};
+
+export const WithBottomAction: Story = {
+  args: {
+    iconPosition: 'bottom',
+  },
+};
+
+export const ExternalLink: Story = {
+  args: {
+    href: '#',
+  },
+};
+
+export const InternalNavigation: Story = {
+  args: {
+    to: 'routeName',
+  },
+};

package/src/components/tileclickable/MTileClickable.vue

@@ -0,0 +1,106 @@
+<template>
+  <component
+    :is="rootTag"
+    :class="{
+      'mc-tile mc-tile--clickable': true,
+      [`mc-tile--${props.appearance}`]: props.appearance !== 'primary',
+      [behaviorClass]: true,
+      'mc-tile--bordered': props.bordered,
+      'mc-tile--action-right': props.iconPosition === 'right',
+    }"
+    :href="props.href"
+    :target="props.target"
+    :type="rootTag === 'button' && 'button'"
+    v-bind="rootTag === 'button' ? { onclick: () => emit('action') } : {}"
+  >
+    <div class="mc-tile__body">
+      <slot />
+    </div>
+
+    <div class="mc-tile__action">
+      <div class="mc-tile__action-icon">
+        <slot name="icon" />
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from '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' | 'inverse';
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+    /**
+     * If set, the tile becomes an external link (`<a>`).
+     * Used to navigate to a full URL.
+     */
+    href?: string;
+    /**
+     * If set, the tile becomes an internal link (Vue Router route).
+     * Used for navigation within the app.
+     */
+    to?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Position of the icon relative to the content.
+     */
+    iconPosition?: 'bottom' | 'right';
+  }>(),
+  {
+    appearance: 'primary',
+    iconPosition: 'right',
+    bordered: true,
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the action button is triggered.
+   */
+  (on: 'action'): void;
+}>();
+
+defineSlots<{
+  /**
+   * Default slot for the main content of the tile.
+   */
+  default?: VNode[];
+  /**
+   * Named slot for the action icon.
+   */
+  icon?: VNode[];
+}>();
+
+const rootTag = computed(() => {
+  if (props.href) return 'a';
+  if (props.to) return 'router-link';
+
+  return 'button';
+});
+
+const behaviorClass = computed(() => {
+  if (props.href) return 'mc-tile--external-link';
+  if (props.to) return 'mc-tile--navigate';
+
+  return 'mc-tile--open';
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tile';
+</style>

package/src/components/tileclickable/README.md

@@ -0,0 +1,30 @@
+# MTileClickable
+
+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. | `"inverse"` `"primary"` `"secondary"` | `"primary"` |
+| `bordered` | Adds a border around the tile. | `boolean` | `true` |
+| `href` | If set, the tile becomes an external link (`<a>`).
+Used to navigate to a full URL. | `string` | - |
+| `to` | If set, the tile becomes an internal link (Vue Router route).
+Used for navigation within the app. | `string` | - |
+| `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |
+| `iconPosition` | Position of the icon relative to the content. | `"right"` `"bottom"` | `"right"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Default slot for the main content of the tile. |
+| `icon` | Named slot for the action icon. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `action` | Emits when the action button is triggered. | [] |

package/src/components/tileexpandable/MTileExpandable.spec.ts

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MTileExpandable from './MTileExpandable.vue';
+
+describe('MTileExpandable', () => {
+  it('applies appearance modifier when not primary', () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { appearance: 'secondary' },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--secondary');
+  });
+
+  it('applies bordered class when bordered is true', () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { bordered: true },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--bordered');
+  });
+
+  it('applies trigger mode class when trigger is not container', () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'icon' },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tile--trigger-icon');
+  });
+
+  it('does not apply trigger mode class when trigger is container', () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'container' },
+    });
+
+    expect(
+      wrapper.classes().some((c) => c.startsWith('mc-tile--trigger-')),
+    ).toBe(false);
+  });
+
+  it('renders container as button when trigger is container', async () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'container' },
+    });
+
+    const header = wrapper.find('.mc-tile__header');
+    expect(header.element.tagName).toBe('BUTTON');
+
+    expect(header.attributes('aria-controls')).toBeTruthy();
+    expect(header.attributes('aria-expanded')).toBe('false');
+
+    await header.trigger('click');
+    expect(header.attributes('aria-expanded')).toBe('true');
+  });
+
+  it('renders icon button when trigger is icon', async () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'icon' },
+    });
+
+    const iconButton = wrapper.findComponent({ name: 'MIconButton' });
+    expect(iconButton.exists()).toBe(true);
+
+    const header = wrapper.find('.mc-tile__header');
+    expect(header.element.tagName).toBe('DIV');
+    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
+      'true',
+    );
+
+    await iconButton.trigger('click');
+    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
+      'false',
+    );
+  });
+
+  it('renders action button when trigger is button', async () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'button', label: 'Expand' },
+    });
+
+    const button = wrapper.findComponent({ name: 'MButton' });
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toContain('Expand');
+
+    await button.trigger('click');
+    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
+      'false',
+    );
+  });
+
+  it('toggles open state when clicking header in container mode', async () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'container' },
+    });
+
+    const header = wrapper.find('.mc-tile__header');
+    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
+      'true',
+    );
+
+    await header.trigger('click');
+    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
+      'false',
+    );
+
+    await header.trigger('click');
+    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
+      'true',
+    );
+  });
+
+  it('content slot has id matching aria-controls', () => {
+    const wrapper = mount(MTileExpandable, {
+      props: { trigger: 'container' },
+    });
+
+    const header = wrapper.find('.mc-tile__header');
+    const content = wrapper.find('.mc-tile__content');
+
+    expect(content.attributes('id')).toBe(header.attributes('aria-controls'));
+  });
+});

package/src/components/tileexpandable/MTileExpandable.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MTileExpandable from './MTileExpandable.vue';
+
+const meta: Meta<typeof MTileExpandable> = {
+  title: 'Content/Tile/Expandable',
+  component: MTileExpandable,
+  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',
+    label: 'See more',
+    trigger: 'icon',
+    bordered: true,
+    default: `
+      <div class="placeholder-slot">
+        Click on the expand button to see details.
+      </div>
+    `,
+    details: `
+      <div class="placeholder-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+  render: (args) => ({
+    components: { MTileExpandable },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MTileExpandable v-bind="args">
+        ${args.default}
+
+        <template #details>
+          ${args.details}
+        </template>
+      </MTileExpandable>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTileExpandable>;
+
+export const Default: Story = {};