BI Web components

This is a proof of concept library that illustrates how one can use web components in combination with Figma tokens to implement a design system.

Getting started

In your head-section in your html, just paste the following script:

<script type="module" src="https://cdn.jsdelivr.net/npm/bi-web-components@latest/dist/bi-web-components/bi-web-components.esm.js"></script>

this will make all components available in your project.

Components

There are several components available, see all here.

Frameworks

This component library is made using stencil js, which easily allows transforming web components to other frameworks such as react. See our library for react here.

Developer Guidelines

Pull Requests

• Stories should be included. If it does not exist, create one. If it exists, make sure your updates to the component are reflected in Storybook.

Code style

We want:

• Install Prettier extension to VSCode and make it format code on save.
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Use colors helpers where it makes sense.
• Use color names from the design system.
• Add space props to the component if it is not already there.
• Types and interfaces should be Capitalized. Const and functions should be camelCased.
• Create types that can be reused other places. Ex: Sizes, Colors, Spacing etc.
• Bonus: Add doc strings to component props.

Avoids:

• Avoid abbreviations.
• Avoid using HTML Id (#) property if possible. If used, it should always be passed as a component prop, and never hard coded.
• Avoid using !important when writing CSS.

Stories

• All the components should lie in the stories/Component Library
• Use the command npm run create-story <NAME OF COMPONENT> in /packages/lib/ to create a story and parent folder using a template.
• Use folders to contain the different files related to a story. Keep it clean.
• If the component you're writing a story for has a figma sketch, please add it to the <NAME OF COMPONENT>.stories.ts file, for an example see the story for BiButton

How to run Storybook locally

First run npm run start-sb which watches files during development and triggers a rebuild when files are updated. Then, in a second tab, run npm run storybook to run Storybook which opens a new tab in your browser at http://localhost:6006/.

Now, updates you make in the components locally will reflect in the Storybook immediately.