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

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MToggle from './MToggle.vue';
+
+const meta: Meta<typeof MToggle> = {
+  title: 'Form Elements/Toggle',
+  component: MToggle,
+  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.',
+      },
+    },
+  },
+  args: {
+    id: 'ToggleId',
+    label: 'Toggle Label',
+  },
+  render: (args) => ({
+    components: { MToggle },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MToggle 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MToggle>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+    id: 'checkedId',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    id: 'disabledId',
+  },
+};
+
+export const Size: Story = {
+  args: {
+    id: 'sizeId',
+    size: 's',
+  },
+};
+
+export const HideLabel: Story = {
+  args: {
+    id: 'hideLabelId',
+    label: undefined,
+    ariaLabel: 'Label',
+  },
+};

package/src/components/toggle/MToggle.vue

@@ -1,117 +1,77 @@
 <template>
-  <div class="mc-toggle" :class="setClasses">
-    <input
-      :id="id"
-      :name="name"
-      type="checkbox"
-      class="mc-toggle__input"
-      :checked="checked"
-      :disabled="disabled"
-      @change="$emit('change', $event.target.checked)"
-    />
-    <label :for="id" class="mc-toggle__label">
-      <span class="mc-toggle__content">
+  <div class="mc-toggle" :class="classObject">
+    <label class="mc-toggle__container" :for="id">
+      <input
+        :id="id"
+        type="checkbox"
+        class="mc-toggle__input"
+        :name="name"
+        :checked="modelValue"
+        :disabled="disabled"
+        v-bind="$attrs"
+        @change="
+          emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+        "
+      />
+      <span v-if="label" :for="id" class="mc-toggle__label">
         {{ label }}
-        <span
-          v-if="stateLabelOff && stateLabelOn"
-          class="mc-toggle__state"
-          aria-hidden="true"
-        >
-          <span class="mc-toggle__off">{{ stateLabelOff }}</span>
-          <span class="mc-toggle__on">{{ stateLabelOn }}</span>
-        </span>
       </span>
     </label>
   </div>
 </template>
 
-<script>
-import {
-  responsiveModifierValidators,
-  responsiveModifiers,
-} from '../../utils/mozaicClasses';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default {
-  name: 'MToggle',
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => responsiveModifierValidators(value, ['s', 'm']),
-    },
-    // Experimental solution waiting on this issue https://github.com/adeo/mozaic-vue/issues/52
-    responsiveSizeModifiers: {
-      type: Array,
-      default: null,
-      validator: (array) =>
-        array.every((e) =>
-          responsiveModifierValidators(e, [
-            's@from-m',
-            's@from-l',
-            's@from-xl',
-            's@from-xxl',
-            'm@from-m',
-            'm@from-l',
-            'm@from-xl',
-            'm@from-xxl',
-          ])
-        ),
-    },
-    stateLabelOff: {
-      type: String,
-      default: null,
-    },
-    stateLabelOn: {
-      type: String,
-      default: null,
-    },
+/**
+ * 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 = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the toggle, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the toggle.
+     */
+    label?: string;
+    /**
+     * The toggle's checked state, bound via v-model.
+     */
+    modelValue?: boolean;
+    /**
+     * Determines the size of the toggle
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, disables the toggle, making it non-interactive.
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    size: 's',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.size) {
-        classes.push(`mc-toggle--${this.size}`);
-      }
+const classObject = computed(() => {
+  return {
+    [`mc-toggle--${props.size}`]: props.size && props.size != 's',
+  };
+});
 
-      if (
-        this.responsiveSizeModifiers &&
-        this.responsiveSizeModifiers.length > 0
-      ) {
-        for (const modifier of this.responsiveSizeModifiers) {
-          responsiveModifiers('mc-toggle', modifier, classes);
-        }
-      }
-
-      return classes;
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the toggle value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.toggle';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/toggle';
 </style>

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/components/usingIcons.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+
+<Meta title="Using Icons" />
+
+# Using Icons
+
+To use icons in Vue applications, you need to install a dedicated package.
+
+You must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/icons-vue):
+
+<Source
+  language="bash"
+  dark
+  code="npm install @mozaic-ds/icons-vue"
+/>
+
+Or with **Yarn**:
+
+<Source
+  language="bash"
+  dark
+  code="yarn add @mozaic-ds/icons-vue"
+/>
+
+You can then start importing the icon of your choice into your Vue component:
+
+<Source
+  language='html'
+  dark
+  code={`
+// In one of the .vue file of your application
+
+<template>
+  <A11y20 fill="#333" />
+</template>
+
+<script setup>
+import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
+</script>
+`} />
+
+[The full list of icons is available here](https://github.com/adeo/mozaic-icons-vue/tree/main/src/components).

package/src/components/usingPresets.mdx

@@ -0,0 +1,125 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+
+<Meta title="Using Presets" />
+
+# Mozaic's presets
+
+**Mozaic** is a **multi-brand** design system.<br/>
+This means that it is fully customisable so that its constituent elements _(foundations, components, etc.)_ can be adapted to the graphic charter of the brand that uses it.
+
+To simplify this aspect of customising **Mozaic** for you, we have created themes _(which we also call **"presets"**)_ ready to use according to your context of use.
+
+Currently **Mozaic** can be customized with the following presets:
+
+- Preset **Leroy Merlin**: this is the default preset/theme configured when **Mozaic** was first installed
+- Preset **Adeo**: dedicated to the **Adeo Group's** internal interfaces and products
+- Preset **Bricoman**: dedicated to the interfaces and products of the **Bricoman** brand
+
+The rest of this documentation shows you how to use/install the Adeo preset in your project.
+
+> Note that the procedure remains the same for all other presets.<br/> You just need to replace all references to "Adeo" with the brand name of your choice.
+
+## Using the Adeo's preset
+
+Before anything else, make sure you have followed the **Mozaic-Vue** installation procedure as described in the [Getting Started](?path=/docs/getting-started--docs) page.
+
+Once **Mozaic-Vue** is installed as shown, we can make the following changes:
+
+### 1. Loading preset
+
+All it has to do is insert the following code into its main Sass file (entrypoint stylesheet):
+
+<Source
+  language='css'
+  dark
+  code={`
+// Entrypoint stylesheet
+@use "@mozaic-ds/tokens/<presetName>" as *;
+`} />
+
+> [!NOTE]
+> The `<presetName>` string should be replaced by the name of the preset you want, one of the following values: `adeo | enki | mbrand`.
+> As the `leroymerlin` preset is the default preset, you don't need to use this syntax to use it.
+
+For example, for ADEO
+
+<Source
+  language='css'
+  dark
+  code={`
+// Entrypoint stylesheet
+@use "@mozaic-ds/tokens/adeo" as *;
+`} />
+
+### 2. Font by brand
+
+Each brand is distinguished not only by different styles but also by a different font.
+
+The table below summarises which font to use depending on the brand.
+
+<table>
+  <tr>
+    <td>Brand</td>
+    <td>Font</td>
+  </tr>
+  <tr>
+    <td>Leroy Merlin</td>
+    <td>[LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)</td>
+  </tr>
+  <tr>
+    <td>Adeo</td>
+    <td>[Roboto](https://fonts.google.com/specimen/Roboto)</td>
+  </tr>
+  <tr>
+    <td>Bricoman</td>
+    <td>[Inter](https://fonts.google.com/specimen/Inter)</td>
+  </tr>
+</table>
+
+From there, we can update the main style sheet of your project, in order to import the right font.
+
+<Source
+  language='css'
+  dark
+  code={`
+@use "@mozaic-ds/styles/tools/t.font" as *;
+
+body {
+  @include set-font-family();
+}
+`} />
+
+Specific for LM fonts
+
+> This section describes the use of fonts for the **Leroy Merlin** preset, but if you are using another preset, please see [the associated documentation](?path=/docs/using-presets--docs).
+
+The theme defined by default when **Mozaic-Vue** is first installed/used is the theme corresponding to the **Leroy Merlin** charter.
+
+For any use of the **Leroy Merlin** theme, it is recommended to use the font [LeroyMerlinSans](/typography/font-families/) which has been specially designed for **Leroy Merlin** products.
+
+To use the `LeroyMerlinSans` font in your project, you must copy it into your project so that it is present in your `assets`.
+
+You can do this as follows:
+
+1. Create a folder in your project where you can save the fonts, for example: `static/assets/fonts`
+
+2. Copy fonts from Mozaic dependencies:
+
+<Source
+  language="bash"
+  dark
+  code='cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts'
+/>
+
+### 3. Usage
+
+At this stage, the integration of the **Mozaic-Vue** components should normally be customised with the preset values.
+
+All that remains is to use the components as usual:
+
+<Source
+  language="html"
+  dark
+  code='<MButton label="This is a Mozaic Button" />'
+/>