1.0.3-rc.10 • Published 4 years ago
zanichelli-web-components-library v1.0.3-rc.10
Zanichelli - Web Components Library
Zanichelli's design system is widely documented on Zeroheight at this link.
Install
yarn add zanichelli-web-components-library
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-web-components-library
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)
IE / Edge | Firefox | Chrome | Safari |
---|---|---|---|
IE11, Edge | XXXXX | XXXXX | XXXXX |
Usage
import { defineCustomElements as defineComponents } from 'zanichelli-web-components-library/loader';
defineComponents(window);
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
1.0.3-rc.10
4 years ago