Skip to content

Latest commit

 

History

History
151 lines (117 loc) · 6.79 KB

README.md

File metadata and controls

151 lines (117 loc) · 6.79 KB
Raw

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

@brightspace-ui/core

NPM version NPM downloads

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!