This project contains a collection of Svelte and Web Component that implements the Mozaic Design System guidelines.

Getting Started

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

Usage

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 the configFile 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>

Adeo Preset

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

Ressources

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

Project setup

npm ci
npm run build:icons

Compiles and hot-reloads for development

npm run start

Contributing

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.

Contributors