@brightspace-ui-labs/checkbox-drawer v2.2.0
@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-drawerUsage
<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, thedetailcontains anexpandCompletepromise 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, thedetailcontains acollapseCompletepromise 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:eslintTesting
# 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:watchRunning the demos
To start an es-dev-server that hosts the demo page and tests:
npm startVersioning 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.