From 8022fcc71da3806dac4125798f3ff5f0383c1f3b Mon Sep 17 00:00:00 2001 From: Nikolai Lopin Date: Wed, 2 Aug 2023 09:13:10 +0200 Subject: [PATCH 01/23] chore: dependency update --- package-lock.json | 593 +++++++++++++++++++++++++--------------------- 1 file changed, 326 insertions(+), 267 deletions(-) diff --git a/package-lock.json b/package-lock.json index a33948ef7..8ad00b186 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2032,9 +2032,9 @@ } }, "node_modules/@babel/register/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, "bin": { "semver": "bin/semver" @@ -4778,9 +4778,9 @@ } }, "node_modules/@semantic-release/npm/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -5874,9 +5874,9 @@ } }, "node_modules/@storybook/builder-webpack5/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -6133,9 +6133,9 @@ } }, "node_modules/@storybook/cli/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -6589,9 +6589,9 @@ } }, "node_modules/@storybook/core-server/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -6837,9 +6837,9 @@ } }, "node_modules/@storybook/manager-api/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -7036,9 +7036,9 @@ } }, "node_modules/@storybook/preset-react-webpack/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -9209,9 +9209,9 @@ } }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -9350,9 +9350,9 @@ } }, "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -9495,9 +9495,9 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -12604,9 +12604,9 @@ } }, "node_modules/conventional-changelog-writer/node_modules/normalize-package-data/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -12831,9 +12831,9 @@ } }, "node_modules/conventional-commits-parser/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -13063,9 +13063,9 @@ } }, "node_modules/css-loader/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -14762,9 +14762,9 @@ } }, "node_modules/eslint-plugin-unicorn/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -15001,9 +15001,9 @@ } }, "node_modules/eslint/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -16160,9 +16160,9 @@ } }, "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -16714,9 +16714,9 @@ } }, "node_modules/git-raw-commits/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -21330,9 +21330,9 @@ } }, "node_modules/jest-snapshot/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -22516,6 +22516,105 @@ "react": ">= 0.14.0" } }, + "node_modules/marked": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", + "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", + "dev": true, + "bin": { + "marked": "bin/marked" + }, + "engines": { + "node": ">= 10" + } + }, + "node_modules/marked-terminal": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-4.2.0.tgz", + "integrity": "sha512-DQfNRV9svZf0Dm9Cf5x5xaVJ1+XjxQW6XjFJ5HFkVyK52SDpj5PCBzS5X5r2w9nHr3mlB0T5201UMLue9fmhUw==", + "dev": true, + "dependencies": { + "ansi-escapes": "^4.3.1", + "cardinal": "^2.1.1", + "chalk": "^4.1.0", + "cli-table3": "^0.6.0", + "node-emoji": "^1.10.0", + "supports-hyperlinks": "^2.1.0" + }, + "peerDependencies": { + "marked": "^1.0.0 || ^2.0.0" + } + }, + "node_modules/marked-terminal/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/marked-terminal/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/marked-terminal/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/marked-terminal/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/marked-terminal/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/marked-terminal/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -23241,9 +23340,9 @@ } }, "node_modules/node-notifier/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "optional": true, "dependencies": { @@ -23298,9 +23397,9 @@ "dev": true }, "node_modules/normalize-package-data/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, "bin": { "semver": "bin/semver" @@ -29354,9 +29453,9 @@ } }, "node_modules/sane/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, "bin": { "semver": "bin/semver" @@ -29501,22 +29600,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/semantic-release/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, "node_modules/semantic-release/node_modules/cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -29577,15 +29660,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/semantic-release/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/semantic-release/node_modules/hosted-git-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", @@ -29610,35 +29684,6 @@ "node": ">=10" } }, - "node_modules/semantic-release/node_modules/marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", - "dev": true, - "bin": { - "marked": "bin/marked" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/semantic-release/node_modules/marked-terminal": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-4.2.0.tgz", - "integrity": "sha512-DQfNRV9svZf0Dm9Cf5x5xaVJ1+XjxQW6XjFJ5HFkVyK52SDpj5PCBzS5X5r2w9nHr3mlB0T5201UMLue9fmhUw==", - "dev": true, - "dependencies": { - "ansi-escapes": "^4.3.1", - "cardinal": "^2.1.1", - "chalk": "^4.1.0", - "cli-table3": "^0.6.0", - "node-emoji": "^1.10.0", - "supports-hyperlinks": "^2.1.0" - }, - "peerDependencies": { - "marked": "^1.0.0 || ^2.0.0" - } - }, "node_modules/semantic-release/node_modules/parse-json": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", @@ -29658,9 +29703,9 @@ } }, "node_modules/semantic-release/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -29672,18 +29717,6 @@ "node": ">=10" } }, - "node_modules/semantic-release/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/semantic-release/node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", @@ -31372,9 +31405,9 @@ } }, "node_modules/stylelint/node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -32308,9 +32341,9 @@ } }, "node_modules/tough-cookie": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", - "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==", + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", + "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", "dev": true, "dependencies": { "psl": "^1.1.33", @@ -32433,9 +32466,9 @@ } }, "node_modules/ts-jest/node_modules/semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -33592,9 +33625,9 @@ } }, "node_modules/word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -35165,9 +35198,9 @@ } }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true } } @@ -37355,9 +37388,9 @@ "dev": true }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -38127,9 +38160,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -38317,9 +38350,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -38663,9 +38696,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -38852,9 +38885,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -38994,9 +39027,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -40715,9 +40748,9 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -40798,9 +40831,9 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -40887,9 +40920,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -43303,9 +43336,9 @@ }, "dependencies": { "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -43465,9 +43498,9 @@ "dev": true }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -43635,9 +43668,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -44683,9 +44716,9 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -45085,9 +45118,9 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -46027,9 +46060,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -46437,9 +46470,9 @@ "dev": true }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -49863,9 +49896,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -50794,6 +50827,77 @@ "dev": true, "requires": {} }, + "marked": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", + "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", + "dev": true + }, + "marked-terminal": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-4.2.0.tgz", + "integrity": "sha512-DQfNRV9svZf0Dm9Cf5x5xaVJ1+XjxQW6XjFJ5HFkVyK52SDpj5PCBzS5X5r2w9nHr3mlB0T5201UMLue9fmhUw==", + "dev": true, + "requires": { + "ansi-escapes": "^4.3.1", + "cardinal": "^2.1.1", + "chalk": "^4.1.0", + "cli-table3": "^0.6.0", + "node-emoji": "^1.10.0", + "supports-hyperlinks": "^2.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -51370,9 +51474,9 @@ } }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "optional": true, "requires": { @@ -51420,9 +51524,9 @@ "dev": true }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true } } @@ -55943,9 +56047,9 @@ "dev": true }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true }, "shebang-command": { @@ -56055,16 +56159,6 @@ "color-convert": "^2.0.1" } }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, "cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -56113,12 +56207,6 @@ "escape-string-regexp": "^1.0.5" } }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, "hosted-git-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", @@ -56137,26 +56225,6 @@ "yallist": "^4.0.0" } }, - "marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", - "dev": true - }, - "marked-terminal": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-4.2.0.tgz", - "integrity": "sha512-DQfNRV9svZf0Dm9Cf5x5xaVJ1+XjxQW6XjFJ5HFkVyK52SDpj5PCBzS5X5r2w9nHr3mlB0T5201UMLue9fmhUw==", - "dev": true, - "requires": { - "ansi-escapes": "^4.3.1", - "cardinal": "^2.1.1", - "chalk": "^4.1.0", - "cli-table3": "^0.6.0", - "node-emoji": "^1.10.0", - "supports-hyperlinks": "^2.1.0" - } - }, "parse-json": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", @@ -56170,23 +56238,14 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" } }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - }, "wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", @@ -57469,9 +57528,9 @@ "dev": true }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -58263,9 +58322,9 @@ "dev": true }, "tough-cookie": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", - "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==", + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", + "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", "dev": true, "requires": { "psl": "^1.1.33", @@ -58349,9 +58408,9 @@ "dev": true }, "semver": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", - "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -59237,9 +59296,9 @@ } }, "word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", "dev": true }, "wordwrap": { From c67d40e939b4a79c91b7a0cef4fe314a2eac59e6 Mon Sep 17 00:00:00 2001 From: Nikolai Lopin Date: Wed, 2 Aug 2023 09:21:32 +0200 Subject: [PATCH 02/23] 1.32.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ad00b186..a6ba8ecaf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@freenow/wave", - "version": "1.32.1", + "version": "1.32.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@freenow/wave", - "version": "1.32.1", + "version": "1.32.2", "license": "Apache-2.0", "dependencies": { "@datepicker-react/hooks": "^2.3.1", diff --git a/package.json b/package.json index 26ff55a92..97f0a2d7a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@freenow/wave", - "version": "1.32.1", + "version": "1.32.2", "description": "React components of the Wave design system for your Front-End project", "main": "lib/cjs/index.js", "typings": "lib/types/index.d.ts", From 75243ec6b379fd7aab7d2ea4141e8de69640f85e Mon Sep 17 00:00:00 2001 From: Leonardo Date: Thu, 17 Aug 2023 14:38:12 +0200 Subject: [PATCH 03/23] fix: add border secondary (#355) Co-authored-by: Leonardo Di Vittorio --- src/essentials/Colors/Colors.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts index b6ea9671d..0cee847af 100644 --- a/src/essentials/Colors/Colors.ts +++ b/src/essentials/Colors/Colors.ts @@ -81,6 +81,7 @@ export const SemanticColors = { }, border: { primary: Colors.AUTHENTIC_BLUE_200, + secondary: Colors.AUTHENTIC_BLUE_50, info: Colors.ACTION_BLUE_350, danger: Colors.NEGATIVE_ORANGE_350, success: Colors.POSITIVE_GREEN_350, From 510d91871f5ebee4e682d6809556595acb4ef77b Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Thu, 17 Aug 2023 12:40:19 +0000 Subject: [PATCH 04/23] chore(release): 1.32.2 [skip ci] ### [1.32.2](https://github.com/freenowtech/wave/compare/v1.32.1...v1.32.2) (2023-08-17) ### Bug Fixes * add border secondary ([#355](https://github.com/freenowtech/wave/issues/355)) ([75243ec](https://github.com/freenowtech/wave/commit/75243ec6b379fd7aab7d2ea4141e8de69640f85e)) --- docs/changelog.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/changelog.mdx b/docs/changelog.mdx index 1938737e8..7d573f0c7 100644 --- a/docs/changelog.mdx +++ b/docs/changelog.mdx @@ -5,6 +5,13 @@ cardHeadline: Changelog cardSubHeadline: Keep up to date with the latest releases of @freenow/wave --- +### [1.32.2](https://github.com/freenowtech/wave/compare/v1.32.1...v1.32.2) (2023-08-17) + + +### Bug Fixes + +* add border secondary ([#355](https://github.com/freenowtech/wave/issues/355)) ([75243ec](https://github.com/freenowtech/wave/commit/75243ec6b379fd7aab7d2ea4141e8de69640f85e)) + ### [1.32.1](https://github.com/freenowtech/wave/compare/v1.32.0...v1.32.1) (2023-07-27) From ed82e05c35b8c8e31ed27b158f4e47a95d9199e3 Mon Sep 17 00:00:00 2001 From: Leonardo Date: Fri, 18 Aug 2023 14:25:45 +0200 Subject: [PATCH 05/23] feat: add breadcrumbs component (#353) * feat: add breadcrumbs component * feat: add a11y properites --------- Co-authored-by: Leonardo Di Vittorio --- .../Breadcrumbs/Breadcrumbs.spec.tsx | 38 ++++++++ src/components/Breadcrumbs/Breadcrumbs.tsx | 92 +++++++++++++++++++ .../Breadcrumbs/docs/Breadcrumbs.stories.tsx | 46 ++++++++++ .../docs/Breadcrumbs.storybook.mdx | 39 ++++++++ .../Breadcrumbs/docs/DefaultBreadcrumbs.tsx | 10 ++ 5 files changed, 225 insertions(+) create mode 100644 src/components/Breadcrumbs/Breadcrumbs.spec.tsx create mode 100644 src/components/Breadcrumbs/Breadcrumbs.tsx create mode 100644 src/components/Breadcrumbs/docs/Breadcrumbs.stories.tsx create mode 100644 src/components/Breadcrumbs/docs/Breadcrumbs.storybook.mdx create mode 100644 src/components/Breadcrumbs/docs/DefaultBreadcrumbs.tsx diff --git a/src/components/Breadcrumbs/Breadcrumbs.spec.tsx b/src/components/Breadcrumbs/Breadcrumbs.spec.tsx new file mode 100644 index 000000000..2af096853 --- /dev/null +++ b/src/components/Breadcrumbs/Breadcrumbs.spec.tsx @@ -0,0 +1,38 @@ +import { render, screen } from '@testing-library/react'; +import * as React from 'react'; +import { Breadcrumbs } from './Breadcrumbs'; + +const renderBreadCrumbs = () => + render( + + Path + to + Glory + + ); + +describe('Breadcrumbs', () => { + it('renders a if we use Link', () => { + expect(render(Children)).toMatchHtmlTag('a'); + }); + + it('renders a if we use Item', () => { + expect(render(Children)).toMatchHtmlTag('span'); + }); + + it('renders the children', () => { + renderBreadCrumbs(); + expect(screen.getByText('Path')).toBeInTheDocument(); + expect(screen.getByText('to')).toBeInTheDocument(); + expect(screen.getByText('Glory')).toBeInTheDocument(); + }); + + it('passes href to underlying element', () => { + const expectedHref = 'https://free-now.com/'; + const anchorElement = render( + Path + ).container.querySelector('a'); + + expect(anchorElement).toHaveAttribute('href', expectedHref); + }); +}); diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 000000000..557b38532 --- /dev/null +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,92 @@ +import React, { Children, ComponentPropsWithoutRef, ReactElement, ReactNode, cloneElement } from 'react'; +import styled from 'styled-components'; + +import { ChevronRightIcon } from '../../icons'; +import { Text } from '../Text/Text'; + +import { Colors } from '../../essentials'; +import { theme } from '../../essentials/theme'; +import { get } from '../../utils/themeGet'; +import { Box } from '../Box/Box'; + +interface InvertedStyle { + /** + * Adjust color for display on a dark background + * @default false + */ + inverted?: boolean; +} + +interface BreadcrumbsProps extends InvertedStyle { + /** + * Content of the Breadcrumbs + * @required + */ + children: ReactNode; +} + +interface LinkProps extends ComponentPropsWithoutRef<'a'>, InvertedStyle {} + +type ItemProps = InvertedStyle; + +const BreadcrumbsList = styled.ul` + padding: 0; + list-style: none; + display: flex; +`; + +const BreadcrumbsListItem = styled.li` + display: flex; +`; + +const Breadcrumbs = ({ children, inverted }: BreadcrumbsProps): JSX.Element => { + const arrayChildren = Children.toArray(children); + + return ( + + {Children.map(arrayChildren, (child, index) => ( + + + {index < arrayChildren.length - 1 ? ( + + + + ) : // eslint-disable-next-line unicorn/no-null + null} + + ))} + + ); +}; + +const Link = styled.a.attrs({ theme })` + display: inline-block; + color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)}; + cursor: pointer; + line-height: 1.4; + font-family: ${get('fonts.normal')}; + font-size: ${get('fontSizes.1')}; + text-decoration: none; + padding: 0 0.25rem 0 0.25rem; + + &:hover, + &:active { + color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_350 : Colors.ACTION_BLUE_1000)}; + text-decoration: underline; + } +`; + +const Item = styled(Text).attrs(({ inverted }: ItemProps) => ({ + secondary: inverted, + fontSize: 'small', + padding: '0 0.25rem 0 0.25rem' +}))``; + +Breadcrumbs.Item = Item; +Breadcrumbs.Link = Link; + +export { Breadcrumbs }; diff --git a/src/components/Breadcrumbs/docs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/docs/Breadcrumbs.stories.tsx new file mode 100644 index 000000000..1449e56fb --- /dev/null +++ b/src/components/Breadcrumbs/docs/Breadcrumbs.stories.tsx @@ -0,0 +1,46 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { onDarkBackground } from '../../../docs/parameters'; +import { Breadcrumbs } from '../Breadcrumbs'; +import { DefaultBreadcrumbs } from './DefaultBreadcrumbs'; + +const meta: Meta = { + title: 'Components/Breadcrumbs', + component: Breadcrumbs, + argTypes: { + children: { + table: { + type: { + summary: 'ReactNode' + } + } + }, + inverted: { + options: [true, false], + control: 'select', + table: { + type: { + summary: 'boolean' + } + } + } + } +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: DefaultBreadcrumbs +}; + +export const Inverted: Story = { + args: { + inverted: true + }, + render: DefaultBreadcrumbs, + parameters: { + ...onDarkBackground + } +}; diff --git a/src/components/Breadcrumbs/docs/Breadcrumbs.storybook.mdx b/src/components/Breadcrumbs/docs/Breadcrumbs.storybook.mdx new file mode 100644 index 000000000..d4f416364 --- /dev/null +++ b/src/components/Breadcrumbs/docs/Breadcrumbs.storybook.mdx @@ -0,0 +1,39 @@ +import { Primary, Stories, ArgTypes, Meta } from '@storybook/blocks'; +import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'; +import * as Breadcrumbs from './Breadcrumbs.stories'; + + + +# Breadcrumbs + + + +## Properties + + + +## Compound components approach + +You can create your Breadcrumbs with active links and text using the following components" + +- **Breadcrumbs** (Wrapper) +- **Breadcrumbs.Link** +- **Breadcrumbs.Text** + +The wrapper component (**Breadcrumbs**) expects a list of children and will render them with the separator. If Inverted variant is passed it will afftect the children. + +We can pass to the Link our favourite router passing the RouterLink in the `as` prop, avoiding the reload of the `a` tags. + +```tsx + + Path + + to + + Glory + +``` + +{/* */} + + diff --git a/src/components/Breadcrumbs/docs/DefaultBreadcrumbs.tsx b/src/components/Breadcrumbs/docs/DefaultBreadcrumbs.tsx new file mode 100644 index 000000000..bebb7926c --- /dev/null +++ b/src/components/Breadcrumbs/docs/DefaultBreadcrumbs.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Breadcrumbs } from '../Breadcrumbs'; + +export const DefaultBreadcrumbs = ({ ...props }) => ( + + Path + to + Glory + +); From ac726a27211958b99f1eda464c9f771994312486 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 18 Aug 2023 12:27:56 +0000 Subject: [PATCH 06/23] chore(release): 1.33.0 [skip ci] ## [1.33.0](https://github.com/freenowtech/wave/compare/v1.32.2...v1.33.0) (2023-08-18) ### Features * add breadcrumbs component ([#353](https://github.com/freenowtech/wave/issues/353)) ([ed82e05](https://github.com/freenowtech/wave/commit/ed82e05c35b8c8e31ed27b158f4e47a95d9199e3)) --- docs/changelog.mdx | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/changelog.mdx b/docs/changelog.mdx index 7d573f0c7..18903686c 100644 --- a/docs/changelog.mdx +++ b/docs/changelog.mdx @@ -5,6 +5,13 @@ cardHeadline: Changelog cardSubHeadline: Keep up to date with the latest releases of @freenow/wave --- +## [1.33.0](https://github.com/freenowtech/wave/compare/v1.32.2...v1.33.0) (2023-08-18) + + +### Features + +* add breadcrumbs component ([#353](https://github.com/freenowtech/wave/issues/353)) ([ed82e05](https://github.com/freenowtech/wave/commit/ed82e05c35b8c8e31ed27b158f4e47a95d9199e3)) + ### [1.32.2](https://github.com/freenowtech/wave/compare/v1.32.1...v1.32.2) (2023-08-17) diff --git a/package-lock.json b/package-lock.json index a6ba8ecaf..672aef2d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@freenow/wave", - "version": "1.32.2", + "version": "1.33.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@freenow/wave", - "version": "1.32.2", + "version": "1.33.0", "license": "Apache-2.0", "dependencies": { "@datepicker-react/hooks": "^2.3.1", diff --git a/package.json b/package.json index 97f0a2d7a..6d34d103a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@freenow/wave", - "version": "1.32.2", + "version": "1.33.0", "description": "React components of the Wave design system for your Front-End project", "main": "lib/cjs/index.js", "typings": "lib/types/index.d.ts", From e0eecdd05b84370cb18e4cf8c1985f49c4f1f8e1 Mon Sep 17 00:00:00 2001 From: hackbnw <420178+hackbnw@users.noreply.github.com> Date: Fri, 1 Sep 2023 10:15:31 +0200 Subject: [PATCH 07/23] feat: add error Tag and SelectList variants (#372) * fix: add Open Sans font to storybook * feat: add variants of tag component in Tag and SelectList (#354) * feat: add variants of tag component, resolve comments --------- Co-authored-by: Yurii Pavlovskyi --- .storybook/preview-head.html | 7 ++ src/components/SelectList/SelectList.spec.tsx | 62 +++++++++++ src/components/SelectList/SelectList.tsx | 98 +++++++++++++---- .../SelectList/docs/SelectList.stories.tsx | 33 ++++++ src/components/Tag/Tag.spec.tsx | 32 +++++- src/components/Tag/Tag.tsx | 100 ++++++++++++++---- .../Tag/__snapshots__/Tag.spec.tsx.snap | 15 ++- 7 files changed, 307 insertions(+), 40 deletions(-) create mode 100644 src/components/SelectList/SelectList.spec.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 11d42c2bd..f5f0a55a6 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -3,5 +3,12 @@ + + + diff --git a/src/components/SelectList/SelectList.spec.tsx b/src/components/SelectList/SelectList.spec.tsx new file mode 100644 index 000000000..01c5247b1 --- /dev/null +++ b/src/components/SelectList/SelectList.spec.tsx @@ -0,0 +1,62 @@ +import { render, screen } from '@testing-library/react'; +import * as React from 'react'; +import { SelectList } from './SelectList'; +import { SemanticColors } from '../../essentials'; + +describe('SelectList', () => { + it('renders options in multi select', () => { + const options = [ + { + label: 'Sales', + value: 'sales' + }, + { + label: 'Marketing', + value: 'marketing', + error: true + } + ]; + + render(); + + const normalTag = screen.getByText('Sales').parentElement; + expect(normalTag).toHaveStyle(` + background-color: ${SemanticColors.background.info}; + border-color: ${SemanticColors.border.infoEmphasized}; + `); + + const errorTag = screen.getByText('Marketing').parentElement; + expect(errorTag).toHaveStyle(` + background-color: transparent; + border-color: ${SemanticColors.border.dangerEmphasized}; + `); + }); + + it('disables options in multi select when control is disabled', () => { + const options = [ + { + label: 'Sales', + value: 'sales' + }, + { + label: 'Marketing', + value: 'marketing', + error: true + } + ]; + + render(); + + const normalTag = screen.getByText('Sales').parentElement; + expect(normalTag).toHaveStyle(` + background-color: transparent; + border-color: ${SemanticColors.border.primary}; + `); + + const errorTag = screen.getByText('Marketing').parentElement; + expect(errorTag).toHaveStyle(` + background-color: transparent; + border-color: ${SemanticColors.border.primary}; + `); + }); +}); diff --git a/src/components/SelectList/SelectList.tsx b/src/components/SelectList/SelectList.tsx index 1c47091b1..d78a7134f 100644 --- a/src/components/SelectList/SelectList.tsx +++ b/src/components/SelectList/SelectList.tsx @@ -21,6 +21,23 @@ import { SelectListProps } from './types'; type WithSelectProps = T & { selectProps: SelectListProps }; +const getOptionError = (option: unknown): boolean => + typeof option === 'object' && 'error' in option && Boolean(option.error); + +const getOptionVariant = (selectProps: Props, option: unknown): 'default' | 'disabled' | 'error' => { + if (selectProps.isDisabled) { + return 'disabled'; + } + + if (getOptionError(option)) { + return 'error'; + } + + return 'default'; +}; + +const getColor = (key: string, props: Props) => String(get(key)(props)); + const customStyles: StylesConfig = { container: (provided, { selectProps }: WithSelectProps) => { const bSize = { @@ -169,35 +186,79 @@ const customStyles: StylesConfig = { cursor: state.isDisabled ? 'not-allowed' : 'default' }; }, - multiValue: (provided, { selectProps }: { selectProps: Props }) => { + multiValue: (provided, { selectProps, data }) => { + const optionVariant = getOptionVariant(selectProps, data); + const styles = { ...provided, - color: Colors.ACTION_BLUE_900, - border: `0.0625rem solid ${Colors.ACTION_BLUE_900}`, + border: '0.0625rem solid', borderRadius: '1rem', - backgroundColor: Colors.ACTION_BLUE_50, marginRight: '0.375rem', marginTop: '0.125rem', marginLeft: 0, marginBottom: '0.125rem', maxWidth: 'calc(100% - 0.5rem)', - transition: 'color 125ms ease, background-color 125ms ease', - '&:hover': { - backgroundColor: Colors.ACTION_BLUE_900, - color: Colors.WHITE - } + transition: 'color 125ms ease, background-color 125ms ease' }; - if (selectProps.isDisabled) { - return { - ...styles, - color: Colors.AUTHENTIC_BLUE_200, - backgroundColor: 'transparent', - borderColor: Colors.AUTHENTIC_BLUE_200 - }; - } + switch (optionVariant) { + case 'disabled': + return { + ...styles, + + color: getColor('semanticColors.text.disabled', selectProps), + backgroundColor: 'transparent', + borderColor: getColor('semanticColors.border.primary', selectProps), + + '> [role="button"]': { + color: getColor('semanticColors.icon.disabled', selectProps) + } + }; + case 'error': + return { + ...styles, + color: getColor('semanticColors.text.dangerInverted', selectProps), + backgroundColor: 'transparent', + borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps), + + '> [role="button"]': { + color: getColor('semanticColors.icon.danger', selectProps) + }, + + '&:hover': { + color: getColor('semanticColors.text.primaryInverted', selectProps), + backgroundColor: getColor('semanticColors.background.dangerEmphasized', selectProps), + borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps), - return styles; + '> [role="button"]': { + color: getColor('semanticColors.icon.primaryInverted', selectProps) + } + } + }; + case 'default': + default: + return { + ...styles, + + color: getColor('semanticColors.text.link', selectProps), + backgroundColor: getColor('semanticColors.background.info', selectProps), + borderColor: getColor('semanticColors.border.infoEmphasized', selectProps), + + '> [role="button"]': { + color: getColor('semanticColors.icon.action', selectProps) + }, + + '&:hover': { + color: getColor('semanticColors.text.primaryInverted', selectProps), + backgroundColor: getColor('semanticColors.background.infoEmphasized', selectProps), + borderColor: getColor('semanticColors.border.infoEmphasized', selectProps), + + '> [role="button"]': { + color: getColor('semanticColors.icon.primaryInverted', selectProps) + } + } + }; + } }, multiValueLabel: (provided, { selectProps }) => ({ ...provided, @@ -214,6 +275,7 @@ const customStyles: StylesConfig = { paddingLeft: '0', paddingRight: '0.25rem', paddingTop: '0', + transition: 'color 125ms ease', '&:hover': { color: 'inherit', background: 'transparent' diff --git a/src/components/SelectList/docs/SelectList.stories.tsx b/src/components/SelectList/docs/SelectList.stories.tsx index 29c36a2f2..5b0a9eac7 100644 --- a/src/components/SelectList/docs/SelectList.stories.tsx +++ b/src/components/SelectList/docs/SelectList.stories.tsx @@ -75,6 +75,39 @@ export const WithError: Story = { } }; +const errorOptions = [ + { + label: 'Sales', + value: 'sales' + }, + { + label: 'Marketing', + value: 'marketing', + error: true + } +]; + +export const MultiSelectError: Story = { + args: { + label: 'Multi select with error', + error: true, + isMulti: true, + options: errorOptions, + value: errorOptions + } +}; + +export const MultiSelectDisabled: Story = { + args: { + label: 'Disabled multi select', + error: true, + isMulti: true, + isDisabled: true, + options: errorOptions, + value: errorOptions + } +}; + export const Inverted: Story = { args: { inverted: true diff --git a/src/components/Tag/Tag.spec.tsx b/src/components/Tag/Tag.spec.tsx index f0c0c4bee..ebcba9783 100644 --- a/src/components/Tag/Tag.spec.tsx +++ b/src/components/Tag/Tag.spec.tsx @@ -1,6 +1,7 @@ -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, screen } from '@testing-library/react'; import * as React from 'react'; import { Tag } from './Tag'; +import { SemanticColors } from '../../essentials'; describe('Tag', () => { it('renders with default props', () => { @@ -26,4 +27,33 @@ describe('Tag', () => { expect(queryByTestId('dismiss-icon')).toBeNull(); }); + + it('renders disabled variant', () => { + const { container } = render(Lorem); + + expect(container.firstChild).toHaveStyle(` + border-color: ${SemanticColors.border.primary}; + `); + expect(screen.getByText('Lorem')).toHaveStyle(` + color: ${SemanticColors.text.disabled}; + `); + expect(screen.getByTestId('dismiss-icon')).toHaveStyle(` + color: ${SemanticColors.icon.disabled}; + `); + }); + + it('renders error variant', () => { + const { container } = render(Lorem); + + expect(container.firstChild).toHaveStyle(` + background-color: ${SemanticColors.background.danger}; + border-color: ${SemanticColors.border.dangerEmphasized}; + `); + expect(screen.getByText('Lorem')).toHaveStyle(` + color: ${SemanticColors.text.dangerInverted}; + `); + expect(screen.getByTestId('dismiss-icon')).toHaveStyle(` + color: ${SemanticColors.icon.danger}; + `); + }); }); diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 1422ecf68..15a2444a0 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -1,6 +1,6 @@ import React, { FC, MouseEvent, PropsWithChildren } from 'react'; import styled from 'styled-components'; -import { margin, MarginProps } from 'styled-system'; +import { margin, MarginProps, variant } from 'styled-system'; import { Colors } from '../../essentials'; import { theme } from '../../essentials/theme'; @@ -17,10 +17,14 @@ interface TagProps extends MarginProps { * The prop to determine whether the dismiss functionality is enabled */ dismissible?: boolean; + /** + * Set the appropriate semantic tag color. + * @default default + */ + variant?: 'default' | 'disabled' | 'error'; } const TagText = styled(Text).attrs({ theme })>` - color: ${Colors.ACTION_BLUE_900}; margin-left: 0.75rem; margin-right: ${props => (props.dismissible ? '0.25rem' : '0.75rem')}; font-size: ${get('fontSizes.1')}; @@ -38,10 +42,75 @@ const DismissIcon = styled(CloseIcon).attrs({ size: 18 })` } `; +const tagVariant = variant({ + variants: { + default: { + backgroundColor: get('semanticColors.background.info'), + borderColor: get('semanticColors.border.infoEmphasized'), + + [`> ${TagText}`]: { + color: get('semanticColors.text.link') + }, + + [`> ${DismissIcon}`]: { + color: get('semanticColors.icon.action') + }, + + '&:hover': { + backgroundColor: get('semanticColors.background.infoEmphasized'), + borderColor: get('semanticColors.border.infoEmphasized'), + + [`> ${TagText}`]: { + color: get('semanticColors.text.primaryInverted') + }, + + [`> ${DismissIcon}`]: { + color: get('semanticColors.icon.primaryInverted') + } + } + }, + disabled: { + borderColor: get('semanticColors.border.primary'), + + [`> ${TagText}`]: { + color: get('semanticColors.text.disabled') + }, + + [`> ${DismissIcon}`]: { + color: get('semanticColors.icon.disabled') + } + }, + error: { + backgroundColor: get('semanticColors.background.danger'), + borderColor: get('semanticColors.border.dangerEmphasized'), + + [`> ${TagText}`]: { + color: get('semanticColors.text.dangerInverted') + }, + + [`> ${DismissIcon}`]: { + color: get('semanticColors.icon.danger') + }, + + '&:hover': { + backgroundColor: get('semanticColors.background.dangerEmphasized'), + borderColor: get('semanticColors.border.dangerEmphasized'), + + [`> ${TagText}`]: { + color: get('semanticColors.text.primaryInverted') + }, + + [`> ${DismissIcon}`]: { + color: get('semanticColors.icon.primaryInverted') + } + } + } + } +}); + const TagWrapper = styled.div.attrs({ theme })` box-sizing: border-box; - background-color: ${Colors.ACTION_BLUE_50}; - border: solid 0.0625rem ${Colors.ACTION_BLUE_900}; + border: solid 0.0625rem; display: inline-flex; align-items: center; border-radius: 2rem; @@ -52,22 +121,17 @@ const TagWrapper = styled.div.attrs({ theme })` transition: background-color 125ms ease; ${margin} - - &:hover { - background-color: ${Colors.ACTION_BLUE_900}; - - > ${TagText} { - color: ${Colors.WHITE}; - } - - > ${DismissIcon} { - color: ${Colors.WHITE}; - } - } + ${tagVariant} `; -const Tag: FC> = ({ children, onDismiss, dismissible = true, ...rest }) => ( - +const Tag: FC> = ({ + children, + onDismiss, + dismissible = true, + variant: variantValue = 'default', + ...rest +}) => ( + {children} {dismissible && } diff --git a/src/components/Tag/__snapshots__/Tag.spec.tsx.snap b/src/components/Tag/__snapshots__/Tag.spec.tsx.snap index b890de961..a6b868a71 100644 --- a/src/components/Tag/__snapshots__/Tag.spec.tsx.snap +++ b/src/components/Tag/__snapshots__/Tag.spec.tsx.snap @@ -10,7 +10,6 @@ exports[`Tag renders with default props 1`] = ` } .c3 { - color: #096BDB; margin-left: 0.75rem; margin-right: 0.25rem; font-size: 0.875rem; @@ -32,8 +31,7 @@ exports[`Tag renders with default props 1`] = ` .c0 { box-sizing: border-box; - background-color: #F1F7FD; - border: solid 0.0625rem #096BDB; + border: solid 0.0625rem; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -49,10 +47,21 @@ exports[`Tag renders with default props 1`] = ` padding: 0.375rem 0; -webkit-transition: background-color 125ms ease; transition: background-color 125ms ease; + background-color: #F1F7FD; + border-color: #096BDB; +} + +.c0 > .c1 { + color: #096BDB; +} + +.c0 > .c4 { + color: #096BDB; } .c0:hover { background-color: #096BDB; + border-color: #096BDB; } .c0:hover > .c1 { From 205bb360123d58e377b12dea4f5e3f0a5a870d12 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 1 Sep 2023 08:17:57 +0000 Subject: [PATCH 08/23] chore(release): 1.34.0 [skip ci] ## [1.34.0](https://github.com/freenowtech/wave/compare/v1.33.0...v1.34.0) (2023-09-01) ### Features * add error Tag and SelectList variants ([#372](https://github.com/freenowtech/wave/issues/372)) ([e0eecdd](https://github.com/freenowtech/wave/commit/e0eecdd05b84370cb18e4cf8c1985f49c4f1f8e1)), closes [#354](https://github.com/freenowtech/wave/issues/354) --- docs/changelog.mdx | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/changelog.mdx b/docs/changelog.mdx index 18903686c..ca3993601 100644 --- a/docs/changelog.mdx +++ b/docs/changelog.mdx @@ -5,6 +5,13 @@ cardHeadline: Changelog cardSubHeadline: Keep up to date with the latest releases of @freenow/wave --- +## [1.34.0](https://github.com/freenowtech/wave/compare/v1.33.0...v1.34.0) (2023-09-01) + + +### Features + +* add error Tag and SelectList variants ([#372](https://github.com/freenowtech/wave/issues/372)) ([e0eecdd](https://github.com/freenowtech/wave/commit/e0eecdd05b84370cb18e4cf8c1985f49c4f1f8e1)), closes [#354](https://github.com/freenowtech/wave/issues/354) + ## [1.33.0](https://github.com/freenowtech/wave/compare/v1.32.2...v1.33.0) (2023-08-18) diff --git a/package-lock.json b/package-lock.json index 672aef2d3..0a8ec6cf2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@freenow/wave", - "version": "1.33.0", + "version": "1.34.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@freenow/wave", - "version": "1.33.0", + "version": "1.34.0", "license": "Apache-2.0", "dependencies": { "@datepicker-react/hooks": "^2.3.1", diff --git a/package.json b/package.json index 6d34d103a..bb720afe2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@freenow/wave", - "version": "1.33.0", + "version": "1.34.0", "description": "React components of the Wave design system for your Front-End project", "main": "lib/cjs/index.js", "typings": "lib/types/index.d.ts", From 8efebf7d89a59b8a0068a3e19d1514329939582e Mon Sep 17 00:00:00 2001 From: martimalek <46452321+martimalek@users.noreply.github.com> Date: Wed, 20 Sep 2023 13:42:43 +0200 Subject: [PATCH 09/23] refactor: replace deprecated weak prop for secondary in text usages (#375) --- src/components/FilePicker/FilePicker.tsx | 28 +++++++++++-------- src/components/Modal/docs/ModalCreator.tsx | 2 +- .../Pagination/docs/PaginationProvider.tsx | 8 +++--- .../Table/docs/ComplexDataTable.tsx | 10 +++---- src/components/Table/docs/DefaultTable.tsx | 6 ++-- src/components/Table/docs/SkeletonTable.tsx | 2 +- .../Spaces/docs/SpacesContainer.tsx | 2 +- 7 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/components/FilePicker/FilePicker.tsx b/src/components/FilePicker/FilePicker.tsx index 470e554e4..b27e114a4 100644 --- a/src/components/FilePicker/FilePicker.tsx +++ b/src/components/FilePicker/FilePicker.tsx @@ -100,17 +100,17 @@ const Outliner = styled(Box)` ${({ hasValidFile }) => hasValidFile && css` - ${MediaQueries.medium} { - &:hover { - background-color: ${Colors.ACTION_BLUE_50}; - border-color: ${Colors.ACTION_BLUE_50}; - - svg:not([color='${Colors.POSITIVE_GREEN_900}']) path { - fill: ${Colors.ACTION_BLUE_900}; - } + ${MediaQueries.medium} { + &:hover { + background-color: ${Colors.ACTION_BLUE_50}; + border-color: ${Colors.ACTION_BLUE_50}; + + svg:not([color='${Colors.POSITIVE_GREEN_900}']) path { + fill: ${Colors.ACTION_BLUE_900}; } } - `} + } + `} `; const Input = styled.input` @@ -190,7 +190,7 @@ const FilePicker: FC = ({ {label} - + {file && shrinkFileName(file)} @@ -204,9 +204,13 @@ const FilePicker: FC = ({ )} - {!alwaysShowActionButton && validFileSelected ? : } + {!alwaysShowActionButton && validFileSelected ? ( + + ) : ( + + )} - + ); }; diff --git a/src/components/Modal/docs/ModalCreator.tsx b/src/components/Modal/docs/ModalCreator.tsx index 35b89a415..e82d1253e 100644 --- a/src/components/Modal/docs/ModalCreator.tsx +++ b/src/components/Modal/docs/ModalCreator.tsx @@ -5,7 +5,7 @@ import { Modal } from '../Modal'; export const modalContent = (dismiss: () => void): React.ReactElement => ( <> Add Note - + Please keep in mind that comments are also read by other agents. Make sure to write comprehensible text. diff --git a/src/components/Pagination/docs/PaginationProvider.tsx b/src/components/Pagination/docs/PaginationProvider.tsx index d712250ca..9acde6468 100644 --- a/src/components/Pagination/docs/PaginationProvider.tsx +++ b/src/components/Pagination/docs/PaginationProvider.tsx @@ -87,9 +87,9 @@ const NormalPagination: React.FC = () => ( pageSize={pageSize} totalItems={totalItems} label={ - + Page{' '} - + {currentPage} of {Math.ceil(totalItems / pageSize)} @@ -122,9 +122,9 @@ const PaginationWithPageSize: React.FC = () => ( pageSizes={pageSizes} totalItems={totalItems} label={ - + Page{' '} - + {currentPage} of {Math.ceil(totalItems / pageSize)} diff --git a/src/components/Table/docs/ComplexDataTable.tsx b/src/components/Table/docs/ComplexDataTable.tsx index 128eeadb2..b3c73b0fb 100644 --- a/src/components/Table/docs/ComplexDataTable.tsx +++ b/src/components/Table/docs/ComplexDataTable.tsx @@ -32,14 +32,14 @@ export const ComplexDataTable: FC = () => ( Große Elbstraße 273
- + 22767 Hamburg Holsteiner Chaussee 191
- + 22457 Hamburg @@ -73,7 +73,7 @@ export const ComplexDataTable: FC = () => ( Große Elbstraße 273
- + 22767 Hamburg @@ -95,14 +95,14 @@ export const ComplexDataTable: FC = () => ( Große Elbstraße 273
- + 22767 Hamburg Große Elbstraße 273
- + 22767 Hamburg diff --git a/src/components/Table/docs/DefaultTable.tsx b/src/components/Table/docs/DefaultTable.tsx index 0ab99920e..522bc31cf 100644 --- a/src/components/Table/docs/DefaultTable.tsx +++ b/src/components/Table/docs/DefaultTable.tsx @@ -23,7 +23,7 @@ export const DefaultTable: FC = (args: TableProps) => ( 5 July 2019 - 11:14
- + No activity yet @@ -53,7 +53,7 @@ export const DefaultTable: FC = (args: TableProps) => ( 27 February 2020 - 16:02
- + 17 Tours @@ -83,7 +83,7 @@ export const DefaultTable: FC = (args: TableProps) => ( 30 March 2020 - 18:19
- + 17 Tours diff --git a/src/components/Table/docs/SkeletonTable.tsx b/src/components/Table/docs/SkeletonTable.tsx index 56e754c0d..dc192d1fa 100644 --- a/src/components/Table/docs/SkeletonTable.tsx +++ b/src/components/Table/docs/SkeletonTable.tsx @@ -66,7 +66,7 @@ export const SkeletonTable: FC = () => { {entry.date}
- + {entry.activity} diff --git a/src/essentials/Spaces/docs/SpacesContainer.tsx b/src/essentials/Spaces/docs/SpacesContainer.tsx index c25d4e66d..d3509d94d 100644 --- a/src/essentials/Spaces/docs/SpacesContainer.tsx +++ b/src/essentials/Spaces/docs/SpacesContainer.tsx @@ -38,7 +38,7 @@ const SpacesContainer: React.FC = () => ( {space} - + {Number(space.replace('rem', '')) * 16}px From d305bf7bde07774e5a4709f9ce80d0989c8a5099 Mon Sep 17 00:00:00 2001 From: martimalek <46452321+martimalek@users.noreply.github.com> Date: Tue, 26 Sep 2023 16:04:13 +0200 Subject: [PATCH 10/23] refactor: migrate Datepicker to popper positioning engine (#378) * refactor: migrate Datepicker to popper positioning engine * build: remove react-tether dependency * chore: remove unnecessary prop types and use useState directly --- package-lock.json | 33 --- package.json | 1 - src/components/Datepicker/Datepicker.tsx | 27 +-- .../Datepicker/DatepickerContentElements.tsx | 40 ++++ .../Datepicker/DatepickerRangeInput.tsx | 193 ++++++++++-------- .../Datepicker/DatepickerSingleInput.tsx | 147 ++++++------- .../Datepicker/GlobalDatepickerStyle.ts | 39 ---- .../Tooltip/docs/Tooltip.storybook.mdx | 2 +- 8 files changed, 233 insertions(+), 249 deletions(-) create mode 100644 src/components/Datepicker/DatepickerContentElements.tsx delete mode 100644 src/components/Datepicker/GlobalDatepickerStyle.ts diff --git a/package-lock.json b/package-lock.json index 0a8ec6cf2..f9616444d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "date-fns": "^2.11.1", "nanoid": "^3.1.23", "react-popper": "^2.3.0", - "react-tether": "^2.0.7", "react-transition-group": "^4.3.0", "react-windowed-select": "^4.0.0", "styled-system": "^5.1.5", @@ -28440,19 +28439,6 @@ "react": "^16.3.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-tether": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-2.0.8.tgz", - "integrity": "sha512-k5imIcN7shOy0z59WKLljvBwmGqzAcqsjHtBk8h03F3aFn+Wdz4p56ecOLCqvBb/gpQp9WEFv+Saclro6GZQCQ==", - "dependencies": { - "prop-types": "^15.6.2", - "tether": "^1.4.5" - }, - "peerDependencies": { - "react": "^16.3.0 || ^17", - "react-dom": "^16.3.0 || ^17" - } - }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -32154,11 +32140,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/tether": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.7.tgz", - "integrity": "sha512-Z0J1aExjoFU8pybVkQAo/vD2wfSO63r+XOPfWQMC5qtf1bI7IWqNk4MiyBcgvvnY8kqnY06dVdvwTK2S3PU/Fw==" - }, "node_modules/text-extensions": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz", @@ -55250,15 +55231,6 @@ "dev": true, "requires": {} }, - "react-tether": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-2.0.8.tgz", - "integrity": "sha512-k5imIcN7shOy0z59WKLljvBwmGqzAcqsjHtBk8h03F3aFn+Wdz4p56ecOLCqvBb/gpQp9WEFv+Saclro6GZQCQ==", - "requires": { - "prop-types": "^15.6.2", - "tether": "^1.4.5" - } - }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -58162,11 +58134,6 @@ } } }, - "tether": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.7.tgz", - "integrity": "sha512-Z0J1aExjoFU8pybVkQAo/vD2wfSO63r+XOPfWQMC5qtf1bI7IWqNk4MiyBcgvvnY8kqnY06dVdvwTK2S3PU/Fw==" - }, "text-extensions": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz", diff --git a/package.json b/package.json index bb720afe2..b17b47d2e 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,6 @@ "date-fns": "^2.11.1", "nanoid": "^3.1.23", "react-popper": "^2.3.0", - "react-tether": "^2.0.7", "react-transition-group": "^4.3.0", "react-windowed-select": "^4.0.0", "styled-system": "^5.1.5", diff --git a/src/components/Datepicker/Datepicker.tsx b/src/components/Datepicker/Datepicker.tsx index bf6cbc6e0..dc313d9c6 100755 --- a/src/components/Datepicker/Datepicker.tsx +++ b/src/components/Datepicker/Datepicker.tsx @@ -2,11 +2,10 @@ import React, { FC, RefObject } from 'react'; import { useDatepicker, MonthType, UseDatepickerProps } from '@datepicker-react/hooks'; import styled from 'styled-components'; -import { Colors, MediaQueries } from '../../essentials'; +import { Elevation, MediaQueries, SemanticColors } from '../../essentials'; import { ChevronLeftIcon, ChevronRightIcon } from '../../icons'; import { Month } from './Month'; import { DatepickerContext } from './DatepickerContext'; -import { GlobalDatepickerStyle } from './GlobalDatepickerStyle'; const DatepickerWrapper = styled.div<{ activeMonths: MonthType[]; @@ -20,22 +19,10 @@ const DatepickerWrapper = styled.div<{ const DatepickerContainer = styled.div` display: flex; padding: 0.5rem; - margin: 0.9375rem 0; - margin-left: -0.5rem; - box-shadow: 0 0 0.5rem 0.1875rem rgba(0, 0, 0, 0.08); + z-index: ${Elevation.DATEPICKER}; position: relative; - background: ${Colors.WHITE}; - - &::before { - content: ''; - position: absolute; - transform: rotate(45deg); - width: 1.25rem; - height: 1.25rem; - background: ${Colors.WHITE}; - box-shadow: -0.25rem -0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.08); - } + background: ${SemanticColors.forms.datePicker.calendar.background}; ${MediaQueries.small} { padding: 1.5rem; @@ -66,12 +53,7 @@ interface BaseDatepickerProps extends UseDatepickerProps { locale: Locale; } -export const BaseDatepicker: FC = ({ - forwardedRef, - focusedInput, - locale, - ...datepickerProps -}: BaseDatepickerProps) => { +const BaseDatepicker: FC = ({ forwardedRef, focusedInput, locale, ...datepickerProps }) => { const { firstDayOfWeek, activeMonths, @@ -105,7 +87,6 @@ export const BaseDatepicker: FC = ({ onDateHover }} > - { diff --git a/src/components/Datepicker/DatepickerContentElements.tsx b/src/components/Datepicker/DatepickerContentElements.tsx new file mode 100644 index 000000000..6f27a8e8f --- /dev/null +++ b/src/components/Datepicker/DatepickerContentElements.tsx @@ -0,0 +1,40 @@ +import styled, { css } from 'styled-components'; +import { SemanticColors } from '../../essentials'; + +const baseArrowStyles = css` + width: 1.25rem; + height: 1.25rem; + position: absolute; + background: inherit; +`; + +export const Arrow = styled.div` + visibility: hidden; + ${baseArrowStyles}; + + &::before { + ${baseArrowStyles}; + visibility: visible; + content: ''; + transform: rotate(45deg); + } +`; + +export const DatepickerContentContainer = styled.div` + background: ${SemanticColors.forms.datePicker.calendar.background}; + box-shadow: 0 0 0.5rem 0.1875rem rgba(0, 0, 0, 0.08); + + &[data-popper-placement^='top'] > ${Arrow} { + bottom: -0.625rem; + &::before { + box-shadow: 0.25rem 0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.08); + } + } + + &[data-popper-placement^='bottom'] > ${Arrow} { + top: -0.625rem; + &::before { + box-shadow: -0.25rem -0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.08); + } + } +`; diff --git a/src/components/Datepicker/DatepickerRangeInput.tsx b/src/components/Datepicker/DatepickerRangeInput.tsx index bef8afc74..cd6833677 100644 --- a/src/components/Datepicker/DatepickerRangeInput.tsx +++ b/src/components/Datepicker/DatepickerRangeInput.tsx @@ -1,10 +1,11 @@ import { END_DATE, FirstDayOfWeek, FocusedInput, START_DATE } from '@datepicker-react/hooks'; import { compareDesc, Locale, parse, startOfDay, endOfDay } from 'date-fns'; -import React, { ChangeEventHandler, FC, MutableRefObject, useEffect, useRef, useState } from 'react'; -import TetherComponent from 'react-tether'; +import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import { compose, margin, MarginProps, width, WidthProps } from 'styled-system'; -import { Colors, Elevation, MediaQueries } from '../../essentials'; +import { usePopper } from 'react-popper'; +import { createPortal } from 'react-dom'; +import { Colors, MediaQueries } from '../../essentials'; import { theme } from '../../essentials/theme'; import { useGeneratedId } from '../../utils/hooks/useGeneratedId'; import { ChevronRightIcon } from '../../icons'; @@ -16,6 +17,7 @@ import { HelperText } from '../HelperText/HelperText'; import { dateToDisplayText } from './utils/dateToDisplayText'; import { useLocaleObject } from './utils/useLocaleObject'; import { useOnChange } from './utils/useOnChange'; +import { Arrow, DatepickerContentContainer } from './DatepickerContentElements'; type DateRangerProps = MarginProps & WidthProps; @@ -203,6 +205,19 @@ const isValidRange = (startDate, endDate) => { return true; }; +type DatepickerPopperPlacement = 'bottom-end' | 'bottom-start' | 'bottom'; + +const PLACEMENT_TO_POPPER_PLACEMENT_MAP: { + [key in DatepickerRangeInputProps['placement']]: DatepickerPopperPlacement; +} = { + center: 'bottom', + left: 'bottom-start', + right: 'bottom-end' +}; + +const mapPlacementToPopperPlacement = (placement: DatepickerRangeInputProps['placement']) => + PLACEMENT_TO_POPPER_PLACEMENT_MAP[placement]; + const DatepickerRangeInput: FC = ({ minDate, maxDate, @@ -224,6 +239,10 @@ const DatepickerRangeInput: FC = ({ disabled, ...rest }: DatepickerRangeInputProps) => { + const [triggerReference, setTriggerReference] = useState(undefined); + const [contentReference, setContentReference] = useState(undefined); + const [arrowReference, setArrowReference] = useState(undefined); + const localeObject = useLocaleObject(locale); const startDateRef = useRef(); const endDateRef = useRef(); @@ -235,6 +254,29 @@ const DatepickerRangeInput: FC = ({ const [error, setError] = useState({ startDate: false, endDate: false }); const displayErrorMessage = typeof errorHandler === 'string'; + const mappedPlacement = mapPlacementToPopperPlacement(placement); + + const { styles, attributes } = usePopper(triggerReference, contentReference, { + placement: mappedPlacement, + modifiers: [ + { + name: 'flip', + enabled: true + }, + { + name: 'offset', + enabled: true, + options: { + offset: [0, 15] + } + }, + { + name: 'arrow', + options: { element: arrowReference } + } + ] + }); + const startId = useGeneratedId(startInputId); const endId = useGeneratedId(endInputId); @@ -330,85 +372,74 @@ const DatepickerRangeInput: FC = ({ }; return ( - ) => ( - <> - - setFocusedInput(START_DATE)} - // eslint-disable-next-line unicorn/no-null - onBlur={() => setFocusedInput(null)} - value={inputText.startText} - width="100%" - onChange={handleStartDateInputChange} - data-error={error.startDate} - disabled={disabled} - /> - {focusedInput === START_DATE && } - - setFocusedInput(!value.startDate ? START_DATE : END_DATE)} - // eslint-disable-next-line unicorn/no-null - onBlur={() => setFocusedInput(null)} - value={inputText.endText} - onChange={handleEndDateInputChange} - width="100%" - data-error={error.endDate} - disabled={disabled} - /> - {focusedInput === END_DATE && } - - {displayErrorMessage && (error.startDate || error.endDate) && !focusedInput && ( - {errorHandler || `error (${displayFormat})`} - )} - + <> + + setFocusedInput(START_DATE)} + // eslint-disable-next-line unicorn/no-null + onBlur={() => setFocusedInput(null)} + value={inputText.startText} + width="100%" + onChange={handleStartDateInputChange} + data-error={error.startDate} + disabled={disabled} + /> + {focusedInput === START_DATE && } + + setFocusedInput(!value.startDate ? START_DATE : END_DATE)} + // eslint-disable-next-line unicorn/no-null + onBlur={() => setFocusedInput(null)} + value={inputText.endText} + onChange={handleEndDateInputChange} + width="100%" + data-error={error.endDate} + disabled={disabled} + /> + {focusedInput === END_DATE && } + + {displayErrorMessage && (error.startDate || error.endDate) && !focusedInput && ( + {errorHandler || `error (${displayFormat})`} )} - renderElement={(ref: MutableRefObject) => - focusedInput && ( - = 768 ? 2 : 1} - minBookingDays={1} - startDate={value.startDate} - endDate={value.endDate} - minBookingDate={minDate} - maxBookingDate={maxDate} - firstDayOfWeek={firstDayOfWeek} - focusedInput={focusedInput} - onDatesChange={({ focusedInput: focusedValue, startDate, endDate }) => { - setFocusedInput(focusedValue); - handleDateChange(startDate || undefined, endDate || undefined); - }} - isDateBlocked={isDateBlocked} - locale={localeObject} - /> - ) - } - style={{ zIndex: Elevation.DATEPICKER }} - /> + {focusedInput && + createPortal( + + + = 768 ? 2 : 1} + minBookingDays={1} + startDate={value.startDate} + endDate={value.endDate} + minBookingDate={minDate} + maxBookingDate={maxDate} + firstDayOfWeek={firstDayOfWeek} + focusedInput={focusedInput} + onDatesChange={({ focusedInput: focusedValue, startDate, endDate }) => { + setFocusedInput(focusedValue); + handleDateChange(startDate || undefined, endDate || undefined); + }} + isDateBlocked={isDateBlocked} + locale={localeObject} + /> + , + document.body + )} + ); }; diff --git a/src/components/Datepicker/DatepickerSingleInput.tsx b/src/components/Datepicker/DatepickerSingleInput.tsx index 72360b7ea..adc8c88a6 100644 --- a/src/components/Datepicker/DatepickerSingleInput.tsx +++ b/src/components/Datepicker/DatepickerSingleInput.tsx @@ -1,17 +1,18 @@ import { FirstDayOfWeek, START_DATE } from '@datepicker-react/hooks'; import parse from 'date-fns/parse'; -import React, { ChangeEventHandler, FC, MutableRefObject, useEffect, useRef, useState } from 'react'; -import TetherComponent from 'react-tether'; +import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react'; import { MarginProps, WidthProps } from 'styled-system'; +import { usePopper } from 'react-popper'; +import { createPortal } from 'react-dom'; import { Input } from '../Input/Input'; import { Datepicker } from './Datepicker'; import { isValidDateText } from './utils/isValidDateText'; -import { Elevation } from '../../essentials'; import { useGeneratedId } from '../../utils/hooks/useGeneratedId'; import { HelperText } from '../HelperText/HelperText'; import { dateToDisplayText } from './utils/dateToDisplayText'; import { useLocaleObject } from './utils/useLocaleObject'; +import { Arrow, DatepickerContentContainer } from './DatepickerContentElements'; interface DatepickerSingleInputProps extends MarginProps, WidthProps { /** @@ -94,6 +95,10 @@ const DatepickerSingleInput: FC = ({ disabled, ...rest }: DatepickerSingleInputProps) => { + const [triggerReference, setTriggerReference] = useState(undefined); + const [contentReference, setContentReference] = useState(undefined); + const [arrowReference, setArrowReference] = useState(undefined); + const localeObject = useLocaleObject(locale); const inputRef = useRef(); const [isFocused, setIsFocused] = useState(false); @@ -101,6 +106,27 @@ const DatepickerSingleInput: FC = ({ const [error, setError] = useState(false); const displayErrorMessage = typeof errorHandler === 'string'; + const { styles, attributes } = usePopper(triggerReference, contentReference, { + placement: 'bottom-start', + modifiers: [ + { + name: 'flip', + enabled: true + }, + { + name: 'offset', + enabled: true, + options: { + offset: [0, 15] + } + }, + { + name: 'arrow', + options: { element: arrowReference } + } + ] + }); + const id = useGeneratedId(inputId); useEffect(() => { @@ -113,15 +139,6 @@ const DatepickerSingleInput: FC = ({ setInputText(dateToDisplayText(localeObject, displayFormat, value)); }, [value, localeObject, displayFormat]); - useEffect(() => { - // after opening the datepicker, bring back focus to the input - const target = inputRef.current && (inputRef.current.children[0] as HTMLInputElement); - - if (target && isFocused) { - target.focus(); - } - }, [isFocused]); - const handleDatepickerClose = () => { setIsFocused(false); @@ -151,66 +168,54 @@ const DatepickerSingleInput: FC = ({ }; return ( - ) => ( - <> - { - inputRef.current = element; - // eslint-disable-next-line no-param-reassign - ref.current = element; - }} - id={id} - autoComplete="off" - className="startDate" - data-testid="start-date-input" - label={label} - placeholder={placeholder} - value={inputText} - onFocus={() => setIsFocused(true)} - onBlur={handleDatepickerClose} - onChange={handleDateTextChange} - data-error={error} - disabled={disabled} - {...rest} - /> - {displayErrorMessage && error && !isFocused && ( - {errorHandler || `error (${displayFormat})`} - )} - + <> + { + setTriggerReference(element); + inputRef.current = element; + }} + id={id} + autoComplete="off" + className="startDate" + data-testid="start-date-input" + label={label} + placeholder={placeholder} + value={inputText} + onFocus={() => setIsFocused(true)} + onBlur={handleDatepickerClose} + onChange={handleDateTextChange} + data-error={error} + disabled={disabled} + {...rest} + /> + {displayErrorMessage && error && !isFocused && ( + {errorHandler || `error (${displayFormat})`} )} - renderElement={(ref: MutableRefObject) => - isFocused && ( - { - setIsFocused(focusedInput !== null); - handleDateChange(startDate || undefined); - }} - isDateBlocked={isDateBlocked} - locale={localeObject} - /> - ) - } - style={{ zIndex: Elevation.DATEPICKER }} - /> + {isFocused && + createPortal( + + + { + setIsFocused(focusedInput !== null); + handleDateChange(startDate || undefined); + }} + isDateBlocked={isDateBlocked} + locale={localeObject} + /> + , + document.body + )} + ); }; diff --git a/src/components/Datepicker/GlobalDatepickerStyle.ts b/src/components/Datepicker/GlobalDatepickerStyle.ts deleted file mode 100644 index 1a0e90d37..000000000 --- a/src/components/Datepicker/GlobalDatepickerStyle.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { createGlobalStyle } from 'styled-components'; - -// Position arrow automatically based on Tether -const GlobalDatepickerStyle = createGlobalStyle` - .tether-target-attached-left { - & > div { - &::before { - left: 6rem; - } - } - } - - .tether-target-attached-right { - & > div { - &::before { - right: 6rem; - } - } - } - - .tether-target-attached-bottom { - & > div { - &::before { - top: -0.625rem; - } - } - } - - .tether-target-attached-top { - & > div { - &::before { - bottom: -0.625rem; - transform: rotate(-135deg); - } - } - } -`; - -export { GlobalDatepickerStyle }; diff --git a/src/components/Tooltip/docs/Tooltip.storybook.mdx b/src/components/Tooltip/docs/Tooltip.storybook.mdx index 932607895..3b14e9065 100644 --- a/src/components/Tooltip/docs/Tooltip.storybook.mdx +++ b/src/components/Tooltip/docs/Tooltip.storybook.mdx @@ -48,7 +48,7 @@ Popper library [here](https://popper.js.org/). ## Technical Usage For the Tooltip to work properly, it needs to have a single child component to bind the mouse-enter and -leave events to. -The library `react-tether` which is used internally works with setting a `ref` to the child. To avoid complications, make +The library `react-popper` which is used internally works with setting a `ref` to the child. To avoid complications, make sure the child component supports the `ref` property. ```jsx From dc45a4fac3367cce490e97aacf5868cb731d2d06 Mon Sep 17 00:00:00 2001 From: Jan Hamara Date: Wed, 27 Sep 2023 13:04:12 +0200 Subject: [PATCH 11/23] main: export Breadcrumbs component --- src/components/Breadcrumbs/Breadcrumbs.tsx | 2 +- src/components/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index 557b38532..fc3cb5dd3 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -89,4 +89,4 @@ const Item = styled(Text).attrs(({ inverted }: ItemProps) => ({ Breadcrumbs.Item = Item; Breadcrumbs.Link = Link; -export { Breadcrumbs }; +export { Breadcrumbs, BreadcrumbsProps }; diff --git a/src/components/index.ts b/src/components/index.ts index aab1bda2f..4ff341967 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export { Accordion, AccordionProps } from './Accordion/Accordion'; +export { Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs'; export { Card, CardProps } from './Card/Card'; export { Dimming } from './Dimming/Dimming'; export { Headline, HeadlineProps } from './Headline/Headline'; From 17dbbda0c9ae8fab8cbe8284e337ba72cdd32eb4 Mon Sep 17 00:00:00 2001 From: Leonardo Di Vittorio Date: Wed, 27 Sep 2023 14:36:10 +0200 Subject: [PATCH 12/23] 1.34.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f9616444d..7ab5f2a40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@freenow/wave", - "version": "1.34.0", + "version": "1.34.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@freenow/wave", - "version": "1.34.0", + "version": "1.34.1", "license": "Apache-2.0", "dependencies": { "@datepicker-react/hooks": "^2.3.1", diff --git a/package.json b/package.json index b17b47d2e..dcc98d96d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@freenow/wave", - "version": "1.34.0", + "version": "1.34.1", "description": "React components of the Wave design system for your Front-End project", "main": "lib/cjs/index.js", "typings": "lib/types/index.d.ts", From ec26782480502cd884e0bc88653b165d15d7fc08 Mon Sep 17 00:00:00 2001 From: Lloyd Francis Date: Fri, 29 Sep 2023 08:46:36 +0200 Subject: [PATCH 13/23] fix(input): add aria-invalid when an input has an error (#379) --- src/components/Input/InnerInput.tsx | 2 ++ src/components/Input/__snapshots__/Input.spec.tsx.snap | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/src/components/Input/InnerInput.tsx b/src/components/Input/InnerInput.tsx index 0bbe9536e..ba271eaee 100644 --- a/src/components/Input/InnerInput.tsx +++ b/src/components/Input/InnerInput.tsx @@ -44,6 +44,7 @@ const InnerInput = forwardRef( size={size} hasValue={hasValue || hasUncontrolledValue} onChange={handleChange} + aria-invalid={rest.error} /> {label && ( @@ -64,6 +65,7 @@ const InnerInput = forwardRef( size={size} hasValue={hasValue || hasUncontrolledValue} onChange={handleChange} + aria-invalid={rest.error} /> {label && ( diff --git a/src/components/Input/__snapshots__/Input.spec.tsx.snap b/src/components/Input/__snapshots__/Input.spec.tsx.snap index b28a349a0..132bb96dd 100644 --- a/src/components/Input/__snapshots__/Input.spec.tsx.snap +++ b/src/components/Input/__snapshots__/Input.spec.tsx.snap @@ -193,6 +193,7 @@ exports[`Input variant "bottom-lined" renders the error state 1`] = ` class="c0" > Date: Fri, 29 Sep 2023 06:48:15 +0000 Subject: [PATCH 14/23] chore(release): 1.34.1 [skip ci] ### [1.34.1](https://github.com/freenowtech/wave/compare/v1.34.0...v1.34.1) (2023-09-29) ### Bug Fixes * **input:** add aria-invalid when an input has an error ([#379](https://github.com/freenowtech/wave/issues/379)) ([ec26782](https://github.com/freenowtech/wave/commit/ec26782480502cd884e0bc88653b165d15d7fc08)) --- docs/changelog.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/changelog.mdx b/docs/changelog.mdx index ca3993601..e8800a5ec 100644 --- a/docs/changelog.mdx +++ b/docs/changelog.mdx @@ -5,6 +5,13 @@ cardHeadline: Changelog cardSubHeadline: Keep up to date with the latest releases of @freenow/wave --- +### [1.34.1](https://github.com/freenowtech/wave/compare/v1.34.0...v1.34.1) (2023-09-29) + + +### Bug Fixes + +* **input:** add aria-invalid when an input has an error ([#379](https://github.com/freenowtech/wave/issues/379)) ([ec26782](https://github.com/freenowtech/wave/commit/ec26782480502cd884e0bc88653b165d15d7fc08)) + ## [1.34.0](https://github.com/freenowtech/wave/compare/v1.33.0...v1.34.0) (2023-09-01) From b9e72174bf8ac69e92d22c5b00e3aec362dd6336 Mon Sep 17 00:00:00 2001 From: martimalek <46452321+martimalek@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:04:09 +0200 Subject: [PATCH 15/23] fix(deps): crossOrigin prop is not required for inputs (#386) * chore(deps): move @testing-library/react-hooks to devDependencies * fix(deps): override @types/react of react-windowed-select to ^17.0.67 * chore(deps): pin @types/react overrides --------- Co-authored-by: Artur Miglio --- package-lock.json | 34 +++++++++++++++++++--------------- package.json | 7 +++++-- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7ab5f2a40..7fb072830 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@datepicker-react/hooks": "^2.3.1", "@popperjs/core": "^2.11.5", "@styled-system/theme-get": "^5.1.2", - "@testing-library/react-hooks": "^8.0.0", "@types/react-select": "^4.0.18", "@types/styled-system": "^5.1.9", "date-fns": "^2.11.1", @@ -46,6 +45,7 @@ "@svgr/plugin-svgo": "^5.3.0", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", + "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^12.8.3", "@types/babel__traverse": "7.17.1", "@types/jest": "^25.1.4", @@ -8262,6 +8262,7 @@ "version": "8.0.1", "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz", "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", "react-error-boundary": "^3.1.0" @@ -9027,9 +9028,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "16.14.41", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.41.tgz", - "integrity": "sha512-h+joCKF2r5rdECoM1U8WCEIHBp5/0TSR5Nyq8gtnnYY1n2WqGuj3indYqTjMb2/b5g2rfxJV6u4jUFq95lbT6Q==", + "version": "16.14.48", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.48.tgz", + "integrity": "sha512-7HP7K9IyuP6CpxEHmfRPEl21pwra+nSgZHXhyq7WOkxhIGYtSpIHJBijh4zuScgelrPxsUXVPDRkSKHhT+6nkg==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -28333,6 +28334,7 @@ "version": "3.1.4", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5" }, @@ -28492,9 +28494,9 @@ } }, "node_modules/react-windowed-select/node_modules/@types/react": { - "version": "17.0.53", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.53.tgz", - "integrity": "sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==", + "version": "17.0.67", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.67.tgz", + "integrity": "sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -40017,6 +40019,7 @@ "version": "8.0.1", "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz", "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==", + "dev": true, "requires": { "@babel/runtime": "^7.12.5", "react-error-boundary": "^3.1.0" @@ -40567,9 +40570,9 @@ "dev": true }, "@types/react": { - "version": "16.14.41", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.41.tgz", - "integrity": "sha512-h+joCKF2r5rdECoM1U8WCEIHBp5/0TSR5Nyq8gtnnYY1n2WqGuj3indYqTjMb2/b5g2rfxJV6u4jUFq95lbT6Q==", + "version": "16.14.48", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.48.tgz", + "integrity": "sha512-7HP7K9IyuP6CpxEHmfRPEl21pwra+nSgZHXhyq7WOkxhIGYtSpIHJBijh4zuScgelrPxsUXVPDRkSKHhT+6nkg==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -55151,6 +55154,7 @@ "version": "3.1.4", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dev": true, "requires": { "@babel/runtime": "^7.12.5" } @@ -55263,7 +55267,7 @@ "resolved": "https://registry.npmjs.org/react-windowed-select/-/react-windowed-select-4.0.0.tgz", "integrity": "sha512-VSzpj6UD8VV83BA8w+dq0FubyXhDpu1v8Kb843oq5Z1L6j4HrJt9o+etwn/OEGHky87j1k8sKRzGgNYYvGgI9A==", "requires": { - "@types/react": "^17.0.3", + "@types/react": "^17.0.67", "@types/react-dom": "^17.0.3", "@types/react-window": "^1.8.2", "react-select": "^5.2.2", @@ -55271,9 +55275,9 @@ }, "dependencies": { "@types/react": { - "version": "17.0.53", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.53.tgz", - "integrity": "sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==", + "version": "17.0.67", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.67.tgz", + "integrity": "sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -55285,7 +55289,7 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.18.tgz", "integrity": "sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw==", "requires": { - "@types/react": "^17" + "@types/react": "^17.0.67" } } } diff --git a/package.json b/package.json index dcc98d96d..18424c791 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,10 @@ "license": "Apache-2.0", "overrides": { "react-refresh": "0.11.0", - "react-is": "17.0.2" + "react-is": "17.0.2", + "react-windowed-select": { + "@types/react": "17.0.67" + } }, "peerDependencies": { "react": ">16.8", @@ -78,6 +81,7 @@ "@svgr/plugin-svgo": "^5.3.0", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", + "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^12.8.3", "@types/babel__traverse": "7.17.1", "@types/jest": "^25.1.4", @@ -135,7 +139,6 @@ "@datepicker-react/hooks": "^2.3.1", "@popperjs/core": "^2.11.5", "@styled-system/theme-get": "^5.1.2", - "@testing-library/react-hooks": "^8.0.0", "@types/react-select": "^4.0.18", "@types/styled-system": "^5.1.9", "date-fns": "^2.11.1", From 8edfd4d59e59331b516df94d1db5774a459a1bc9 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Thu, 5 Oct 2023 14:06:00 +0000 Subject: [PATCH 16/23] chore(release): 1.34.2 [skip ci] ### [1.34.2](https://github.com/freenowtech/wave/compare/v1.34.1...v1.34.2) (2023-10-05) ### Bug Fixes * **deps:** crossOrigin prop is not required for inputs ([#386](https://github.com/freenowtech/wave/issues/386)) ([b9e7217](https://github.com/freenowtech/wave/commit/b9e72174bf8ac69e92d22c5b00e3aec362dd6336)) --- docs/changelog.mdx | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/changelog.mdx b/docs/changelog.mdx index e8800a5ec..3bb1d0acc 100644 --- a/docs/changelog.mdx +++ b/docs/changelog.mdx @@ -5,6 +5,13 @@ cardHeadline: Changelog cardSubHeadline: Keep up to date with the latest releases of @freenow/wave --- +### [1.34.2](https://github.com/freenowtech/wave/compare/v1.34.1...v1.34.2) (2023-10-05) + + +### Bug Fixes + +* **deps:** crossOrigin prop is not required for inputs ([#386](https://github.com/freenowtech/wave/issues/386)) ([b9e7217](https://github.com/freenowtech/wave/commit/b9e72174bf8ac69e92d22c5b00e3aec362dd6336)) + ### [1.34.1](https://github.com/freenowtech/wave/compare/v1.34.0...v1.34.1) (2023-09-29) diff --git a/package-lock.json b/package-lock.json index 7fb072830..7d4d6da70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@freenow/wave", - "version": "1.34.1", + "version": "1.34.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@freenow/wave", - "version": "1.34.1", + "version": "1.34.2", "license": "Apache-2.0", "dependencies": { "@datepicker-react/hooks": "^2.3.1", diff --git a/package.json b/package.json index 18424c791..b233c4c1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@freenow/wave", - "version": "1.34.1", + "version": "1.34.2", "description": "React components of the Wave design system for your Front-End project", "main": "lib/cjs/index.js", "typings": "lib/types/index.d.ts", From e364381fa51c29913aa7eee9be17bed048d9973d Mon Sep 17 00:00:00 2001 From: Leonardo Date: Wed, 11 Oct 2023 11:15:18 +0200 Subject: [PATCH 17/23] fix: enhanced breadcrumbs style (#390) * fix: enhanced breadcrumbs style * fix: linting error 0 unit --------- Co-authored-by: Leonardo Di Vittorio --- src/components/Breadcrumbs/Breadcrumbs.tsx | 29 +++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index fc3cb5dd3..cf4db8a6b 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,5 +1,14 @@ -import React, { Children, ComponentPropsWithoutRef, ReactElement, ReactNode, cloneElement } from 'react'; +import React, { + Children, + ComponentPropsWithoutRef, + ReactElement, + ReactNode, + cloneElement, + useEffect, + useRef +} from 'react'; import styled from 'styled-components'; +import { MarginProps } from 'styled-system'; import { ChevronRightIcon } from '../../icons'; import { Text } from '../Text/Text'; @@ -17,7 +26,7 @@ interface InvertedStyle { inverted?: boolean; } -interface BreadcrumbsProps extends InvertedStyle { +interface BreadcrumbsProps extends InvertedStyle, MarginProps { /** * Content of the Breadcrumbs * @required @@ -33,17 +42,31 @@ const BreadcrumbsList = styled.ul` padding: 0; list-style: none; display: flex; + overflow: auto; + scrollbar-width: none; + + &::-webkit-scrollbar { + width: 0; + } `; const BreadcrumbsListItem = styled.li` display: flex; + text-wrap: nowrap; `; const Breadcrumbs = ({ children, inverted }: BreadcrumbsProps): JSX.Element => { const arrayChildren = Children.toArray(children); + const breadcrumbsListRef = useRef(null); + + useEffect(() => { + if (breadcrumbsListRef.current) { + breadcrumbsListRef.current.scrollLeft = breadcrumbsListRef.current.scrollWidth; + } + }, []); return ( - + {Children.map(arrayChildren, (child, index) => (