From 515211f89d320856d1493deef2a731ff7bb41d63 Mon Sep 17 00:00:00 2001 From: kiesha Date: Tue, 30 Mar 2021 12:47:43 -0700 Subject: [PATCH 1/9] feat(community-optimize-image): init new component --- packages/OptimizeImage/OptimizeImage.jsx | 64 +++++++++++++++++++ packages/OptimizeImage/OptimizeImage.md | 13 ++++ packages/OptimizeImage/README.md | 1 + .../__tests__/OptimizeImage.spec.jsx | 31 +++++++++ packages/OptimizeImage/checkWebpFeature.js | 21 ++++++ packages/OptimizeImage/index.cjs.js | 3 + packages/OptimizeImage/index.es.js | 3 + packages/OptimizeImage/package.json | 32 ++++++++++ packages/OptimizeImage/rollup.config.js | 7 ++ 9 files changed, 175 insertions(+) create mode 100644 packages/OptimizeImage/OptimizeImage.jsx create mode 100644 packages/OptimizeImage/OptimizeImage.md create mode 100644 packages/OptimizeImage/README.md create mode 100644 packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx create mode 100644 packages/OptimizeImage/checkWebpFeature.js create mode 100644 packages/OptimizeImage/index.cjs.js create mode 100644 packages/OptimizeImage/index.es.js create mode 100644 packages/OptimizeImage/package.json create mode 100644 packages/OptimizeImage/rollup.config.js diff --git a/packages/OptimizeImage/OptimizeImage.jsx b/packages/OptimizeImage/OptimizeImage.jsx new file mode 100644 index 000000000..2b0288f98 --- /dev/null +++ b/packages/OptimizeImage/OptimizeImage.jsx @@ -0,0 +1,64 @@ +import React from 'react' +import PropTypes from 'prop-types' +import ResponsiveImage from '@tds/core-responsive-image' +import { breakpoints } from '@tds/core-responsive' +import { safeRest } from '@tds/util-helpers' +import checkWebpFeature from './checkWebpFeature' + +/** + * @version ./package.json + */ +const OptimizeImage = ({ contentfulAssetUrl, alt, ...rest }) => { + const imgUrls = { + xsSrc: `${contentfulAssetUrl}?w=320`, + smSrc: `${contentfulAssetUrl}?w=${breakpoints.sm}`, + mdSrc: `${contentfulAssetUrl}?w=${breakpoints.md}`, + lgSrc: `${contentfulAssetUrl}?w=${breakpoints.lg}`, + xlSrc: `${contentfulAssetUrl}?w=${breakpoints.xl}`, + fallbackSrc: contentfulAssetUrl, + } + + if (contentfulAssetUrl && !contentfulAssetUrl.match(/.svg/g)) { + // Currently not all browsers support + checkWebpFeature(result => { + let format = '' + if (result) { + format = 'fm=webp' + } else if (contentfulAssetUrl.match(/.jpeg/g)) { + format = 'fm=jpg&fl=progressive' + } + + Object.keys(imgUrls).forEach(key => { + imgUrls[key] = imgUrls[key].concat('&', format) + }) + }) + } + + return ( + + ) +} + +OptimizeImage.propTypes = { + /** + * Alternative text to display if image cannot be loaded or a screen reader is used. + */ + alt: PropTypes.string.isRequired, + /** + * The source to load the image. + */ + contentfulAssetUrl: PropTypes.string.isRequired, +} + +OptimizeImage.defaultProps = {} + +export default OptimizeImage diff --git a/packages/OptimizeImage/OptimizeImage.md b/packages/OptimizeImage/OptimizeImage.md new file mode 100644 index 000000000..d7a729f1d --- /dev/null +++ b/packages/OptimizeImage/OptimizeImage.md @@ -0,0 +1,13 @@ +(describe what your component does here) + +### Usage criteria + +- What must your experience achieve in order to warrant the use of this component? +- When using this component, how should you typically use it? + +```jsx + +``` diff --git a/packages/OptimizeImage/README.md b/packages/OptimizeImage/README.md new file mode 100644 index 000000000..a811c74fe --- /dev/null +++ b/packages/OptimizeImage/README.md @@ -0,0 +1 @@ +# TDS Community: OptimizeImage diff --git a/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx b/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx new file mode 100644 index 000000000..9364181a4 --- /dev/null +++ b/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx @@ -0,0 +1,31 @@ +import React from 'react' +import { shallow } from 'enzyme' + +import OptimizeImage from '../OptimizeImage' + +describe('OptimizeImage', () => { + const doShallow = (props = {}) => shallow() + + it('renders', () => { + const optimizeImage = doShallow() + + expect(optimizeImage).toMatchSnapshot() + }) + + it('passes additional attributes to the element', () => { + const optimizeImage = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }) + + expect(optimizeImage).toHaveProp('id', 'the-id') + expect(optimizeImage).toHaveProp('data-some-attr', 'some value') + }) + + it('does not allow custom CSS', () => { + const optimizeImage = doShallow({ + className: 'my-custom-class', + style: { color: 'hotpink' }, + }) + + expect(optimizeImage).not.toHaveProp('className', 'my-custom-class') + expect(optimizeImage).not.toHaveProp('style') + }) +}) diff --git a/packages/OptimizeImage/checkWebpFeature.js b/packages/OptimizeImage/checkWebpFeature.js new file mode 100644 index 000000000..c2733b8ee --- /dev/null +++ b/packages/OptimizeImage/checkWebpFeature.js @@ -0,0 +1,21 @@ +// taken directly from Google developers guide on how to detect browser support for WebP +export default callback => { + // basic support + const lossy = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA' + // other test forms + // var kTestImages = { + // lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", + // lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", + // alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", + // animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" + // }; + const img = new Image() + img.onload = function onLoad() { + const result = img.width > 0 && img.height > 0 + callback(result) + } + img.onerror = function onError() { + callback(false) + } + img.src = `data:image/webp;base64,${lossy}` +} diff --git a/packages/OptimizeImage/index.cjs.js b/packages/OptimizeImage/index.cjs.js new file mode 100644 index 000000000..8ed16aa30 --- /dev/null +++ b/packages/OptimizeImage/index.cjs.js @@ -0,0 +1,3 @@ +const OptimizeImage = require('./dist/index.cjs') + +module.exports = OptimizeImage diff --git a/packages/OptimizeImage/index.es.js b/packages/OptimizeImage/index.es.js new file mode 100644 index 000000000..fc3944938 --- /dev/null +++ b/packages/OptimizeImage/index.es.js @@ -0,0 +1,3 @@ +import OptimizeImage from './dist/index.es' + +export default OptimizeImage diff --git a/packages/OptimizeImage/package.json b/packages/OptimizeImage/package.json new file mode 100644 index 000000000..c6f54fdc1 --- /dev/null +++ b/packages/OptimizeImage/package.json @@ -0,0 +1,32 @@ +{ + "name": "@tds/community-optimize-image", + "version": "1.0.0-0", + "description": "", + "main": "index.cjs.js", + "module": "index.es.js", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/telus/tds-community.git" + }, + "publishConfig": { + "access": "public" + }, + "author": "TELUS digital", + "engines": { + "node": ">=8" + }, + "bugs": { + "url": "https://github.com/telus/tds-community/issues" + }, + "homepage": "http://tds.telus.com", + "peerDependencies": { + "react": "^16.8.2", + "react-dom": "^16.8.2" + }, + "dependencies": { + "@tds/core-responsive-image": "1.0.0", + "@tds/util-helpers": "^1.2.0", + "prop-types": "^15.6.2" + } +} diff --git a/packages/OptimizeImage/rollup.config.js b/packages/OptimizeImage/rollup.config.js new file mode 100644 index 000000000..69c02a04f --- /dev/null +++ b/packages/OptimizeImage/rollup.config.js @@ -0,0 +1,7 @@ +import configure from '../../config/rollup.config' +import { dependencies } from './package.json' + +export default configure({ + input: './OptimizeImage.jsx', + dependencies, +}) From 2f9d2966094bea55135e0f1fa49089bc336d0ee7 Mon Sep 17 00:00:00 2001 From: kiesha Date: Tue, 30 Mar 2021 12:53:27 -0700 Subject: [PATCH 2/9] build: update deps --- package-lock.json | 915 ++++++++++++++-------- package.json | 3 +- shared/utils/generateId/package-lock.json | 13 + 3 files changed, 597 insertions(+), 334 deletions(-) create mode 100644 shared/utils/generateId/package-lock.json diff --git a/package-lock.json b/package-lock.json index f86dd91e4..16ae02da8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1088,32 +1088,32 @@ } }, "@commitlint/load": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-9.1.2.tgz", - "integrity": "sha512-FPL82xBuF7J3EJ57kLVoligQP4BFRwrknooP+vNT787AXmQ/Fddc/iYYwHwy67pNkk5N++/51UyDl/CqiHb6nA==", + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-12.0.1.tgz", + "integrity": "sha512-dX8KdCWn7w0bTkkk3zKQpe9X8vsTRa5EM+1ffF313wCX9b6tGa9vujhEHCkSzKAbbE2tFV64CHZygE7rtlHdIA==", "dev": true, "optional": true, "requires": { - "@commitlint/execute-rule": "^9.1.2", - "@commitlint/resolve-extends": "^9.1.2", - "@commitlint/types": "^9.1.2", - "chalk": "4.1.0", - "cosmiconfig": "^6.0.0", + "@commitlint/execute-rule": "^12.0.1", + "@commitlint/resolve-extends": "^12.0.1", + "@commitlint/types": "^12.0.1", + "chalk": "^4.0.0", + "cosmiconfig": "^7.0.0", "lodash": "^4.17.19", "resolve-from": "^5.0.0" }, "dependencies": { "@commitlint/execute-rule": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-9.1.2.tgz", - "integrity": "sha512-NGbeo0KCVYo1yj9vVPFHv6RGFpIF6wcQxpFYUKGIzZVV9Vz1WyiKS689JXa99Dt1aN0cZlEJJLnTNDIgYls0Vg==", + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-12.0.1.tgz", + "integrity": "sha512-JzyweYfZlFLtXpgP+btzSY3YAkGPg61TqUSYQqBr4+5IaVf1FruMm5v4D5eLu9dAJuNKUfHbM3AEfuEPiZ79pg==", "dev": true, "optional": true }, "@commitlint/resolve-extends": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-9.1.2.tgz", - "integrity": "sha512-HcoL+qFGmWEu9VM4fY0HI+VzF4yHcg3x+9Hx6pYFZ+r2wLbnKs964y0v68oyMO/mS/46MVoLNXZGR8U3adpadg==", + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-12.0.1.tgz", + "integrity": "sha512-Mvg0GDi/68Cqw893ha8uhxE8myHfPmiSSSi7d1x4VJNR4hoS37lBdX89kyx4i9NPmLfviY2cUJKTyK8ZrFznZw==", "dev": true, "optional": true, "requires": { @@ -1124,13 +1124,12 @@ } }, "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "optional": true, "requires": { - "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" } }, @@ -1163,17 +1162,17 @@ "optional": true }, "cosmiconfig": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", - "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", + "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", "dev": true, "optional": true, "requires": { "@types/parse-json": "^4.0.0", - "import-fresh": "^3.1.0", + "import-fresh": "^3.2.1", "parse-json": "^5.0.0", "path-type": "^4.0.0", - "yaml": "^1.7.2" + "yaml": "^1.10.0" } }, "has-flag": { @@ -1184,15 +1183,15 @@ "optional": true }, "parse-json": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", - "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", "dev": true, "optional": true, "requires": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1", + "json-parse-even-better-errors": "^2.3.0", "lines-and-columns": "^1.1.6" } }, @@ -1204,9 +1203,9 @@ "optional": true }, "supports-color": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", - "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "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, "optional": true, "requires": { @@ -1386,11 +1385,71 @@ } }, "@commitlint/types": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-9.1.2.tgz", - "integrity": "sha512-r3fwVbVH+M8W0qYlBBZFsUwKe6NT5qvz+EmU7sr8VeN1cQ63z+3cfXyTo7WGGEMEgKiT0jboNAK3b1FZp8k9LQ==", + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-12.0.1.tgz", + "integrity": "sha512-FsNDMV0W7D19/ZbR412klpqAilXASx75Neqh7jPtK278IEwdukOg3vth1r5kTm+BjDScM7wMUEOwIW3NNfAtwg==", "dev": true, - "optional": true + "optional": true, + "requires": { + "chalk": "^4.0.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, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "optional": 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, + "optional": 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, + "optional": 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, + "optional": 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, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } }, "@emotion/is-prop-valid": { "version": "0.8.5", @@ -2083,15 +2142,42 @@ }, "dependencies": { "conventional-changelog-angular": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.6.tgz", - "integrity": "sha512-QDEmLa+7qdhVIv8sFZfVxU1VSyVvnXPsxq8Vam49mKUcO1Z8VTLEJk9uI21uiJUsnmm0I4Hrsdc9TgkOQo9WSA==", + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz", + "integrity": "sha512-5GLsbnkR/7A89RyHLvvoExbiGbd9xKdKqDTrArnPbOqBqG/2wIosu0fHwpeIRI8Tl94MhVNBXcLJZl92ZQ5USw==", "dev": true, "requires": { - "compare-func": "^1.3.1", + "compare-func": "^2.0.0", "q": "^1.5.1" + }, + "dependencies": { + "compare-func": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz", + "integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==", + "dev": true, + "requires": { + "array-ify": "^1.0.0", + "dot-prop": "^5.1.0" + } + } + } + }, + "dot-prop": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", + "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", + "dev": true, + "requires": { + "is-obj": "^2.0.0" } }, + "is-obj": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", + "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==", + "dev": true + }, "pify": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", @@ -2576,9 +2662,9 @@ }, "dependencies": { "dot-prop": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz", + "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -3532,19 +3618,29 @@ } }, "@tds/core-interactive-icon": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@tds/core-interactive-icon/-/core-interactive-icon-2.1.1.tgz", - "integrity": "sha512-4QQ54wYGjmQonU0/0C85XgzIPfY5m/R8m6Jfc3e7GfYFxhyJFaW+UbVihr6iSyTGH1bPF+XtPXvuJ2bJ+6pXMw==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@tds/core-interactive-icon/-/core-interactive-icon-2.1.3.tgz", + "integrity": "sha512-1liOqqi/+P4QdynnqEkRPISSEXDhTHJj81g/kuO1/Vjf36wOJSngt4u2wJqYbf1fk9uc+UJW2i1MHD4cdLikZQ==", "requires": { - "@tds/core-a11y-content": "^2.2.3", + "@tds/core-a11y-content": "^2.2.4", "@tds/core-colours": "^2.2.1", - "@tds/core-text": "^3.1.4", + "@tds/core-text": "^3.1.5", "@tds/shared-styles": "^2.0.1", - "@tds/util-helpers": "^1.5.1", + "@tds/util-helpers": "^1.6.0", "@tds/util-prop-types": "^1.4.0", "prop-types": "^15.5.10" }, "dependencies": { + "@tds/core-a11y-content": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@tds/core-a11y-content/-/core-a11y-content-2.2.4.tgz", + "integrity": "sha512-ZqgAutPfhkbXrR+E4b/PAiqqT25dSmoDF18/vF9qG6SgUCC3PFYz6pOVNV0f3xcpVYZWTtPDQDAQQugee4HGJA==", + "requires": { + "@tds/util-helpers": "^1.6.0", + "@tds/util-prop-types": "^1.4.0", + "prop-types": "^15.5.10" + } + }, "@tds/core-responsive": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/@tds/core-responsive/-/core-responsive-1.3.4.tgz", @@ -3556,12 +3652,12 @@ } }, "@tds/core-text": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/@tds/core-text/-/core-text-3.1.4.tgz", - "integrity": "sha512-/obC/u2d4+gafHCMoI4+NBu7q+fqHZmH+aNxaXOA42wm5QWE6LPegkV7f236yvK8nM8x4cHNNHjMX0QNbsTFnQ==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@tds/core-text/-/core-text-3.1.5.tgz", + "integrity": "sha512-hJvwm93M8z8JHfD4MALH96DfhDfT0xRACxoxeB7i8uLOBk9MiTmy1mD6BR0s6XiChp9DtWZH07TZTj6NPQguPw==", "requires": { "@tds/shared-typography": "^1.3.5", - "@tds/util-helpers": "^1.5.1", + "@tds/util-helpers": "^1.6.0", "prop-types": "^15.5.10" } }, @@ -3576,9 +3672,9 @@ } }, "@tds/util-helpers": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@tds/util-helpers/-/util-helpers-1.5.1.tgz", - "integrity": "sha512-D6ih5eGkh4eUQCJyjghV4O6bwVtBNpTcN7mv/tYgRUPSF3jiDJJ7gE1UZrvrtR3e6YXox62kmnEBE7iGD7NomA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@tds/util-helpers/-/util-helpers-1.6.0.tgz", + "integrity": "sha512-hMBSJYzi8s0dPk99oM0XSKHWdRzUiqEa7FIpWtQYb//0aXOO/oxxcdipl0BS7tiWglG+DKDwzD6LO9JbLeN99A==", "requires": { "@tds/core-responsive": "^1.3.4" } @@ -3647,6 +3743,30 @@ "sass-mq": "^5.0.0" } }, + "@tds/core-responsive-image": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@tds/core-responsive-image/-/core-responsive-image-1.0.0.tgz", + "integrity": "sha512-oB363CUhFEvUAyLnG4rhUcBD12lhh9UgiOQE4VhaUPaumt01arB9OSceO9EIq0XEP3k9vVckhXd/y9CsREx9gA==", + "dev": true, + "requires": { + "@tds/core-responsive": "^1.3.4", + "@tds/util-helpers": "^1.4.0", + "prop-types": "^15.5.10" + }, + "dependencies": { + "@tds/core-responsive": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@tds/core-responsive/-/core-responsive-1.3.4.tgz", + "integrity": "sha512-iGVxGxMcTXcBr9tMZ3/HQ/ytRoSUnoSZyE4w2mBNrkhNhPg7j7blJd2dnJYAFQe3era0YNbFOgf+CMmQHK2H3Q==", + "dev": true, + "requires": { + "prop-types": "^15.5.10", + "react-media": "^1.10.0", + "sass-mq": "^5.0.0" + } + } + } + }, "@tds/core-spinner": { "version": "3.1.12", "resolved": "https://registry.npmjs.org/@tds/core-spinner/-/core-spinner-3.1.12.tgz", @@ -3675,16 +3795,26 @@ } }, "@tds/core-standalone-icon": { - "version": "2.1.18", - "resolved": "https://registry.npmjs.org/@tds/core-standalone-icon/-/core-standalone-icon-2.1.18.tgz", - "integrity": "sha512-2QG8O44jRZgRD+PbZzfNOxfe2sE3R+5zeX0A6hy6zf0v0/tnZo1IGicWcyrp/txUJp+hXx9otPCvlR1WhJYp+w==", + "version": "2.1.19", + "resolved": "https://registry.npmjs.org/@tds/core-standalone-icon/-/core-standalone-icon-2.1.19.tgz", + "integrity": "sha512-zbSNNq/CGeiEsQzUVONfj7/K5rBKuzIHuG7t12yFqudydX9V17/OY2xYxiBkl3oIvUh5ihHrZyzhj7b0nqszyA==", "requires": { - "@tds/core-a11y-content": "^2.2.3", + "@tds/core-a11y-content": "^2.2.4", "@tds/shared-styles": "^2.0.1", - "@tds/util-helpers": "^1.5.1", + "@tds/util-helpers": "^1.6.0", "prop-types": "^15.5.10" }, "dependencies": { + "@tds/core-a11y-content": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@tds/core-a11y-content/-/core-a11y-content-2.2.4.tgz", + "integrity": "sha512-ZqgAutPfhkbXrR+E4b/PAiqqT25dSmoDF18/vF9qG6SgUCC3PFYz6pOVNV0f3xcpVYZWTtPDQDAQQugee4HGJA==", + "requires": { + "@tds/util-helpers": "^1.6.0", + "@tds/util-prop-types": "^1.4.0", + "prop-types": "^15.5.10" + } + }, "@tds/core-responsive": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/@tds/core-responsive/-/core-responsive-1.3.4.tgz", @@ -3706,9 +3836,9 @@ } }, "@tds/util-helpers": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@tds/util-helpers/-/util-helpers-1.5.1.tgz", - "integrity": "sha512-D6ih5eGkh4eUQCJyjghV4O6bwVtBNpTcN7mv/tYgRUPSF3jiDJJ7gE1UZrvrtR3e6YXox62kmnEBE7iGD7NomA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@tds/util-helpers/-/util-helpers-1.6.0.tgz", + "integrity": "sha512-hMBSJYzi8s0dPk99oM0XSKHWdRzUiqEa7FIpWtQYb//0aXOO/oxxcdipl0BS7tiWglG+DKDwzD6LO9JbLeN99A==", "requires": { "@tds/core-responsive": "^1.3.4" } @@ -3738,27 +3868,27 @@ } }, "@tds/core-tooltip": { - "version": "4.2.22", - "resolved": "https://registry.npmjs.org/@tds/core-tooltip/-/core-tooltip-4.2.22.tgz", - "integrity": "sha512-xI2Mz48ZwoLj8W0rysnBy9QwMQdOXcG+n9JawlhFQZT797m5Uj5a80tsy51YbQo8cbs0OCHjinbFd2xErYTxww==", + "version": "4.2.23", + "resolved": "https://registry.npmjs.org/@tds/core-tooltip/-/core-tooltip-4.2.23.tgz", + "integrity": "sha512-bZXpwsafmjhHGACfXDERud/nTcq4ekhVx/Vsi+6sePorQHuPgf6k07sqY7wu3NDD/nZ7Bzr4DwfQ5Wg50PLYfA==", "requires": { - "@tds/core-box": "^2.3.3", + "@tds/core-box": "^2.3.4", "@tds/core-responsive": "^1.3.4", - "@tds/core-standalone-icon": "^2.1.18", - "@tds/core-text": "^3.1.4", + "@tds/core-standalone-icon": "^2.1.19", + "@tds/core-text": "^3.1.5", "@tds/shared-hocs": "^1.2.0", "@tds/shared-styles": "^2.0.1", - "@tds/util-helpers": "^1.5.1", + "@tds/util-helpers": "^1.6.0", "prop-types": "^15.5.10" }, "dependencies": { "@tds/core-box": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/@tds/core-box/-/core-box-2.3.3.tgz", - "integrity": "sha512-mDoeM0gRV8L6S2dWMw6sW8Kq+7dzq+JSRJRZ4BYxkiJWZVY55yaM7bEJzGgz4ZDTit4vscr53K1NfZV/e6MRCw==", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@tds/core-box/-/core-box-2.3.4.tgz", + "integrity": "sha512-B3+GxF4pw1N/1bLpnJQn/L0iCOA/swTGf6xkMgtupVSQrfyk0WFQCU3MXcGe7/LgG1xpUEGVIPlP0xXp6iaXWA==", "requires": { "@tds/core-responsive": "^1.3.4", - "@tds/util-helpers": "^1.5.1", + "@tds/util-helpers": "^1.6.0", "@tds/util-prop-types": "^1.4.0", "prop-types": "^15.5.10" } @@ -3774,12 +3904,12 @@ } }, "@tds/core-text": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/@tds/core-text/-/core-text-3.1.4.tgz", - "integrity": "sha512-/obC/u2d4+gafHCMoI4+NBu7q+fqHZmH+aNxaXOA42wm5QWE6LPegkV7f236yvK8nM8x4cHNNHjMX0QNbsTFnQ==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@tds/core-text/-/core-text-3.1.5.tgz", + "integrity": "sha512-hJvwm93M8z8JHfD4MALH96DfhDfT0xRACxoxeB7i8uLOBk9MiTmy1mD6BR0s6XiChp9DtWZH07TZTj6NPQguPw==", "requires": { "@tds/shared-typography": "^1.3.5", - "@tds/util-helpers": "^1.5.1", + "@tds/util-helpers": "^1.6.0", "prop-types": "^15.5.10" } }, @@ -3794,9 +3924,9 @@ } }, "@tds/util-helpers": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@tds/util-helpers/-/util-helpers-1.5.1.tgz", - "integrity": "sha512-D6ih5eGkh4eUQCJyjghV4O6bwVtBNpTcN7mv/tYgRUPSF3jiDJJ7gE1UZrvrtR3e6YXox62kmnEBE7iGD7NomA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@tds/util-helpers/-/util-helpers-1.6.0.tgz", + "integrity": "sha512-hMBSJYzi8s0dPk99oM0XSKHWdRzUiqEa7FIpWtQYb//0aXOO/oxxcdipl0BS7tiWglG+DKDwzD6LO9JbLeN99A==", "requires": { "@tds/core-responsive": "^1.3.4" } @@ -6542,9 +6672,9 @@ "dev": true }, "commitizen": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/commitizen/-/commitizen-4.1.2.tgz", - "integrity": "sha512-LBxTQKHbVgroMz9ohpm86N+GfJobonGyvDc3zBGdZazbwCLz2tqLa48Rf2TnAdKx7/06W1i1R3SXUt5QW97qVQ==", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/commitizen/-/commitizen-4.2.3.tgz", + "integrity": "sha512-pYlYEng7XMV2TW4xtjDKBGqeJ0Teq2zyRSx2S3Ml1XAplHSlJZK8vm1KdGclpMEZuGafbS5TeHXIVnHk8RWIzQ==", "dev": true, "requires": { "cachedir": "2.2.0", @@ -6555,9 +6685,9 @@ "find-root": "1.1.0", "fs-extra": "8.1.0", "glob": "7.1.4", - "inquirer": "6.5.0", + "inquirer": "6.5.2", "is-utf8": "^0.2.1", - "lodash": "4.17.15", + "lodash": "^4.17.20", "minimist": "1.2.5", "strip-bom": "4.0.0", "strip-json-comments": "3.0.1" @@ -6620,9 +6750,9 @@ } }, "inquirer": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.0.tgz", - "integrity": "sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==", + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz", + "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==", "dev": true, "requires": { "ansi-escapes": "^3.2.0", @@ -6647,9 +6777,9 @@ "dev": true }, "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, "mute-stream": { @@ -7268,29 +7398,23 @@ "dev": true }, "conventional-changelog-writer": { - "version": "4.0.16", - "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-4.0.16.tgz", - "integrity": "sha512-jmU1sDJDZpm/dkuFxBeRXvyNcJQeKhGtVcFFkwTphUAzyYWcwz2j36Wcv+Mv2hU3tpvLMkysOPXJTLO55AUrYQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-4.1.0.tgz", + "integrity": "sha512-WwKcUp7WyXYGQmkLsX4QmU42AZ1lqlvRW9mqoyiQzdD+rJWbTepdWoKJuwXTS+yq79XKnQNa93/roViPQrAQgw==", "dev": true, "requires": { - "compare-func": "^1.3.1", - "conventional-commits-filter": "^2.0.6", + "compare-func": "^2.0.0", + "conventional-commits-filter": "^2.0.7", "dateformat": "^3.0.0", "handlebars": "^4.7.6", "json-stringify-safe": "^5.0.1", "lodash": "^4.17.15", - "meow": "^7.0.0", + "meow": "^8.0.0", "semver": "^6.0.0", "split": "^1.0.0", - "through2": "^3.0.0" + "through2": "^4.0.0" }, "dependencies": { - "arrify": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz", - "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==", - "dev": true - }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -7308,16 +7432,35 @@ "quick-lru": "^4.0.1" } }, + "compare-func": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz", + "integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==", + "dev": true, + "requires": { + "array-ify": "^1.0.0", + "dot-prop": "^5.1.0" + } + }, "conventional-commits-filter": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-2.0.6.tgz", - "integrity": "sha512-4g+sw8+KA50/Qwzfr0hL5k5NWxqtrOVw4DDk3/h6L85a9Gz0/Eqp3oP+CWCNfesBvZZZEFHF7OTEbRe+yYSyKw==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz", + "integrity": "sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==", "dev": true, "requires": { "lodash.ismatch": "^4.4.0", "modify-values": "^1.0.0" } }, + "dot-prop": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", + "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", + "dev": true, + "requires": { + "is-obj": "^2.0.0" + } + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -7328,17 +7471,13 @@ "path-exists": "^4.0.0" } }, - "handlebars": { - "version": "4.7.6", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz", - "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==", + "hosted-git-info": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.0.tgz", + "integrity": "sha512-fqhGdjk4av7mT9fU/B01dUtZ+WZSc/XEXMoLXDVZukiQRXxeHSSz3AqbeWRJHtF8EQYHlAgB1NSAHU0Cm7aqZA==", "dev": true, "requires": { - "minimist": "^1.2.5", - "neo-async": "^2.6.0", - "source-map": "^0.6.1", - "uglify-js": "^3.1.4", - "wordwrap": "^1.0.0" + "lru-cache": "^6.0.0" } }, "indent-string": { @@ -7347,6 +7486,12 @@ "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", "dev": true }, + "is-obj": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", + "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==", + "dev": true + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -7356,47 +7501,71 @@ "p-locate": "^4.1.0" } }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, "map-obj": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.1.0.tgz", - "integrity": "sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.2.0.tgz", + "integrity": "sha512-NAq0fCmZYGz9UFEQyndp7sisrow4GroyGeKluyKC/chuITZsPyOyC1UJZPJlVFImhXdROIP5xqouRLThT3BbpQ==", "dev": true }, "meow": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-7.0.0.tgz", - "integrity": "sha512-He6nRo6zYQtzdm0rUKRjpc+V2uvfUnz76i2zxosiLrAvKhk9dSRqWabL/3fNZv9hpb3PQIJNym0M0pzPZa0pvw==", + "version": "8.1.2", + "resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz", + "integrity": "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==", "dev": true, "requires": { "@types/minimist": "^1.2.0", - "arrify": "^2.0.1", "camelcase-keys": "^6.2.2", "decamelize-keys": "^1.1.0", "hard-rejection": "^2.1.0", - "minimist-options": "^4.0.2", - "normalize-package-data": "^2.5.0", + "minimist-options": "4.1.0", + "normalize-package-data": "^3.0.0", "read-pkg-up": "^7.0.1", "redent": "^3.0.0", "trim-newlines": "^3.0.0", - "type-fest": "^0.13.1", - "yargs-parser": "^18.1.3" + "type-fest": "^0.18.0", + "yargs-parser": "^20.2.3" } }, "minimist-options": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.0.2.tgz", - "integrity": "sha512-seq4hpWkYSUh1y7NXxzucwAN9yVlBc3Upgdjz8vLCP97jG8kaOmzYrVH/m7tQ1NYD1wdtZbSLfdy4zFmRWuc/w==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz", + "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==", "dev": true, "requires": { "arrify": "^1.0.1", - "is-plain-obj": "^1.1.0" + "is-plain-obj": "^1.1.0", + "kind-of": "^6.0.3" + } + }, + "normalize-package-data": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.1.tgz", + "integrity": "sha512-D/ttLdxo71msR4FF3VgSwK4blHfE3/vGByz1NCeE7/Dh8reQOKNJJjk5L10mLq9jxa+ZHzT1/HLgxljzbXE7Fw==", + "dev": true, + "requires": { + "hosted-git-info": "^4.0.0", + "resolve": "^1.17.0", + "semver": "^7.3.2", + "validate-npm-package-license": "^3.0.1" }, "dependencies": { - "arrify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", - "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", - "dev": true + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } } } }, @@ -7425,14 +7594,14 @@ "dev": true }, "parse-json": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", - "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1", + "json-parse-even-better-errors": "^2.3.0", "lines-and-columns": "^1.1.6" } }, @@ -7460,6 +7629,30 @@ "type-fest": "^0.6.0" }, "dependencies": { + "hosted-git-info": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", + "dev": true + }, + "normalize-package-data": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", + "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", + "dev": true, + "requires": { + "hosted-git-info": "^2.1.4", + "resolve": "^1.10.0", + "semver": "2 || 3 || 4 || 5", + "validate-npm-package-license": "^3.0.1" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, "type-fest": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", @@ -7487,6 +7680,17 @@ } } }, + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + }, "redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -7497,18 +7701,22 @@ "strip-indent": "^3.0.0" } }, + "resolve": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", + "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", + "dev": true, + "requires": { + "is-core-module": "^2.2.0", + "path-parse": "^1.0.6" + } + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, "strip-indent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", @@ -7519,12 +7727,12 @@ } }, "through2": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz", - "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz", + "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==", "dev": true, "requires": { - "readable-stream": "2 || 3" + "readable-stream": "3" } }, "trim-newlines": { @@ -7534,26 +7742,22 @@ "dev": true }, "type-fest": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", - "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", + "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", "dev": true }, - "wordwrap": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", - "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, "yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", - "dev": true, - "requires": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - } + "version": "20.2.7", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz", + "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==", + "dev": true } } }, @@ -9693,18 +9897,26 @@ "dev": true }, "elliptic": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", - "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==", + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", + "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==", "dev": true, "requires": { - "bn.js": "^4.4.0", - "brorand": "^1.0.1", + "bn.js": "^4.11.9", + "brorand": "^1.1.0", "hash.js": "^1.0.0", - "hmac-drbg": "^1.0.0", - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0", - "minimalistic-crypto-utils": "^1.0.0" + "hmac-drbg": "^1.0.1", + "inherits": "^2.0.4", + "minimalistic-assert": "^1.0.1", + "minimalistic-crypto-utils": "^1.0.1" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "emoji-regex": { @@ -12882,6 +13094,27 @@ "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==", "dev": true }, + "handlebars": { + "version": "4.7.7", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz", + "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==", + "dev": true, + "requires": { + "minimist": "^1.2.5", + "neo-async": "^2.6.0", + "source-map": "^0.6.1", + "uglify-js": "^3.1.4", + "wordwrap": "^1.0.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", @@ -13097,6 +13330,12 @@ "whatwg-encoding": "^1.0.1" } }, + "html-entities": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz", + "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==", + "dev": true + }, "html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", @@ -13539,9 +13778,9 @@ "dev": true }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "init-package-json": { @@ -13933,6 +14172,15 @@ "rgba-regex": "^1.0.0" } }, + "is-core-module": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", + "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, "is-data-descriptor": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", @@ -15379,6 +15627,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", @@ -16621,6 +16875,12 @@ "cli-cursor": "^1.0.2" } }, + "loglevel": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", + "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==", + "dev": true + }, "longest": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz", @@ -17648,9 +17908,9 @@ } }, "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", "dev": true }, "node-fetch-npm": { @@ -17664,12 +17924,6 @@ "safe-buffer": "^5.1.1" } }, - "node-forge": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", - "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==", - "dev": true - }, "node-gyp": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.0.5.tgz", @@ -19332,6 +19586,28 @@ "integrity": "sha1-ZJZjYJoOurh8jwiz/nJASLUdnX8=", "dev": true }, + "portfinder": { + "version": "1.0.28", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", + "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==", + "dev": true, + "requires": { + "async": "^2.6.2", + "debug": "^3.1.1", + "mkdirp": "^0.5.5" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + } + } + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -19898,9 +20174,9 @@ }, "dependencies": { "dot-prop": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz", + "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -20078,9 +20354,9 @@ }, "dependencies": { "dot-prop": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz", + "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -21816,9 +22092,9 @@ } }, "react-moment-proptypes": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz", - "integrity": "sha512-ZbOn/P4u469WEGAw5hgkS/E+g1YZqdves2BjYsLluJobzUZCtManhjHiZKjniBVT7MSHM6D/iKtRVzlXVv3ikA==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.8.0.tgz", + "integrity": "sha512-vkysOAoKqU05umMRGUgCkOl2L5n0+5SjCq4iI1LleTfQDNC0l2nmjK+JTdf2eG0wUV24ZdHdEmgsKzf325b3zA==", "requires": { "moment": ">=1.6.0" } @@ -22016,9 +22292,9 @@ } }, "react-tabs": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.1.1.tgz", - "integrity": "sha512-HpySC29NN1BkzBAnOC+ajfzPbTaVZcSWzMSjk56uAhPC/rBGtli8lTysR4CfPAyEE/hfweIzagOIoJ7nu80yng==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.1.tgz", + "integrity": "sha512-M7ERQvJgBVLTyojFmC3G4tpaJuMmUtsnYenVQm2oA1NjDrGXq1UuzHgxhVTDwimkJcKEbzgWCybXFSHQ/+2bsA==", "requires": { "clsx": "^1.1.0", "prop-types": "^15.5.0" @@ -23925,15 +24201,6 @@ "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=", "dev": true }, - "selfsigned": { - "version": "1.10.7", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz", - "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==", - "dev": true, - "requires": { - "node-forge": "0.9.0" - } - }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -24364,6 +24631,42 @@ } } }, + "sockjs": { + "version": "0.3.21", + "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz", + "integrity": "sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==", + "dev": true, + "requires": { + "faye-websocket": "^0.11.3", + "uuid": "^3.4.0", + "websocket-driver": "^0.7.4" + }, + "dependencies": { + "http-parser-js": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz", + "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==", + "dev": true + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + }, + "websocket-driver": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", + "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==", + "dev": true, + "requires": { + "http-parser-js": ">=0.5.1", + "safe-buffer": ">=5.1.0", + "websocket-extensions": ">=0.1.1" + } + } + } + }, "sockjs-client": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz", @@ -24528,6 +24831,19 @@ "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==", "dev": true }, + "spdy": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz", + "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==", + "dev": true, + "requires": { + "debug": "^4.1.0", + "handle-thing": "^2.0.0", + "http-deceiver": "^1.2.7", + "select-hose": "^2.0.0", + "spdy-transport": "^3.0.0" + } + }, "spdy-transport": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz", @@ -24950,9 +25266,9 @@ }, "dependencies": { "dot-prop": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz", + "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -25082,9 +25398,9 @@ } }, "dot-prop": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz", + "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -25535,16 +25851,16 @@ } }, "terser-webpack-plugin": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz", - "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz", + "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==", "dev": true, "requires": { "cacache": "^12.0.2", "find-cache-dir": "^2.1.0", "is-wsl": "^1.1.0", "schema-utils": "^1.0.0", - "serialize-javascript": "^2.1.2", + "serialize-javascript": "^4.0.0", "source-map": "^0.6.1", "terser": "^4.1.2", "webpack-sources": "^1.4.0", @@ -25552,10 +25868,13 @@ }, "dependencies": { "serialize-javascript": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", - "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==", - "dev": true + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } }, "source-map": { "version": "0.6.1", @@ -25983,9 +26302,9 @@ "dev": true }, "ua-parser-js": { - "version": "0.7.22", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz", - "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==" + "version": "0.7.24", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.24.tgz", + "integrity": "sha512-yo+miGzQx5gakzVK3QFfN0/L9uVhosXBBO7qmnk7c2iw1IhL212wfA3zbnI54B0obGwC/5NWub/iT9sReMx+Fw==" }, "uglify-js": { "version": "3.7.1", @@ -26926,9 +27245,9 @@ } }, "webpack-dev-server": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz", - "integrity": "sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==", + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz", + "integrity": "sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==", "dev": true, "requires": { "ansi-html": "0.0.7", @@ -26951,11 +27270,11 @@ "p-retry": "^3.0.1", "portfinder": "^1.0.26", "schema-utils": "^1.0.0", - "selfsigned": "^1.10.7", + "selfsigned": "^1.10.8", "semver": "^6.3.0", "serve-index": "^1.9.1", - "sockjs": "0.3.20", - "sockjs-client": "1.4.0", + "sockjs": "^0.3.21", + "sockjs-client": "^1.5.0", "spdy": "^4.0.2", "strip-ansi": "^3.0.1", "supports-color": "^6.1.0", @@ -27009,15 +27328,6 @@ "original": "^1.0.0" } }, - "faye-websocket": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", - "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=", - "dev": true, - "requires": { - "websocket-driver": ">=0.5.1" - } - }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -27033,12 +27343,6 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true }, - "html-entities": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz", - "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==", - "dev": true - }, "is-fullwidth-code-point": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", @@ -27055,10 +27359,10 @@ "path-exists": "^3.0.0" } }, - "loglevel": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz", - "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==", + "node-forge": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", + "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==", "dev": true }, "opn": { @@ -27094,28 +27398,6 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, - "portfinder": { - "version": "1.0.26", - "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz", - "integrity": "sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==", - "dev": true, - "requires": { - "async": "^2.6.2", - "debug": "^3.1.1", - "mkdirp": "^0.5.1" - }, - "dependencies": { - "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - } - } - }, "punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", @@ -27128,70 +27410,46 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "selfsigned": { + "version": "1.10.8", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz", + "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==", + "dev": true, + "requires": { + "node-forge": "^0.10.0" + } + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, - "sockjs": { - "version": "0.3.20", - "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz", - "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==", - "dev": true, - "requires": { - "faye-websocket": "^0.10.0", - "uuid": "^3.4.0", - "websocket-driver": "0.6.5" - } - }, "sockjs-client": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz", - "integrity": "sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.0.tgz", + "integrity": "sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==", "dev": true, "requires": { - "debug": "^3.2.5", + "debug": "^3.2.6", "eventsource": "^1.0.7", - "faye-websocket": "~0.11.1", - "inherits": "^2.0.3", - "json3": "^3.3.2", - "url-parse": "^1.4.3" + "faye-websocket": "^0.11.3", + "inherits": "^2.0.4", + "json3": "^3.3.3", + "url-parse": "^1.4.7" }, "dependencies": { "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "requires": { "ms": "^2.1.1" } - }, - "faye-websocket": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz", - "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==", - "dev": true, - "requires": { - "websocket-driver": ">=0.5.1" - } } } }, - "spdy": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz", - "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==", - "dev": true, - "requires": { - "debug": "^4.1.0", - "handle-thing": "^2.0.0", - "http-deceiver": "^1.2.7", - "select-hose": "^2.0.0", - "spdy-transport": "^3.0.0" - } - }, "string-width": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", @@ -27233,21 +27491,6 @@ "querystring": "0.2.0" } }, - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", - "dev": true - }, - "websocket-driver": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz", - "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=", - "dev": true, - "requires": { - "websocket-extensions": ">=0.1.1" - } - }, "wrap-ansi": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", @@ -27373,9 +27616,9 @@ } }, "whatwg-fetch": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz", - "integrity": "sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==" + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz", + "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==" }, "whatwg-mimetype": { "version": "2.3.0", @@ -27439,6 +27682,12 @@ "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", "dev": true }, + "wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", + "dev": true + }, "worker-farm": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz", diff --git a/package.json b/package.json index 2f115dd53..a407d635c 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@tds/core-ordered-list": "^3.0.17", "@tds/core-paragraph": "^2.0.12", "@tds/core-responsive": "^1.3.3", + "@tds/core-responsive-image": "^1.0.0", "@tds/core-spinner": "^3.1.11", "@tds/core-strong": "^2.1.10", "@tds/core-text": "^3.1.1", @@ -91,7 +92,7 @@ "babel-polyfill": "^6.26.0", "case": "^1.5.4", "chromedriver": "^76.0.0", - "commitizen": "^4.1.2", + "commitizen": "^4.2.3", "css-mediaquery": "^0.1.2", "css-modules-loader-core": "^1.1.0", "echint": "^4.0.1", diff --git a/shared/utils/generateId/package-lock.json b/shared/utils/generateId/package-lock.json new file mode 100644 index 000000000..ab66b8683 --- /dev/null +++ b/shared/utils/generateId/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "@tds/util-generate-id", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "array-find-es6": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/array-find-es6/-/array-find-es6-2.0.3.tgz", + "integrity": "sha512-35QZe7bM24H1Q+tAhFRVp6mUsCD+M1zREs45fjeiVqF2OAgzly76tcCjBISvu4AlR6slKv1oDaYr4KlPmzBKZA==" + } + } +} From f99f97f662d6d8208f9ea26b277caaad3fcf0123 Mon Sep 17 00:00:00 2001 From: kiesha Date: Thu, 1 Apr 2021 16:45:17 -0700 Subject: [PATCH 3/9] feat(community-optimize-image): add checkWebpFeature --- packages/OptimizeImage/OptimizeImage.jsx | 62 +++++++++++-------- .../__tests__/OptimizeImage.spec.jsx | 10 +-- .../__snapshots__/OptimizeImage.spec.jsx.snap | 3 + packages/OptimizeImage/checkWebpFeature.js | 5 +- 4 files changed, 47 insertions(+), 33 deletions(-) create mode 100644 packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap diff --git a/packages/OptimizeImage/OptimizeImage.jsx b/packages/OptimizeImage/OptimizeImage.jsx index 2b0288f98..18772ec4e 100644 --- a/packages/OptimizeImage/OptimizeImage.jsx +++ b/packages/OptimizeImage/OptimizeImage.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import ResponsiveImage from '@tds/core-responsive-image' import { breakpoints } from '@tds/core-responsive' @@ -8,32 +8,36 @@ import checkWebpFeature from './checkWebpFeature' /** * @version ./package.json */ -const OptimizeImage = ({ contentfulAssetUrl, alt, ...rest }) => { - const imgUrls = { - xsSrc: `${contentfulAssetUrl}?w=320`, - smSrc: `${contentfulAssetUrl}?w=${breakpoints.sm}`, - mdSrc: `${contentfulAssetUrl}?w=${breakpoints.md}`, - lgSrc: `${contentfulAssetUrl}?w=${breakpoints.lg}`, - xlSrc: `${contentfulAssetUrl}?w=${breakpoints.xl}`, - fallbackSrc: contentfulAssetUrl, - } +const OptimizeImage = ({ contentfulAssetUrl, alt, quality, ...rest }) => { + // states used to ensure images are downloaded only once + const [hasLoaded, setHasLoaded] = useState(false) + const [imgUrls, setImgUrls] = useState({}) - if (contentfulAssetUrl && !contentfulAssetUrl.match(/.svg/g)) { - // Currently not all browsers support - checkWebpFeature(result => { - let format = '' - if (result) { - format = 'fm=webp' - } else if (contentfulAssetUrl.match(/.jpeg/g)) { - format = 'fm=jpg&fl=progressive' - } + useEffect(() => { + if (contentfulAssetUrl && !contentfulAssetUrl.match(/.svg/g)) { + // Currently not all browsers support webP + checkWebpFeature(result => { + let format = '' + if (result) { + format = 'fm=webp' + } else if (contentfulAssetUrl.match(/.jpeg/g)) { + format = 'fm=jpg&fl=progressive' + } - Object.keys(imgUrls).forEach(key => { - imgUrls[key] = imgUrls[key].concat('&', format) + setImgUrls({ + xsSrc: `${contentfulAssetUrl}?w=320&q=${quality}&${format}`, + smSrc: `${contentfulAssetUrl}?w=${breakpoints.sm}&q=${quality}&${format}`, + mdSrc: `${contentfulAssetUrl}?w=${breakpoints.md}&q=${quality}&${format}`, + lgSrc: `${contentfulAssetUrl}?w=${breakpoints.lg}&q=${quality}&${format}`, + xlSrc: `${contentfulAssetUrl}?w=${breakpoints.xl}&q=${quality}&${format}`, + fallbackSrc: `${contentfulAssetUrl}?w=${breakpoints.xl}&q=${quality}`, + }) + setHasLoaded(true) }) - }) - } + } + }, []) + if (!hasLoaded) return null return ( { } OptimizeImage.propTypes = { + /** + * The source to load the image. + */ + contentfulAssetUrl: PropTypes.string.isRequired, /** * Alternative text to display if image cannot be loaded or a screen reader is used. */ alt: PropTypes.string.isRequired, /** - * The source to load the image. + * Customize quality as a percentage between 1 and 100. */ - contentfulAssetUrl: PropTypes.string.isRequired, + quality: PropTypes.number, } -OptimizeImage.defaultProps = {} +OptimizeImage.defaultProps = { + quality: 80, +} export default OptimizeImage diff --git a/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx b/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx index 9364181a4..173f71157 100644 --- a/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx +++ b/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx @@ -12,12 +12,12 @@ describe('OptimizeImage', () => { expect(optimizeImage).toMatchSnapshot() }) - it('passes additional attributes to the element', () => { - const optimizeImage = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }) + // it('passes additional attributes to the element', () => { + // const optimizeImage = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }) - expect(optimizeImage).toHaveProp('id', 'the-id') - expect(optimizeImage).toHaveProp('data-some-attr', 'some value') - }) + // expect(optimizeImage).toHaveProp('id', 'the-id') + // expect(optimizeImage).toHaveProp('data-some-attr', 'some value') + // }) it('does not allow custom CSS', () => { const optimizeImage = doShallow({ diff --git a/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap b/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap new file mode 100644 index 000000000..16d7d1845 --- /dev/null +++ b/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OptimizeImage renders 1`] = `""`; diff --git a/packages/OptimizeImage/checkWebpFeature.js b/packages/OptimizeImage/checkWebpFeature.js index c2733b8ee..9ed81b1bf 100644 --- a/packages/OptimizeImage/checkWebpFeature.js +++ b/packages/OptimizeImage/checkWebpFeature.js @@ -1,5 +1,5 @@ // taken directly from Google developers guide on how to detect browser support for WebP -export default callback => { +export default async callback => { // basic support const lossy = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA' // other test forms @@ -9,7 +9,8 @@ export default callback => { // alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", // animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" // }; - const img = new Image() + + const img = document.createElement('img') img.onload = function onLoad() { const result = img.width > 0 && img.height > 0 callback(result) From 83e483781cff6cbc29b0b715c9f999f1c90f51b1 Mon Sep 17 00:00:00 2001 From: kiesha Date: Mon, 5 Apr 2021 10:00:09 -0700 Subject: [PATCH 4/9] feat(community-optimize-image): add customizable widths, update docs --- packages/OptimizeImage/OptimizeImage.jsx | 40 +++++++++++++++++++----- packages/OptimizeImage/OptimizeImage.md | 7 +++-- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/packages/OptimizeImage/OptimizeImage.jsx b/packages/OptimizeImage/OptimizeImage.jsx index 18772ec4e..bfb85188f 100644 --- a/packages/OptimizeImage/OptimizeImage.jsx +++ b/packages/OptimizeImage/OptimizeImage.jsx @@ -1,14 +1,13 @@ import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import ResponsiveImage from '@tds/core-responsive-image' -import { breakpoints } from '@tds/core-responsive' import { safeRest } from '@tds/util-helpers' import checkWebpFeature from './checkWebpFeature' /** * @version ./package.json */ -const OptimizeImage = ({ contentfulAssetUrl, alt, quality, ...rest }) => { +const OptimizeImage = ({ contentfulAssetUrl, alt, quality, xs, sm, md, lg, xl, ...rest }) => { // states used to ensure images are downloaded only once const [hasLoaded, setHasLoaded] = useState(false) const [imgUrls, setImgUrls] = useState({}) @@ -25,12 +24,12 @@ const OptimizeImage = ({ contentfulAssetUrl, alt, quality, ...rest }) => { } setImgUrls({ - xsSrc: `${contentfulAssetUrl}?w=320&q=${quality}&${format}`, - smSrc: `${contentfulAssetUrl}?w=${breakpoints.sm}&q=${quality}&${format}`, - mdSrc: `${contentfulAssetUrl}?w=${breakpoints.md}&q=${quality}&${format}`, - lgSrc: `${contentfulAssetUrl}?w=${breakpoints.lg}&q=${quality}&${format}`, - xlSrc: `${contentfulAssetUrl}?w=${breakpoints.xl}&q=${quality}&${format}`, - fallbackSrc: `${contentfulAssetUrl}?w=${breakpoints.xl}&q=${quality}`, + xsSrc: `${contentfulAssetUrl}?w=${xs}&q=${quality}&${format}`, + smSrc: `${contentfulAssetUrl}?w=${sm}&q=${quality}&${format}`, + mdSrc: `${contentfulAssetUrl}?w=${md}&q=${quality}&${format}`, + lgSrc: `${contentfulAssetUrl}?w=${lg}&q=${quality}&${format}`, + xlSrc: `${contentfulAssetUrl}?w=${xl}&q=${quality}&${format}`, + fallbackSrc: `${contentfulAssetUrl}?w=${xl}&q=${quality}`, }) setHasLoaded(true) }) @@ -65,10 +64,35 @@ OptimizeImage.propTypes = { * Customize quality as a percentage between 1 and 100. */ quality: PropTypes.number, + /** + * Customize width for xs screen size in px, this may affect the quality of the image. + */ + xs: PropTypes.number, + /** + * Customize width for sm screen size in px, this may affect the quality of the image. + */ + sm: PropTypes.number, + /** + * Customize width for md screen size in px, this may affect the quality of the image. + */ + md: PropTypes.number, + /** + * Customize width for lg screen size in px, this may affect the quality of the image. + */ + lg: PropTypes.number, + /** + * Customize width for xl screen size in px, this may affect the quality of the image. + */ + xl: PropTypes.number, } OptimizeImage.defaultProps = { quality: 80, + xs: 320, + sm: 576, + md: 768, + lg: 992, + xl: 1200, } export default OptimizeImage diff --git a/packages/OptimizeImage/OptimizeImage.md b/packages/OptimizeImage/OptimizeImage.md index d7a729f1d..d1a5e1623 100644 --- a/packages/OptimizeImage/OptimizeImage.md +++ b/packages/OptimizeImage/OptimizeImage.md @@ -1,13 +1,14 @@ -(describe what your component does here) +OptimizeImage is used to optimize image files based on screen size ### Usage criteria -- What must your experience achieve in order to warrant the use of this component? -- When using this component, how should you typically use it? +- Must use a contentful asset url as the component adapts the url to convert the image file +- May customize quality and screen width sizes. Note: increasing quality and width may affect page performance. ```jsx ``` From 02e42b5dd4f53b39a8b8acef6ed0de026b939124 Mon Sep 17 00:00:00 2001 From: kiesha Date: Tue, 6 Apr 2021 13:44:01 -0700 Subject: [PATCH 5/9] test(community-optimize-image): add unit tests --- packages/OptimizeImage/OptimizeImage.jsx | 12 +++- packages/OptimizeImage/OptimizeImage.md | 2 +- .../__tests__/OptimizeImage.spec.jsx | 67 ++++++++++++++++--- .../__snapshots__/OptimizeImage.spec.jsx.snap | 55 ++++++++++++++- packages/OptimizeImage/package.json | 2 +- 5 files changed, 123 insertions(+), 15 deletions(-) diff --git a/packages/OptimizeImage/OptimizeImage.jsx b/packages/OptimizeImage/OptimizeImage.jsx index bfb85188f..74d2886ea 100644 --- a/packages/OptimizeImage/OptimizeImage.jsx +++ b/packages/OptimizeImage/OptimizeImage.jsx @@ -13,7 +13,7 @@ const OptimizeImage = ({ contentfulAssetUrl, alt, quality, xs, sm, md, lg, xl, . const [imgUrls, setImgUrls] = useState({}) useEffect(() => { - if (contentfulAssetUrl && !contentfulAssetUrl.match(/.svg/g)) { + if (!contentfulAssetUrl.match(/.svg/g)) { // Currently not all browsers support webP checkWebpFeature(result => { let format = '' @@ -33,6 +33,16 @@ const OptimizeImage = ({ contentfulAssetUrl, alt, quality, xs, sm, md, lg, xl, . }) setHasLoaded(true) }) + } else { + setImgUrls({ + xsSrc: contentfulAssetUrl, + smSrc: contentfulAssetUrl, + mdSrc: contentfulAssetUrl, + lgSrc: contentfulAssetUrl, + xlSrc: contentfulAssetUrl, + fallbackSrc: contentfulAssetUrl, + }) + setHasLoaded(true) } }, []) diff --git a/packages/OptimizeImage/OptimizeImage.md b/packages/OptimizeImage/OptimizeImage.md index d1a5e1623..4f88195dd 100644 --- a/packages/OptimizeImage/OptimizeImage.md +++ b/packages/OptimizeImage/OptimizeImage.md @@ -8,7 +8,7 @@ OptimizeImage is used to optimize image files based on screen size ```jsx ``` diff --git a/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx b/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx index 173f71157..596778486 100644 --- a/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx +++ b/packages/OptimizeImage/__tests__/OptimizeImage.spec.jsx @@ -1,31 +1,76 @@ import React from 'react' -import { shallow } from 'enzyme' +import { mount } from 'enzyme' import OptimizeImage from '../OptimizeImage' +import checkWebpFeature from '../checkWebpFeature' + +jest.mock('../checkWebpFeature') describe('OptimizeImage', () => { - const doShallow = (props = {}) => shallow() + beforeEach(() => { + checkWebpFeature.mockImplementation(res => res(true)) + }) - it('renders', () => { - const optimizeImage = doShallow() + const doMount = (props = {}) => + mount( + + ) + it('renders', () => { + const optimizeImage = doMount() expect(optimizeImage).toMatchSnapshot() }) - // it('passes additional attributes to the element', () => { - // const optimizeImage = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }) + it('passes additional attributes to the element', () => { + const optimizeImage = doMount({ id: 'the-id', 'data-some-attr': 'some value' }) - // expect(optimizeImage).toHaveProp('id', 'the-id') - // expect(optimizeImage).toHaveProp('data-some-attr', 'some value') - // }) + expect(optimizeImage).toHaveProp('id', 'the-id') + expect(optimizeImage).toHaveProp('data-some-attr', 'some value') + }) it('does not allow custom CSS', () => { - const optimizeImage = doShallow({ + const optimizeImage = doMount({ className: 'my-custom-class', style: { color: 'hotpink' }, - }) + }).find('ResponsiveImage') expect(optimizeImage).not.toHaveProp('className', 'my-custom-class') expect(optimizeImage).not.toHaveProp('style') }) + + it('should not alter the url if it is an svg', () => { + const optimizeImage = doMount({ + contentfulAssetUrl: 'https://images.ctfassets.net/Alpaca.svg', + }).find('ResponsiveImage') + + expect(optimizeImage).toHaveProp('xsSrc', 'https://images.ctfassets.net/Alpaca.svg') + }) + + it('should format with webp if browser supports it', () => { + const optimizeImage = doMount({ + contentfulAssetUrl: 'https://images.ctfassets.net/Alpaca.jpg', + }).find('ResponsiveImage') + + expect(optimizeImage).toHaveProp( + 'xsSrc', + 'https://images.ctfassets.net/Alpaca.jpg?w=320&q=80&fm=webp' + ) + }) + + it('should format with progressive jpg if browser does not support webp', () => { + checkWebpFeature.mockImplementation(res => res(false)) + + const optimizeImage = doMount({ + contentfulAssetUrl: 'https://images.ctfassets.net/Alpaca.jpeg', + }).find('ResponsiveImage') + + expect(optimizeImage).toHaveProp( + 'xsSrc', + 'https://images.ctfassets.net/Alpaca.jpeg?w=320&q=80&fm=jpg&fl=progressive' + ) + }) }) diff --git a/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap b/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap index 16d7d1845..78a64b921 100644 --- a/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap +++ b/packages/OptimizeImage/__tests__/__snapshots__/OptimizeImage.spec.jsx.snap @@ -1,3 +1,56 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`OptimizeImage renders 1`] = `""`; +exports[`OptimizeImage renders 1`] = ` + + + + + + + + + test-image + + + +`; diff --git a/packages/OptimizeImage/package.json b/packages/OptimizeImage/package.json index c6f54fdc1..f98427e16 100644 --- a/packages/OptimizeImage/package.json +++ b/packages/OptimizeImage/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@tds/core-responsive-image": "1.0.0", - "@tds/util-helpers": "^1.2.0", + "@tds/util-helpers": "^1.5.0", "prop-types": "^15.6.2" } } From 631e271653fa39ccdd6d341b76c1586c08820384 Mon Sep 17 00:00:00 2001 From: kiesha Date: Tue, 6 Apr 2021 17:33:52 -0700 Subject: [PATCH 6/9] test(packages): update snaps --- .../__tests__/__snapshots__/Modal.spec.jsx.snap | 8 ++++---- .../__tests__/__snapshots__/Tabs.spec.jsx.snap | 4 ++++ .../__snapshots__/TagItem.spec.jsx.snap | 8 ++++---- .../__tests__/__snapshots__/Tags.spec.jsx.snap | 16 ++++++++-------- 4 files changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/Modal/__tests__/__snapshots__/Modal.spec.jsx.snap b/packages/Modal/__tests__/__snapshots__/Modal.spec.jsx.snap index 84499c95d..3256dc013 100644 --- a/packages/Modal/__tests__/__snapshots__/Modal.spec.jsx.snap +++ b/packages/Modal/__tests__/__snapshots__/Modal.spec.jsx.snap @@ -162,8 +162,8 @@ exports[`Modal renders 1`] = ` .c18 { position: relative; top: 0; - width: 24px; - height: 24px; + width: 1.5rem; + height: 1.5rem; fill: #2a2c2e; } @@ -615,8 +615,8 @@ exports[`Modal renders 1`] = ` .c18 { position: relative; top: 0; - width: 24px; - height: 24px; + width: 1.5rem; + height: 1.5rem; fill: #2a2c2e; } diff --git a/packages/Tabs/__tests__/__snapshots__/Tabs.spec.jsx.snap b/packages/Tabs/__tests__/__snapshots__/Tabs.spec.jsx.snap index 83738a5bf..c2290ac55 100644 --- a/packages/Tabs/__tests__/__snapshots__/Tabs.spec.jsx.snap +++ b/packages/Tabs/__tests__/__snapshots__/Tabs.spec.jsx.snap @@ -1151,11 +1151,15 @@ exports[`Tabs renders 1`] = ` Date: Wed, 7 Apr 2021 15:54:22 -0700 Subject: [PATCH 7/9] feat(community-optimize-image): replace comment --- packages/OptimizeImage/checkWebpFeature.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/OptimizeImage/checkWebpFeature.js b/packages/OptimizeImage/checkWebpFeature.js index 9ed81b1bf..95ecc7afc 100644 --- a/packages/OptimizeImage/checkWebpFeature.js +++ b/packages/OptimizeImage/checkWebpFeature.js @@ -1,14 +1,8 @@ // taken directly from Google developers guide on how to detect browser support for WebP export default async callback => { - // basic support + // basic support. other test forms exist for lossless, alpha, and animation types. + // check google guide if data strings are needed const lossy = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA' - // other test forms - // var kTestImages = { - // lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", - // lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", - // alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", - // animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" - // }; const img = document.createElement('img') img.onload = function onLoad() { From e3469dffdc47514a5e9d873576391abbc03f2d0d Mon Sep 17 00:00:00 2001 From: kiesha Date: Thu, 8 Apr 2021 10:47:13 -0700 Subject: [PATCH 8/9] fix(community-optimize-image): update optimize-image readme --- packages/OptimizeImage/OptimizeImage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/OptimizeImage/OptimizeImage.md b/packages/OptimizeImage/OptimizeImage.md index 4f88195dd..78a22c54e 100644 --- a/packages/OptimizeImage/OptimizeImage.md +++ b/packages/OptimizeImage/OptimizeImage.md @@ -3,7 +3,7 @@ OptimizeImage is used to optimize image files based on screen size ### Usage criteria - Must use a contentful asset url as the component adapts the url to convert the image file -- May customize quality and screen width sizes. Note: increasing quality and width may affect page performance. +- May customize quality and screen width sizes. Note: increasing quality and width may affect page performance ```jsx Date: Thu, 8 Apr 2021 10:48:53 -0700 Subject: [PATCH 9/9] fix(shared): remove package-lock --- shared/utils/generateId/package-lock.json | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 shared/utils/generateId/package-lock.json diff --git a/shared/utils/generateId/package-lock.json b/shared/utils/generateId/package-lock.json deleted file mode 100644 index ab66b8683..000000000 --- a/shared/utils/generateId/package-lock.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "@tds/util-generate-id", - "version": "1.0.0", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "array-find-es6": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/array-find-es6/-/array-find-es6-2.0.3.tgz", - "integrity": "sha512-35QZe7bM24H1Q+tAhFRVp6mUsCD+M1zREs45fjeiVqF2OAgzly76tcCjBISvu4AlR6slKv1oDaYr4KlPmzBKZA==" - } - } -}