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

package/src/components/link/MLink.vue

@@ -1,133 +1,99 @@
 <template>
   <component
-    :is="linkComponentName"
-    v-bind="linkComponentProps"
-    :href="router ? null : href && !disabled ? href : null"
+    :is="router ? 'router-link' : 'a'"
     class="mc-link"
-    :class="setClasses"
-    @click="onClick"
+    :class="classObject"
+    :href="href"
+    :target="target"
+    :to="router ? href : undefined"
   >
-    <m-icon
-      v-if="icon && iconPosition === 'left'"
-      :class="`mc-link__icon mc-link__icon--${iconPosition}`"
-      :name="icon"
-    />
-    <slot />
-    <m-icon
-      v-if="icon && iconPosition === 'right'"
-      :class="`mc-link__icon mc-link__icon--${iconPosition}`"
-      :name="icon"
-    />
+    <span
+      v-if="$slots.icon && iconPosition == 'left'"
+      class="mc-link__icon"
+      aria-hidden="true"
+    >
+      <slot name="icon" />
+    </span>
+    <span class="mc-link__label">
+      <slot />
+    </span>
+    <span
+      v-if="$slots.icon && iconPosition == 'right'"
+      class="mc-link__icon"
+      aria-hidden="true"
+    >
+      <slot name="icon" />
+    </span>
   </component>
 </template>
 
-<script>
-import { checkThemeValue } from '../../utils/theme.validator';
-import {
-  responsiveModifierValidators,
-  responsiveModifiers,
-} from '../../utils/mozaicClasses';
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MLink',
-
-  components: {
-    MIcon,
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Position of the icon relative to the text.
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Allows to define the link style
+     */
+    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
+    /**
+     * Allows to define the link size
+     */
+    size?: 's' | 'm';
+    /**
+     * URL for the link (for external links or the `to` prop for `router-link`).
+     */
+    href?: string;
+    /**
+     * Where to open the link
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Specify wether the link is inline
+     */
+    inline?: boolean;
+    /**
+     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+     */
+    router?: boolean;
+  }>(),
+  {
+    href: undefined,
+    target: undefined,
+    appearance: 'standard',
+    size: 's',
+    iconPosition: 'left',
   },
+);
 
-  props: {
-    router: {
-      type: Object,
-      default: null,
-    },
-    href: {
-      type: String,
-      default: '#',
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator: (value) => checkThemeValue(value),
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => responsiveModifierValidators(value, ['s', 'm']),
-    },
-    // Experimental solution waiting on this issue https://github.com/adeo/mozaic-vue/issues/52
-    responsiveSizeModifiers: {
-      type: Array,
-      default: null,
-      validator: (array) =>
-        array.every((e) =>
-          responsiveModifierValidators(e, [
-            's@from-m',
-            's@from-l',
-            's@from-xl',
-            's@from-xxl',
-            'm@from-m',
-            'm@from-l',
-            'm@from-xl',
-            'm@from-xxl',
-          ])
-        ),
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    iconPosition: {
-      type: String,
-      default: 'left',
-      validator: (value) => ['left', 'right'].includes(value),
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.theme) {
-        classes.push(`mc-link--${this.theme}`);
-      }
+defineSlots<{
+  /**
+   * Use this slot to insert the textual content of the Link
+   */
+  default: string;
+  /**
+   * Use this slot to insert an icon for the Link
+   */
+  icon?: VNode;
+}>();
 
-      if (this.size) {
-        responsiveModifiers('mc-link', this.size, classes);
-      }
-
-      if (this.disabled) {
-        classes.push('is-disabled');
-      }
-
-      return classes;
-    },
-    linkComponentName() {
-      const isLinkValid = this.href && !this.disabled;
-      const routerComponent = this.router?.name ?? null;
-      const defaultComponent = isLinkValid ? 'a' : 'span';
-
-      return routerComponent ?? defaultComponent;
-    },
-    linkComponentProps() {
-      return this.router?.props ?? {};
-    },
-  },
-  methods: {
-    onClick(event) {
-      if (!this.disabled) {
-        this.$emit('click', event);
-      }
-    },
-  },
-};
+const classObject = computed(() => {
+  return {
+    [`mc-link--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+    [`mc-link--${props.size}`]: props.size && props.size != 's',
+    'mc-link--inline': props.inline,
+    'mc-link--stand-alone': !props.inline,
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.links';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/link';
 </style>

package/src/components/loader/MLoader.spec.ts

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MLoader from './MLoader.vue';
+
+describe('MLoader component', () => {
+  it('should render correctly with the given props', () => {
+    const wrapper = mount(MLoader, {
+      props: {
+        size: 's',
+        appearance: 'accent',
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+
+    const loaderElement = wrapper.find('.mc-loader');
+    expect(loaderElement.exists()).toBe(true);
+    expect(loaderElement.classes()).toContain('mc-loader--s');
+    expect(loaderElement.classes()).toContain('mc-loader--accent');
+
+    const svg = wrapper.find('svg.mc-loader__icon');
+    expect(svg.exists()).toBe(true);
+
+    const circle = wrapper.find('circle.mc-loader__path');
+    expect(circle.exists()).toBe(true);
+  });
+
+  it('changes class based on size prop', async () => {
+    const wrapper = mount(MLoader, {
+      props: {
+        size: 's',
+      },
+    });
+
+    let loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).toContain('mc-loader--s');
+
+    await wrapper.setProps({ size: 'l' });
+    loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).toContain('mc-loader--l');
+  });
+
+  it('changes class based on appearance prop', async () => {
+    const wrapper = mount(MLoader, {
+      props: {
+        appearance: 'accent',
+      },
+    });
+
+    let loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).toContain('mc-loader--accent');
+
+    await wrapper.setProps({ appearance: 'inverse' });
+    loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).toContain('mc-loader--inverse');
+  });
+
+  it('renders the loader text when text prop is provided', () => {
+    const wrapper = mount(MLoader, {
+      props: {
+        text: 'Loading...',
+      },
+    });
+
+    const textElement = wrapper.find('.mc-loader__text');
+    expect(textElement.exists()).toBe(true);
+    expect(textElement.text()).toBe('Loading...');
+  });
+
+  it('does not render the loader text when text prop is not provided', () => {
+    const wrapper = mount(MLoader);
+
+    const textElement = wrapper.find('.mc-loader__text');
+    expect(textElement.exists()).toBe(false);
+  });
+
+  it('sets the correct viewBox based on size prop', async () => {
+    const wrapper = mount(MLoader, {
+      props: {
+        size: 's',
+      },
+    });
+
+    const svg = wrapper.find('svg.mc-loader__icon');
+    expect(svg.attributes('viewBox')).toBe('0 0 24 24');
+
+    await wrapper.setProps({ size: 'l' });
+    expect(svg.attributes('viewBox')).toBe('0 0 64 64');
+  });
+
+  it('sets the correct circle radius based on size prop', async () => {
+    const wrapper = mount(MLoader, {
+      props: {
+        size: 's',
+      },
+    });
+
+    const circle = wrapper.find('circle.mc-loader__path');
+    expect(circle.attributes('r')).toBe('6');
+
+    await wrapper.setProps({ size: 'l' });
+    expect(circle.attributes('r')).toBe('19');
+  });
+});

package/src/components/loader/MLoader.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MLoader from './MLoader.vue';
+
+const meta: Meta<typeof MLoader> = {
+  title: 'Indicators/Loader',
+  component: MLoader,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MLoader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MLoader v-bind="args"></MLoader>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MLoader>;
+
+export const Standard: Story = {};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 's' },
+};

package/src/components/loader/MLoader.vue

@@ -1,84 +1,95 @@
 <template>
-  <div class="mc-loader" :class="setClasses">
+  <div class="mc-loader" :class="classObject">
     <span class="mc-loader__spinner">
       <svg
         class="mc-loader__icon"
         xmlns="http://www.w3.org/2000/svg"
-        :viewBox="viewBox"
+        :viewBox="setViewBox"
+        aria-hidden="true"
       >
-        <circle class="mc-loader__path" cx="50%" cy="50%" :r="pathR" />
+        <circle
+          class="mc-loader__path"
+          cx="50%"
+          cy="50%"
+          :r="setCircleRadius"
+        ></circle>
       </svg>
     </span>
-
-    <span v-if="text" class="mc-loader__text">{{ text }}</span>
+    <p v-if="text" class="mc-loader__text" role="status">{{ text }}</p>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MLoader',
-
-  props: {
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
+ */
+const props = withDefaults(
+  defineProps<{
     /**
-     * Loader size
-     * @values s, m , l
+     * Specifies the visual appearance of the loader.
      */
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => ['s', 'm', 'l'].includes(value),
-    },
+    appearance?: 'standard' | 'accent' | 'inverse';
 
     /**
-     * Loader theme
-     * @values dark, light, primary
+     * Defines the size of the loader.
      */
-    theme: {
-      type: String,
-      default: 'primary',
-      validator: (value) => ['dark', 'light', 'primary'].includes(value),
-    },
+    size?: 's' | 'm' | 'l';
 
     /**
-     * Loader text - when using the loader inside an overlay
+     * Text to display alongside the loader when using the loader inside an `Overlay`.
      */
-    text: {
-      type: String,
-      default: undefined,
-    },
+    text?: string;
+  }>(),
+  {
+    appearance: 'standard',
+    size: 'm',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
+const classObject = computed(() => {
+  return {
+    [`mc-loader--${props.size}`]: props.size && props.size !== 'm',
+    [`mc-loader--${props.appearance}`]:
+      props.appearance && props.appearance !== 'standard',
+    'mc-loader--text-visible': props.text,
+  };
+});
 
-      if (this.size && this.size !== 'm') {
-        classes.push(`mc-loader--${this.size}`);
-      }
+const setViewBox = computed(() => {
+  let viewBox: string;
 
-      if (this.theme && this.theme !== 'primary') {
-        classes.push(`mc-loader--${this.theme}`);
-      }
+  switch (props.size) {
+    case 's':
+      viewBox = '0 0 24 24';
+      break;
+    case 'l':
+      viewBox = '0 0 64 64';
+      break;
+    default:
+      viewBox = '0 0 32 32';
+  }
+  return viewBox;
+});
 
-      return classes;
-    },
+const setCircleRadius = computed(() => {
+  let circleRadius: number;
 
-    viewBox() {
-      return this.size === 'm'
-        ? '0 0 32 32'
-        : this.size === 's'
-        ? '0 0 24 24'
-        : '0 0 64 64';
-    },
+  switch (props.size) {
+    case 's':
+      circleRadius = 6;
+      break;
+    case 'l':
+      circleRadius = 19;
+      break;
+    default:
+      circleRadius = 9;
+  }
 
-    pathR() {
-      return this.size === 'm' ? 9 : this.size === 's' ? 6 : 19;
-    },
-  },
-};
+  return circleRadius;
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.loader';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/loader';
 </style>

package/src/components/loadingoverlay/MLoadingOverlay.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MLoadingOverlay from './MLoadingOverlay.vue';
+
+describe('MLoadingOverlay component', () => {
+  it('renders and applies isVisible class based on prop', () => {
+    const wrapper = mount(MLoadingOverlay, {
+      props: { isVisible: true, text: 'Loading data...' },
+    });
+
+    expect(wrapper.classes()).toContain('is-visible');
+
+    const dialog = wrapper.find('[role="dialog"]');
+    expect(dialog.attributes('aria-label')).toBe('Loading data...');
+  });
+
+  it('does not have is-visible class when isVisible is false or undefined', () => {
+    const wrapper = mount(MLoadingOverlay, {
+      props: { isVisible: false },
+    });
+    expect(wrapper.classes()).not.toContain('is-visible');
+
+    const wrapperNoProp = mount(MLoadingOverlay);
+    expect(wrapperNoProp.classes()).not.toContain('is-visible');
+  });
+
+  it('passes down attributes via $attrs', () => {
+    const wrapper = mount(MLoadingOverlay, {
+      props: { isVisible: true, text: 'Loading...' },
+      attrs: { id: 'custom-id', 'data-test': 'loading-overlay' },
+    });
+
+    const dialog = wrapper.find('[role="dialog"]');
+    expect(dialog.attributes('id')).toBe('custom-id');
+    expect(dialog.attributes('data-test')).toBe('loading-overlay');
+  });
+});

package/src/components/loadingoverlay/MLoadingOverlay.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MLoadingOverlay from './MLoadingOverlay.vue';
+
+const meta: Meta<typeof MLoadingOverlay> = {
+  title: 'Overlay/Loading Overlay',
+  component: MLoadingOverlay,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '400px' },
+      description: {
+        component:
+          'An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.',
+      },
+    },
+  },
+  args: {
+    isVisible: true,
+    ariaLabel: 'Page loading',
+  },
+  render: (args) => ({
+    components: { MLoadingOverlay },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MLoadingOverlay v-bind="args"/>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MLoadingOverlay>;
+
+export const Default: Story = {};
+
+export const text: Story = {
+  args: {
+    text: 'Insert your text here',
+  },
+};

package/src/components/loadingoverlay/MLoadingOverlay.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="mc-loading-loader" :class="{ 'is-visible': isVisible }">
+    <div role="dialog" tabindex="-1" :aria-label="text" v-bind="$attrs">
+      <MLoader size="l" appearance="inverse" :text="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MLoader from '../loader/MLoader.vue';
+/**
+ * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+ */
+defineProps<{
+  /**
+   * Controls the visibility of the loading overlay.
+   */
+  isVisible?: boolean;
+  /**
+   * Text of the loading overlay.
+   */
+  text?: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/loading-overlay';
+</style>