/design-system-web-components

Web components used for design system

Primary LanguageTypeScriptApache License 2.0Apache-2.0

img

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);
});

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.