@brightspace-ui/core

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

Installation

npm install @brightspace-ui/core

README Index

Components
- Alert: alert components for displaying important information
- Backdrop: component for displaying backdrop behind a target element
- Buttons: normal, primary, icon and subtle buttons
- Colors: color palette
- Dialogs: generic and confirmation dialogs
- Dropdowns: dropdown openers and content containers
- Expand Collapse: component to create expandable and collapsible content
- Focus Trap: generic container that traps focus
- 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
- Menu: menu and menu item 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
- Status Indicator: status-indicator components
- Tabs: tab and tab-panel components
- Tooltip: tooltip components
- Typography: typography styles and components
Helpers
- Helpers: helpers for composed DOM, unique ids, etc.
Mixins
- ArrowKeysMixin: manage focus with arrow keys
- AsyncContainerMixin: manage collective async state
- LocalizeMixin: localize text in your components
- ProviderMixin: provide and consume data across elements in a DI-like fashion
- RtlMixin: enable components to define RTL styles
- VisibleOnAncestorMixin: display element on-hover of an ancestor
Templates
- PrimarySecondaryTemplate: Two Panel (primary and secondary) page template with header and optional footer

Developing

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

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

Running the demos

Start an es-dev-server that hosts the demo pages:

npm start

Linting

# eslint and lit-analyzer
npm run lint

# eslint only
npm run lint:eslint

# lit-analyzer only
npm run lint:lit

Testing

# lint, unit test and visual-diff test
npm test

# unit tests
npm run test:headless

# debug or run a subset of local unit tests
# then navigate to `http://localhost:9876/debug.html`
npm run test:headless:watch

Visual Diff Testing

This repo uses the @brightspace-ui/visual-diff utility to compare current snapshots against a set of golden snapshots stored in source control.

# run visual-diff tests
npm run test:diff

# subset of visual-diff tests:
npm run test:diff -- -g some-pattern

# update visual-diff goldens
npm run test:diff:golden

Golden snapshots in source control must be updated by Travis CI. To trigger an update, press the "Regenerate Goldens" button in the pull request visual-difference test run.

Future Enhancements

Looking for a new component or an enhancement not listed here? Create a GitHub issue!

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.

miadabrin / core