npm package: @mozaic-ds/mozaic-web-components
Description: Mozaic-Web-Components is the web component Mozaic DS implementation
Latest version: 1.0.0-rc.45
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<h1 align="center">
    Mozaic-web-components
</h1>

> This project contains a collection of Svelte and Web Component that implements the [Mozaic Design System](https://github.com/adeo/mozaic-design-system) guidelines.

<p align="center">
  <a href="https://github.com/adeo/mozaic-web-components/blob/master/.eslintrc.js">
    <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)" alt="Prettier badge" />
  </a>
  <a href="https://github.com/adeo/mozaic-web-components/issues">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" />
  </a>
</p>

# Getting Started
All the available components are showcased in our [Storybook](https://ubiquitous-giggle-7b5b6e33.pages.github.io/?path=/story/components-button--solid). 

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:
```js 
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. 

```js
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(),
	]
})
```

**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](https://mozaic.adeo.cloud/GetStarted/Developers/Installation/postcss/)

2 - Web Components

Import component gloabally: 
```js 
// load the full library
import '@mozaic-ds/mozaic-web-components/public/bundle.js';
// import Mozaic icons as web component
import '@mozaic-ds/mozaic-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:

```js 
// In the entry point file of your application - usually src/main.js

import Button from '@mozaic-ds/mozaic-web-components/public/components/button/Button.js';
if (!customElements.get('m-button')) {
  customElements.define('m-button', Button);  
}
// For icons
import ArrowArrowRight16 from '@mozaic-ds/mozaic-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:

```html
   <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:

```js
import '@mozaic-ds/mozaic-web-components/public/adeo/...';
```
> NOTE: This is for global or individual imports

## 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](https://github.com/adeo/mozaic-web-components/wiki/Contributing).