marie-maxime / design-system

Design system Zanichelli

Zanichelli - Web Components Library

Zanichelli's design system is widely documented on Zeroheight at this link.

Install

yarn add @zanichelli/albe-web-components

Start Library Development Server

yarn start

---

Create a component:

yarn generate component my-component

NB: component name must have a dash (-)

---

Symlink Local Development

Run

yarn link

In the destination project folder run

yarn link @zanichelli/albe-web-components

---

Tests:

Run all tests

yarn test

Run single test

yarn test --spec {componentPath}

Run e2e tests

yarn test.e2e

---

Documentation

In order to correctly import Stencil Components into the Storybook, we need to build the library first. Stencil will generate properties documentation and it will store them in the custom-elements.json which is loaded by Storybook. At the moment, everytime you edit the library sources, you need to rebuild them to get the Storybook updated.

Plugins

• @storybook/addon-a11y
• @storybook/addon-docs
• @storybook/addon-knobs
• @storybook/addon-viewport
• storybook-addons-abstract

Start Storybook:

# Build the library
yarn build
# Start the Storybook
yarn start-storybook

Build Storybook:

# Build the library
yarn build
# Build the Storybook
yarn build-storybook

Developing with Storybook:

Start the Stencil dev server:

yarn start

and, in a separate terminal window, run the Storybook:

yarn start-storybook

---

Build Library package

yarn build

Environment Support

• Modern browsers and Internet Explorer 11 (with polyfills)

Edge	Firefox	Chrome	Safari
> 16.16	> 48	> 69	> 10.0

Usage

CSS Custom Properties

The library provides a global css variables export. You can import the styles by ES6 import:

import '@zanichelli/albe-web-components/www/build/web-components-library.css';

or via link tag:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />

Custom Elements

You can use the library by importing the custom elements from npm package:

import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});

or via a script tag:

<script src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> 

Then use the relative tag as a usual component in your markup.

<section>
  <z-button label="button" type="primary">Click me!</z-button>
</section>

Component definition

Each component is structured as follows:

File name	Description
index-ts	Component markup and UI logics
styles.css	Component styles
index.spec.ts	Component tests
index.stories.mdx	Component storybook file
README.md	Stencil documentation

Roadmap

• 12 6 2020: Publishing repo v 1.0.0