@brightspace-ui/core

core

A collection of accessible, free, open-source web components for building Brightspace applications.

Installation

To install from NPM:

npm install @brightspace-ui/core

Components

• Buttons: normal, primary, icon and subtle buttons
• Colors: color palette
• Dialogs: generic and confirmation dialogs
• Icons: iconography SVGs and web components
• Inputs: text, search, select, checkbox and radio inputs
• Links: link component and styles
• List: list and list-item components
• Loading Spinner: loading-spinner components
• Meter: linear, radial, circle meter web components
• More/less: constrain long bits of content
• Off-screen: component and styles for positioning content off-screen
• Typography: typography styles and components

Helpers

• Helpers: helpers for composed DOM, unique ids, etc.

Mixins

• ArrowKeysMixin: manage focus with arrow keys
• LocalizeMixin: localize text and format & parse numbers, dates, etc.
• RtlMixin: enable components to define RTL styles
• VisibleOnAncestorMixin: display element on-hover of an ancestor

Usage

Structure

/components/ - Web components for use in your composite components or application (ex. buttons, links, etc)

/helpers/ - Helpers for use in your web components or mixins (ex. composed DOM helpers)

/mixins/ - Mixins for use in your web components (ex. localize, RTL, etc)

/test/ - Index and shared styles for unit tests

/tools/ - Development tools for building, testing, etc.

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

Run npm run build once, or any time icon or language files are changed.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

Running the demos

To start a local web server that hosts the demo page and tests:

polymer serve

Testing

To lint:

npm run lint

To run visual-diff tests:

npm run test:diff

To run a subset of visual-diff tests:

npm run test:diff -- -g some-pattern

To update visual-diff goldens:

npm run test:diff:golden

To update the visual-diff goldens in Github using Travis (through triggering a build on the current branch):

npm run build && npm run test:diff:golden && npm run test:diff:golden:commit

To run local unit tests:

npm run test:local

To run a subset of local unit tests, modify your local index.html, or start the dev server and navigate to the desired test page.

To run linting, visual-diff, and unit tests:

npm test

Versioning, Releasing & Deploying

All version changes should obey semantic versioning rules.

Include either [increment major], [increment minor] or [increment patch] in your merge commit message to automatically increment the package.json version, create a tag, and trigger a deployment to NPM.