CWS Web Components

This is the CWS Web Components library

Using this component library

Script tag

• Put a script tag <script src='https://unpkg.com/cws-web-components@latest/dist/cws-web-components.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 cws-web-components --save
• Put a script <script src='node_modules/cws-web-components/dist/cws-web-components.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install cws-web-components --save
• Add an import to the npm packages import cws-web-components;
• Then you can use the element anywhere in your template, JSX, html etc

Required Tokens (CSS vars)

All components was built using CSS vars to be styled. So to use this library, all of these CSS varibles must exist in your application.

To set these variables you can:

1. Create a CSS file with all default variables (like the example below);
2. Or use cws-theme-tokens to set dynamic CSS variables (from API, database etc.);

• Click here to see a stylesheet example..
• Click here to see an HTML file using the cws-theme-tokens..

Available Scripts

npm start

Start development server

npm run generate [component-type] [component-name]

Example to generate a new cws-field web component:

npm run generate component cws-field

It will create all file structure inside src/components/cws-field to start development a new web component

Naming Components

When creating new component tags, is required to use cws- prefix. Ex: cws-button, cws-field, cws-icon, cws-accordion...

npm run build

Build the components to deploy

npm test

To run the unit tests for the components