README

Mozaic-web-components

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/mozaic-web-components

If you prefer Yarn, use the following command instead:

yarn add @mozaic-ds/mozaic-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/mozaic-web-components/public/components/button/Button.svelte';
// import Mozaic icons as web component
import '@mozaic-ds/mozaic-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/mozaic-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(),
    ]
})

2 - Web Components

// load the full library
import '@mozaic-ds/mozaic-web-components/public/bundle.js';
// or load button as web component 
import '@mozaic-ds/mozaic-web-components/public/components/button/Button.js';
// import Mozaic icons as web component
import '@mozaic-ds/mozaic-web-components/public/icons.js';

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>

Project setup

npm install
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.

Usage no npm install needed!