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

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" />'
+/>

package/src/main.ts

@@ -0,0 +1,39 @@
+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,
+};

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>