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

: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

yarn install
yarn link
yarn start

In your project where you widh to use the components

Symlink folder to project

yarn link bombardier-ui

Install dependencies

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

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

postcss.config.js

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

vue.config.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

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