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

package/src/components/statusdot/MStatusDot.spec.ts

@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MStatusDot from './MStatusDot.vue';
+
+describe('MStatusDot.vue', () => {
+  it('renders with default status and size', () => {
+    const wrapper = mount(MStatusDot);
+
+    expect(wrapper.classes()).toContain('mc-status-dot');
+  });
+
+  it('renders with custom status', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        status: 'success',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-status-dot--success');
+  });
+
+  it('renders with custom size', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        size: 's',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-status-dot--s');
+  });
+
+  it('does not render the "info" status when a custom one is passed', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        status: 'warning',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-status-dot--info');
+  });
+
+  it('does not render the "m" size when a custom one is passed', () => {
+    const wrapper = mount(MStatusDot, {
+      props: {
+        size: 'l',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-status-dot--m');
+  });
+});

package/src/components/statusdot/MStatusDot.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MStatusDot from './MStatusDot.vue';
+
+const meta: Meta<typeof MStatusDot> = {
+  title: 'Status/Status Dot',
+  component: MStatusDot,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MStatusDot },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MStatusDot v-bind="args"></MStatusDot>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStatusDot>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Neutral: Story = {
+  args: { status: 'neutral' },
+};
+
+export const Size: Story = {
+  args: { size: 'l' },
+};

package/src/components/statusdot/MStatusDot.vue

@@ -0,0 +1,36 @@
+<template>
+  <span class="mc-status-dot" :class="classObject"></span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A badge indicates the status of an entity and can evolve at any time.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the Status Dot style
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    /**
+     * Determines the size of the Status Dot.
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    status: 'info',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-dot--${props.status}`]: props.status && props.status != 'info',
+    [`mc-status-dot--${props.size}`]: props.size && props.size != 'm',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-dot';
+</style>

package/src/components/statusnotification/MStatusNotification.spec.ts

@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MStatusNotification from './MStatusNotification.vue';
+import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
+import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';
+import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
+import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';
+
+describe('MStatusNotification.vue', () => {
+  it('should render correctly with the default props', () => {
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'Test Title',
+        description: 'Test Description',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Title');
+    expect(wrapper.text()).toContain('Test Description');
+    expect(wrapper.findComponent(InfoCircle32).exists()).toBe(true); // Default icon is InfoCircle32
+    expect(wrapper.classes()).toContain('mc-status-notification');
+  });
+
+  it('should display the correct icon based on the status prop', () => {
+    const wrapperSuccess = mount(MStatusNotification, {
+      props: {
+        title: 'Success',
+        description: 'Success Description',
+        status: 'success',
+      },
+    });
+    expect(wrapperSuccess.findComponent(CheckCircle32).exists()).toBe(true);
+
+    const wrapperWarning = mount(MStatusNotification, {
+      props: {
+        title: 'Warning',
+        description: 'Warning Description',
+        status: 'warning',
+      },
+    });
+    expect(wrapperWarning.findComponent(WarningCircle32).exists()).toBe(true);
+
+    const wrapperError = mount(MStatusNotification, {
+      props: {
+        title: 'Error',
+        description: 'Error Description',
+        status: 'error',
+      },
+    });
+    expect(wrapperError.findComponent(CrossCircle32).exists()).toBe(true);
+  });
+
+  it('should show the close button if closable prop is true', () => {
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'Closable Test',
+        description: 'Test Description',
+        closable: true,
+      },
+    });
+
+    expect(
+      wrapper.find('button.mc-status-notification-closable__close').exists(),
+    ).toBe(true);
+  });
+
+  it('should emit a close event when the close button is clicked', async () => {
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'Closable Test',
+        description: 'Test Description',
+        closable: true,
+      },
+    });
+
+    const closeButton = wrapper.find(
+      'button.mc-status-notification-closable__close',
+    );
+    await closeButton.trigger('click');
+
+    // Check if the "close" event was emitted
+    expect(wrapper.emitted()).toHaveProperty('close');
+  });
+
+  it('should render footer slot if provided', () => {
+    const footerSlotContent = '<button>Footer Button</button>';
+    const wrapper = mount(MStatusNotification, {
+      props: {
+        title: 'With Footer',
+        description: 'Description with footer',
+      },
+      slots: {
+        footer: footerSlotContent,
+      },
+    });
+
+    expect(wrapper.html()).toContain(footerSlotContent);
+  });
+});

package/src/components/statusnotification/MStatusNotification.stories.ts

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MStatusNotification from './MStatusNotification.vue';
+import { action } from '@storybook/addon-actions';
+import MButton from '../button/MButton.vue';
+import MLink from '../link/MLink.vue';
+import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
+
+const meta: Meta<typeof MStatusNotification> = {
+  title: 'Status/Status Notification',
+  component: MStatusNotification,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.',
+      },
+    },
+  },
+  args: {
+    title:
+      'This is a title, be concise and use the description message to give details.',
+    description: 'Description message.',
+  },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MStatusNotification, MButton, MLink, ArrowNext20 },
+    setup() {
+      const handleClick = action('close');
+
+      return { args, handleClick };
+    },
+    template: `
+      <MStatusNotification 
+        v-bind="args"
+        @click="handleClick"
+      >
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+      </MStatusNotification>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStatusNotification>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Closable: Story = {
+  args: { closable: true },
+};
+
+export const WithButton = {
+  args: {
+    footer: `
+      <MButton outlined>Button Label</MButton>
+    `,
+  },
+};
+
+export const WithLink = {
+  args: {
+    footer: `
+      <MLink href="#" iconPosition="right">
+        Stand-alone link
+
+        <template #icon><ArrowNext20 /></template>
+      </MLink>
+    `,
+  },
+};
+
+export const WithButtons = {
+  args: {
+    footer: `
+      <MButton>Button Label</MButton>
+      <MButton outlined>Button Label</MButton>
+    `,
+  },
+};

package/src/components/statusnotification/MStatusNotification.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="mc-status-notification" role="status" :class="classObject">
+    <component
+      :is="iconComponent"
+      class="mc-status-notification__icon"
+      aria-hidden="true"
+    />
+    <div class="mc-status-notification__content">
+      <h2 class="mc-status-notification__title">{{ title }}</h2>
+
+      <p class="mc-status-notification__message">
+        {{ description }}
+      </p>
+
+      <div v-if="$slots.footer" class="mc-status-notification__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+
+    <button
+      v-if="closable"
+      class="mc-status-notification-closable__close"
+      @click="emit('close')"
+    >
+      <Cross20
+        class="mc-status-notification-closable__icon"
+        aria-hidden="true"
+      />
+      <span class="mc-status-notification-closable__text">Close</span>
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
+import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
+import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
+import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';
+import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';
+/**
+ * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Title of the Status Notification
+     */
+    title: string;
+    /**
+     * Description of the Status Notification
+     */
+    description: string;
+    /**
+     * Allows to define the Status Notification style
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+  }>(),
+  {
+    status: 'info',
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert a button or a link in the footer
+   */
+  footer?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-notification--${props.status}`]:
+      props.status && props.status != 'info',
+  };
+});
+
+const iconComponent = computed(() => {
+  switch (props.status) {
+    case 'success':
+      return CheckCircle32;
+    case 'warning':
+      return WarningCircle32;
+    case 'error':
+      return CrossCircle32;
+    case 'info':
+    default:
+      return InfoCircle32;
+  }
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when closing the notification.
+   */
+  (on: 'close'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-notification';
+</style>

package/src/components/textarea/MTextArea.spec.ts

@@ -0,0 +1,112 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MTextArea from './MTextArea.vue';
+
+describe('MTextArea component', () => {
+  it('should render correctly with the given props', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        placeholder: 'Enter text here...',
+        rows: 5,
+        maxLength: 200,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+
+    expect(textarea.attributes('id')).toBe('textarea-id');
+    expect(textarea.attributes('placeholder')).toBe('Enter text here...');
+    expect(textarea.attributes('rows')).toBe('5');
+    expect(textarea.attributes('maxlength')).toBe('200');
+  });
+
+  it('should apply is-invalid class when isInvalid prop is true', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        isInvalid: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.classes()).toContain('is-invalid');
+  });
+
+  it('should update modelValue when the textarea value changes', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    await textarea.setValue('Updated value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+      'Updated value',
+    ]);
+  });
+
+  it('should not allow changes if the textarea is disabled', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+        disabled: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('disabled')).toBeDefined();
+
+    await textarea.setValue('Updated value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
+  });
+
+  it('should be read-only if the readonly prop is true', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+        readonly: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('readonly')).toBeDefined();
+
+    await textarea.setValue('Updated value');
+
+    expect(textarea.attributes('value')).toBe('Initial value');
+  });
+
+  it('should apply a default classObject computed class', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-textarea');
+  });
+
+  it('should correctly bind rows attribute', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        rows: 4,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('rows')).toBe('4');
+  });
+});

package/src/components/textarea/MTextArea.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MTextArea from './MTextArea.vue';
+
+const meta: Meta<typeof MTextArea> = {
+  title: 'Form Elements/Textarea',
+  component: MTextArea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#textarea).',
+      },
+    },
+  },
+  args: {
+    id: 'textareaId',
+    placeholder: 'Placeholder',
+  },
+  render: (args) => ({
+    components: { MTextArea },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MTextArea 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTextArea>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'Value of the textarea component',
+  },
+};
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disabledId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};