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:
-
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
- Templates
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!