@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.5

package/src/components/iconbutton/MIconButton.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="mc-button mc-button--icon-button"
+    :class="classObject"
+    :disabled="disabled"
+    :type="type"
+  >
+    <span class="mc-button__icon">
+      <slot name="icon" />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the visual style of the icon button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the icon button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the icon button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the icon button.
+     */
+    ghost?: boolean;
+    /**
+     * If `true`, the icon button gets an outlined style.
+     */
+    outlined?: boolean;
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
+  }>(),
+  {
+    appearance: 'standard',
+    size: 'm',
+    type: 'button',
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert the form element of your choice
+   */
+  icon: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-button--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+    [`mc-button--${props.size}`]: props.size && props.size != 'm',
+    'mc-button--ghost': props.ghost,
+    'mc-button--outlined': props.outlined,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/button';
+</style>

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 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 = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 's' },
+};