Welcome to the Openbridge Web Components! This readme file provides an overview of the project and its components.
❗Caution❗ This repository is currently in early development and may not be stable. Please use with caution.
Join our slack channel to get the latest updates and to ask questions. Click here to join the slack workspace, and join the #openbridge-webcomponents channel.
We have made an short introduction to the library. You can watch it here
Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components in isolation.
To access the Storybook for this project, click here.
The demo showcases the project's functionality using Vue.js. It provides a live demonstration of the project's features and allows you to interact with the application.
To access the demo, click here.
The CSS file for the palettes is located at packages/openbridge-webcomponents/src/palettes/variables.css.
The file is called variables.css
and contains all the openbridge pallets (bright, day, dusk, night).
It can be used to set the color theme of components.
To select the pallet, set the data-obc-theme
attribute on the html
tag:
<html lang="en" data-obc-theme="day">
The components for this project are implemented in the package/openbridge-webcomponents
folder.
To use the components in your project, you can install the package from npm:
npm install @oicl/openbridge-webcomponents
To use the components in your Vue.js project, you can install the package from npm:
npm install @oicl/openbridge-webcomponents-vue
Add the css file to your project:
import '@oicl/openbridge-webcomponents/src/palettes/variables.css'
Select the pallet by setting the data-obc-theme
attribute on the html
tag:
<html lang="en" data-obc-theme="day">
Install the Noto Sans font by using the attached NotoSans.tff
file. Add the following to your css:
@font-face {
font-family: 'Noto Sans';
src: url('path/to/NotoSans.tff');
}
* {
font-family: Noto Sans;
}
Import the desired components in your project, for instance:
import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js'
or with vue wrapper:
import ObcTopBar from '@oicl/openbridge-webcomponents-vue/components/top-bar/ObcTopBar'
Use the components in your project:
<obc-top-bar></obc-top-bar>
or with vue wrapper:
<ObcTopBar></ObcTopBar>
To get started with the project, follow these steps:
Dev Container: Open Workspace in Container
Select the openbridge-webcomponents.code-workspace
file in the root folder of the repository.
This will open the project in a containerized environment with all the necessary dependencies installed.package/openbridge-webcomponents
folder and run yarn storbook
to start the Storybook development environment.package/vue-demo
folder and run yarn dev
to run the Vue.js demo application.yarn install
in the root folder to install the dependencies.yarn run build:lib
to build all libraries.package/openbridge-webcomponents
folder and run yarn storbook
to start the Storybook development environment.package/vue-demo
folder and run yarn dev
to run the Vue.js demo application.This mono-repo contains the following packages:
openbridge-webcomponents
: The main package containing the web components.openbridge-webcomponents-vue
: A wrapper for the web components to be used in Vue.js projects. It is autogenerated from the openbridge-webcomponents
package.vue-demo
: A demo application showcasing the web components in a Vue.js project.Run yarn format:all
to format the code using Prettier.
We use snapshot testing of the components through storybook. To run the test:
package/openbridge-webcomponents
folder and run yarn storybook
to start storybook.yarn test-storybook
in the package/openbridge-webcomponents
folder to run the tests.Use the yarn test-storybook --watch
command to watch for changes and re-run the tests.
Use the yarn test-storybook -u
command to update the snapshots.
See the CONTRIBUTING.md file for details on how to contribute to this project.