bcgov / design-system-web-components

Web components used for design system

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.