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

@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
  • 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, subtle, and toggle 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
  • 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
  • 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

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 a @web/dev-server that hosts the demo pages:

npm start

D2L employees can also view the latest main-branch demos at https://live.d2l.dev/BrightspaceUI/core/.

Linting

# eslint and stylelint
npm run lint

# eslint only
npm run lint:eslint

# stylelint only
npm run lint:style

Testing

To run the full suite of tests:

npm test

Alternatively, tests can be selectively run:

# unit tests
npm run test:unit

# aXe accessibility tests
npm run test:axe

# translations tests
npm run test:translations

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 @brightspace-ui/testing's vdiff command to perform visual regression testing:

# vdiff
npm run test:vdiff

# re-generate goldens
npm run test:vdiff -- --golden

Versioning and Releasing

This repo is configured to use semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main.

To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.

Future Enhancements

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