SHUI Web Components
Beginning of the core component library, following the SHUI Style Guide. It's a selection of self-contained Web Components, ready to be used standalone or integrated in any JS library/framework that is able to render into the DOM.
Use it for prototyping and (in the future) in production.
List of components
Why web components?
Web components lets us encapsulate opinionated HTML/CSS/JS into standardized HTML elements. This allows different approaches to developing common components, while offering a familiar way of using them. As it is a standard W3 specification, it requires no dependency management in order to render the components. Once included, it just works.
Reading material:
- Custom Elements v1: Reusable Web Components (Google)
- What are web components?
- more best practices and reasoning
Desktop vs. Touch
Components are aware of the device context, which means the same ones can be used on desktop or touch devices. We want to make sure the core of the component is shared and build whatever adaptations are needed directly into it.
Installation
NPM module
The library can be installed as a dependency through NPM.
npm install @ideo/shui-components --save
Then include it into your pipeline:
// ES6;;or
// ES5;;or
<!-- HTML --><script src="/node_modules/@ideo/shui-components/shui-components.js"></script><link rel="stylesheet" type="text/css" href="/node_modules/@ideo/shui-components/shui-components.css">or even some other way. Whatever you prefer.
Standalone
Find the library files in /dist folder and include them like you see in examples above. Make sure to update the path so it points to the correct files.
Usage
Components get defined as HTML Custom elements as soon as the library loads. Now you should be able to use it in the <body> of your HTML file, or within the DOM rendering function of your frontend framework of choice. If you know HTML, the syntax should look familiar:
<sh-component-name attr="value">Children</sh-component-name>Development
To serve public/index.html, start the development server:
$ npm start
Structure
src
└─── sh-component-name
└─── src
│ └─── sh-component-name.css
│ └─── sh-component-name.js
└─── example
│ └─── sh-component-name.html
└─── tests
└─── TBD
└─── README.md
└─── ...
Templates
We've created a React-flavored web component template for developing new components. To create a component that encapsulates another technology, create another template by using this one as a base.
Testing
To do.
Building
$ npm run build
Publishing
To build the production library, deploy examples, update the version and publish the package on NPM, run:
$ npm run publish
Browser support
Out of the box we support all modern browsers (Chrome, Firefox, Safari, Edge). It should work in IE11 too, however there is no guarantee it will render properly.
Components are packaged as Web components following the Custom Elements v1 (check support) specification. It has become very stable recently and is currently heavily supported by the Google Chrome team.
In case the browser you are targeting is not yet supported, consider including these polyfills.
NOTE: Currently the library comes bundled with webcomponents-hi-ce polyfill. This will probably be removed in the future.