Are you a D2L employee? Use our 🎉 Daylight Design System site!

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
  • Breadcrumbs: component to help users understand where they are within an application
  • Backdrop: component for displaying backdrop behind a target element
  • Buttons: normal, primary, icon and subtle buttons
  • Calendar: calendar component
  • Card: card components
  • Colors: color palette
  • Dialogs: generic and confirmation dialogs
  • Dropdowns: dropdown openers and content containers
  • Expand Collapse: component to create expandable and collapsible content
  • Filter: single or multi-dimensional filter component
  • Focus Trap: generic container that traps focus
  • Forms: aggregate data for submission and validation
  • Hierarchical View: nested container component that shows the active container
  • HTML Block: component for rendering user-authored HTML
  • Icons: iconography SVGs and web components
  • Inputs:
    • Checkbox: checkbox components and styles
    • Date and time: date and time picker components including ranges
    • Number: numeric input components
    • Radio: radio input styles
    • Search: search input component
    • Select styles: select input styles
    • Text: text input component and styles
  • 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
  • Selection: components for selection and bulk actions
  • Scroll Wrapper: arrows to scroll content horizontally
  • Skeleton: apply low-fidelity skeletons to your application as it loads
  • Status Indicator: status-indicator components
  • Switch: switch component with on/off semantics
  • Table: table styles, column sorting and overflow handling
  • Tabs: tab and tab-panel components
  • Tag List: tag-list and tag-list-item components
  • Tooltip: tooltip components
  • Typography: typography styles and components
  • Validation: plugin custom validation logic to native and custom form elements
• Controllers
  • Subscriber: for managing a registry of subscribers in a many-to-many relationship
• Directives
  • Animate: animate showing, hiding and removal of elements
• Helpers
  • Helpers: helpers for composed DOM, unique ids, etc.
• Mixins
  • ArrowKeysMixin: manage focus with arrow keys
  • AsyncContainerMixin: manage collective async state
  • FocusMixin: delegate focus to a nested element when focus() is called
  • FocusVisiblePolyfillMixin: components can use the :focus-visible pseudo-class polyfill
  • FormElementMixin: allow components to participate in forms and validation
  • InteractiveMixin: enables toggling interactive elements inside of nested grids
  • LabelledMixin: label custom elements by referencing elements across DOM scopes
  • 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
  • SkeletonMixin: make components skeleton-aware
  • 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 a @web/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 tests and axe tests
npm test

# unit tests
npm run test:headless

# debug or run a subset of local unit tests
npm run test:headless:watch

Note: The axe tests require prefers-reduced-motion emulation to be turned on in the dev console if debugging in a local browser.

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

The golden snapshots in source control must be updated by the visual-diff GitHub Action. If a pull request results in visual differences, a draft pull request with the new goldens will automatically be opened against its branch.

To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:

npm install @brightspace-ui/visual-diff@X mocha@Y puppeteer@Z  --no-save

Replace X, Y and Z with the current versions the action is using.

Then run the tests:

# run visual-diff tests
npx mocha './**/*.visual-diff.js' -t 10000
# subset of visual-diff tests:
npx mocha './**/*.visual-diff.js' -t 10000 -g some-pattern
# update visual-diff goldens
npx mocha './**/*.visual-diff.js' -t 10000 --golden

TL;DR: Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main. Read on for more details...

The semantic-release GitHub Action is called from the release.yml GitHub Action workflow to handle version changes and releasing.

All version changes should obey semantic versioning rules:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards compatible manner, and
3. PATCH version when you make backwards compatible bug fixes.

The next version number will be determined from the commit messages since the previous release. Our semantic-release configuration uses the Angular convention when analyzing commits:

• Commits which are prefixed with fix: or perf: will trigger a patch release. Example: fix: validate input before using
• Commits which are prefixed with feat: will trigger a minor release. Example: feat: add toggle() method
• To trigger a MAJOR release, include BREAKING CHANGE: with a space or two newlines in the footer of the commit message
• Other suggested prefixes which will NOT trigger a release: build:, ci:, docs:, style:, refactor: and test:. Example: docs: adding README for new component

To revert a change, add the revert: prefix to the original commit message. This will cause the reverted change to be omitted from the release notes. Example: revert: fix: validate input before using.

When a release is triggered, it will:

• Update the version in package.json
• Tag the commit
• Create a GitHub release (including release notes)
• Deploy a new package to NPM

Occasionally you'll want to backport a feature or bug fix to an older release. semantic-release refers to these as maintenance branches.

Maintenance branch names should be of the form: +([0-9])?(.{+([0-9]),x}).x.

Regular expressions are complicated, but this essentially means branch names should look like:

• 1.15.x for patch releases on top of the 1.15 release (after version 1.16 exists)
• 2.x for feature releases on top of the 2 release (after version 3 exists)

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