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

npm install @brightspace-ui/core

• 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

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

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

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

npm start

# eslint and lit-analyzer
npm run lint

# eslint only
npm run lint:eslint

# lit-analyzer only
npm run lint:lit

# 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

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.

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

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.