@brightspace-ui-labs/accordion
v4.0.1
Published
Polymer-based accordion component
Downloads
4,379
Readme
d2l-labs-accordion
Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:
- [ ] Design organization buy-in
- [ ] design.d2l entry
- [ ] Architectural sign-off
- [x] Continuous integration
- [x] Cross-browser testing
- [ ] Unit tests (if applicable)
- [ ] Accessibility tests
- [ ] Visual diff tests
- [x] Localization with Serge (if applicable)
- [x] Demo page
- [ ] README documentation
Polymer-based widget that displays a list of collapsible components. When collapsible component is clicked - it expands or collapses the associated content.
Installation
npm install @brightspace-ui-labs/accordion
Polymer components:
d2l-labs-accordion - accordion panel.
Attributes:
- multi - allows multiple collapsibles to be opened at the same time
- selected - used only if
multi
is disabled. sets item index to be opened by default - selectedValue - used only if
multi
is set. Sets array of indexes for the items to be opened by default - autoClose - expanding any d2l-labs-accordion-collapse child (except those that are disabled) will automatically close other opened children.
d2l-labs-accordion-collapse - accordion component.
Attributes:
- flex - adjust component to the parent width
- noIcons - hide the expand/collapse icon
- opened - container is opened by default. Do not use this attribute when inside the d2l-labs-accordion as the d2l-labs-accordion does not monitor opened state of the items at the start. In this case, use
selected
orselectedValue
d2l-labs-accordion attributes instead. - disabled - container cannot be expanded or collapsed
- disable-default-trigger-focus - disables the default outline added by browsers on trigger focus so custom styles can be added to the component on focus
- headerBorder - show a border between the header and the summary/content
- icon-has-padding - adds padding on one side of the icon.
- When used with 'flex' attribute, the padding will be to the right. (Opposite for RTL)
- Without 'flex' attribute, the padding will be on the left. (Opposite for RTL)
Slots:
- header - content to display under the title
- summary - content that summarizes the data inside the accordion
Example 1:
<d2l-labs-accordion selected="1">
<d2l-labs-accordion-collapse title="Item 1" flex>
Text 1
</d2l-labs-accordion-collapse>
<d2l-labs-accordion-collapse title="Item 2" flex>
Item 3
</d2l-labs-accordion-collapse>
<d2l-labs-accordion-collapse title="Item 3" flex>
Text 3
</d2l-labs-accordion-collapse>
</d2l-labs-accordion>
Example 2:
<d2l-labs-accordion multi selectedValue="[1,2]">
<d2l-labs-accordion-collapse title="Item 1" flex>
Text 1
</d2l-labs-accordion-collapse>
<d2l-labs-accordion-collapse title="Item 2" flex>
Item 3
</d2l-labs-accordion-collapse>
<d2l-labs-accordion-collapse title="Item 3" flex>
Text 3
</d2l-labs-accordion-collapse>
</d2l-labs-accordion>
Example 3:
<d2l-labs-accordion-collapse title="Opened By Default (Flex)" opened flex>
Text 1
</d2l-labs-accordion-collapse>
Example 4:
<d2l-labs-accordion-collapse title="Opened By Default (Regular)" opened>
Text 1
</d2l-labs-accordion-collapse>
Example 5:
<d2l-labs-accordion-collapse flex header-border>
<h2 slot="header">Custom header, summary, border and flex 💪</h2>
<ul slot="summary" style="list-style-type: none; padding-left: 0px;">
<li>Availability starts 4/13/2020 and ends 4/23/2020</li>
<li>One release condition</li>
<li>Special access</li>
</ul>
<p>Stuff inside of the accordion goes here</p>
</d2l-labs-accordion-collapse>
Developing, Testing and Contributing
After cloning the repo, run npm install
to install dependencies.
Linting
# eslint
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
npm run test:headless:watch
Running the demos
To start a @web/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.