New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@brightspace-ui-labs/accordion
Advanced tools
@brightspace-ui-labs/accordion - npm Package Compare versions
Comparing version 4.0.1 to 4.1.0
@@ -7,2 +7,3 @@ import '@polymer/polymer/polymer-legacy.js'; | ||
| import { findComposedAncestor, isComposedAncestor } from '@brightspace-ui/core/helpers/dom.js'; | ||
| import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
@@ -17,2 +18,6 @@ const $_documentContainer = document.createElement('template'); | ||
| } | ||
| #interactive-header-content{ | ||
| @apply --layout-horizontal; | ||
| @apply --layout-center; | ||
| } | ||
| #trigger { | ||
@@ -98,10 +103,43 @@ @apply --layout-horizontal; | ||
| </style> | ||
| <template is="dom-if" if="[[headerHasInteractiveContent]]"> | ||
| <style> | ||
| #header-container { | ||
| display: grid; | ||
| grid-template-columns: auto; | ||
| grid-template-rows: auto; | ||
| } | ||
| .header-grid-item { | ||
| grid-column: 1; | ||
| grid-row: 1; | ||
| } | ||
| #interactive-header-content { | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| </template> | ||
| <a href="javascript:void(0)" id="trigger" aria-controls="collapse" role="button" data-border$="[[headerBorder]]" on-blur="_triggerBlur" on-click="toggle" on-focus="_triggerFocus"> | ||
| <div class="collapse-title" title="[[label]]">[[title]][[label]]<slot name="header"></slot> | ||
| </div> | ||
| <template is="dom-if" if="[[!noIcons]]"> | ||
| <d2l-icon icon="[[_toggle(opened, collapseIcon, expandIcon)]]"></d2l-icon> | ||
| <div id="header-container"> | ||
| <a href="javascript:void(0)" id="trigger" class="header-grid-item" aria-controls="collapse" role="button" data-border$="[[headerBorder]]" on-blur="_triggerBlur" on-click="toggle" on-focus="_triggerFocus"> | ||
| <template is="dom-if" if="[[!headerHasInteractiveContent]]"> | ||
| <div class="collapse-title" title="[[label]]">[[title]][[label]]<slot name="header"></slot> | ||
| </div> | ||
| <template is="dom-if" if="[[!noIcons]]"> | ||
| <d2l-icon icon="[[_toggle(opened, collapseIcon, expandIcon)]]"></d2l-icon> | ||
| </template> | ||
| </template> | ||
| <template is="dom-if" if="[[headerHasInteractiveContent]]"> | ||
| <span class="d2l-offscreen">[[screenReaderHeaderText]]</span> | ||
| </template> | ||
| </a> | ||
| <template is="dom-if" if="[[headerHasInteractiveContent]]"> | ||
| <div id="interactive-header-content" class="header-grid-item" on-click="toggle"> | ||
| <div class="collapse-title" title="[[label]]">[[title]][[label]]<slot name="header"></slot> | ||
| </div> | ||
| <template is="dom-if" if="[[!noIcons]]"> | ||
| <d2l-icon icon="[[_toggle(opened, collapseIcon, expandIcon)]]"></d2l-icon> | ||
| </template> | ||
| </div> | ||
| </template> | ||
| </a> | ||
| </div> | ||
| <div class="content"> | ||
@@ -144,2 +182,9 @@ <iron-collapse id="detail" class="detail" no-animation="[[noAnimation]]" opened="[[opened]]" on-transitioning-changed="_handleTransitionChanged"> | ||
| /** | ||
| * Header text hidden on the screen, but to be read by a screen reader | ||
| */ | ||
| screenReaderHeaderText: { | ||
| type: String, | ||
| value: '' | ||
| }, | ||
| /** | ||
| * Corresponds to the iron-collapse's noAnimation property. | ||
@@ -221,2 +266,9 @@ */ | ||
| /** | ||
| * Whether or not the header contains an interactive element inside it (e.g. clickable) | ||
| */ | ||
| headerHasInteractiveContent: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| /** | ||
| * Listener for state changes. | ||
@@ -239,2 +291,6 @@ */ | ||
| this.$.trigger.setAttribute('aria-expanded', this.opened); | ||
| const styleElement = document.createElement('style'); | ||
| styleElement.textContent = offscreenStyles.cssText; | ||
| this.shadowRoot.appendChild(styleElement); | ||
| }, | ||
@@ -241,0 +297,0 @@ |
@@ -28,5 +28,4 @@ { | ||
| "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch", | ||
| "test": "npm run lint && npm run test:headless", | ||
| "test:headless": "web-test-runner --files \"./test/**/*.test.js\" --node-resolve", | ||
| "test:headless:watch": "web-test-runner --files \"./test/**/*.test.js\" --node-resolve --watch" | ||
| "test": "npm run lint && npm run test:unit", | ||
| "test:unit": "d2l-test-runner" | ||
| }, | ||
@@ -36,9 +35,8 @@ "author": "D2L Corporation", | ||
| "devDependencies": { | ||
| "@open-wc/testing": "^4", | ||
| "@brightspace-ui/testing": "^1", | ||
| "@web/dev-server": "^0.4", | ||
| "@web/test-runner": "^0.18", | ||
| "eslint": "^8", | ||
| "eslint-config-brightspace": "^0.25" | ||
| }, | ||
| "version": "4.0.1", | ||
| "version": "4.1.0", | ||
| "dependencies": { | ||
@@ -45,0 +43,0 @@ "@brightspace-ui/core": "^3", |
@@ -45,2 +45,6 @@ # d2l-labs-accordion | ||
| * Without 'flex' attribute, the padding will be on the left. (Opposite for RTL) | ||
| * header-has-interactive-content - adjusts the html to allow interactive (e.g. clickable) elements in the header to function properly | ||
| (especially with screen readers) | ||
| * screen-reader-header-text - text that is visually hidden and only used for a screen reader to read text | ||
| from the header | ||
@@ -107,27 +111,32 @@ #### Slots: | ||
| ``` | ||
| ## Developing, Testing and Contributing | ||
| Example 6: | ||
| ```html | ||
| <d2l-labs-accordion-collapse header-has-interactive-content screen-reader-header-text="Go to D2L"> | ||
| <span slot="header"> | ||
| Go to | ||
| <a href="https://www.d2l.com/">D2L</a> | ||
| </span> | ||
| </d2l-labs-accordion-collapse> | ||
| ``` | ||
| ## Developing and Contributing | ||
| After cloning the repo, run `npm install` to install dependencies. | ||
| ### Linting | ||
| ### Testing | ||
| To run the full suite of tests: | ||
| ```shell | ||
| # eslint | ||
| npm run lint | ||
| # eslint only | ||
| npm run lint:eslint | ||
| npm test | ||
| ``` | ||
| ### Testing | ||
| Alternatively, tests can be selectively run: | ||
| ```shell | ||
| # lint & run headless unit tests | ||
| npm test | ||
| # eslint | ||
| npm run lint:eslint | ||
| # unit tests only | ||
| npm run test:headless | ||
| # debug or run a subset of local unit tests | ||
| npm run test:headless:watch | ||
| # unit tests | ||
| npm run test:unit | ||
| ``` | ||
@@ -137,3 +146,3 @@ | ||
| To start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that hosts the demo page and tests: | ||
| To start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that hosts the demo pages and tests: | ||
@@ -148,2 +157,2 @@ ```shell | ||
| To learn how to create major releases and release from maintenance branches, refer to the [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) documentation. | ||
| To learn how to create major releases and release from maintenance branches, refer to the [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) documentation. |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by7.21%
29702
- Dev dependency count
- decreased by-20%
4
- Lines of code
- increased by13.27%
461
- Number of lines in readme file
- increased by6.16%
155
No dependency changes