@brightspace-ui-labs/accordion

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 or selectedValue 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.