diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index c3872a2d4..b7f57c9a2 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -4,6 +4,10 @@ on: - "main" pull_request: types: ["opened", "synchronize"] + # REVERT BEFORE MERGE + branches: + - main + - "DOP-4616" name: Run and Upload Lighthouse Reports jobs: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 8e3136344..d61066802 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -7,6 +7,7 @@ on: pull_request: branches: - main + - DOP-4616 jobs: test: diff --git a/AWSCLIV2.pkg b/AWSCLIV2.pkg new file mode 100644 index 000000000..cc4804c3e Binary files /dev/null and b/AWSCLIV2.pkg differ diff --git a/package-lock.json b/package-lock.json index d9c0726b5..ce4127840 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@leafygreen-ui/code": "^14.3.3", "@leafygreen-ui/combobox": "^6.0.0", "@leafygreen-ui/emotion": "^4.0.0", + "@leafygreen-ui/guide-cue": "^5.1.0", "@leafygreen-ui/hooks": "^8.1.3", "@leafygreen-ui/icon": "^12.4.0", "@leafygreen-ui/icon-button": "^15.0.23", @@ -4688,6 +4689,132 @@ "node": ">=12.20" } }, + "node_modules/@leafygreen-ui/guide-cue": { + "version": "5.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/guide-cue/-/guide-cue-5.1.0.tgz", + "integrity": "sha512-o+EOUQ0IgS50u5C+8txrQ57js4aFpdK6EPeGSMarAXd5QPY6YsNA5bLBuSSJ6QBoyP2KLjT8c8Zwt7i0q7ywmw==", + "dependencies": { + "@leafygreen-ui/a11y": "^1.4.13", + "@leafygreen-ui/button": "^21.2.0", + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/icon": "^12.5.0", + "@leafygreen-ui/icon-button": "^15.0.21", + "@leafygreen-ui/lib": "^13.5.0", + "@leafygreen-ui/palette": "^4.0.9", + "@leafygreen-ui/popover": "^11.4.0", + "@leafygreen-ui/tooltip": "^11.1.0", + "@leafygreen-ui/typography": "^19.0.0", + "focus-trap": "6.9.4", + "focus-trap-react": "9.0.2", + "polished": "^4.2.2" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@leafygreen-ui/lib": { + "version": "13.7.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.7.0.tgz", + "integrity": "sha512-R+2br+QrCABPefv5SD4DOAduIveoVxFtSRqk51frjLyATHLUhg7SwV783KJ0ipofCfsLdae2CZRSzT7MAVbSEA==", + "dependencies": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@leafygreen-ui/palette": { + "version": "4.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.1.1.tgz", + "integrity": "sha512-fnFSRiq+qQk2w2Q02b85h3sFHZlPsoPnnGihR93BjS+Okxixiat20RmTV2Si/HyqGuuaSus9Uc49RWf+Lb5JaQ==" + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@leafygreen-ui/polymorphic": { + "version": "2.0.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/polymorphic/-/polymorphic-2.0.2.tgz", + "integrity": "sha512-OjP+hPG/cwADShcGa1SZdm51G2wVpbNqpU0B3GonEAvGLcAvG4LDMXa7BWo3GDliNkPtVMS86w0eZzEDmLfKmQ==", + "dependencies": { + "@leafygreen-ui/lib": "^13.6.0", + "lodash": "^4.17.21" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@leafygreen-ui/popover": { + "version": "11.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.4.0.tgz", + "integrity": "sha512-hSr3zbbWOCUuhByR5ncFJTkXxFfA7o2QjVjDXKLVPPn9Gh7+sYRLe87mTQWs9m8fbRx9O4Uk7Vq0R9U4A77dxw==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.5.0", + "@leafygreen-ui/portal": "^5.1.1", + "@leafygreen-ui/tokens": "^2.8.0", + "@types/react-transition-group": "^4.4.5", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@leafygreen-ui/portal": { + "version": "5.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-5.1.1.tgz", + "integrity": "sha512-8wvNdLxO3hWY7u5rf1ndYCJJ85TB6XpKp+dl7sQPoLnkq8HXd4GqnFXYwvGQp/pf3ts/Dp5FmZ/9dljkktnzQg==", + "dependencies": { + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0" + }, + "peerDependencies": { + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@leafygreen-ui/typography": { + "version": "19.3.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-19.3.0.tgz", + "integrity": "sha512-pgTRcc4usW/S9nDDzkf5Ac/JPEybhWtOnDpmrp99mAJHM6tH48Pd1HjRNHWjn6bnh0nXWjwANXX1ZEe+8ggCNg==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/icon": "^12.6.0", + "@leafygreen-ui/lib": "^13.6.1", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/polymorphic": "^2.0.0", + "@leafygreen-ui/tokens": "^2.9.0" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/@storybook/csf": { + "version": "0.1.11", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.11.tgz", + "integrity": "sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/focus-trap-react": { + "version": "9.0.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/focus-trap-react/-/focus-trap-react-9.0.2.tgz", + "integrity": "sha512-ZwhO5by6KG5r3dy48Lk00A1/0zNYw1Z3RZTN6O6kgAPsWFcwTFszOcQ1dLSfM8pIxpS/ttc7wTttJowjVT3jpg==", + "dependencies": { + "focus-trap": "^6.9.4", + "tabbable": "^5.3.3" + }, + "peerDependencies": { + "prop-types": "^15.8.1", + "react": ">=16.3.0", + "react-dom": ">=16.3.0" + } + }, + "node_modules/@leafygreen-ui/guide-cue/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + } + }, "node_modules/@leafygreen-ui/hooks": { "version": "8.1.3", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-8.1.3.tgz", @@ -5578,15 +5705,6 @@ "@leafygreen-ui/leafygreen-provider": "^3.1.12" } }, - "node_modules/@leafygreen-ui/radio-box-group/node_modules/@leafygreen-ui/hooks": { - "version": "8.1.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-8.1.3.tgz", - "integrity": "sha512-UAHii7T+g8h8sSzogqUgIid64bbKPHGihAAoBpNzbNsjqFllYVC0FpF59jQeL6tCYd32C2KatWOvhYheBf1hsA==", - "dependencies": { - "@leafygreen-ui/lib": "^13.3.0", - "lodash": "^4.17.21" - } - }, "node_modules/@leafygreen-ui/radio-box-group/node_modules/@leafygreen-ui/lib": { "version": "13.7.0", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.7.0.tgz", @@ -6103,24 +6221,6 @@ "@leafygreen-ui/leafygreen-provider": "^3.1.12" } }, - "node_modules/@leafygreen-ui/table/node_modules/@leafygreen-ui/icon-button": { - "version": "15.0.22", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.22.tgz", - "integrity": "sha512-o9+gSUfL5ZE6g05m89vv0BRtD+qcfOpfgbuusN5KXdvbAKPgUaweySFl6rMHgSybfdMM1E36rmxyyCwEo7Vahw==", - "dependencies": { - "@leafygreen-ui/a11y": "^1.4.13", - "@leafygreen-ui/box": "^3.1.9", - "@leafygreen-ui/emotion": "^4.0.8", - "@leafygreen-ui/icon": "^12.0.1", - "@leafygreen-ui/lib": "^13.3.0", - "@leafygreen-ui/palette": "^4.0.9", - "@leafygreen-ui/tokens": "^2.5.2", - "polished": "^4.2.2" - }, - "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^3.1.12" - } - }, "node_modules/@leafygreen-ui/table/node_modules/@leafygreen-ui/lib": { "version": "13.6.1", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.6.1.tgz", @@ -6584,17 +6684,17 @@ } }, "node_modules/@leafygreen-ui/tooltip": { - "version": "11.0.4", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-11.0.4.tgz", - "integrity": "sha512-oVzkqCKqTqL/jS90+D3dCjvguRKnbI6zrEtzGj4ve0DzRfTlM6qKJj56gFjoJ0uFrkra5s2OPL+3HbUgIPL26A==", + "version": "11.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-11.1.0.tgz", + "integrity": "sha512-nVIirNqBShuj25u9koOPAVYpqGWKSDe/rsdRyPWZLeL9rLfbtZi9Xn44HeDX7brVo+KBkE29Gsuh1Y3J7LN5ng==", "dependencies": { "@leafygreen-ui/emotion": "^4.0.8", "@leafygreen-ui/hooks": "^8.1.3", - "@leafygreen-ui/icon": "^12.0.1", - "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/icon": "^12.5.0", + "@leafygreen-ui/lib": "^13.5.0", "@leafygreen-ui/palette": "^4.0.9", - "@leafygreen-ui/popover": "^11.3.1", - "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/popover": "^11.4.0", + "@leafygreen-ui/tokens": "^2.8.0", "@leafygreen-ui/typography": "^19.0.0", "lodash": "^4.17.21", "polished": "^4.2.2" @@ -6604,9 +6704,9 @@ } }, "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/lib": { - "version": "13.4.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.4.0.tgz", - "integrity": "sha512-Ju+tHF6z3ttU9UD6EXmTtIExgj/ZXnjm48CRQ6jk65LnYuX19i3I35nkCZwb8n28WlxDH7UDoEumx/hvM05Z4w==", + "version": "13.7.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.7.0.tgz", + "integrity": "sha512-R+2br+QrCABPefv5SD4DOAduIveoVxFtSRqk51frjLyATHLUhg7SwV783KJ0ipofCfsLdae2CZRSzT7MAVbSEA==", "dependencies": { "@storybook/csf": "^0.1.0", "lodash": "^4.17.21", @@ -6622,15 +6722,15 @@ "integrity": "sha512-0vhKwMfBv7eO9txSxkgxijjI8M9L8uLFge+JpbBXql37+rKJuiQl7wCb5OPIJM+aV2HaHElGMyf9nRliabk30w==" }, "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/popover": { - "version": "11.3.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.3.1.tgz", - "integrity": "sha512-pkEGWOHSJ0HiRRaUEFLY42EZVGVlLVAe9ufr00QWOJ1tuu3Mr/al4yNRUSJqz9mZbUo1mAun9XXvVpwP5GfrSQ==", + "version": "11.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.4.0.tgz", + "integrity": "sha512-hSr3zbbWOCUuhByR5ncFJTkXxFfA7o2QjVjDXKLVPPn9Gh7+sYRLe87mTQWs9m8fbRx9O4Uk7Vq0R9U4A77dxw==", "dependencies": { "@leafygreen-ui/emotion": "^4.0.8", "@leafygreen-ui/hooks": "^8.1.3", - "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/lib": "^13.5.0", "@leafygreen-ui/portal": "^5.1.1", - "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/tokens": "^2.8.0", "@types/react-transition-group": "^4.4.5", "react-transition-group": "^4.4.5" }, @@ -34314,6 +34414,111 @@ } } }, + "@leafygreen-ui/guide-cue": { + "version": "5.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/guide-cue/-/guide-cue-5.1.0.tgz", + "integrity": "sha512-o+EOUQ0IgS50u5C+8txrQ57js4aFpdK6EPeGSMarAXd5QPY6YsNA5bLBuSSJ6QBoyP2KLjT8c8Zwt7i0q7ywmw==", + "requires": { + "@leafygreen-ui/a11y": "^1.4.13", + "@leafygreen-ui/button": "^21.2.0", + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/icon": "^12.5.0", + "@leafygreen-ui/icon-button": "^15.0.21", + "@leafygreen-ui/lib": "^13.5.0", + "@leafygreen-ui/palette": "^4.0.9", + "@leafygreen-ui/popover": "^11.4.0", + "@leafygreen-ui/tooltip": "^11.1.0", + "@leafygreen-ui/typography": "^19.0.0", + "focus-trap": "6.9.4", + "focus-trap-react": "9.0.2", + "polished": "^4.2.2" + }, + "dependencies": { + "@leafygreen-ui/lib": { + "version": "13.7.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.7.0.tgz", + "integrity": "sha512-R+2br+QrCABPefv5SD4DOAduIveoVxFtSRqk51frjLyATHLUhg7SwV783KJ0ipofCfsLdae2CZRSzT7MAVbSEA==", + "requires": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + } + }, + "@leafygreen-ui/palette": { + "version": "4.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.1.1.tgz", + "integrity": "sha512-fnFSRiq+qQk2w2Q02b85h3sFHZlPsoPnnGihR93BjS+Okxixiat20RmTV2Si/HyqGuuaSus9Uc49RWf+Lb5JaQ==" + }, + "@leafygreen-ui/polymorphic": { + "version": "2.0.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/polymorphic/-/polymorphic-2.0.2.tgz", + "integrity": "sha512-OjP+hPG/cwADShcGa1SZdm51G2wVpbNqpU0B3GonEAvGLcAvG4LDMXa7BWo3GDliNkPtVMS86w0eZzEDmLfKmQ==", + "requires": { + "@leafygreen-ui/lib": "^13.6.0", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/popover": { + "version": "11.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.4.0.tgz", + "integrity": "sha512-hSr3zbbWOCUuhByR5ncFJTkXxFfA7o2QjVjDXKLVPPn9Gh7+sYRLe87mTQWs9m8fbRx9O4Uk7Vq0R9U4A77dxw==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.5.0", + "@leafygreen-ui/portal": "^5.1.1", + "@leafygreen-ui/tokens": "^2.8.0", + "@types/react-transition-group": "^4.4.5", + "react-transition-group": "^4.4.5" + } + }, + "@leafygreen-ui/portal": { + "version": "5.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-5.1.1.tgz", + "integrity": "sha512-8wvNdLxO3hWY7u5rf1ndYCJJ85TB6XpKp+dl7sQPoLnkq8HXd4GqnFXYwvGQp/pf3ts/Dp5FmZ/9dljkktnzQg==", + "requires": { + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0" + } + }, + "@leafygreen-ui/typography": { + "version": "19.3.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-19.3.0.tgz", + "integrity": "sha512-pgTRcc4usW/S9nDDzkf5Ac/JPEybhWtOnDpmrp99mAJHM6tH48Pd1HjRNHWjn6bnh0nXWjwANXX1ZEe+8ggCNg==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/icon": "^12.6.0", + "@leafygreen-ui/lib": "^13.6.1", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/polymorphic": "^2.0.0", + "@leafygreen-ui/tokens": "^2.9.0" + } + }, + "@storybook/csf": { + "version": "0.1.11", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.11.tgz", + "integrity": "sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==", + "requires": { + "type-fest": "^2.19.0" + } + }, + "focus-trap-react": { + "version": "9.0.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/focus-trap-react/-/focus-trap-react-9.0.2.tgz", + "integrity": "sha512-ZwhO5by6KG5r3dy48Lk00A1/0zNYw1Z3RZTN6O6kgAPsWFcwTFszOcQ1dLSfM8pIxpS/ttc7wTttJowjVT3jpg==", + "requires": { + "focus-trap": "^6.9.4", + "tabbable": "^5.3.3" + } + }, + "type-fest": { + "version": "2.19.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==" + } + } + }, "@leafygreen-ui/hooks": { "version": "8.1.3", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-8.1.3.tgz", @@ -35082,15 +35287,6 @@ "@leafygreen-ui/tokens": "^2.5.2" }, "dependencies": { - "@leafygreen-ui/hooks": { - "version": "8.1.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-8.1.3.tgz", - "integrity": "sha512-UAHii7T+g8h8sSzogqUgIid64bbKPHGihAAoBpNzbNsjqFllYVC0FpF59jQeL6tCYd32C2KatWOvhYheBf1hsA==", - "requires": { - "@leafygreen-ui/lib": "^13.3.0", - "lodash": "^4.17.21" - } - }, "@leafygreen-ui/lib": { "version": "13.7.0", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.7.0.tgz", @@ -35538,21 +35734,6 @@ "react-transition-group": "^4.4.5" } }, - "@leafygreen-ui/icon-button": { - "version": "15.0.22", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.22.tgz", - "integrity": "sha512-o9+gSUfL5ZE6g05m89vv0BRtD+qcfOpfgbuusN5KXdvbAKPgUaweySFl6rMHgSybfdMM1E36rmxyyCwEo7Vahw==", - "requires": { - "@leafygreen-ui/a11y": "^1.4.13", - "@leafygreen-ui/box": "^3.1.9", - "@leafygreen-ui/emotion": "^4.0.8", - "@leafygreen-ui/icon": "^12.0.1", - "@leafygreen-ui/lib": "^13.3.0", - "@leafygreen-ui/palette": "^4.0.9", - "@leafygreen-ui/tokens": "^2.5.2", - "polished": "^4.2.2" - } - }, "@leafygreen-ui/lib": { "version": "13.6.1", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.6.1.tgz", @@ -35962,26 +36143,26 @@ } }, "@leafygreen-ui/tooltip": { - "version": "11.0.4", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-11.0.4.tgz", - "integrity": "sha512-oVzkqCKqTqL/jS90+D3dCjvguRKnbI6zrEtzGj4ve0DzRfTlM6qKJj56gFjoJ0uFrkra5s2OPL+3HbUgIPL26A==", + "version": "11.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-11.1.0.tgz", + "integrity": "sha512-nVIirNqBShuj25u9koOPAVYpqGWKSDe/rsdRyPWZLeL9rLfbtZi9Xn44HeDX7brVo+KBkE29Gsuh1Y3J7LN5ng==", "requires": { "@leafygreen-ui/emotion": "^4.0.8", "@leafygreen-ui/hooks": "^8.1.3", - "@leafygreen-ui/icon": "^12.0.1", - "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/icon": "^12.5.0", + "@leafygreen-ui/lib": "^13.5.0", "@leafygreen-ui/palette": "^4.0.9", - "@leafygreen-ui/popover": "^11.3.1", - "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/popover": "^11.4.0", + "@leafygreen-ui/tokens": "^2.8.0", "@leafygreen-ui/typography": "^19.0.0", "lodash": "^4.17.21", "polished": "^4.2.2" }, "dependencies": { "@leafygreen-ui/lib": { - "version": "13.4.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.4.0.tgz", - "integrity": "sha512-Ju+tHF6z3ttU9UD6EXmTtIExgj/ZXnjm48CRQ6jk65LnYuX19i3I35nkCZwb8n28WlxDH7UDoEumx/hvM05Z4w==", + "version": "13.7.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.7.0.tgz", + "integrity": "sha512-R+2br+QrCABPefv5SD4DOAduIveoVxFtSRqk51frjLyATHLUhg7SwV783KJ0ipofCfsLdae2CZRSzT7MAVbSEA==", "requires": { "@storybook/csf": "^0.1.0", "lodash": "^4.17.21", @@ -35994,15 +36175,15 @@ "integrity": "sha512-0vhKwMfBv7eO9txSxkgxijjI8M9L8uLFge+JpbBXql37+rKJuiQl7wCb5OPIJM+aV2HaHElGMyf9nRliabk30w==" }, "@leafygreen-ui/popover": { - "version": "11.3.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.3.1.tgz", - "integrity": "sha512-pkEGWOHSJ0HiRRaUEFLY42EZVGVlLVAe9ufr00QWOJ1tuu3Mr/al4yNRUSJqz9mZbUo1mAun9XXvVpwP5GfrSQ==", + "version": "11.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.4.0.tgz", + "integrity": "sha512-hSr3zbbWOCUuhByR5ncFJTkXxFfA7o2QjVjDXKLVPPn9Gh7+sYRLe87mTQWs9m8fbRx9O4Uk7Vq0R9U4A77dxw==", "requires": { "@leafygreen-ui/emotion": "^4.0.8", "@leafygreen-ui/hooks": "^8.1.3", - "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/lib": "^13.5.0", "@leafygreen-ui/portal": "^5.1.1", - "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/tokens": "^2.8.0", "@types/react-transition-group": "^4.4.5", "react-transition-group": "^4.4.5" } diff --git a/package.json b/package.json index 6a31b7e02..24beb332b 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@leafygreen-ui/code": "^14.3.3", "@leafygreen-ui/combobox": "^6.0.0", "@leafygreen-ui/emotion": "^4.0.0", + "@leafygreen-ui/guide-cue": "^5.1.0", "@leafygreen-ui/hooks": "^8.1.3", "@leafygreen-ui/icon": "^12.4.0", "@leafygreen-ui/icon-button": "^15.0.23", diff --git a/src/components/ActionBar/DarkModeDropdown.js b/src/components/ActionBar/DarkModeDropdown.js index fa0eaa1c8..7867812e7 100644 --- a/src/components/ActionBar/DarkModeDropdown.js +++ b/src/components/ActionBar/DarkModeDropdown.js @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useState } from 'react'; +import React, { useCallback, useContext, useRef, useState } from 'react'; import { cx, css } from '@leafygreen-ui/emotion'; import Box from '@leafygreen-ui/box'; import Icon from '@leafygreen-ui/icon'; @@ -7,6 +7,7 @@ import { Menu, MenuItem } from '@leafygreen-ui/menu'; import { DarkModeContext } from '../../context/dark-mode-context'; import { theme } from '../../theme/docsTheme'; import IconDarkmode from '../icons/DarkMode'; +import DarkModeGuideCue from './DarkModeGuideCue'; const iconStyling = css` display: block; @@ -30,6 +31,8 @@ const darkModeSvgStyle = { }; const DarkModeDropdown = () => { + const guideCueRef = useRef(); + // not using dark mode from LG/provider here to account for case of 'system' dark theme const { setDarkModePref, darkModePref } = useContext(DarkModeContext); @@ -44,56 +47,67 @@ const DarkModeDropdown = () => { ); return ( - - {darkModePref === 'system' ? ( - - ) : ( - - )} - - } - > - select('light-theme')} - glyph={} - > - Light - - select('dark-theme')} - glyph={} - > - Dark - - select('system')} - glyph={ - - } - > - System - - + // Remove Fragment and div when Dark Mode Guide Cue is removed - only used for guide cue placement + <> +
+ + {darkModePref === 'system' ? ( + + ) : ( + + )} + + } + > + select('light-theme')} + glyph={} + > + Light + + select('dark-theme')} + glyph={} + > + Dark + + select('system')} + glyph={ + + } + > + System + + +
+ + ); }; diff --git a/src/components/ActionBar/DarkModeGuideCue.js b/src/components/ActionBar/DarkModeGuideCue.js new file mode 100644 index 000000000..d670f150e --- /dev/null +++ b/src/components/ActionBar/DarkModeGuideCue.js @@ -0,0 +1,164 @@ +import React, { useEffect, useRef, useState } from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { css, cx } from '@leafygreen-ui/emotion'; +import { GuideCue } from '@leafygreen-ui/guide-cue'; +import { palette } from '@leafygreen-ui/palette'; +import { Body, H3 } from '@leafygreen-ui/typography'; + +import { withPrefix } from 'gatsby'; +import { useClickOutside } from '../../hooks/use-click-outside'; +import useScreenSize from '../../hooks/useScreenSize'; +import CloseButton from '../Widgets/FeedbackWidget/components/CloseButton'; +import { getLocalValue, setLocalValue } from '../../utils/browser-storage'; +import { theme } from '../../theme/docsTheme'; + +export const DARK_MODE_ANNOUNCED = 'dark-mode-announced'; +const VIDEO_PATH = 'assets/darkModeGuideCue.mov'; + +const GuideCueContent = styled.div` + min-width: 360px; + + h3 { + font-size: ${theme.fontSize.h3}; + line-height: ${theme.size.medium}; + color: ${palette.black}; + margin: 0 0 ${theme.size.small}; + } + + p { + font-size: ${theme.fontSize.small}; + line-height: 20px; + color: ${palette.black}; + } +`; + +const GuideCueHeader = styled.div` + background-color: ${palette.purple.light3}; + border-radius: ${theme.size.small} ${theme.size.small} 0 0; + padding: ${theme.size.medium} ${theme.size.small}; + display: flex; + align-items: center; + justify-content: center; +`; + +const FocusTrapInvisibleButton = styled.button` + border: none; + outline: none; + width: 0; + height: 0; + padding: 0; + margin: 0; + position: absolute; +`; + +const VideoContainer = styled.div` + width: 242px; + overflow: hidden; + display: flex; + justify-content: center; +`; + +const Video = styled.video` + border-radius: 12px; + // This width is two pixels larger than container to cut off black border :/ hence the overflow hidden and flex of the container + width: 244px; +`; + +const GuideCueFooter = styled.div` + padding: ${theme.size.medium} ${theme.size.medium} ${theme.size.small}; +`; + +const DarkModeGuideCue = ({ guideCueRef, dropdownIsOpen }) => { + const ref = useRef(); + const { isMobile } = useScreenSize(); + const [isOpen, setIsOpen] = useState(false); + const onClose = () => setIsOpen(false); + + useClickOutside(ref, onClose); + + // Use localStorage to only show only once to each user + useEffect(() => { + if (isMobile) return; + const darkModeAnnounced = getLocalValue(DARK_MODE_ANNOUNCED); + if (!darkModeAnnounced) setIsOpen(true); + setLocalValue(DARK_MODE_ANNOUNCED, true); + }, [isMobile]); + + // Close GuideCue if dark mode dropdown is opened + useEffect(() => { + if (dropdownIsOpen) onClose(); + }, [dropdownIsOpen]); + + if (isMobile) return null; + + return ( + div > div > div:last-child { + display: none; + } + `)} + > + + + {/* Invisible button to trap focus. Ask from design to not have close button auto-focused */} + + + + + + + +

Announcing: Dark Mode 🌙

+ Choose between dark mode, light mode or system theme to match your reading preferences + + + + ); +}; + +DarkModeGuideCue.propTypes = { + guideCueRef: PropTypes.shape({ current: PropTypes.object }), + dropdownIsOpen: PropTypes.bool.isRequired, +}; + +export default DarkModeGuideCue; diff --git a/src/components/Widgets/FeedbackWidget/components/CloseButton.js b/src/components/Widgets/FeedbackWidget/components/CloseButton.js index 0df030461..0adb06a95 100644 --- a/src/components/Widgets/FeedbackWidget/components/CloseButton.js +++ b/src/components/Widgets/FeedbackWidget/components/CloseButton.js @@ -19,11 +19,11 @@ const buttonStyles = css` } `; -const CloseButton = ({ onClick, size = 'default', ...props }) => { +const CloseButton = ({ onClick, size = 'default', className, ...props }) => { return ( ({ useSiteMetadata: () => ({ reposDatabase: 'pool_test' }), @@ -21,6 +22,8 @@ useAllDocsetsMock.mockImplementation(() => [ prefix: {}, }, ]); +// Not testing Guide Cue announcement here +jest.spyOn(DarkModeGuideCue, 'default').mockImplementation(() => <>); const conversationSpy = jest.fn(); // eslint-disable-next-line no-unused-vars diff --git a/tests/unit/DarkModeDropdown.test.js b/tests/unit/DarkModeDropdown.test.js index 94b1fd39a..42b8f9431 100644 --- a/tests/unit/DarkModeDropdown.test.js +++ b/tests/unit/DarkModeDropdown.test.js @@ -5,6 +5,9 @@ import { DarkModeContext } from '../../src/context/dark-mode-context'; import * as MediaHooks from '../../src/hooks/use-media'; import DarkModeDropdown from '../../src/components/ActionBar/DarkModeDropdown'; +import { setDesktop } from '../utils'; +import { DARK_MODE_ANNOUNCED } from '../../src/components/ActionBar/DarkModeGuideCue'; + let darkModePref = 'light-theme'; const setDarkModePref = jest.fn((value) => { @@ -15,7 +18,9 @@ const setDarkModePref = jest.fn((value) => { jest.spyOn(MediaHooks, 'default').mockImplementation(() => ({})); // mock window.localStorage -const storage = {}; +const storage = { + [DARK_MODE_ANNOUNCED]: 'true', +}; jest.spyOn(window.localStorage.__proto__, 'setItem').mockImplementation((key, value) => { storage[key] = value; }); @@ -31,6 +36,8 @@ const mountDarkModeDropdown = () => { }; describe('DarkMode Dropdown component', () => { + beforeEach(setDesktop); + it('renders dark mode dropdown', async () => { // first snapshot of closed menu const elm = mountDarkModeDropdown(); diff --git a/tests/unit/__snapshots__/DarkModeDropdown.test.js.snap b/tests/unit/__snapshots__/DarkModeDropdown.test.js.snap index f3d43f3de..51f6c865f 100644 --- a/tests/unit/__snapshots__/DarkModeDropdown.test.js.snap +++ b/tests/unit/__snapshots__/DarkModeDropdown.test.js.snap @@ -99,33 +99,35 @@ exports[`DarkMode Dropdown component renders dark mode dropdown 1`] = ` justify-content: center; } - @@ -582,185 +584,187 @@ exports[`DarkMode Dropdown component renders dark mode dropdown 2`] = ` margin-right: 16px; } -
+
- - - -
+ + + +
- + + + +
@@ -868,33 +872,35 @@ exports[`DarkMode Dropdown component updates dark mode when selecting a differen justify-content: center; } - diff --git a/tests/utils/index.js b/tests/utils/index.js index dc97a3b66..1c2fd2fef 100644 --- a/tests/utils/index.js +++ b/tests/utils/index.js @@ -31,6 +31,8 @@ const { export const setMatchMedia = (...queries) => { window.matchMedia = (media) => ({ + addEventListener: () => {}, + removeEventListener: () => {}, addListener: () => {}, removeListener: () => {}, matches: queries.some((query) => media === query),