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

• NodeJS
• Git

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 using withDesign 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/[email protected]/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