This project contains a collection of Svelte and Web Component that implements the Mozaic Design System guidelines.
All the available components are showcased in our Storybook.
To install mozaic web-components
in your project, you will need to run the following command using npm
:
npm install --save @mozaic-ds/web-components
If you prefer Yarn
, use the following command instead:
yarn add @mozaic-ds/web-components
Our library is available in a Svelte and in a Web Component version.
1 - Svelte
Import the Button component:
import Button from '@mozaic-ds/web-components/public/components/button/Button.svelte';
// import Mozaic icons as web component
import '@mozaic-ds/web-components/public/icons.js';
To avoid declaring the Svelte components as Web Component, you need to change a little your rollup.config.js
file.
svelte({
include:
'node_modules/@mozaic-ds/web-components/public/components/**/*.svelte',
preprocess: [
postcss({
syntax: scssSyntax,
plugins: pluginList,
}),
autoPreprocess(),
],
compilerOptions: {
customElement: false /* Important to set it to false value */,
},
}),
svelte({
include: 'src/**/*.svelte',
preprocess: [
postcss({
syntax: scssSyntax,
plugins: pluginList,
}),
autoPreprocess(),
],
});
NB:
- If your project uses TypeScript, you have any TS error, you can externalize your configuration in
svelte-xxx.config.js
thanks to theconfigFile
property. - check the PostCSS installation
2 - Web Components
Import component gloabally:
// load the full library
import '@mozaic-ds/web-components/public/bundle.js';
// import Mozaic icons as web component
import '@mozaic-ds/web-components/public/icons.js';
Import component individually:
If you do not want to use all the components of the library, but only some of them, you can proceed as follows:
// In the entry point file of your application - usually src/main.js
import Button from '@mozaic-ds/web-components/public/components/button/Button.js';
if (!customElements.get('m-button')) {
customElements.define('m-button', Button);
}
// For icons
import ArrowArrowRight16 from '@mozaic-ds/web-components/public/icons/ArrowArrowRight16.js';
if (!customElements.get('navigation-arrow-arrow--right-16px')) {
customElements.define(
'navigation-arrow-arrow--right-16px',
ArrowArrowRight16,
);
}
Once you've imported the component, you can use our components in the same manner as native HTML tags, for example:
<m-ratings
size="s"
value="3"
suffixlabel="7 reviews"
a11ylabel="Global score: 4/5"
></m-ratings>
<m-button label="Label" size="m"></m-button>
In order to use Mozaic web components with Adeo preset, you have to import a specific path:
import '@mozaic-ds/web-components/public/adeo/...';
NOTE: This is for global or individual imports
To learn more about the web components approach, we've written a couple of articles:
Web Components: Learnings From ADEO Design System
ADEO Design System: Building a Web Component library with Svelte and Rollup
npm ci
npm run build:icons
npm run start
We're always looking for contributors to help us fix bugs, build features, or help us improve the documentation. If you're intersted chec out our Contribution Guide.