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

package/src/components/flag/MFlag.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MFlag from './MFlag.vue';
+
+const meta: Meta<typeof MFlag> = {
+  title: 'Indicators/Flag',
+  component: MFlag,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.',
+      },
+    },
+  },
+  args: {
+    label: 'Flag label',
+  },
+  render: (args) => ({
+    components: { MFlag },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MFlag v-bind="args"></MFlag>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MFlag>;
+
+export const Standard: Story = {};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+};

package/src/components/flag/MFlag.vue

@@ -1,46 +1,35 @@
 <template>
-  <component :is="htmlTag" class="mc-flag" :class="setClasses">
-    <span class="mc-flag__label">{{ label }}</span>
-  </component>
+  <div class="mc-flag" :class="classObject">
+    <span class="mc-flag__label">
+      {{ label }}
+    </span>
+  </div>
 </template>
 
-<script>
-import { checkThemeValue } from '../../utils/theme.validator';
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
+ */
+const props = defineProps<{
+  /**
+   * Label of the Flag
+   */
+  label: string;
+  /**
+   * Allows to define the Flag style
+   */
+  appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
+}>();
 
-export default {
-  name: 'MFlag',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator: (value) => checkThemeValue(value),
-    },
-    htmlTag: {
-      type: String,
-      default: 'div',
-    },
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.theme) {
-        classes.push(`mc-flag--${this.theme}`);
-      }
-
-      return classes;
-    },
-  },
-};
+const classObject = computed(() => {
+  return {
+    [`mc-flag--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.flag';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/flag';
 </style>

package/src/components/iconbutton/MIconButton.spec.ts

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MIconButton from './MIconButton.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+describe('MButton component', () => {
+  it('renders with an icon', () => {
+    const wrapper = mount(MIconButton, {
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('applies the correct appearance class based on the appearance prop', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        appearance: 'accent',
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--accent');
+  });
+
+  it('applies the correct size class based on the size prop', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        size: 'l',
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--l');
+  });
+
+  it('disables the button when the disabled prop is true', async () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the correct ghost class when ghost prop is true', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        ghost: true,
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--ghost');
+  });
+
+  it('applies the outlined class when outlined prop is true', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        outlined: true,
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--outlined');
+  });
+
+  it('has type="button" by default', () => {
+    const wrapper = mount(MIconButton, {
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('button');
+  });
+
+  it('can have type="submit" when the type prop is "submit"', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        type: 'submit',
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('submit');
+  });
+});

package/src/components/iconbutton/MIconButton.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import MIconButton from './MIconButton.vue';
+import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import ChevronRight32 from '@mozaic-ds/icons-vue/src/components/ChevronRight32/ChevronRight32.vue';
+
+const meta: Meta<typeof MIconButton> = {
+  title: 'Action/Icon Button',
+  component: MIconButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
+      },
+    },
+  },
+  args: {
+    icon: '<ChevronRight24/>',
+    ariaLabel: 'Go to next page',
+  },
+  argTypes: {
+    ariaLabel: {
+      table: {
+        disable: true,
+      },
+    },
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MIconButton, ChevronRight20, ChevronRight24, ChevronRight32 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MIconButton 
+        v-bind="args"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+      </MIconButton>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MIconButton>;
+
+export const Standard: Story = {};
+
+export const Outline: Story = {
+  args: { outlined: true },
+};
+
+export const Ghost: Story = {
+  args: { ghost: true },
+};
+
+export const SizeS: Story = {
+  args: {
+    size: 's',
+    icon: '<ChevronRight20/>',
+  },
+};
+
+export const SizeL: Story = {
+  args: {
+    size: 'l',
+    icon: '<ChevronRight32/>',
+  },
+};

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,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+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: '#',
+  },
+  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 = {
+  globals: {
+    backgrounds: { value: '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/>',
+  },
+};