open-index/open-npm huggingface dataset:
npm package: @jayway/bombardier-ui
Description: This is a draft for a set of reusable components for the Bombardier projects. It is meant as a configurable and extendable toolkit to follow the consistent design language om the Bombardier brand.
Latest version: 0.1.15

# bombardier-ui

This is a draft for a set of reusable components for the Bombardier projects. It is meant as a configurable and extendable toolkit to follow the consistent design language om the Bombardier brand.

## To extend components

All components are basing the design on the CSS custom properties definied in `src/base` and for each component, making it easy to change the design by adding a new css file defining a set of rules like

```css
:root {
  --gap-width-normal: 2rem;
  --button-border-radius: 2rem;
}
```

To understand which components are included in the toolkit and how they can be used, start the styleguide by running `yarn start`.

## Project setup

```bash
yarn install
yarn link
yarn start
```

## In your project where you widh to use the components

### Symlink folder to project

```bash
yarn link bombardier-ui
```

### Install dependencies

```bash
yarn add -D babel-plugin-module-resolver postcss-conditionals postcss-custom-media postcss-import postcss-load-config postcss-mixins postcss-preset-env svg-inline-loader
```

### Create config files

babel.config.js

```js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'babel-plugin-module-resolver',
      {
        alias: {
          ui: 'bombardier-ui/src'
        }
      }
    ]
  ]
}
```

postcss.config.js

```js
module.exports = require('bombardier-ui/postcss.config')
```

vue.config.js

```js
module.exports = {
  runtimeCompiler: true,
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule.use('svg-inline-loader').loade('svg-inline-loader')
  }
}
```

postcss.config.js

```js
module.exports = require('bombardier-ui/postcss.config')
```