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

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.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MTextArea> = {
     docs: {
       description: {
         component:
-          'A textarea 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#textarea).',
+          '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).',
       },
     },
   },

package/src/components/textinput/MTextInput.stories.ts

@@ -11,7 +11,7 @@ const meta: Meta<typeof MTextInput> = {
     docs: {
       description: {
         component:
-          'Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.<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#input).',
+          'A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<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#input).',
       },
     },
   },

package/src/components/toggle/MToggle.stories.ts

@@ -10,13 +10,13 @@ const meta: Meta<typeof MToggle> = {
     docs: {
       description: {
         component:
-          'A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.',
+          'A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.',
       },
     },
   },
   args: {
     id: 'ToggleId',
-    label: 'Label',
+    label: 'Toggle Label',
   },
   render: (args) => ({
     components: { MToggle },

package/src/components/togglegroup/MToggleGroup.spec.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MToggleGroup from './MToggleGroup.vue';
+import MToggle from '@/components/toggle/MToggle.vue';
+
+describe('MToggleGroup.vue', () => {
+  it('renders toggles based on options', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MToggleGroup, {
+      props: {
+        name: 'test-name',
+        options,
+      },
+    });
+
+    const toggles = wrapper.findAllComponents(MToggle);
+    expect(toggles.length).toBe(2);
+
+    expect(toggles[0].props('label')).toBe('Option 1');
+    expect(toggles[1].props('label')).toBe('Option 2');
+  });
+
+  it('updates modelValue when a toggle is checked', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MToggleGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: [],
+      },
+    });
+
+    const toggle1 = wrapper.findAllComponents(MToggle)[0].find('input');
+    await toggle1.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([['option1']]);
+
+    const toggle2 = wrapper.findAllComponents(MToggle)[1].find('input');
+    await toggle2.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual([
+      ['option1', 'option2'],
+    ]);
+  });
+
+  it('syncs with the v-model when initial value is passed', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MToggleGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: ['option1'],
+      },
+    });
+
+    const toggles = wrapper.findAllComponents(MToggle);
+    expect(toggles[0].props('modelValue')).toBe(true);
+    expect(toggles[1].props('modelValue')).toBe(false);
+
+    await wrapper.setProps({ modelValue: ['option2'] });
+
+    expect(toggles[0].props('modelValue')).toBe(false);
+    expect(toggles[1].props('modelValue')).toBe(true);
+  });
+});

package/src/components/togglegroup/MToggleGroup.stories.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MToggleGroup from './MToggleGroup.vue';
+
+const meta: Meta<typeof MToggleGroup> = {
+  title: 'Form Elements/Toggle Group',
+  component: MToggleGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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#toggle-group).',
+      },
+    },
+  },
+  args: {
+    name: 'toggleGroupName',
+    modelValue: ['toggle2'],
+    options: [
+      {
+        id: 'toggle-01',
+        label: 'Toggle Label',
+        value: 'toggle1',
+      },
+      {
+        id: 'toggle-02',
+        label: 'Toggle Label',
+        value: 'toggle2',
+      },
+      {
+        id: 'toggle-03',
+        label: 'Toggle Label',
+        value: 'toggle3',
+      },
+      {
+        id: 'toggle-04',
+        label: 'Toggle Label',
+        value: 'toggle4',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MToggleGroup },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MToggleGroup 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MToggleGroup>;
+
+export const Default: Story = {};

package/src/components/togglegroup/MToggleGroup.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :class="classObjectContainer">
+    <MToggle
+      v-for="option in options"
+      :id="option.id"
+      :key="option.id"
+      :label="option.label"
+      :is-invalid="option.isInvalid"
+      :name="name"
+      :class="classObjectItem"
+      :model-value="modelValue ? modelValue.includes(option.value) : undefined"
+      :disabled="option.disabled"
+      @update:model-value="(v: boolean) => onChange(v, option.value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import MToggle from '../toggle/MToggle.vue';
+
+/**
+ * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ */
+const props = defineProps<{
+  /**
+   * The name attribute for the toggle element, typically used for form submission.
+   */
+  name: string;
+  /**
+   * Property used to manage the values checked by v-model
+   * (Do not use directly)
+   */
+  modelValue?: Array<string>;
+  /**
+   * list of properties of each toggle of the toggle group
+   */
+  options: Array<{
+    id: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    size?: 's' | 'm';
+  }>;
+  /**
+   * If `true`, make the form element of the group inline.
+   */
+  inline?: boolean;
+}>();
+
+const selectedValue = ref<string[]>([]);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedValue.value = newValue || [];
+  },
+  { immediate: true },
+);
+
+const onChange = (isChecked: boolean, value: string) => {
+  let values = [...selectedValue.value];
+
+  if (isChecked && !values.includes(value)) {
+    values.push(value);
+  } else {
+    values = values.filter((val) => val !== value);
+  }
+
+  emit('update:modelValue', values);
+  selectedValue.value = values;
+};
+
+const classObjectContainer = computed(() => {
+  return {
+    'mc-field__container--inline': props.inline,
+  };
+});
+
+const classObjectItem = computed(() => {
+  return {
+    'mc-field__container--inline__item': props.inline,
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the toggle group value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: Array<string>): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/field';
+</style>

package/src/main.ts

@@ -1,39 +1,22 @@
-import MBadge from './components/badge/MBadge.vue';
-import MButton from './components/button/MButton.vue';
-import MCheckbox from './components/checkbox/MCheckbox.vue';
-import MCheckboxGroup from './components/checkboxgroup/MCheckboxGroup.vue';
-import MField from './components/field/MField.vue';
-import MFieldGroup from './components/fieldgroup/MFieldGroup.vue';
-import MIconButton from './components/iconbutton/MIconButton.vue';
-import MLink from './components/link/MLink.vue';
-import MLoader from './components/loader/MLoader.vue';
-import MOverlay from './components/overlay/MOverlay.vue';
-import MQuantitySelector from './components/quantityselector/MQuantitySelector.vue';
-import MRadio from './components/radio/MRadio.vue';
-import MRadioGroup from './components/radiogroup/MRadioGroup.vue';
-import MSelect from './components/select/MSelect.vue';
-import MStatusBadge from './components/statusbadge/MStatusBadge.vue';
-import MTextArea from './components/textarea/MTextArea.vue';
-import MTextInput from './components/textinput/MTextInput.vue';
-import MToggle from './components/toggle/MToggle.vue';
-
-export {
-  MBadge,
-  MButton,
-  MCheckbox,
-  MCheckboxGroup,
-  MField,
-  MFieldGroup,
-  MIconButton,
-  MLink,
-  MLoader,
-  MOverlay,
-  MQuantitySelector,
-  MRadio,
-  MRadioGroup,
-  MSelect,
-  MStatusBadge,
-  MTextArea,
-  MTextInput,
-  MToggle,
-};
+export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
+export { default as MButton } from './components/button/MButton.vue';
+export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
+export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MField } from './components/field/MField.vue';
+export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
+export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
+export { default as MLink } from './components/link/MLink.vue';
+export { default as MLoader } from './components/loader/MLoader.vue';
+export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
+export { default as MOverlay } from './components/overlay/MOverlay.vue';
+export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
+export { default as MRadio } from './components/radio/MRadio.vue';
+export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
+export { default as MSelect } from './components/select/MSelect.vue';
+export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
+export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
+export { default as MTextArea } from './components/textarea/MTextArea.vue';
+export { default as MTextInput } from './components/textinput/MTextInput.vue';
+export { default as MToggle } from './components/toggle/MToggle.vue';
+export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';

package/src/components/badge/MBadge.spec.ts

@@ -1,16 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import MBadge from './MBadge.vue';
-
-describe('MBadge component', () => {
-  it('renders properly', () => {
-    const wrapper = mount(MBadge, {
-      props: {
-        label: 99,
-      },
-    });
-
-    expect(wrapper.text()).toContain('99');
-  });
-});