From b9a65ea5ce143e23ff374af8d561860f5e22dd54 Mon Sep 17 00:00:00 2001 From: John Clifford Date: Tue, 3 Sep 2024 19:35:01 +0530 Subject: [PATCH 1/6] Added exclusive feature for accordion --- docs/components/accordion/use-cases.md | 46 +++- package-lock.json | 253 +----------------- .../components/accordion/src/LionAccordion.js | 34 ++- 3 files changed, 71 insertions(+), 262 deletions(-) diff --git a/docs/components/accordion/use-cases.md b/docs/components/accordion/use-cases.md index f3d6a1fde8..966ec280ef 100644 --- a/docs/components/accordion/use-cases.md +++ b/docs/components/accordion/use-cases.md @@ -237,7 +237,7 @@ export const distributeNewElement = () => { const accordionElement = this.shadowRoot.querySelector('#pushTabs'); const i = Math.floor(accordionElement.children.length / 2) + 1; this.__collection = [ - ...this.__collection, + ...this. , { invoker: `header ${i}`, content: `content ${i}`, @@ -250,3 +250,47 @@ export const distributeNewElement = () => { return previewHtml``; }; ``` + +## Exclusive +Sometimes, it might be required to show only one expaned slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon. + +This field takes in a Boolean value, which by default is false. + +```html preview-story + +

+ +

+
+

+ The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas + orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, + terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during + development, whereas volatile aroma compounds tend to peak in mid– to late–season development. + Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with + less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to + 4.0. +

+ +

+ Sensory qualities vary according to genetic background, environmental conditions during + development, ripeness at harvest, postharvest conditions, and storage duration. +

+
+

+ +

+
+ Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table). + In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of + vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant + amounts (table). +
+ +``` diff --git a/package-lock.json b/package-lock.json index 69bbba9ca9..a3b8d3d8cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22975,7 +22975,7 @@ } }, "packages-node/providence-analytics": { - "version": "0.16.4", + "version": "0.16.5", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -23008,111 +23008,6 @@ "node": ">=18.0.0" } }, - "packages-node/providence-analytics/node_modules/@babel/compat-data": { - "version": "7.23.2", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=6.9.0" - } - }, - "packages-node/providence-analytics/node_modules/@babel/core": { - "version": "7.23.2", - "license": "MIT", - "peer": true, - "dependencies": { - "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.0", - "@babel/helper-compilation-targets": "^7.22.15", - "@babel/helper-module-transforms": "^7.23.0", - "@babel/helpers": "^7.23.2", - "@babel/parser": "^7.23.0", - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0", - "convert-source-map": "^2.0.0", - "debug": "^4.1.0", - "gensync": "^1.0.0-beta.2", - "json5": "^2.2.3", - "semver": "^6.3.1" - }, - "engines": { - "node": ">=6.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/babel" - } - }, - "packages-node/providence-analytics/node_modules/@babel/core/node_modules/semver": { - "version": "6.3.1", - "license": "ISC", - "peer": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helper-compilation-targets": { - "version": "7.22.15", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/compat-data": "^7.22.9", - "@babel/helper-validator-option": "^7.22.15", - "browserslist": "^4.21.9", - "lru-cache": "^5.1.1", - "semver": "^6.3.1" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { - "version": "5.1.1", - "license": "ISC", - "peer": true, - "dependencies": { - "yallist": "^3.0.2" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helper-compilation-targets/node_modules/semver": { - "version": "6.3.1", - "license": "ISC", - "peer": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helper-module-imports": { - "version": "7.22.15", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/types": "^7.22.15" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helper-module-transforms": { - "version": "7.23.0", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-simple-access": "^7.22.5", - "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/helper-validator-identifier": "^7.22.20" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0" - } - }, "packages-node/providence-analytics/node_modules/@babel/helper-plugin-utils": { "version": "7.24.5", "license": "MIT", @@ -23120,38 +23015,6 @@ "node": ">=6.9.0" } }, - "packages-node/providence-analytics/node_modules/@babel/helper-simple-access": { - "version": "7.22.5", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helper-validator-option": { - "version": "7.22.15", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=6.9.0" - } - }, - "packages-node/providence-analytics/node_modules/@babel/helpers": { - "version": "7.23.2", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, "packages-node/providence-analytics/node_modules/@babel/plugin-syntax-import-assertions": { "version": "7.24.1", "license": "MIT", @@ -23165,19 +23028,6 @@ "@babel/core": "^7.0.0-0" } }, - "packages-node/providence-analytics/node_modules/@babel/template": { - "version": "7.22.15", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" - }, - "engines": { - "node": ">=6.9.0" - } - }, "packages-node/providence-analytics/node_modules/@lit/reactive-element": { "version": "2.0.4", "dev": true, @@ -23520,56 +23370,6 @@ "dev": true, "license": "MIT" }, - "packages-node/providence-analytics/node_modules/browserslist": { - "version": "4.22.1", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/browserslist" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "peer": true, - "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", - "update-browserslist-db": "^1.0.13" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - } - }, - "packages-node/providence-analytics/node_modules/caniuse-lite": { - "version": "1.0.30001561", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "CC-BY-4.0", - "peer": true - }, "packages-node/providence-analytics/node_modules/command-line-args": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz", @@ -23618,16 +23418,6 @@ "node": ">=12.20.0" } }, - "packages-node/providence-analytics/node_modules/convert-source-map": { - "version": "2.0.0", - "license": "MIT", - "peer": true - }, - "packages-node/providence-analytics/node_modules/electron-to-chromium": { - "version": "1.4.578", - "license": "ISC", - "peer": true - }, "packages-node/providence-analytics/node_modules/es-module-lexer": { "version": "1.5.2", "dev": true, @@ -23676,11 +23466,6 @@ "node": ">=16.14" } }, - "packages-node/providence-analytics/node_modules/node-releases": { - "version": "2.0.13", - "license": "MIT", - "peer": true - }, "packages-node/providence-analytics/node_modules/rollup": { "version": "4.17.2", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz", @@ -23766,35 +23551,6 @@ "node": ">=12.17" } }, - "packages-node/providence-analytics/node_modules/update-browserslist-db": { - "version": "1.0.13", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/browserslist" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "peer": true, - "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" - }, - "bin": { - "update-browserslist-db": "cli.js" - }, - "peerDependencies": { - "browserslist": ">= 4.21.0" - } - }, "packages-node/providence-analytics/node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", @@ -23826,11 +23582,6 @@ "node": ">=12.17" } }, - "packages-node/providence-analytics/node_modules/yallist": { - "version": "3.1.1", - "license": "ISC", - "peer": true - }, "packages-node/publish-docs": { "version": "0.2.1", "license": "MIT", @@ -23960,7 +23711,7 @@ }, "packages/ui": { "name": "@lion/ui", - "version": "0.7.3", + "version": "0.7.6", "license": "MIT", "dependencies": { "@bundled-es-modules/message-format": "^6.2.4", diff --git a/packages/ui/components/accordion/src/LionAccordion.js b/packages/ui/components/accordion/src/LionAccordion.js index abec481f53..b351d7c8ec 100644 --- a/packages/ui/components/accordion/src/LionAccordion.js +++ b/packages/ui/components/accordion/src/LionAccordion.js @@ -34,6 +34,12 @@ export class LionAccordion extends LitElement { expanded: { type: Array, }, + /** + * exclusive property allows only one accordion slot to be open at a time + */ + exclusive: { + type: Boolean, + } }; } @@ -118,6 +124,13 @@ export class LionAccordion extends LitElement { * @private */ this.__expanded = []; + + /** + * @type {Boolean} + * @private + */ + this.exclusive = false + ; } /** @param {import('lit').PropertyValues } changedProperties */ @@ -437,20 +450,21 @@ export class LionAccordion extends LitElement { } /** - * @param {number} value + * @param {number} indexClicked * @private */ - __toggleExpanded(value) { - const expanded = [...this.expanded]; - const index = expanded.indexOf(value); - - if (index === -1) { - expanded.push(value); - } else { - expanded.splice(index, 1); + __toggleExpanded(indexClicked) { + const indexFound = this.expanded.indexOf(indexClicked); + const expandedNewValues = this.exclusive ? [] : [...this.expanded]; + + if(indexFound === -1){ + expandedNewValues.push(indexClicked); + } else if(expandedNewValues.includes(indexFound)){ + expandedNewValues.splice(indexFound, 1); } - this.expanded = expanded; + // trigger a render + this.expanded = expandedNewValues; } /** From 229a0061074a02f10d844ea7884e11cef003c8c5 Mon Sep 17 00:00:00 2001 From: John Clifford Date: Thu, 12 Sep 2024 12:16:45 +0530 Subject: [PATCH 2/6] Changed position of exclusive accordion --- docs/components/accordion/index.md | 2 +- docs/components/accordion/use-cases.md | 88 +++--- package-lock.json | 388 ++++++++++++++++++------- 3 files changed, 331 insertions(+), 147 deletions(-) diff --git a/docs/components/accordion/index.md b/docs/components/accordion/index.md index 80a5033ede..a6b6d9465d 100644 --- a/docs/components/accordion/index.md +++ b/docs/components/accordion/index.md @@ -1,3 +1,3 @@ -# Accordion +# Accordion ||10 -> go to Overview diff --git a/docs/components/accordion/use-cases.md b/docs/components/accordion/use-cases.md index 966ec280ef..4df84280d4 100644 --- a/docs/components/accordion/use-cases.md +++ b/docs/components/accordion/use-cases.md @@ -160,6 +160,50 @@ A header can be multiline. ``` +## Exclusive +Sometimes, it might be required to show only one expaned slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon. + +This field takes in a Boolean value, which by default is false. + +```html preview-story + +

+ +

+
+

+ The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas + orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, + terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during + development, whereas volatile aroma compounds tend to peak in mid– to late–season development. + Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with + less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to + 4.0. +

+ +

+ Sensory qualities vary according to genetic background, environmental conditions during + development, ripeness at harvest, postharvest conditions, and storage duration. +

+
+

+ +

+
+ Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table). + In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of + vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant + amounts (table). +
+ +``` + ## Distribute New Elements Below, we demonstrate how you could dynamically add a new invoker + content. @@ -250,47 +294,3 @@ export const distributeNewElement = () => { return previewHtml``; }; ``` - -## Exclusive -Sometimes, it might be required to show only one expaned slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon. - -This field takes in a Boolean value, which by default is false. - -```html preview-story - -

- -

-
-

- The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas - orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, - terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during - development, whereas volatile aroma compounds tend to peak in mid– to late–season development. - Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with - less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to - 4.0. -

- -

- Sensory qualities vary according to genetic background, environmental conditions during - development, ripeness at harvest, postharvest conditions, and storage duration. -

-
-

- -

-
- Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table). - In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of - vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant - amounts (table). -
- -``` diff --git a/package-lock.json b/package-lock.json index a3b8d3d8cb..20a92582f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -159,6 +159,47 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-img/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@11ty/eleventy-img/node_modules/decompress-response": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", + "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mimic-response": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@11ty/eleventy-img/node_modules/fs-extra": { "version": "9.1.0", "dev": true, @@ -184,6 +225,110 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/@11ty/eleventy-img/node_modules/mimic-response": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz", + "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/node-abi": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.30.1.tgz", + "integrity": "sha512-/2D0wOQPgaUWzVSVgRMx+trKJRC2UG4SUc4oCJoXx9Uxjtp0Vy3/kt7zcbxHF8+Z/pK3UloLWzBISg72brfy1w==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^5.4.1" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/node-abi/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/node-addon-api": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz", + "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@11ty/eleventy-img/node_modules/prebuild-install": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-6.1.4.tgz", + "integrity": "sha512-Z4vpywnK1lBg+zdPCVCsKq0xO66eEV9rWo2zrROGGiRS4JtueBOdlB1FnY8lcy7JsUud/Q3ijUxyWN26Ika0vQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "detect-libc": "^1.0.3", + "expand-template": "^2.0.3", + "github-from-package": "0.0.0", + "minimist": "^1.2.3", + "mkdirp-classic": "^0.5.3", + "napi-build-utils": "^1.0.1", + "node-abi": "^2.21.0", + "npmlog": "^4.0.1", + "pump": "^3.0.0", + "rc": "^1.2.7", + "simple-get": "^3.0.3", + "tar-fs": "^2.0.0", + "tunnel-agent": "^0.6.0" + }, + "bin": { + "prebuild-install": "bin.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/sharp": { + "version": "0.28.3", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.28.3.tgz", + "integrity": "sha512-21GEP45Rmr7q2qcmdnjDkNP04Ooh5v0laGS5FDpojOO84D1DJwUijLiSq8XNNM6e8aGXYtoYRh3sVNdm8NodMA==", + "dev": true, + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "color": "^3.1.3", + "detect-libc": "^1.0.3", + "node-addon-api": "^3.2.0", + "prebuild-install": "^6.1.2", + "semver": "^7.3.5", + "simple-get": "^3.1.0", + "tar-fs": "^2.1.1", + "tunnel-agent": "^0.6.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@11ty/eleventy-img/node_modules/simple-get": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz", + "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==", + "dev": true, + "license": "MIT", + "dependencies": { + "decompress-response": "^4.2.0", + "once": "^1.3.1", + "simple-concat": "^1.0.0" + } + }, "node_modules/@11ty/eleventy-img/node_modules/universalify": { "version": "2.0.0", "dev": true, @@ -7235,6 +7380,13 @@ "node": ">= 8" } }, + "node_modules/aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "dev": true, + "license": "ISC" + }, "node_modules/archiver": { "version": "7.0.1", "dev": true, @@ -7419,6 +7571,18 @@ "streamx": "^2.15.0" } }, + "node_modules/are-we-there-yet": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz", + "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==", + "deprecated": "This package is no longer supported.", + "dev": true, + "license": "ISC", + "dependencies": { + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" + } + }, "node_modules/argparse": { "version": "1.0.10", "dev": true, @@ -8826,16 +8990,14 @@ "type-is": "^1.6.16" } }, - "node_modules/color": { - "version": "4.2.3", + "node_modules/code-point-at": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==", "dev": true, "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1", - "color-string": "^1.9.0" - }, "engines": { - "node": ">=12.5.0" + "node": ">=0.10.0" } }, "node_modules/color-convert": { @@ -9167,6 +9329,13 @@ "dev": true, "license": "MIT" }, + "node_modules/console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==", + "dev": true, + "license": "ISC" + }, "node_modules/constantinople": { "version": "3.1.2", "dev": true, @@ -11657,6 +11826,75 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==", + "deprecated": "This package is no longer supported.", + "dev": true, + "license": "ISC", + "dependencies": { + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" + } + }, + "node_modules/gauge/node_modules/ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gauge/node_modules/is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "number-is-nan": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gauge/node_modules/string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==", + "dev": true, + "license": "MIT", + "dependencies": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gauge/node_modules/strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/geckodriver": { "version": "4.4.0", "dev": true, @@ -12251,6 +12489,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==", + "dev": true, + "license": "ISC" + }, "node_modules/hash-string": { "version": "1.0.0", "dev": true, @@ -16339,22 +16584,6 @@ "tslib": "^2.0.3" } }, - "node_modules/node-abi": { - "version": "3.33.0", - "dev": true, - "license": "MIT", - "dependencies": { - "semver": "^7.3.5" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/node-addon-api": { - "version": "4.3.0", - "dev": true, - "license": "MIT" - }, "node_modules/node-domexception": { "version": "1.0.0", "dev": true, @@ -16644,6 +16873,20 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "deprecated": "This package is no longer supported.", + "dev": true, + "license": "ISC", + "dependencies": { + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" + } + }, "node_modules/nth-check": { "version": "2.1.1", "license": "BSD-2-Clause", @@ -16654,6 +16897,16 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/number-is-nan": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/nunjucks": { "version": "3.2.3", "dev": true, @@ -17661,39 +17914,6 @@ "hasInstallScript": true, "license": "MIT" }, - "node_modules/prebuild-install": { - "version": "7.1.1", - "dev": true, - "license": "MIT", - "dependencies": { - "detect-libc": "^2.0.0", - "expand-template": "^2.0.3", - "github-from-package": "0.0.0", - "minimist": "^1.2.3", - "mkdirp-classic": "^0.5.3", - "napi-build-utils": "^1.0.1", - "node-abi": "^3.3.0", - "pump": "^3.0.0", - "rc": "^1.2.7", - "simple-get": "^4.0.0", - "tar-fs": "^2.0.0", - "tunnel-agent": "^0.6.0" - }, - "bin": { - "prebuild-install": "bin.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/prebuild-install/node_modules/detect-libc": { - "version": "2.0.1", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=8" - } - }, "node_modules/preferred-pm": { "version": "3.0.3", "dev": true, @@ -19962,28 +20182,6 @@ "dev": true, "license": "MIT" }, - "node_modules/sharp": { - "version": "0.29.3", - "dev": true, - "hasInstallScript": true, - "license": "Apache-2.0", - "dependencies": { - "color": "^4.0.1", - "detect-libc": "^1.0.3", - "node-addon-api": "^4.2.0", - "prebuild-install": "^7.0.0", - "semver": "^7.3.5", - "simple-get": "^4.0.0", - "tar-fs": "^2.1.1", - "tunnel-agent": "^0.6.0" - }, - "engines": { - "node": ">=12.13.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - } - }, "node_modules/shebang-command": { "version": "2.0.0", "dev": true, @@ -20066,30 +20264,6 @@ ], "license": "MIT" }, - "node_modules/simple-get": { - "version": "4.0.1", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT", - "dependencies": { - "decompress-response": "^6.0.0", - "once": "^1.3.1", - "simple-concat": "^1.0.0" - } - }, "node_modules/simple-swizzle": { "version": "0.2.2", "dev": true, @@ -22152,6 +22326,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/wide-align": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", + "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^1.0.2 || 2 || 3 || 4" + } + }, "node_modules/window-size": { "version": "0.1.0", "dev": true, From 776a62906ba5e4b7c26803de58455856f037a275 Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Mon, 30 Sep 2024 18:38:05 +0200 Subject: [PATCH 3/6] chore: accordion [exclusive] option --- docs/components/accordion/use-cases.md | 3 +- docs/components/checkbox-group/use-cases.md | 79 +++++-------------- docs/components/fieldset/use-cases.md | 11 ++- docs/components/form/use-cases.md | 3 +- docs/components/input-amount/use-cases.md | 4 +- docs/components/input-date/use-cases.md | 4 +- docs/components/pagination/use-cases.md | 4 +- docs/components/select-rich/use-cases.md | 10 +-- docs/components/steps/overview.md | 8 +- docs/components/steps/use-cases.md | 12 ++- docs/fundamentals/systems/form/use-cases.md | 3 +- .../systems/localize/use-cases.md | 4 +- .../systems/overlays/use-cases.md | 4 +- .../components/accordion/src/LionAccordion.js | 28 +++---- .../accordion/test/lion-accordion.test.js | 45 +++++++++++ 15 files changed, 124 insertions(+), 98 deletions(-) diff --git a/docs/components/accordion/use-cases.md b/docs/components/accordion/use-cases.md index 4df84280d4..25b910a3c7 100644 --- a/docs/components/accordion/use-cases.md +++ b/docs/components/accordion/use-cases.md @@ -161,12 +161,13 @@ A header can be multiline. ``` ## Exclusive + Sometimes, it might be required to show only one expaned slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon. This field takes in a Boolean value, which by default is false. ```html preview-story - +


- diff --git a/docs/components/form/use-cases.md b/docs/components/form/use-cases.md index c466de5ff8..8300467695 100644 --- a/docs/components/form/use-cases.md +++ b/docs/components/form/use-cases.md @@ -55,7 +55,8 @@ export const formSubmit = () => { diff --git a/docs/components/input-amount/use-cases.md b/docs/components/input-amount/use-cases.md index 28cae1a5f9..8fd96c7f44 100644 --- a/docs/components/input-amount/use-cases.md +++ b/docs/components/input-amount/use-cases.md @@ -96,10 +96,10 @@ export const noDecimals = () => html` diff --git a/docs/components/input-date/use-cases.md b/docs/components/input-date/use-cases.md index e6ecee6d9f..7f51989d0f 100644 --- a/docs/components/input-date/use-cases.md +++ b/docs/components/input-date/use-cases.md @@ -58,7 +58,9 @@ export const withMinimumAndMaximumDate = () => {
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate( diff --git a/docs/components/pagination/use-cases.md b/docs/components/pagination/use-cases.md index ed6015a109..84061b6ac3 100644 --- a/docs/components/pagination/use-cases.md +++ b/docs/components/pagination/use-cases.md @@ -58,7 +58,9 @@ export const methods = ({ shadowRoot }) => {

- +

diff --git a/docs/components/select-rich/use-cases.md b/docs/components/select-rich/use-cases.md index fa573fe5fc..34525064e2 100644 --- a/docs/components/select-rich/use-cases.md +++ b/docs/components/select-rich/use-cases.md @@ -222,11 +222,11 @@ Often, you may want a placeholder that appears initially, but cannot be selected For this you can use `has-no-default-selected` attribute. ```html preview-story - - Red - Hotpink - Teal - + + Red + Hotpink + Teal + ``` > By default, the placeholder is completely empty in the `LionSelectInvoker`, diff --git a/docs/components/steps/overview.md b/docs/components/steps/overview.md index aa403c5b7b..fed19f6da4 100644 --- a/docs/components/steps/overview.md +++ b/docs/components/steps/overview.md @@ -13,14 +13,18 @@ export const main = () => html` Step 1 - + Step 2 - +   - +

Are you single?

@@ -46,7 +48,9 @@ export const main = () => html` Previous   - +

You are NOT single.

@@ -54,7 +58,9 @@ export const main = () => html` Previous   - +

Finish

diff --git a/docs/fundamentals/systems/form/use-cases.md b/docs/fundamentals/systems/form/use-cases.md index e632645995..716e260943 100644 --- a/docs/fundamentals/systems/form/use-cases.md +++ b/docs/fundamentals/systems/form/use-cases.md @@ -162,7 +162,8 @@ export const main = () => {
Submit Reset
diff --git a/docs/fundamentals/systems/localize/use-cases.md b/docs/fundamentals/systems/localize/use-cases.md index 0eac59ddb9..19a5e23acd 100644 --- a/docs/fundamentals/systems/localize/use-cases.md +++ b/docs/fundamentals/systems/localize/use-cases.md @@ -309,7 +309,9 @@ localize.setupNamespaceLoader('my-hello-component', async locale => { // for all components which have a prefix in their names localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => { - const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`); + const response = await fetch( + `https://api.example.com/?namespace="${namespace}&locale=${locale}"`, + ); return response.json(); }); ``` diff --git a/docs/fundamentals/systems/overlays/use-cases.md b/docs/fundamentals/systems/overlays/use-cases.md index 520c3ea6c7..647d61c3fc 100644 --- a/docs/fundamentals/systems/overlays/use-cases.md +++ b/docs/fundamentals/systems/overlays/use-cases.md @@ -29,7 +29,9 @@ export const main = () => html`
Hello! You can close this notification here: -
diff --git a/packages/ui/components/accordion/src/LionAccordion.js b/packages/ui/components/accordion/src/LionAccordion.js index b351d7c8ec..c7c19979d3 100644 --- a/packages/ui/components/accordion/src/LionAccordion.js +++ b/packages/ui/components/accordion/src/LionAccordion.js @@ -25,21 +25,15 @@ export class LionAccordion extends LitElement { /** * index number of the focused accordion */ - focusedIndex: { - type: Number, - }, + focusedIndex: { type: Number }, /** * array of indices of the expanded accordions */ - expanded: { - type: Array, - }, + expanded: { type: Array }, /** * exclusive property allows only one accordion slot to be open at a time */ - exclusive: { - type: Boolean, - } + exclusive: { type: Boolean }, }; } @@ -107,6 +101,11 @@ export class LionAccordion extends LitElement { super(); this.styles = {}; + /** + * @type {boolean} + */ + this.exclusive = false; + /** * @type {StoreEntry[]} * @private @@ -124,13 +123,6 @@ export class LionAccordion extends LitElement { * @private */ this.__expanded = []; - - /** - * @type {Boolean} - * @private - */ - this.exclusive = false - ; } /** @param {import('lit').PropertyValues } changedProperties */ @@ -457,9 +449,9 @@ export class LionAccordion extends LitElement { const indexFound = this.expanded.indexOf(indexClicked); const expandedNewValues = this.exclusive ? [] : [...this.expanded]; - if(indexFound === -1){ + if (indexFound === -1) { expandedNewValues.push(indexClicked); - } else if(expandedNewValues.includes(indexFound)){ + } else if (expandedNewValues.includes(indexFound)) { expandedNewValues.splice(indexFound, 1); } diff --git a/packages/ui/components/accordion/test/lion-accordion.test.js b/packages/ui/components/accordion/test/lion-accordion.test.js index ce785ca724..1ff5b05317 100644 --- a/packages/ui/components/accordion/test/lion-accordion.test.js +++ b/packages/ui/components/accordion/test/lion-accordion.test.js @@ -112,6 +112,51 @@ describe('', () => { expect(invokers[1].firstElementChild).to.have.attribute('expanded'); }); + it('supports [exclusive] attribute, allowing one collapsible to be open at a time', async () => { + const el = /** @type {LionAccordion} */ ( + await fixture(html` + +

+
content 1
+

+
content 2
+

+
content 3
+ + `) + ); + + const invokerButtons = Array.from(getInvokers(el)).map( + invokerHeadingEl => /** @type {HTMLButtonElement} */ (invokerHeadingEl.firstElementChild), + ); + + // We open the first... (nothing different from not [exclusive] so far) + invokerButtons[0].click(); + expect(invokerButtons[0]).to.have.attribute('expanded'); + expect(invokerButtons[1]).to.not.have.attribute('expanded'); + expect(invokerButtons[2]).to.not.have.attribute('expanded'); + + // We click the second... + invokerButtons[1].click(); + expect(invokerButtons[0]).to.not.have.attribute('expanded'); + expect(invokerButtons[1]).to.have.attribute('expanded'); + expect(invokerButtons[2]).to.not.have.attribute('expanded'); + + // We click the third... + invokerButtons[2].click(); + expect(invokerButtons[0]).to.not.have.attribute('expanded'); + expect(invokerButtons[1]).to.not.have.attribute('expanded'); + expect(invokerButtons[2]).to.have.attribute('expanded'); + + el.exclusive = false; + + // We open the first... (behaving as default (not [exclusive]) again) + invokerButtons[0].click(); + expect(invokerButtons[0]).to.have.attribute('expanded'); + expect(invokerButtons[1]).to.not.have.attribute('expanded'); + expect(invokerButtons[2]).to.have.attribute('expanded'); + }); + it('sends event "expanded-changed" for every expanded state change', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); const spy = sinon.spy(); From b81be4667e9f761de9c7ebc26b3e52e1bc993449 Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Mon, 30 Sep 2024 18:38:05 +0200 Subject: [PATCH 4/6] chore: accordion [exclusive] option --- .../accordion/test/lion-accordion.test.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/ui/components/accordion/test/lion-accordion.test.js b/packages/ui/components/accordion/test/lion-accordion.test.js index 1ff5b05317..eb2c558513 100644 --- a/packages/ui/components/accordion/test/lion-accordion.test.js +++ b/packages/ui/components/accordion/test/lion-accordion.test.js @@ -33,14 +33,14 @@ function getAccordionChildren(el) { } /** - * @param {Element} el + * @param {LionAccordion} el */ function getInvokers(el) { return getAccordionChildren(el).filter(child => child.classList.contains('invoker')); } /** - * @param {Element} el + * @param {LionAccordion} el */ function getContents(el) { return getAccordionChildren(el).filter(child => child.classList.contains('content')); @@ -512,14 +512,14 @@ describe('', () => { describe('Invokers', () => { it('links ids of content items to invoker first child via [aria-controls]', async () => { - const el = await fixture(html` + const el = /** @type {LionAccordion} */ (await fixture(html`

content 1

content 2
 - `); + `)); const invokers = getInvokers(el); const contents = getContents(el); expect(invokers[0].firstElementChild?.getAttribute('aria-controls')).to.equal( @@ -531,12 +531,12 @@ describe('', () => { }); it('adds aria-expanded="false" to invoker when its content is not expanded', async () => { - const el = await fixture(html` + const el = /** @type {LionAccordion} */ (await fixture(html`

content
 - `); + `)); expect(Array.from(getInvokers(el))[0]?.firstElementChild).to.have.attribute( 'aria-expanded', 'false', @@ -562,14 +562,14 @@ describe('', () => { describe('Contents', () => { it('adds aria-labelledby referring to invoker ids', async () => { - const el = await fixture(html` + const el = /** @type {LionAccordion} */ (await fixture(html`

content 1

content 2
 - `); + `)); const contents = getContents(el); const invokers = getInvokers(el); expect(contents[0]).to.have.attribute('aria-labelledby', invokers[0].firstElementChild?.id); From d6bbe530de8b928b2972b03a9d088d482399fe47 Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Tue, 1 Oct 2024 16:23:06 +0200 Subject: [PATCH 5/6] chore: fixes and cleanups --- .changeset/five-squids-act.md | 5 ++ docs/components/accordion/use-cases.md | 26 ++++------ .../accordion/test/lion-accordion.test.js | 50 +++++++++++-------- 3 files changed, 43 insertions(+), 38 deletions(-) create mode 100644 .changeset/five-squids-act.md diff --git a/.changeset/five-squids-act.md b/.changeset/five-squids-act.md new file mode 100644 index 0000000000..21f01c197a --- /dev/null +++ b/.changeset/five-squids-act.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[accordion] new "exclusive" feature, allowing one opened collapsible at a time diff --git a/docs/components/accordion/use-cases.md b/docs/components/accordion/use-cases.md index 25b910a3c7..6ab94d599d 100644 --- a/docs/components/accordion/use-cases.md +++ b/docs/components/accordion/use-cases.md @@ -15,7 +15,7 @@ All accordion panels are collapsed by default.

-
+

The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, @@ -52,7 +52,7 @@ Multiple accordion panels can be expanded at the same time. When content drops o

-
+

The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, @@ -92,7 +92,7 @@ The invoker and content slots are ordered by DOM order. This means you can put a

-
+

The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, @@ -129,7 +129,7 @@ A header can be multiline. or the experience of taste

-
+

The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, @@ -162,19 +162,16 @@ A header can be multiline. ## Exclusive -Sometimes, it might be required to show only one expaned slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon. +Sometimes, it might be required to show only one expanded slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon. This field takes in a Boolean value, which by default is false. ```html preview-story - +

- +

-
+

The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones, @@ -191,10 +188,7 @@ This field takes in a Boolean value, which by default is false.

- +

Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table). @@ -282,7 +276,7 @@ export const distributeNewElement = () => { const accordionElement = this.shadowRoot.querySelector('#pushTabs'); const i = Math.floor(accordionElement.children.length / 2) + 1; this.__collection = [ - ...this. , + ...this.__collection, { invoker: `header ${i}`, content: `content ${i}`, diff --git a/packages/ui/components/accordion/test/lion-accordion.test.js b/packages/ui/components/accordion/test/lion-accordion.test.js index eb2c558513..c3489f7d9a 100644 --- a/packages/ui/components/accordion/test/lion-accordion.test.js +++ b/packages/ui/components/accordion/test/lion-accordion.test.js @@ -512,14 +512,16 @@ describe('', () => { describe('Invokers', () => { it('links ids of content items to invoker first child via [aria-controls]', async () => { - const el = /** @type {LionAccordion} */ (await fixture(html` - -

-
content 1
-

-
content 2
- - `)); + const el = /** @type {LionAccordion} */ ( + await fixture(html` + +

+
content 1
+

+
content 2
+ + `) + ); const invokers = getInvokers(el); const contents = getContents(el); expect(invokers[0].firstElementChild?.getAttribute('aria-controls')).to.equal( @@ -531,12 +533,14 @@ describe('', () => { }); it('adds aria-expanded="false" to invoker when its content is not expanded', async () => { - const el = /** @type {LionAccordion} */ (await fixture(html` - -

-
content
- - `)); + const el = /** @type {LionAccordion} */ ( + await fixture(html` + +

+
content
+ + `) + ); expect(Array.from(getInvokers(el))[0]?.firstElementChild).to.have.attribute( 'aria-expanded', 'false', @@ -562,14 +566,16 @@ describe('', () => { describe('Contents', () => { it('adds aria-labelledby referring to invoker ids', async () => { - const el = /** @type {LionAccordion} */ (await fixture(html` - -

-
content 1
-

-
content 2
- - `)); + const el = /** @type {LionAccordion} */ ( + await fixture(html` + +

+
content 1
+

+
content 2
+ + `) + ); const contents = getContents(el); const invokers = getInvokers(el); expect(contents[0]).to.have.attribute('aria-labelledby', invokers[0].firstElementChild?.id); From 87a22d03ef5c1e9dc0081ff05b3fc1fb91db8c86 Mon Sep 17 00:00:00 2001 From: gerjanvangeest Date: Thu, 3 Oct 2024 15:23:18 +0200 Subject: [PATCH 6/6] chore: get docs of accordion back --- docs/components/accordion/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/accordion/index.md b/docs/components/accordion/index.md index a6b6d9465d..80a5033ede 100644 --- a/docs/components/accordion/index.md +++ b/docs/components/accordion/index.md @@ -1,3 +1,3 @@ -# Accordion ||10 +# Accordion -> go to Overview