This package has been deprecated

Author message:

This package was renamed to @bcc-code/design-library-vue

@bcc-code/vue-components

BCC Design System Components

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

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

@bcc-code/vue-components

Installation & Usage

Refer to the documentation for installation instructions and to Storybook for interactive example of the components and their variants.

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.

Building for production

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

pnpm build

Releasing a new version

Only maintainers who can push to the main branch can currently release new versions.

To create a new version, don't use npm version but run the custom version script. This passes the version argument to npm version, so you use it like that command. For example, to update from v0.12.0 to v0.13.0:

./scripts/version.sh minor

This will update both the root package.json as well as the css-package/package.json, and create a Git commit with a tag pointing to it. Then, push this commit:

git push --follow-tags

This will create a new release in GitHub. Maintainers can publish this release, after which the new version will be pushed to npm with the latest tag.

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.