@mozaic-ds/vue 1.0.0-rc.3 → 2.2.0

package/src/components/usingIcons.mdx

@@ -0,0 +1,35 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<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,128 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<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" />'
+/>

package/src/main.ts

@@ -0,0 +1,33 @@
+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 MDatepicker } from './components/datepicker/MDatepicker.vue';
+export { default as MDivider } from './components/divider/MDivider.vue';
+export { default as MDrawer } from './components/drawer/MDrawer.vue';
+export { default as MField } from './components/field/MField.vue';
+export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
+export { default as MFlag } from './components/flag/MFlag.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 MLoadingOverlay } from './components/loadingoverlay/MLoadingOverlay.vue';
+export { default as MModal } from './components/modal/MModal.vue';
+export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
+export { default as MOverlay } from './components/overlay/MOverlay.vue';
+export { default as MPagination } from './components/pagination/MPagination.vue';
+export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MPincode } from './components/pincode/MPincode.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 MTabs } from './components/tabs/MTabs.vue';
+export { default as MTag } from './components/tag/MTag.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 MTooltip } from './components/tooltip/MTooltip.vue';
+export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';

package/dist/demo.html

@@ -1 +0,0 @@
-<!doctype html><meta charset="utf-8"><title>vue demo</title><script src="./mozaic-vue.adeo.umd.js"></script><link rel="stylesheet" href="./mozaic-vue.adeo.css"><script>console.log(vue)</script>