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

package/src/components/usingPresets.mdx

@@ -1,5 +1,4 @@
-import { Meta } from '@storybook/blocks';
-import { Source } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Using Presets" />
 
@@ -31,12 +30,13 @@ Once **Mozaic-Vue** is installed as shown, we can make the following changes:
 All it has to do is insert the following code into its main Sass file (entrypoint stylesheet):
 
 <Source
-  language='css'
+  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`.
@@ -45,12 +45,13 @@ All it has to do is insert the following code into its main Sass file (entrypoin
 For example, for ADEO
 
 <Source
-  language='css'
+  language="css"
   dark
   code={`
 // Entrypoint stylesheet
 @use "@mozaic-ds/tokens/adeo" as *;
-`} />
+`}
+/>
 
 ### 2. Font by brand
 
@@ -65,7 +66,9 @@ The table below summarises which font to use depending on the brand.
   </tr>
   <tr>
     <td>Leroy Merlin</td>
-    <td>[LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)</td>
+    <td>
+      [LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)
+    </td>
   </tr>
   <tr>
     <td>Adeo</td>
@@ -86,7 +89,7 @@ From there, we can update the main style sheet of your project, in order to impo
 @use "@mozaic-ds/styles/tools/t.font" as *;
 
 body {
-  @include set-font-family();
+@include set-font-family();
 }
 `} />
 
@@ -109,7 +112,7 @@ You can do this as follows:
 <Source
   language="bash"
   dark
-  code='cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts'
+  code="cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts"
 />
 
 ### 3. Usage

package/src/main.ts

@@ -2,20 +2,28 @@ 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 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 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';