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

package/src/components/breadcrumb/MBreadcrumb.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MBreadcrumb from './MBreadcrumb.vue';
+
+const meta: Meta<typeof MBreadcrumb> = {
+  title: 'Navigation/Breadcrumb',
+  component: MBreadcrumb,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.',
+      },
+    },
+  },
+  args: {
+    links: [
+      {
+        label: 'Home',
+        href: '#',
+      },
+      {
+        label: 'level 01',
+        href: '#',
+      },
+      {
+        label: 'level 02',
+        href: '#',
+      },
+      {
+        label: 'Current Page',
+        href: '#',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MBreadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MBreadcrumb v-bind="args"></MBreadcrumb>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBreadcrumb>;
+
+export const Default: Story = {};
+
+export const Inverse: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  args: { appearance: 'inverse' },
+};

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -1,73 +1,70 @@
 <template>
-  <nav
-    class="mc-breadcrumb"
-    :class="{
-      'mc-breadcrumb--dark': dark,
-      'mc-breadcrumb--responsive': responsive,
-    }"
-    aria-label="Breadcrumb"
-  >
+  <nav class="mc-breadcrumb" :class="classObject" aria-label="Breadcrumb">
     <ul class="mc-breadcrumb__container">
       <li
-        v-for="(item, index) in items"
-        :key="`breadcrumb-${index}`"
         class="mc-breadcrumb__item"
-        :class="{ 'is-active': item.isActive }"
+        v-for="(link, index) in links"
+        :key="`breadcrumb-${index}`"
       >
-        <m-link
-          :href="item.href"
-          :class="[
-            setLinkClasses,
-            { 'mc-breadcrumb__current': index === items.length - 1 },
-          ]"
-          :aria-current="index != items.length - 1 ? null : 'page'"
-          size="s"
-          :router="item.router"
-          @click="$emit('link-clicked', item)"
+        <MLink
+          :href="link.href"
+          :router="link.router"
+          :appearance="appearance"
+          inline
+          :class="{
+            'mc-breadcrumb__current': isLastLink(index),
+          }"
+          :aria-current="isLastLink(index) ? 'page' : undefined"
         >
-          {{ item.text }}
-        </m-link>
+          {{ link.label }}
+        </MLink>
       </li>
     </ul>
   </nav>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
 import MLink from '../link/MLink.vue';
+/**
+ * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+ */
+const props = defineProps<{
+  /**
+   * Allows to define the breadcrumb style
+   */
+  appearance?: 'standard' | 'inverse';
+  /**
+   * Links of the breadcrumb
+   */
+  links?: Array<{
+    /**
+     * The label displayed for the link.
+     */
+    label: string;
+    /**
+     * URL for the link (for external links or the `to` prop for `router-link`).
+     */
+    href: string;
+    /**
+     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+     */
+    router?: boolean;
+  }>;
+}>();
 
-export default {
-  name: 'MBreadcrumb',
-
-  components: {
-    MLink,
-  },
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    responsive: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const classObject = computed(() => {
+  return {
+    [`mc-breadcrumb--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+  };
+});
 
-  computed: {
-    setLinkClasses() {
-      return {
-        'mc-link--light': this.dark,
-      };
-    },
-  },
+const isLastLink = (index: number) => {
+  return index === (props.links?.length ?? 0) - 1;
 };
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.breadcrumb';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/breadcrumb';
 </style>

package/src/components/button/MButton.spec.ts

@@ -0,0 +1,191 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MButton from './MButton.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import MLoader from '../loader/MLoader.vue';
+
+describe('MButton component', () => {
+  it('renders with a label', () => {
+    const wrapper = mount(MButton, {
+      slots: {
+        default: 'Click Me',
+      },
+    });
+    expect(wrapper.text()).toContain('Click Me');
+  });
+
+  it('applies the correct appearance class based on the appearance prop', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        appearance: 'accent',
+      },
+      slots: {
+        default: 'Styled Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--accent');
+  });
+
+  it('applies the correct size class based on the size prop', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        label: 'Sized Button',
+        size: 'l',
+      },
+      slots: {
+        default: 'Sized Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--l');
+  });
+
+  it('disables the button when the disabled prop is true', async () => {
+    const wrapper = mount(MButton, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Disabled Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the correct ghost class when ghost prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        ghost: true,
+      },
+      slots: {
+        default: 'Ghost Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--ghost');
+  });
+
+  it('applies the outlined class when outlined prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        outlined: true,
+      },
+      slots: {
+        default: 'Outlined Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--outlined');
+  });
+
+  it('has type="button" by default', () => {
+    const wrapper = mount(MButton, {
+      slots: {
+        default: 'Default Button',
+      },
+    });
+
+    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(MButton, {
+      props: {
+        type: 'submit',
+      },
+      slots: {
+        default: 'Submit Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('submit');
+  });
+
+  it('renders with an icon in the left position', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'left',
+      },
+      slots: {
+        default: 'Button with Icon',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('renders with an icon in the right position', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'right',
+      },
+      slots: {
+        default: 'Button with Icon',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('renders with only an icon when iconPosition is "only"', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'only',
+      },
+      slots: {
+        default: 'Icon Only Button',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.exists()).toBe(false);
+  });
+
+  it('renders loader when isLoading prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        isLoading: true,
+      },
+      slots: {
+        default: 'Loading Button',
+      },
+    });
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(true);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.attributes('style')).toContain('visibility: hidden');
+  });
+
+  it('does not render loader when isLoading prop is false', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        isLoading: false,
+      },
+      slots: {
+        default: 'Normal Button',
+      },
+    });
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(false);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Normal Button');
+  });
+});

package/src/components/button/MButton.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import MButton from './MButton.vue';
+import Download24 from '@mozaic-ds/icons-vue/src/components/Download24/Download24.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof MButton> = {
+  title: 'Action/Button',
+  component: MButton,
+  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: { default: 'Button Label' },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MButton, Download24, ChevronRight24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MButton 
+        v-bind="args"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MButton>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MButton>;
+
+export const Filled: Story = {};
+
+export const Outline: Story = {
+  args: { outlined: true },
+};
+
+export const Ghost: Story = {
+  args: { ghost: true },
+};
+
+export const Icon: Story = {
+  args: {
+    iconPosition: 'left',
+    icon: '<ChevronRight24/>',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    ariaLabel: 'Loading button',
+  },
+};