OpenBridge Web Components
This is an implementation of the openbridge design system in web components.
Demo
A storybook demo is available here.
How to use the components.
The project can be used directly from npm.
-
Install the package by:
npm install openbridge-web-components -
Install openbridge-css:
npm install openbridge-css -
Include the package in you javascript code (vue/react/angular)
import "openbridge-web-components"; -
Include the openbridge css in your project
openbridge-css/dist/css/openbridge.css -
Set the theme in the html tag, for instance
<html theme="day"> -
Use the components, e.g.,:
`<ob-rudder-medium rudderAngle="5" rudderSetPointAngle="3" clipAngle="60" showPortStarboard="false" showSetPoint="true"/>`
SVG export
There is also a tool for exporting SVG components from Figma. To run the exporter you need to acquire an token here. The exporter generates SVGs. The project also includes WebComponents.
Generated SVGs cleaned Generated SVGs with inline style
How to contribute
We welcome all contributions! This could for instance be bug reports or implementation of components. We accept implementation in all major frameworks, but prefer web-components and vue.js.
Implementation guideline
- Use basic components if possible. For instance use the WatchFace component.
- Export SVG components by defining the component in
src/exports.ts. This ensures that the component works in all palettes. - Center of the SVG viewbox should be (0,0).