@brightspace-ui-labs/checkbox-drawer

@brightspace-ui-labs/checkbox-drawer

Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:

• Design organization buy-in
• Architectural sign-off
• Continuous integration
• Cross-browser testing
• Unit tests (if applicable)
• Accessibility tests
• Visual diff tests
• Localization with Serge (if applicable)
• Demo page
• README documentation

The d2l-labs-checkbox-drawer element can be used to get a checkbox with a description. When checked, drawer contents are revealed underneath.

Installation

Install from NPM:

npm install @brightspace-ui-labs/checkbox-drawer

Usage

<script type="module">
    import '@brightspace-ui-labs/checkbox-drawer/checkbox-drawer.js';
</script>
<d2l-labs-checkbox-drawer>
  <p>My drawer content.</p>
</d2l-labs-checkbox-drawer>

Properties:

Property	Type	Description
aria-label	String	Provides context for the component. Must be used if label is not used. Cannot be used with label.
checked	Boolean	True if the checkbox is checked. False if not checked.
description	String	Extra information that is displayed beneath the label. Optionally used when label is used. Cannot be used with aria-label.
label	String	Provides visible information about the component. Must be used if aria-label is not used. Cannot be used with aria-label.

Accessibility:

To make your usage of d2l-labs-checkbox-drawer accessible, use the following properties when applicable:

Attribute	Description
aria-label	Provides context for the component. Must be used if label is not used. Cannot be used with label.

Events:

• d2l-checkbox-drawer-checked-change: dispatched when checkbox's state changes.
• d2l-checkbox-drawer-expand: dispatched when the drawer starts to expand. As per the expand collapse component, the detail contains an expandComplete promise that can be waited on to determine when the content has finished expanding.
• d2l-checkbox-drawer-collapse: dispatched when the drawer starts to collapse. As per the expand collapse component, the detail contains a collapseComplete promise that can be waited on to determine when the content has finished collapsing.

Developing, Testing and Contributing

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

Linting

# eslint and lit-analyzer
npm run lint

# eslint only
npm run lint:eslint

Testing

# lint & run headless unit tests
npm test

# unit tests only
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

Running the demos

To start an es-dev-server that hosts the demo page and tests:

npm start

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.