@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/src/components/statusdot/MStatusDot.spec.ts

@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MStatusDot from './MStatusDot.vue';
+
+describe('MStatusDot.vue', () => {
+  it('renders with default status and size', () => {
+    const wrapper = mount(MStatusDot);
+
+    expect(wrapper.classes()).toContain('mc-status-dot');
+  });
+
+  it('renders with custom status', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        status: 'success',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-status-dot--success');
+  });
+
+  it('renders with custom size', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        size: 's',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-status-dot--s');
+  });
+
+  it('does not render the "info" status when a custom one is passed', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        status: 'warning',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-status-dot--info');
+  });
+
+  it('does not render the "m" size when a custom one is passed', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        size: 'l',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-status-dot--m');
+  });
+});

package/src/components/statusdot/MStatusDot.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStatusDot from './MStatusDot.vue';
+
+const meta: Meta<typeof MStatusDot> = {
+  title: 'Status/Status Dot',
+  component: MStatusDot,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MStatusDot },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MStatusDot v-bind="args"></MStatusDot>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStatusDot>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Neutral: Story = {
+  args: { status: 'neutral' },
+};
+
+export const Size: Story = {
+  args: { size: 'l' },
+};

package/src/components/statusdot/MStatusDot.vue

@@ -0,0 +1,36 @@
+<template>
+  <span class="mc-status-dot" :class="classObject"></span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A badge indicates the status of an entity and can evolve at any time.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the Status Dot style
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    /**
+     * Determines the size of the Status Dot.
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    status: 'info',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-dot--${props.status}`]: props.status && props.status != 'info',
+    [`mc-status-dot--${props.size}`]: props.size && props.size != 'm',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-dot';
+</style>

package/src/components/statusnotification/MStatusNotification.spec.ts

@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MStatusNotification from './MStatusNotification.vue';
+import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
+import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
+import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+
+describe('MStatusNotification.vue', () => {
+  it('should render correctly with the default props', () => {
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'Test Title',
+        description: 'Test Description',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Title');
+    expect(wrapper.text()).toContain('Test Description');
+    expect(wrapper.findComponent(InfoCircleFilled32).exists()).toBe(true); // Default icon is InfoCircle32
+    expect(wrapper.classes()).toContain('mc-status-notification');
+  });
+
+  it('should display the correct icon based on the status prop', () => {
+    const wrapperSuccess = mount(MStatusNotification, {
+      props: {
+        title: 'Success',
+        description: 'Success Description',
+        status: 'success',
+      },
+    });
+    expect(wrapperSuccess.findComponent(CheckCircleFilled32).exists()).toBe(
+      true,
+    );
+
+    const wrapperWarning = mount(MStatusNotification, {
+      props: {
+        title: 'Warning',
+        description: 'Warning Description',
+        status: 'warning',
+      },
+    });
+    expect(wrapperWarning.findComponent(WarningCircleFilled32).exists()).toBe(
+      true,
+    );
+
+    const wrapperError = mount(MStatusNotification, {
+      props: {
+        title: 'Error',
+        description: 'Error Description',
+        status: 'error',
+      },
+    });
+    expect(wrapperError.findComponent(CrossCircleFilled32).exists()).toBe(true);
+  });
+
+  it('should show the close button if closable prop is true', () => {
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'Closable Test',
+        description: 'Test Description',
+        closable: true,
+      },
+    });
+
+    expect(
+      wrapper.find('button.mc-status-notification-closable__close').exists(),
+    ).toBe(true);
+  });
+
+  it('should emit a close event when the close button is clicked', async () => {
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'Closable Test',
+        description: 'Test Description',
+        closable: true,
+      },
+    });
+
+    const closeButton = wrapper.find(
+      'button.mc-status-notification-closable__close',
+    );
+    await closeButton.trigger('click');
+
+    // Check if the "close" event was emitted
+    expect(wrapper.emitted()).toHaveProperty('close');
+  });
+
+  it('should render footer slot if provided', () => {
+    const footerSlotContent = '<button>Footer Button</button>';
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'With Footer',
+        description: 'Description with footer',
+      },
+      slots: {
+        footer: footerSlotContent,
+      },
+    });
+
+    expect(wrapper.html()).toContain(footerSlotContent);
+  });
+});

package/src/components/statusnotification/MStatusNotification.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStatusNotification from './MStatusNotification.vue';
+import { action } from 'storybook/actions';
+import MButton from '../button/MButton.vue';
+import MLink from '../link/MLink.vue';
+import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
+
+const meta: Meta<typeof MStatusNotification> = {
+  title: 'Status/Status Notification',
+  component: MStatusNotification,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.',
+      },
+    },
+  },
+  args: {
+    title:
+      'This is a title, be concise and use the description message to give details.',
+    description: 'Description message.',
+  },
+  render: (args) => ({
+    components: { MStatusNotification, MButton, MLink, ArrowNext20 },
+    setup() {
+      const handleClick = action('close');
+
+      return { args, handleClick };
+    },
+    template: `
+      <MStatusNotification 
+        v-bind="args"
+        @click="handleClick"
+      >
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+      </MStatusNotification>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStatusNotification>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Closable: Story = {
+  args: { closable: true },
+};
+
+export const WithButton = {
+  args: {
+    footer: `
+      <MButton outlined>Button Label</MButton>
+    `,
+  },
+};
+
+export const WithLink = {
+  args: {
+    footer: `
+      <MLink href="#" iconPosition="right">
+        Stand-alone link
+
+        <template #icon><ArrowNext20 /></template>
+      </MLink>
+    `,
+  },
+};
+
+export const WithButtons = {
+  args: {
+    footer: `
+      <MButton>Button Label</MButton>
+      <MButton outlined>Button Label</MButton>
+    `,
+  },
+};

package/src/components/statusnotification/MStatusNotification.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="mc-status-notification" role="status" :class="classObject">
+    <component
+      :is="iconComponent"
+      class="mc-status-notification__icon"
+      aria-hidden="true"
+    />
+    <div class="mc-status-notification__content">
+      <h2 class="mc-status-notification__title">{{ title }}</h2>
+
+      <p class="mc-status-notification__message">
+        {{ description }}
+      </p>
+
+      <div v-if="$slots.footer" class="mc-status-notification__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+
+    <button
+      v-if="closable"
+      class="mc-status-notification-closable__close"
+      @click="emit('close')"
+    >
+      <Cross20
+        class="mc-status-notification-closable__icon"
+        aria-hidden="true"
+      />
+      <span class="mc-status-notification-closable__text">Close</span>
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
+import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
+import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
+import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+/**
+ * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Title of the Status Notification
+     */
+    title: string;
+    /**
+     * Description of the Status Notification
+     */
+    description: string;
+    /**
+     * Allows to define the Status Notification style
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+  }>(),
+  {
+    status: 'info',
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert a button or a link in the footer
+   */
+  footer?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-notification--${props.status}`]:
+      props.status && props.status != 'info',
+  };
+});
+
+const iconComponent = computed(() => {
+  switch (props.status) {
+    case 'success':
+      return CheckCircleFilled32;
+    case 'warning':
+      return WarningCircleFilled32;
+    case 'error':
+      return CrossCircleFilled32;
+    case 'info':
+    default:
+      return InfoCircleFilled32;
+  }
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when closing the notification.
+   */
+  (on: 'close'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-notification';
+</style>

package/src/components/tabs/MTabs.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import Mtabs from './MTabs.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof Mtabs> = {
+  title: 'Navigation/Tabs',
+  component: Mtabs,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
+      },
+    },
+  },
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { Mtabs, ChevronRight24 },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <Mtabs 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      ></Mtabs>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof Mtabs>;
+
+export const Default: Story = {};
+
+export const Icons: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+    ],
+  },
+};
+
+export const Centered: Story = {
+  args: { centered: true },
+};
+
+export const NoDivider: Story = {
+  args: { divider: false },
+};
+
+export const Disabled: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+        disabled: true,
+      },
+      {
+        label: 'Label',
+        disabled: true,
+      },
+    ],
+  },
+};

package/src/components/tabs/MTabs.vue

@@ -0,0 +1,113 @@
+<template>
+  <nav class="mc-tabs" :class="classObject">
+    <ul role="tablist" class="mc-tabs__list" :aria-label="description">
+      <li
+        v-for="(tab, index) in tabs"
+        :key="`tab-${index}`"
+        role="presentation"
+        class="mc-tabs__item"
+      >
+        <button
+          ref="tab"
+          role="tab"
+          class="mc-tabs__tab"
+          :class="{
+            'mc-tabs__tab--selected': isTabSelected(index),
+            'mc-tabs__tab--disabled': tab.disabled,
+          }"
+          :aria-selected="isTabSelected(index)"
+          type="button"
+          @click="onClickTab(index)"
+        >
+          <span v-if="tab.icon" class="mc-tabs__icon">
+            <component :is="tab.icon" />
+          </span>
+          <div class="mc-tabs__label">
+            <span>{{ tab.label }}</span>
+          </div>
+        </button>
+      </li>
+    </ul>
+    <MDivider v-if="divider"></MDivider>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type Component } from 'vue';
+import MDivider from '../divider/MDivider.vue';
+/**
+ * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+    /**
+     * The selected tab index, bound via v-model.
+     */
+    modelValue?: number;
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each tab.
+     */
+    tabs: Array<{
+      /**
+       * The icon displayed for the tab from Mozaic-icon-vue.
+       */
+      icon?: Component;
+      /**
+       * The label displayed for the tab.
+       */
+      label: string;
+      /**
+       * If `true`, the tab will be disabled.
+       */
+      disabled?: boolean;
+    }>;
+  }>(),
+  {
+    modelValue: 0,
+    divider: true,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    'mc-tabs--centered': props.centered,
+  };
+});
+
+const modelValue = ref(props.modelValue);
+
+const onClickTab = (index: number) => {
+  if (props.tabs[index].disabled) return;
+  if (index !== modelValue.value) {
+    modelValue.value = index;
+    emit('update:modelValue', index);
+  }
+};
+
+const isTabSelected = (index: number) => {
+  return modelValue.value === index;
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the selected tab changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tabs';
+</style>