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

package/src/components/passwordinput/MPasswordInput.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="mc-password-input mc-text-input" :class="classObject">
+    <input
+      class="mc-password-input__control mc-text-input__control"
+      v-model="modelValue"
+      :id="id"
+      :type="inputType"
+      :name="name"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="isInvalid"
+      :readonly="readonly"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+    />
+    <div v-if="isClearable && modelValue" class="mc-controls-options">
+      <button
+        class="mc-controls-options__button"
+        @click="clearValue"
+      >
+        <CrossCircleFilled24
+          class="mc-controls-options__icon"
+          aria-hidden="true"
+        />
+        <span class="mc-controls-options__label">{{ clearLabel }}</span>
+      </button>
+    </div>
+    <MButton
+      ref="button"
+      role="switch"
+      :aria-checked="ariaChecked"
+      :disabled="disabled"
+      @click="toggleVisibility"
+      size="s" 
+      ghost
+    >
+      {{ isVisible ? buttonLabel.hide : buttonLabel.show }}
+    </MButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import MButton from '../button/MButton.vue';
+
+/**
+ * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the password input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the password input element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the password input field.
+     */
+    modelValue?: string | number;
+    /**
+     * A placeholder text to show in the password input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the password input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the password input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the password input has a value.
+     */
+    isClearable?: boolean;
+    /**
+     * The label text for the clear button
+     */
+    clearLabel?: string;
+    /**
+     * Labels of the button displayed when showing or hiding the password
+     */
+    buttonLabel?: {
+      show: string;
+      hide: string;
+    };
+  }>(),
+  {
+    clearLabel: 'Clear content',
+    buttonLabel: () => ({ show: 'Show', hide: 'Hide' }),
+  },
+);
+
+const classObject = computed(() => ({
+  'is-invalid': props.isInvalid,
+}));
+
+// Local state management
+const modelValue = ref(props.modelValue);
+const isVisible = ref(false);
+
+/**
+ * Clear the input value.
+ */
+const clearValue = () => {
+  modelValue.value = '';
+  emit('update:modelValue', '');
+};
+
+/**
+ * Toggle the visibility of the password.
+ */
+const toggleVisibility = () => {
+  isVisible.value = !isVisible.value;
+};
+
+/**
+ * Compute the input type based on visibility state.
+ */
+const inputType = computed(() => (isVisible.value ? 'text' : 'password'));
+
+/**
+ * Aria attributes for accessibility.
+ */
+const ariaChecked = computed(() => (isVisible.value ? 'true' : 'false'));
+
+const emit = defineEmits<{
+  /**
+   * Emits when the input value changes, updating the `modelValue` prop.
+   */
+  (on: 'update:modelValue', value: string | number): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/controls-options';
+@use '@mozaic-ds/styles/components/text-input';
+@use '@mozaic-ds/styles/components/password-input';
+</style>

package/src/components/quantityselector/MQuantitySelector.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MQuantitySelector> = {
     docs: {
       description: {
         component:
-          'The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.',
+          'A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.',
       },
     },
   },

package/src/components/radio/MRadio.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MRadio> = {
     docs: {
       description: {
         component:
-          'A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.',
+          'A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.',
       },
     },
   },

package/src/components/radiogroup/MRadioGroup.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MRadioGroup> = {
     docs: {
       description: {
         component:
-          'A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.<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 Group section](/docs/form-elements-field-group--docs#radio%20group).',
+          'A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<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 Group section](/docs/form-elements-field-group--docs#radio-group).',
       },
     },
   },

package/src/components/select/MSelect.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MSelect> = {
     docs: {
       description: {
         component:
-          'A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.<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#select).',
+          'A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<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#select).',
       },
     },
   },

package/src/components/statusbadge/MStatusBadge.stories.ts

@@ -29,17 +29,17 @@ type Story = StoryObj<typeof MStatusBadge>;
 export const Info: Story = {};
 
 export const Success: Story = {
-  args: { appearance: 'success' },
+  args: { status: 'success' },
 };
 
 export const Warning: Story = {
-  args: { appearance: 'warning' },
+  args: { status: 'warning' },
 };
 
-export const Danger: Story = {
-  args: { appearance: 'danger' },
+export const Error: Story = {
+  args: { status: 'error' },
 };
 
 export const Neutral: Story = {
-  args: { appearance: 'neutral' },
+  args: { status: 'neutral' },
 };

package/src/components/statusbadge/MStatusBadge.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="mc-status-badge" :class="classObject">
-    <MStatusDot :appearance="appearance" />
+    <MStatusDot :status="status" />
     <span class="mc-status-badge__label">{{ label }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import MStatusDot from './MStatusDot.vue';
+import MStatusDot from '../statusdot/MStatusDot.vue';
 /**
  * A status badge indicates the status of an entity and can evolve at any time.
  */
@@ -20,17 +20,17 @@ const props = withDefaults(
     /**
      * Allows to define the Status Badge style
      */
-    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
   }>(),
   {
-    appearance: 'info',
+    status: 'info',
   },
 );
 
 const classObject = computed(() => {
   return {
-    [`mc-status-badge--${props.appearance}`]:
-      props.appearance && props.appearance != 'info',
+    [`mc-status-badge--${props.status}`]:
+      props.status && props.status != 'info',
   };
 });
 </script>

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/{statusbadge → statusdot}/MStatusDot.vue

@@ -12,17 +12,21 @@ const props = withDefaults(
     /**
      * Allows to define the Status Dot style
      */
-    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    /**
+     * Determines the size of the Status Dot.
+     */
+    size?: 's' | 'm' | 'l';
   }>(),
   {
-    appearance: 'info',
+    status: 'info',
   },
 );
 
 const classObject = computed(() => {
   return {
-    [`mc-status-dot--${props.appearance}`]:
-      props.appearance && props.appearance != 'info',
+    [`mc-status-dot--${props.status}`]: props.status && props.status != 'info',
+    [`mc-status-dot--${props.size}`]: props.size && props.size != 'm',
   };
 });
 </script>

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>