BCC Design System Library

This library is a collection of tokens and components that conform to the BCC Design System.

Note This is the Vue implementation, for the CSS-only library see here

@bcc-code/design-library-vue

Installation & Usage

Refer to the documentation for installation instructions and to Storybook for interactive example of the components and their variants (view the dev Storybook for unreleased changes).

Developing the package locally

Recommended IDE Setup

VSCode with the following plugins:

• Volar
• TypeScript Vue Plugin (Volar).
• ESLint
• Tailwind CSS Intellisense

Prerequisites

This project uses pnpm, which you need to install before usage. The easiest way is to install it with npm:

npm install -g pnpm

Get started

Install dependencies:

pnpm install --frozen-lockfile

Then run Storybook when developing components to have a live reloading server to test them:

pnpm storybook

Run a live reloading unit test server:

pnpm test:unit

Some unit test use snapshots. Be sure to update snapshots after updating a component that has such a test:

pnpm test:unit:update-snapshots

Creating a new component

The repository contains a handy script for scaffolding a new component:

pnpm create-component ComponentName

This will create a Vue component, with accompanying test, stories and CSS files, and will also update the exports for the library.

Linting

This project includes a linting setup via ESLint, which includes Prettier. The linting settings are intentionally strict, and all Prettier alerts are treated as errors. This ensures the code is always formatted in the same way.

When using VS Code, install the ESLint plugin and make sure it is set to format on save, or manually add this to your VS Code settings:

  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },

You can manually run the linting command as well to check for linting errors:

pnpm lint

This command is also run in CI and will fail the build if there are any errors.

Errors can be automatically fixed by running

pnpm lint:fix

Building for production

To build the package for production, including types, run:

pnpm build

Releasing a new version

A new version can be released by running the Create New Version workflow from GitHub. This will update the version in the package.json, push a Git commit and tag, and create a new release in GitHub. Maintainers can publish this release, after which the new version will be pushed to npm.

Beta release

If the channel in the release workflow is set to beta, the release version will be tagged with beta. The first time the increment is taken into account, so a major beta release for v1.8.0 will create v2.0.0-beta.0, and a minor beta will create v1.9.0-beta.0. Every subsequent beta release will ignore the version and just increase the beta number, until a new release version is created, which will release the beta version as-is, so a major release for v2.0.0-beta.4 will release v2.0.0.

Dev releases

All commits to main will be released under the dev tag on npm, so they can be tested and installed immediately even if a new release hasn't come out.

Tokens

This repository includes a setup with tokens from the design system. These tokens are exported from Figma and can be found in src/tokens/input/figma.json.

To build the tokens from this source file, run:

pnpm build:tailwind

This will update the files of the Tailwind theme which can then be checked into Git.

License

This package is licensed under the Apache 2.0 license.