@mozaic-ds/vue 1.0.0-beta.1 → 1.0.0-beta.4

package/src/components/link/MLink.spec.ts

@@ -0,0 +1,154 @@
+import { mount } from '@vue/test-utils';
+import MLink from './MLink.vue';
+import { describe, it, expect } from 'vitest';
+
+describe('MLink component', () => {
+  it('renders a link with default props', () => {
+    const wrapper = mount(MLink);
+
+    const link = wrapper.get('a');
+    expect(link.classes()).toContain('mc-link');
+  });
+
+  it('renders as router-link when the "router" prop is true', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        router: true,
+        href: '/internal',
+      },
+    });
+
+    const link = wrapper.getComponent('router-link');
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('to')).toBe('/internal');
+  });
+
+  it('renders as a regular anchor when the "router" prop is false or undefined', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        href: 'https://example.com',
+      },
+    });
+
+    const link = wrapper.get('a');
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe('https://example.com');
+  });
+
+  it('renders without an icon', () => {
+    const wrapper = mount(MLink, {
+      slots: {
+        default: 'Link text',
+      },
+    });
+
+    const icon = wrapper.find('.mc-link__icon');
+    const label = wrapper.find('.mc-link__label');
+    expect(icon.exists()).toBe(false);
+    expect(label.text()).toBe('Link text');
+  });
+
+  it('renders with an icon on the left when "iconPosition" is "left"', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        iconPosition: 'left',
+      },
+      slots: {
+        icon: '<span>Left Icon</span>',
+        default: 'Link text',
+      },
+    });
+
+    const leftIcon = wrapper.find('.mc-link__icon');
+    const label = wrapper.find('.mc-link__label');
+    expect(leftIcon.exists()).toBe(true);
+    expect(leftIcon.text()).toBe('Left Icon');
+    expect(label.text()).toBe('Link text');
+  });
+
+  it('renders with an icon on the right when "iconPosition" is "right"', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        iconPosition: 'right',
+      },
+      slots: {
+        icon: '<span>Right Icon</span>',
+        default: 'Link text',
+      },
+    });
+
+    const rightIcon = wrapper.find('.mc-link__icon');
+    const label = wrapper.find('.mc-link__label');
+    expect(rightIcon.exists()).toBe(true);
+    expect(rightIcon.text()).toBe('Right Icon');
+    expect(label.text()).toBe('Link text');
+  });
+
+  it('applies the correct appearance class', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        appearance: 'accent',
+      },
+    });
+
+    const link = wrapper.get('a');
+    expect(link.classes()).toContain('mc-link--accent');
+  });
+
+  it('applies the correct size class', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        size: 'm',
+      },
+    });
+
+    const link = wrapper.get('a');
+    expect(link.classes()).toContain('mc-link--m');
+  });
+
+  it('adds "mc-link--inline" class when inline', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        inline: true,
+      },
+    });
+
+    const link = wrapper.get('a');
+    expect(link.classes()).toContain('mc-link--inline');
+  });
+
+  it('applies the href and target attributes correctly', () => {
+    const wrapper = mount(MLink, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank',
+      },
+    });
+
+    const link = wrapper.get('a');
+    expect(link.attributes('href')).toBe('https://example.com');
+    expect(link.attributes('target')).toBe('_blank');
+  });
+
+  it('renders default slot content', () => {
+    const wrapper = mount(MLink, {
+      slots: {
+        default: 'Custom Link Text',
+      },
+    });
+
+    const linkText = wrapper.get('.mc-link__label');
+    expect(linkText.text()).toBe('Custom Link Text');
+  });
+
+  it('binds custom attributes correctly', () => {
+    const wrapper = mount(MLink, {
+      attrs: {
+        'data-test-id': 'custom-id',
+      },
+    });
+
+    const link = wrapper.get('a');
+    expect(link.attributes('data-test-id')).toBe('custom-id');
+  });
+});

package/src/components/link/MLink.stories.ts

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MLink from './MLink.vue';
+import ChevronLeft24 from '@mozaic-ds/icons-vue/src/components/ChevronLeft24/ChevronLeft24.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof MLink> = {
+  title: 'Navigation/Link (stand alone)',
+  component: MLink,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.',
+      },
+    },
+  },
+  args: {
+    default: 'Stand-alone link',
+    href: '#',
+  },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MLink, ChevronRight24, ChevronLeft24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MLink v-bind="args">
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+        ${args.default}
+      </MLink>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MLink>;
+
+export const Standard: Story = {};
+
+export const ExternalLink: Story = {
+  name: 'For External Link',
+  args: {
+    href: 'https://example.com',
+  },
+};
+
+export const InternalLink: Story = {
+  name: 'For Internal Link with Vue Router',
+  args: {
+    href: '/about',
+    router: true,
+  },
+};
+
+export const Secondary: Story = {
+  args: { appearance: 'secondary' },
+};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Inverse: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};
+
+export const Inline: Story = {
+  args: { inline: true },
+};
+
+export const IconLeft: Story = {
+  args: {
+    iconPosition: 'left',
+    icon: '<ChevronLeft24/>',
+  },
+};
+
+export const IconRight: Story = {
+  args: {
+    iconPosition: 'right',
+    icon: '<ChevronRight24/>',
+  },
+};

package/src/components/link/MLink.vue

@@ -1,122 +1,99 @@
 <template>
   <component
-    :is="router ? router : href && !disabled ? 'a' : 'span'"
-    :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?: string;
+    /**
+     * 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: [String, 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;
-    },
-  },
-  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,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MLoader from './MLoader.vue';
+
+const meta: Meta<typeof MLoader> = {
+  title: 'Indicators/Loader',
+  component: MLoader,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.',
+      },
+    },
+  },
+  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 = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 's' },
+};