BCGov Design System Web Components

Install

npm i git+https://github.com/bcgov/design-system-web-components.git

Use with module bundler (Webpack, React, Angular)

Use with CSS

-index.js file

import "core-js/stable"; // makes it ie11 compatible, needs to be first item.
.....
import "@bcgov/web-components/html/dist/bcgov-web-components/bcgov-web-components.css";
import { applyPolyfills, defineCustomElements } from "@bcgov/web-components/html/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Use with SCSS

index.js file

import "core-js/stable"; // makes it ie11 compatible, needs to be first item.
.....
import "@bcgov/web-components/src/components/sass/style.scss";
import { applyPolyfills, defineCustomElements } from "@bcgov/web-components/html/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window);
});

See StencilJS implementation into frameworks

Making IE11 compatable.

npm npm i corejs

package.json file

  "browserslist": [
    "> 1.5%",
    "ie >= 11",
    "edge >= 17"
  ],
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage",
          "corejs": "3.0.0",
          "targets": {
            "esmodules": true,
            "ie": "11"
          }
        }
      ]
    ]
  }

Description

The BCGov Web components was created to give a standard look and feel to meet the criteria of the Design System
Here is how it does it:

Uses a technology call Web Components
Uses a compiler that generates Web Components called StencilJS
Uses a testing framework Jest and Puppeteer.
Uses sass files
Uses Webpack for creating web pages for the Design System.

Accessibility

All components should meet or exceed WCAG 2.0 AA standards Although this is the intention, this is very much a work in progress.

Components

Collapse <bcgov-collapse> Not Implenented
Beta Beta <bcgov-beta>
Button Button <bcgov-button>
Callout Callout bcgov-callout>
Footer Footer <bcgov-footer>
Forms <bcgov-forms><bcgov-radio><bcgov-checkbox> Not Implemented
Header Header <bcgov-header>
- logo
- headline
- skip links for accessibility
Menu Menu <bcgov-menu>
- links
- format (alignment: {left|center|right})
- submenu
- accessibility, and accessibility instructions
Tabs <bcgov-tabs><bcgov-tab> Not Implemented

Development

Builds are known to work with node v15.14.0 and npm v7.7.6.

Tip: npm --no-save install with npm7 will prevent unnecessary package-lock.json changes from needing to be committed back to the repository; not forcing an upgrade for others with npm6.