Design System Core
This package is based off the stenciljs component library starter.
This package is responsible for:
- Development of shared web-components under
./src/components/
- Building of framework specific wrappers under
../frameworks
- Building of distributable web-components under
./dist
There are also utilities for publishing to an internal npm repository.
Requirements
Development
npm install
npm start
To build the component for production, run:
npm run build
To run the unit tests for the components, run:
npm test
For further information check out StencilJS Docs.
Storybook
npm run storybook
To connect a figma document to a story, you must add this to the parameters
key in the default export of the story file:
design: {
type: "figma",
url: "<figma-file-url>",
}
The
Design
tab will then read this configuration to populate it's content. The design tab is enabled for all stories usingwithDesign
global parameters.
Naming Components
We prefix all components with eci-
Using this component
There are three strategies we recommend for using web components built with Stencil.
The first step for all three of these strategies is to publish to NPM.
Elements can be directly loaded (with a bundler) via eci-cygnus/components/my-component'. Alternatively (not recommended), you may use lazy loading by requiring
eci-cygnus/loader/` and use the components in your markup which will then be lazy loaded via network request. This will cause a flash of unstyled component and is thus not recommended generally.
Script tag
- Put a script tag similar to this
<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Node Modules
- Run
npm install eci-cygnus --save
- Put a script tag similar to this
<script type='module' src='node_modules/eci-cygnus/dist/my-component.esm.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc