From 1b62003741feb201b5fa05d9f423a4db0584aee8 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Wed, 21 Jun 2023 14:28:13 -0400 Subject: [PATCH 01/47] DOP-3785: adding a persistent search bar --- package-lock.json | 503 ++++++++++++++---- package.json | 1 + src/components/SearchResults/SearchResults.js | 24 +- 3 files changed, 406 insertions(+), 122 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e013dcda..7c18c83bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@leafygreen-ui/logo": "^4.0.2", "@leafygreen-ui/modal": "^10.1.0", "@leafygreen-ui/palette": "^3.4.3", + "@leafygreen-ui/search-input": "^2.0.8", "@leafygreen-ui/segmented-control": "^8.0.0", "@leafygreen-ui/select": "^7.0.0", "@leafygreen-ui/side-nav": "^10.0.0", @@ -3410,21 +3411,19 @@ } }, "node_modules/@leafygreen-ui/a11y": { - "version": "1.4.2", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/a11y/-/a11y-1.4.2.tgz", - "integrity": "sha512-xIBYmA/kazyCieds9fmFBQmWfsqwOEOP6lX9EWEzecJnOreTflZcrZYV9ApnTQ2whw8k9CLT0wObaTHm4S1IMQ==", - "license": "Apache-2.0", + "version": "1.4.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/a11y/-/a11y-1.4.4.tgz", + "integrity": "sha512-QjXputn8XPagHPCibjfGcImQSUMgZijm9Da1VfIjZhxc47dSGD9cb7ncu9UIpu1w/Sz+2fjQ6oDbp+5K9MUO2w==", "dependencies": { "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/hooks": "^7.7.1", + "@leafygreen-ui/hooks": "^7.7.3", "@leafygreen-ui/lib": "^10.3.2" } }, "node_modules/@leafygreen-ui/a11y/node_modules/@leafygreen-ui/hooks": { - "version": "7.7.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.1.tgz", - "integrity": "sha512-P4uGzI0IBUX2g4MRY2FX6TPrMOLuh2/bOrq9TiWQgj/vhDPbAQt+62F7p3b3XL+Axywtqg6dIODNWW+WfJrXSA==", - "license": "Apache-2.0", + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", "dependencies": { "lodash": "^4.17.21" } @@ -3477,10 +3476,9 @@ } }, "node_modules/@leafygreen-ui/box": { - "version": "3.1.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/box/-/box-3.1.3.tgz", - "integrity": "sha512-lO4IHQIR36rpE19QBqeJxTnfZ4lHvPlSIC93UOdp97JUq0HEelrjsFLMy+262ZJxH2C+oDnuylv9QxdJej/wGw==", - "license": "Apache-2.0" + "version": "3.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/box/-/box-3.1.4.tgz", + "integrity": "sha512-cdEXGEafHuaH4zGx3NTX1bMOQ52EpoWA595BC1hh4/8BmXL+H4NFMGywuhZnvYjC4lyVGauX6sCspxrunbmfMQ==" }, "node_modules/@leafygreen-ui/button": { "version": "16.1.1", @@ -3925,9 +3923,9 @@ } }, "node_modules/@leafygreen-ui/icon": { - "version": "11.16.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.16.0.tgz", - "integrity": "sha512-sxEeFx65xA3ZUFmlcmPLf9tVqblAbcyISPUtsloVMd7DSTDbLaz6+4ujXwukcrMbFGwJGUY+y1Mkmlg5EPAnHg==", + "version": "11.17.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.17.0.tgz", + "integrity": "sha512-/o/Q4mOHRzIE8t72uuKMHx5IcfFmOHenA+tXRfA9kbTGKLpDolNR4NJty/BoZTGBZPVvO5kUF0+eOFfO6AsmkA==", "dependencies": { "@leafygreen-ui/emotion": "^4.0.4", "lodash": "^4.17.21" @@ -3958,30 +3956,28 @@ } }, "node_modules/@leafygreen-ui/input-option": { - "version": "1.0.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/input-option/-/input-option-1.0.3.tgz", - "integrity": "sha512-UfzfQsbAc9PJEN25N2Wa1kdnx1ce/202IzgciTUn1bl99ohI0n0ULDceo8lnt70WZzo7xlh8r3aIV+AZx63soA==", - "license": "Apache-2.0", + "version": "1.0.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/input-option/-/input-option-1.0.5.tgz", + "integrity": "sha512-gU051Rr5oB6CelLziN1xpbymexEP28DsbhgN+KTXxzpOM5q4l1dNAv12UDuCSEJS/xPP0kzkBkMWT/WPOEE/uQ==", "dependencies": { "@leafygreen-ui/a11y": "^1.4.2", "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/lib": "^10.4.0", "@leafygreen-ui/palette": "^4.0.4", - "@leafygreen-ui/polymorphic": "^1.3.1", - "@leafygreen-ui/tokens": "^2.0.3", - "@leafygreen-ui/typography": "^16.3.0" + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1", + "@leafygreen-ui/typography": "^16.5.1" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^3.1.2" + "@leafygreen-ui/leafygreen-provider": "^3.1.3" } }, "node_modules/@leafygreen-ui/input-option/node_modules/@leafygreen-ui/lib": { - "version": "10.3.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.3.3.tgz", - "integrity": "sha512-n+L4u9TnwXgZlzGniEJ4QdKzeXlFU54AgTjb6a2k4nHLBL6eQgRwrHCL4Dviv6ARFHH0tfLWMqBguMOY33Cw2w==", - "license": "Apache-2.0", + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", "dependencies": { - "@storybook/csf": "^0.0.2-next.10", + "@storybook/csf": "^0.1.0", "lodash": "^4.17.21", "prop-types": "^15.7.2" }, @@ -3992,33 +3988,46 @@ "node_modules/@leafygreen-ui/input-option/node_modules/@leafygreen-ui/palette": { "version": "4.0.4", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz", - "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==", - "license": "Apache-2.0" + "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" }, "node_modules/@leafygreen-ui/input-option/node_modules/@leafygreen-ui/tokens": { - "version": "2.0.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.0.3.tgz", - "integrity": "sha512-gLRmjaT27MNkcL+NF6l4f/1fVCNhObjLY+sqb6dYKCtIYOTh8sXXEu5eHRng79hhYqAWHzo8rPYD1VJSAVia6Q==", - "license": "Apache-2.0", + "version": "2.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.1.tgz", + "integrity": "sha512-5mpyxRhp+8aY6eX6UYacDV6PLl3OieWG061ceAn2ThYaanIP64AMbodWifrF/IFMItJPFkwAtfPtJqugOFVb7Q==", "dependencies": { "@leafygreen-ui/palette": "^4.0.4" } }, "node_modules/@leafygreen-ui/input-option/node_modules/@leafygreen-ui/typography": { - "version": "16.3.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.3.0.tgz", - "integrity": "sha512-ddCK3TsRFmTv0533zyCsT7fEaJ1FJb0wErQzKMpAnA1Q9/ZUUf72pJLJLxmk8jKlUdPfWKp2NE5mNRBf31skew==", - "license": "Apache-2.0", + "version": "16.5.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.5.1.tgz", + "integrity": "sha512-5dentOt4LubXxmkwVVy6ZlUvGsebJsHhZZ9LAlplUz13VkyvS458Bhnog4cqNqvnJjdlWLdO+ZO0/JyYUIIuXw==", "dependencies": { "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/icon": "^11.13.1", - "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", "@leafygreen-ui/palette": "^4.0.4", - "@leafygreen-ui/polymorphic": "^1.3.1", - "@leafygreen-ui/tokens": "^2.0.3" + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^3.1.2" + "@leafygreen-ui/leafygreen-provider": "^3.1.3" + } + }, + "node_modules/@leafygreen-ui/input-option/node_modules/@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@leafygreen-ui/input-option/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/interaction-ring": { @@ -4110,10 +4119,9 @@ "license": "Apache-2.0" }, "node_modules/@leafygreen-ui/polymorphic": { - "version": "1.3.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/polymorphic/-/polymorphic-1.3.1.tgz", - "integrity": "sha512-guybioSUs6Xa4kMs65iQwTlUgZ08N9ZvzvjOxUqK5lROVLauAUKt/Sn6tVTgzRpepDHrOUBkt5LQi0o/i4JQcQ==", - "license": "Apache-2.0" + "version": "1.3.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/polymorphic/-/polymorphic-1.3.2.tgz", + "integrity": "sha512-av3FtFGf86c9ccIrgEArBhum0M+IklpBvnONsW70mMtEXKnJsGwGwY+HkuSAxbUpjGFIkIPbn5bIp1rHwAIOHA==" }, "node_modules/@leafygreen-ui/popover": { "version": "9.1.1", @@ -4137,34 +4145,31 @@ } }, "node_modules/@leafygreen-ui/portal": { - "version": "4.1.2", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-4.1.2.tgz", - "integrity": "sha512-HKUMXqafjc8N9TA7u7X3PZ7dBbfsnamc40RPoNLh9z6PzvGNia4wDbixMc2qeC3lWi1fWayFs31LAdIrdzQcXg==", - "license": "Apache-2.0", + "version": "4.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-4.1.4.tgz", + "integrity": "sha512-gtzQno7yXGmbblHIVBWpJ6+TIFwep/PL4M6vcloCzAaV88+gSMJ9lhrBJbqYQkfd65xeEaycClDsfCpI35p/nA==", "dependencies": { - "@leafygreen-ui/hooks": "^7.7.1", - "@leafygreen-ui/lib": "^10.3.3" + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/lib": "^10.4.0" }, "peerDependencies": { "react-dom": "^17.0.0" } }, "node_modules/@leafygreen-ui/portal/node_modules/@leafygreen-ui/hooks": { - "version": "7.7.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.1.tgz", - "integrity": "sha512-P4uGzI0IBUX2g4MRY2FX6TPrMOLuh2/bOrq9TiWQgj/vhDPbAQt+62F7p3b3XL+Axywtqg6dIODNWW+WfJrXSA==", - "license": "Apache-2.0", + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", "dependencies": { "lodash": "^4.17.21" } }, "node_modules/@leafygreen-ui/portal/node_modules/@leafygreen-ui/lib": { - "version": "10.3.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.3.3.tgz", - "integrity": "sha512-n+L4u9TnwXgZlzGniEJ4QdKzeXlFU54AgTjb6a2k4nHLBL6eQgRwrHCL4Dviv6ARFHH0tfLWMqBguMOY33Cw2w==", - "license": "Apache-2.0", + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", "dependencies": { - "@storybook/csf": "^0.0.2-next.10", + "@storybook/csf": "^0.1.0", "lodash": "^4.17.21", "prop-types": "^15.7.2" }, @@ -4172,6 +4177,22 @@ "react": "^17.0.0" } }, + "node_modules/@leafygreen-ui/portal/node_modules/@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@leafygreen-ui/portal/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/ripple": { "version": "1.1.8", "license": "Apache-2.0", @@ -4186,6 +4207,129 @@ "@leafygreen-ui/palette": "^3.4.7" } }, + "node_modules/@leafygreen-ui/search-input": { + "version": "2.0.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/search-input/-/search-input-2.0.8.tgz", + "integrity": "sha512-ijMpZgyUpOQM1fOnUs1XavIYAcD9P5PNRWp2hprgWMJZp8FrcopsslMJJIDaM00Sdj0MjSDAti9+aXeo+2ZgSw==", + "dependencies": { + "@leafygreen-ui/a11y": "^1.4.3", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/icon-button": "^15.0.12", + "@leafygreen-ui/input-option": "^1.0.5", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/popover": "^11.0.12", + "@leafygreen-ui/tokens": "^2.1.1", + "@leafygreen-ui/typography": "^16.5.1", + "lodash": "^4.17.21", + "polished": "^4.2.2" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.3" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/hooks": { + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", + "dependencies": { + "lodash": "^4.17.21" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/icon-button": { + "version": "15.0.12", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.12.tgz", + "integrity": "sha512-19tXprK4/jIZq19o6Y2OnPw5ifuLIhpxAJ4/gs/lIFk/4A5PZJOnZzy6ABdiMaFk/1miSjoDQ5B+lncvgAx1gA==", + "dependencies": { + "@leafygreen-ui/a11y": "^1.4.2", + "@leafygreen-ui/box": "^3.1.4", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/tokens": "^2.1.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.3" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/lib": { + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", + "dependencies": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^17.0.0" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/palette": { + "version": "4.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz", + "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/popover": { + "version": "11.0.12", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.0.12.tgz", + "integrity": "sha512-zF8axGB+RhpoG0xgb4K/p8ydS5JAEXpwqdLrcrY9r7cAYzxX0F4mhIpYg+oyK2K5TIbgGR/fsFPbhKYsmreuMA==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/portal": "^4.1.4", + "@leafygreen-ui/tokens": "^2.1.1", + "react-transition-group": "^4.4.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.3" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/tokens": { + "version": "2.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.1.tgz", + "integrity": "sha512-5mpyxRhp+8aY6eX6UYacDV6PLl3OieWG061ceAn2ThYaanIP64AMbodWifrF/IFMItJPFkwAtfPtJqugOFVb7Q==", + "dependencies": { + "@leafygreen-ui/palette": "^4.0.4" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@leafygreen-ui/typography": { + "version": "16.5.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.5.1.tgz", + "integrity": "sha512-5dentOt4LubXxmkwVVy6ZlUvGsebJsHhZZ9LAlplUz13VkyvS458Bhnog4cqNqvnJjdlWLdO+ZO0/JyYUIIuXw==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.3" + } + }, + "node_modules/@leafygreen-ui/search-input/node_modules/@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@leafygreen-ui/search-input/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/segmented-control": { "version": "8.0.1", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/segmented-control/-/segmented-control-8.0.1.tgz", @@ -25394,19 +25538,19 @@ } }, "@leafygreen-ui/a11y": { - "version": "1.4.2", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/a11y/-/a11y-1.4.2.tgz", - "integrity": "sha512-xIBYmA/kazyCieds9fmFBQmWfsqwOEOP6lX9EWEzecJnOreTflZcrZYV9ApnTQ2whw8k9CLT0wObaTHm4S1IMQ==", + "version": "1.4.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/a11y/-/a11y-1.4.4.tgz", + "integrity": "sha512-QjXputn8XPagHPCibjfGcImQSUMgZijm9Da1VfIjZhxc47dSGD9cb7ncu9UIpu1w/Sz+2fjQ6oDbp+5K9MUO2w==", "requires": { "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/hooks": "^7.7.1", + "@leafygreen-ui/hooks": "^7.7.3", "@leafygreen-ui/lib": "^10.3.2" }, "dependencies": { "@leafygreen-ui/hooks": { - "version": "7.7.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.1.tgz", - "integrity": "sha512-P4uGzI0IBUX2g4MRY2FX6TPrMOLuh2/bOrq9TiWQgj/vhDPbAQt+62F7p3b3XL+Axywtqg6dIODNWW+WfJrXSA==", + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", "requires": { "lodash": "^4.17.21" } @@ -25453,9 +25597,9 @@ } }, "@leafygreen-ui/box": { - "version": "3.1.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/box/-/box-3.1.3.tgz", - "integrity": "sha512-lO4IHQIR36rpE19QBqeJxTnfZ4lHvPlSIC93UOdp97JUq0HEelrjsFLMy+262ZJxH2C+oDnuylv9QxdJej/wGw==" + "version": "3.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/box/-/box-3.1.4.tgz", + "integrity": "sha512-cdEXGEafHuaH4zGx3NTX1bMOQ52EpoWA595BC1hh4/8BmXL+H4NFMGywuhZnvYjC4lyVGauX6sCspxrunbmfMQ==" }, "@leafygreen-ui/button": { "version": "16.1.1", @@ -25803,9 +25947,9 @@ } }, "@leafygreen-ui/icon": { - "version": "11.16.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.16.0.tgz", - "integrity": "sha512-sxEeFx65xA3ZUFmlcmPLf9tVqblAbcyISPUtsloVMd7DSTDbLaz6+4ujXwukcrMbFGwJGUY+y1Mkmlg5EPAnHg==", + "version": "11.17.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.17.0.tgz", + "integrity": "sha512-/o/Q4mOHRzIE8t72uuKMHx5IcfFmOHenA+tXRfA9kbTGKLpDolNR4NJty/BoZTGBZPVvO5kUF0+eOFfO6AsmkA==", "requires": { "@leafygreen-ui/emotion": "^4.0.4", "lodash": "^4.17.21" @@ -25831,25 +25975,25 @@ } }, "@leafygreen-ui/input-option": { - "version": "1.0.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/input-option/-/input-option-1.0.3.tgz", - "integrity": "sha512-UfzfQsbAc9PJEN25N2Wa1kdnx1ce/202IzgciTUn1bl99ohI0n0ULDceo8lnt70WZzo7xlh8r3aIV+AZx63soA==", + "version": "1.0.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/input-option/-/input-option-1.0.5.tgz", + "integrity": "sha512-gU051Rr5oB6CelLziN1xpbymexEP28DsbhgN+KTXxzpOM5q4l1dNAv12UDuCSEJS/xPP0kzkBkMWT/WPOEE/uQ==", "requires": { "@leafygreen-ui/a11y": "^1.4.2", "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/lib": "^10.4.0", "@leafygreen-ui/palette": "^4.0.4", - "@leafygreen-ui/polymorphic": "^1.3.1", - "@leafygreen-ui/tokens": "^2.0.3", - "@leafygreen-ui/typography": "^16.3.0" + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1", + "@leafygreen-ui/typography": "^16.5.1" }, "dependencies": { "@leafygreen-ui/lib": { - "version": "10.3.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.3.3.tgz", - "integrity": "sha512-n+L4u9TnwXgZlzGniEJ4QdKzeXlFU54AgTjb6a2k4nHLBL6eQgRwrHCL4Dviv6ARFHH0tfLWMqBguMOY33Cw2w==", + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", "requires": { - "@storybook/csf": "^0.0.2-next.10", + "@storybook/csf": "^0.1.0", "lodash": "^4.17.21", "prop-types": "^15.7.2" } @@ -25860,25 +26004,38 @@ "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" }, "@leafygreen-ui/tokens": { - "version": "2.0.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.0.3.tgz", - "integrity": "sha512-gLRmjaT27MNkcL+NF6l4f/1fVCNhObjLY+sqb6dYKCtIYOTh8sXXEu5eHRng79hhYqAWHzo8rPYD1VJSAVia6Q==", + "version": "2.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.1.tgz", + "integrity": "sha512-5mpyxRhp+8aY6eX6UYacDV6PLl3OieWG061ceAn2ThYaanIP64AMbodWifrF/IFMItJPFkwAtfPtJqugOFVb7Q==", "requires": { "@leafygreen-ui/palette": "^4.0.4" } }, "@leafygreen-ui/typography": { - "version": "16.3.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.3.0.tgz", - "integrity": "sha512-ddCK3TsRFmTv0533zyCsT7fEaJ1FJb0wErQzKMpAnA1Q9/ZUUf72pJLJLxmk8jKlUdPfWKp2NE5mNRBf31skew==", + "version": "16.5.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.5.1.tgz", + "integrity": "sha512-5dentOt4LubXxmkwVVy6ZlUvGsebJsHhZZ9LAlplUz13VkyvS458Bhnog4cqNqvnJjdlWLdO+ZO0/JyYUIIuXw==", "requires": { "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/icon": "^11.13.1", - "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", "@leafygreen-ui/palette": "^4.0.4", - "@leafygreen-ui/polymorphic": "^1.3.1", - "@leafygreen-ui/tokens": "^2.0.3" + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1" + } + }, + "@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "requires": { + "type-fest": "^2.19.0" } + }, + "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==" } } }, @@ -25954,9 +26111,9 @@ "version": "3.4.7" }, "@leafygreen-ui/polymorphic": { - "version": "1.3.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/polymorphic/-/polymorphic-1.3.1.tgz", - "integrity": "sha512-guybioSUs6Xa4kMs65iQwTlUgZ08N9ZvzvjOxUqK5lROVLauAUKt/Sn6tVTgzRpepDHrOUBkt5LQi0o/i4JQcQ==" + "version": "1.3.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/polymorphic/-/polymorphic-1.3.2.tgz", + "integrity": "sha512-av3FtFGf86c9ccIrgEArBhum0M+IklpBvnONsW70mMtEXKnJsGwGwY+HkuSAxbUpjGFIkIPbn5bIp1rHwAIOHA==" }, "@leafygreen-ui/popover": { "version": "9.1.1", @@ -25977,31 +26134,44 @@ } }, "@leafygreen-ui/portal": { - "version": "4.1.2", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-4.1.2.tgz", - "integrity": "sha512-HKUMXqafjc8N9TA7u7X3PZ7dBbfsnamc40RPoNLh9z6PzvGNia4wDbixMc2qeC3lWi1fWayFs31LAdIrdzQcXg==", + "version": "4.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-4.1.4.tgz", + "integrity": "sha512-gtzQno7yXGmbblHIVBWpJ6+TIFwep/PL4M6vcloCzAaV88+gSMJ9lhrBJbqYQkfd65xeEaycClDsfCpI35p/nA==", "requires": { - "@leafygreen-ui/hooks": "^7.7.1", - "@leafygreen-ui/lib": "^10.3.3" + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/lib": "^10.4.0" }, "dependencies": { "@leafygreen-ui/hooks": { - "version": "7.7.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.1.tgz", - "integrity": "sha512-P4uGzI0IBUX2g4MRY2FX6TPrMOLuh2/bOrq9TiWQgj/vhDPbAQt+62F7p3b3XL+Axywtqg6dIODNWW+WfJrXSA==", + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", "requires": { "lodash": "^4.17.21" } }, "@leafygreen-ui/lib": { - "version": "10.3.3", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.3.3.tgz", - "integrity": "sha512-n+L4u9TnwXgZlzGniEJ4QdKzeXlFU54AgTjb6a2k4nHLBL6eQgRwrHCL4Dviv6ARFHH0tfLWMqBguMOY33Cw2w==", + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", "requires": { - "@storybook/csf": "^0.0.2-next.10", + "@storybook/csf": "^0.1.0", "lodash": "^4.17.21", "prop-types": "^15.7.2" } + }, + "@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "requires": { + "type-fest": "^2.19.0" + } + }, + "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==" } } }, @@ -26019,6 +26189,113 @@ } } }, + "@leafygreen-ui/search-input": { + "version": "2.0.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/search-input/-/search-input-2.0.8.tgz", + "integrity": "sha512-ijMpZgyUpOQM1fOnUs1XavIYAcD9P5PNRWp2hprgWMJZp8FrcopsslMJJIDaM00Sdj0MjSDAti9+aXeo+2ZgSw==", + "requires": { + "@leafygreen-ui/a11y": "^1.4.3", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/icon-button": "^15.0.12", + "@leafygreen-ui/input-option": "^1.0.5", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/popover": "^11.0.12", + "@leafygreen-ui/tokens": "^2.1.1", + "@leafygreen-ui/typography": "^16.5.1", + "lodash": "^4.17.21", + "polished": "^4.2.2" + }, + "dependencies": { + "@leafygreen-ui/hooks": { + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", + "requires": { + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/icon-button": { + "version": "15.0.12", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.12.tgz", + "integrity": "sha512-19tXprK4/jIZq19o6Y2OnPw5ifuLIhpxAJ4/gs/lIFk/4A5PZJOnZzy6ABdiMaFk/1miSjoDQ5B+lncvgAx1gA==", + "requires": { + "@leafygreen-ui/a11y": "^1.4.2", + "@leafygreen-ui/box": "^3.1.4", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/tokens": "^2.1.1" + } + }, + "@leafygreen-ui/lib": { + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", + "requires": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + } + }, + "@leafygreen-ui/palette": { + "version": "4.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz", + "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" + }, + "@leafygreen-ui/popover": { + "version": "11.0.12", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.0.12.tgz", + "integrity": "sha512-zF8axGB+RhpoG0xgb4K/p8ydS5JAEXpwqdLrcrY9r7cAYzxX0F4mhIpYg+oyK2K5TIbgGR/fsFPbhKYsmreuMA==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/portal": "^4.1.4", + "@leafygreen-ui/tokens": "^2.1.1", + "react-transition-group": "^4.4.1" + } + }, + "@leafygreen-ui/tokens": { + "version": "2.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.1.tgz", + "integrity": "sha512-5mpyxRhp+8aY6eX6UYacDV6PLl3OieWG061ceAn2ThYaanIP64AMbodWifrF/IFMItJPFkwAtfPtJqugOFVb7Q==", + "requires": { + "@leafygreen-ui/palette": "^4.0.4" + } + }, + "@leafygreen-ui/typography": { + "version": "16.5.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.5.1.tgz", + "integrity": "sha512-5dentOt4LubXxmkwVVy6ZlUvGsebJsHhZZ9LAlplUz13VkyvS458Bhnog4cqNqvnJjdlWLdO+ZO0/JyYUIIuXw==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1" + } + }, + "@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "requires": { + "type-fest": "^2.19.0" + } + }, + "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/segmented-control": { "version": "8.0.1", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/segmented-control/-/segmented-control-8.0.1.tgz", diff --git a/package.json b/package.json index bbf2866fa..882d405aa 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "@leafygreen-ui/logo": "^4.0.2", "@leafygreen-ui/modal": "^10.1.0", "@leafygreen-ui/palette": "^3.4.3", + "@leafygreen-ui/search-input": "^2.0.8", "@leafygreen-ui/segmented-control": "^8.0.0", "@leafygreen-ui/select": "^7.0.0", "@leafygreen-ui/side-nav": "^10.0.0", diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 7e4b07a23..1169bf8d7 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -5,7 +5,9 @@ import styled from '@emotion/styled'; import { useLocation } from '@gatsbyjs/reach-router'; import Button from '@leafygreen-ui/button'; import Icon from '@leafygreen-ui/icon'; +import { SearchInput } from '@leafygreen-ui/search-input'; import { palette } from '@leafygreen-ui/palette'; +import { H1 } from '@leafygreen-ui/typography'; import queryString from 'query-string'; import useScreenSize from '../../hooks/useScreenSize'; import { theme } from '../../theme/docsTheme'; @@ -51,14 +53,6 @@ const HeaderContainer = styled('div')` grid-area: header; `; -const HeaderText = styled('h1')` - color: ${palette.black} !important; - font-size: 18px; - line-height: 21px; - ${commonTextStyling}; - letter-spacing: 0.8px; -`; - const FiltersContainer = styled('div')` grid-area: filters; @media ${theme.screenSize.upToMedium} { @@ -236,6 +230,7 @@ const SearchResults = () => { const { isTabletOrMobile } = useScreenSize(); const [searchResults, setSearchResults] = useState([]); const [searchTerm, setSearchTerm] = useState(null); + const [searchField, setSearchField] = useState(null); const [searchFilter, setSearchFilter] = useState(null); const [searchFinished, setSearchFinished] = useState(false); const [firstRenderComplete, setFirstRenderComplete] = useState(false); @@ -274,6 +269,7 @@ const SearchResults = () => { setFirstRenderComplete(true); const { q, searchProperty } = queryString.parse(search); setSearchTerm(q); + setSearchField(q); setSearchFilter(searchProperty); }, [search]); @@ -320,7 +316,17 @@ const SearchResults = () => { {!!searchTerm ? ( - Search results for "{searchTerm}" +

Search Results

+ { + setSearchTerm(event.target[0].value); + }} + onChange={(e) => { + setSearchField(e.target.value); + }} + /> {!!searchFilter && ( {selectedCategory && ( From ffaa04105f321e64474bee00e1f13fa9dcdfc69c Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 23 Jun 2023 09:39:27 -0400 Subject: [PATCH 02/47] updating tests for new front end change --- tests/unit/SearchResults.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/SearchResults.test.js b/tests/unit/SearchResults.test.js index ff488c545..12c300614 100644 --- a/tests/unit/SearchResults.test.js +++ b/tests/unit/SearchResults.test.js @@ -69,7 +69,7 @@ const expectUnfilteredResults = (wrapper) => { ); // We always show this text, regardless of filter - expect(wrapper.queryAllByText('Search results for "stitch"').length).toBe(1); + // expect(wrapper.queryAllByText('Search results for "stitch"').length).toBe(1); // Check the dropdowns are not filled in expectValuesForFilters(wrapper, 'Filter by Category', 'Filter by Version'); From 2eb0303542c173a3e7039dda3ca3620d9b802314 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 23 Jun 2023 11:28:12 -0400 Subject: [PATCH 03/47] updating snapshots --- tests/unit/SearchResults.test.js | 6 +- .../__snapshots__/SearchResults.test.js.snap | 2828 +++++++++++++---- 2 files changed, 2222 insertions(+), 612 deletions(-) diff --git a/tests/unit/SearchResults.test.js b/tests/unit/SearchResults.test.js index 12c300614..68f510ef2 100644 --- a/tests/unit/SearchResults.test.js +++ b/tests/unit/SearchResults.test.js @@ -32,7 +32,7 @@ const expectFilteredResults = (wrapper, filteredByRealm) => { // Check the result does link to the provided doc expect(wrapper.queryByText('stitch').closest('a')).toHaveProperty('href', `http://localhost/${FILTERED_RESULT.url}`); - expect(wrapper.queryAllByText('Search results for "stitch"').length).toBe(1); + expect(wrapper.queryAllByDisplayValue('stitch').length).toBe(1); // Check the dropdowns are filled in expectValuesForFilters(wrapper, 'Realm', 'Latest'); @@ -68,8 +68,8 @@ const expectUnfilteredResults = (wrapper) => { `http://localhost/${UNFILTERED_RESULT.url}` ); - // We always show this text, regardless of filter - // expect(wrapper.queryAllByText('Search results for "stitch"').length).toBe(1); + // We always show this text automatically on page load in the search bar, regardless of filter + expect(wrapper.queryAllByDisplayValue('stitch').length).toBe(1); // Check the dropdowns are not filled in expectValuesForFilters(wrapper, 'Filter by Category', 'Filter by Version'); diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap index d66327af7..0219c68b0 100644 --- a/tests/unit/__snapshots__/SearchResults.test.js.snap +++ b/tests/unit/__snapshots__/SearchResults.test.js.snap @@ -34,21 +34,286 @@ exports[`Search Results Page considers a given search filter query param and dis } .emotion-4 { - color: #001E2B!important; - font-size: 18px; - line-height: 21px; - font-family: Akzidenz; - font-weight: bolder; - letter-spacing: 0.5px; - margin: 0; - letter-spacing: 0.8px; + margin: unset; + font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-weight: 400; + font-size: 48px; + line-height: 62px; + font-family: 'MongoDB Value Serif','Times New Roman',serif; + color: #00684A; +} + +.emotion-5 { + outline: none; } .emotion-6 { - margin-top: 8px; + position: relative; + display: grid; + grid-auto-flow: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + justify-items: center; + border: 1px solid; + border-radius: 6px; + z-index: 0; + -webkit-transition: 150ms ease-in-out; + transition: 150ms ease-in-out; + transition-property: border-color,box-shadow; + font-size: 13px; + line-height: 20px; + height: 36px; + grid-template-columns: 36px 1fr; + grid-auto-columns: 36px; + color: #001E2B; + background: #FFFFFF; + border-color: #889397; +} + +.emotion-6:hover:not(:disabled):not(:focus-within), +.emotion-6:active:not(:disabled):not(:focus-within) { + box-shadow: 0 0 0 3px #E8EDEB; +} + +.emotion-7 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: #5C6C75; + left: 12px; +} + +.emotion-8 { + font-size: inherit; + line-height: inherit; + color: inherit; + background-color: inherit; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + width: 100%; + height: 1.5em; + font-weight: 400; + z-index: 1; + outline: none; + border: none; + padding: 0; +} + +.emotion-8:disabled { + cursor: not-allowed; +} + +.emotion-8:disabled:hover, +.emotion-8:disabled:active { + box-shadow: none; +} + +.emotion-8::-webkit-input-placeholder { + font-size: inherit; + line-height: inherit; +} + +.emotion-8::-moz-placeholder { + font-size: inherit; + line-height: inherit; +} + +.emotion-8:-ms-input-placeholder { + font-size: inherit; + line-height: inherit; +} + +.emotion-8::placeholder { + font-size: inherit; + line-height: inherit; +} + +.emotion-8::-ms-clear, +.emotion-8::-ms-reveal { + display: none; + width: 0; + height: 0; +} + +.emotion-8::-webkit-search-decoration, +.emotion-8::-webkit-search-cancel-button, +.emotion-8::-webkit-search-results-button, +.emotion-8::-webkit-search-results-decoration { + display: none; +} + +.emotion-8:-webkit-autofill { + color: inherit; + background: transparent; + border: none; + -webkit-text-fill-color: inherit; +} + +.emotion-8:-webkit-autofill:not(:disabled) { + box-shadow: 0 0 0 100px #FFFFFF inset; +} + +.emotion-8:-webkit-autofill:not(:disabled):focus { + box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; +} + +.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { + box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; +} + +.emotion-8::-webkit-input-placeholder { + color: #889397; + font-weight: 400; +} + +.emotion-8::-moz-placeholder { + color: #889397; + font-weight: 400; +} + +.emotion-8:-ms-input-placeholder { + color: #889397; + font-weight: 400; +} + +.emotion-8::placeholder { + color: #889397; + font-weight: 400; +} + +.emotion-8:disabled::-webkit-input-placeholder { + color: #889397; +} + +.emotion-8:disabled::-moz-placeholder { + color: #889397; +} + +.emotion-8:disabled:-ms-input-placeholder { + color: #889397; +} + +.emotion-8:disabled::placeholder { + color: #889397; +} + +.emotion-8:disabled:-webkit-autofill, +.emotion-8:disabled:-webkit-autofill:hover, +.emotion-8:disabled:-webkit-autofill:focus { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: 1px solid #889397; + -webkit-text-fill-color: #889397; + box-shadow: 0 0 0 100px #E8EDEB inset; } .emotion-9 { + border: none; + -webkit-appearance: unset; + padding: unset; + display: inline-block; + border-radius: 100px; + position: relative; + cursor: pointer; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: 150ms ease-in-out; + transition: 150ms ease-in-out; + transition-property: color,box-shadow; + background-color: rgba(255, 255, 255, 0); + height: 28px; + width: 28px; + color: #889397; + height: 28px; + width: 28px; +} + +.emotion-9:before { + content: ''; + -webkit-transition: 150ms all ease-in-out; + transition: 150ms all ease-in-out; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: 100%; + opacity: 0; + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); +} + +.emotion-9:active:before, +.emotion-9:hover:before, +.emotion-9:focus:before { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.emotion-9:focus { + outline: none; +} + +.emotion-9:active, +.emotion-9:hover { + color: #001E2B; +} + +.emotion-9:active:before, +.emotion-9:hover:before { + background-color: #E8EDEB; +} + +.emotion-9:focus-visible { + color: #001E2B; + box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; +} + +.emotion-9:focus-visible:before { + background-color: #E8EDEB; +} + +.emotion-10 { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-11 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-12 { + margin-top: 8px; +} + +.emotion-15 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -68,7 +333,7 @@ exports[`Search Results Page considers a given search filter query param and dis margin-right: 8px; } -.emotion-11 { +.emotion-17 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -88,18 +353,18 @@ exports[`Search Results Page considers a given search filter query param and dis margin-right: 8px; } -.emotion-12 { +.emotion-18 { display: none; margin-top: 16px; } @media only screen and (max-width: 767px) { - .emotion-12 { + .emotion-18 { display: block; } } -.emotion-14 { +.emotion-20 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -134,35 +399,35 @@ exports[`Search Results Page considers a given search filter query param and dis height: 36px; } -.emotion-14:focus { +.emotion-20:focus { outline: none; } -.emotion-14[disabled], -.emotion-14:disabled { +.emotion-20[disabled], +.emotion-20:disabled { pointer-events: none; } -.emotion-14:active, -.emotion-14:focus, -.emotion-14:hover { +.emotion-20:active, +.emotion-20:focus, +.emotion-20:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-14:hover, -.emotion-14:active { +.emotion-20:hover, +.emotion-20:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-14:focus { +.emotion-20:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-15 { +.emotion-21 { overflow: hidden; position: absolute; top: 0; @@ -172,7 +437,7 @@ exports[`Search Results Page considers a given search filter query param and dis border-radius: 5px; } -.emotion-16 { +.emotion-22 { display: grid; grid-auto-flow: column; -webkit-box-pack: center; @@ -192,14 +457,14 @@ exports[`Search Results Page considers a given search filter query param and dis gap: 6px; } -.emotion-17 { +.emotion-23 { color: #889397; height: 16px; width: 16px; justify-self: right; } -.emotion-18 { +.emotion-24 { box-shadow: none; display: grid; grid-area: results; @@ -208,23 +473,23 @@ exports[`Search Results Page considers a given search filter query param and dis width: 100%; } -.emotion-18:hover>.emotion-20 { +.emotion-24:hover>.emotion-26 { opacity: 0.2; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-18:hover>.emotion-20:hover { +.emotion-24:hover>.emotion-26:hover { opacity: 1; } -.emotion-18:not(:hover)>.emotion-20 { +.emotion-24:not(:hover)>.emotion-26 { opacity: 1; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-21 { +.emotion-27 { color: #494747; height: 100%; -webkit-text-decoration: none; @@ -238,37 +503,37 @@ exports[`Search Results Page considers a given search filter query param and dis width: 100%; } -.emotion-21:hover, -.emotion-21:focus { +.emotion-27:hover, +.emotion-27:focus { color: #494747; -webkit-text-decoration: none; text-decoration: none; } -.emotion-21:hover .emotion-24, -.emotion-21:focus .emotion-24 { +.emotion-27:hover .emotion-30, +.emotion-27:focus .emotion-30 { background-color: rgba(231, 238, 236, 0.4); -webkit-transition: background-color 150ms ease-in; transition: background-color 150ms ease-in; } -.emotion-21>div { +.emotion-27>div { padding: 24px; } -.emotion-21:hover, -.emotion-21:focus { +.emotion-27:hover, +.emotion-27:focus { color: unset; -webkit-text-decoration: unset; text-decoration: unset; } -.emotion-21:hover>div, -.emotion-21:focus>div { +.emotion-27:hover>div, +.emotion-27:focus>div { background-color: unset!important; } -.emotion-21:before { +.emotion-27:before { content: ''; position: absolute; top: calc(-16px / 2); @@ -278,13 +543,13 @@ exports[`Search Results Page considers a given search filter query param and dis background-color: transparent; } -.emotion-23 { +.emotion-29 { height: 100%; position: relative; } @media only screen and (max-width: 480px) { - .emotion-23 { + .emotion-29 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -296,7 +561,7 @@ exports[`Search Results Page considers a given search filter query param and dis } } -.emotion-25 { +.emotion-31 { font-family: Akzidenz; font-size: 13px; line-height: 24px; @@ -313,25 +578,25 @@ exports[`Search Results Page considers a given search filter query param and dis } @media not all and (max-width: 480px) { - .emotion-25 { + .emotion-31 { font-weight: 600; } } @media only screen and (max-width: 480px) { - .emotion-25 { + .emotion-31 { font-size: 16px; line-height: 24px; } @media not all and (max-width: 480px) { - .emotion-25 { + .emotion-31 { font-weight: 600; } } } -.emotion-27 { +.emotion-33 { font-size: 13px; line-height: 20px; margin-bottom: 16px; @@ -342,7 +607,7 @@ exports[`Search Results Page considers a given search filter query param and dis min-height: 20px; } -.emotion-29 { +.emotion-35 { margin: unset; font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -352,27 +617,27 @@ exports[`Search Results Page considers a given search filter query param and dis font-weight: 400; } -.emotion-29 strong, -.emotion-29 b { +.emotion-35 strong, +.emotion-35 b { font-weight: 700; } -.emotion-30 { +.emotion-36 { bottom: 0; margin-bottom: 24px; } -.emotion-36 { +.emotion-42 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-36 { + .emotion-42 { display: none; } } -.emotion-38 { +.emotion-44 { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -388,12 +653,12 @@ exports[`Search Results Page considers a given search filter query param and dis margin-bottom: 16px; } -.emotion-40 { +.emotion-46 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-40 { + .emotion-46 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -404,34 +669,34 @@ exports[`Search Results Page considers a given search filter query param and dis flex-direction: row; } - .emotion-40>div { + .emotion-46>div { margin-bottom: 0; margin-right: 8px; } } @media only screen and (max-width: 480px) { - .emotion-40 { + .emotion-46 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } - .emotion-40>div { + .emotion-46>div { width: 100%; } - .emotion-40>div:first-of-type { + .emotion-46>div:first-of-type { margin-bottom: 8px; margin-right: 0; } - .emotion-40>div>div { + .emotion-46>div>div { width: 100%; } } -.emotion-42 { +.emotion-48 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -446,25 +711,25 @@ exports[`Search Results Page considers a given search filter query param and dis margin-bottom: 16px; } -.emotion-44 { +.emotion-50 { width: 175px; } -.emotion-46 { +.emotion-52 { position: relative; } @media only screen and (max-width: 1024px) { - .emotion-46 label, - .emotion-46 p, - .emotion-46 button, - .emotion-46 div, - .emotion-46 span { + .emotion-52 label, + .emotion-52 p, + .emotion-52 button, + .emotion-52 div, + .emotion-52 span { font-size: 13px; } } -.emotion-47 { +.emotion-53 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -474,22 +739,22 @@ exports[`Search Results Page considers a given search filter query param and dis flex-direction: column; } -.emotion-47>label+button, -.emotion-47>p+button { +.emotion-53>label+button, +.emotion-53>p+button { margin-top: 3px; } @media only screen and (max-width: 1024px) { - .emotion-47 label, - .emotion-47 p, - .emotion-47 button, - .emotion-47 div, - .emotion-47 span { + .emotion-53 label, + .emotion-53 p, + .emotion-53 button, + .emotion-53 div, + .emotion-53 span { font-size: 13px; } } -.emotion-48 { +.emotion-54 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -528,35 +793,35 @@ exports[`Search Results Page considers a given search filter query param and dis font-size: 13px; } -.emotion-48:focus { +.emotion-54:focus { outline: none; } -.emotion-48[disabled], -.emotion-48:disabled { +.emotion-54[disabled], +.emotion-54:disabled { pointer-events: none; } -.emotion-48:active, -.emotion-48:focus, -.emotion-48:hover { +.emotion-54:active, +.emotion-54:focus, +.emotion-54:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-48:hover, -.emotion-48:active { +.emotion-54:hover, +.emotion-54:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-48:focus { +.emotion-54:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-48>*:last-child { +.emotion-54>*:last-child { grid-template-columns: 1fr 16px; -webkit-box-pack: start; -ms-flex-pack: start; @@ -564,33 +829,33 @@ exports[`Search Results Page considers a given search filter query param and dis justify-content: flex-start; } -.emotion-48>*:last-child>svg { +.emotion-54>*:last-child>svg { justify-self: right; width: 16px; height: 16px; } -.emotion-48>*:last-child>svg { +.emotion-54>*:last-child>svg { color: #3D4F58; } -.emotion-48>*:last-child { +.emotion-54>*:last-child { padding: 0 4px 0 12px; } -.emotion-48:focus { +.emotion-54:focus { box-shadow: 0 0 0 3px #0498EC; border-color: rgba(255, 255, 255, 0); } @media only screen and (max-width: 1024px) { - .emotion-48 { + .emotion-54 { height: 36px; font-size: 16px; } } -.emotion-51 { +.emotion-57 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -610,14 +875,14 @@ exports[`Search Results Page considers a given search filter query param and dis overflow: hidden; } -.emotion-52 { +.emotion-58 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } -.emotion-53 { +.emotion-59 { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -627,7 +892,7 @@ exports[`Search Results Page considers a given search filter query param and dis justify-self: left; } -.emotion-60 { +.emotion-66 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -666,42 +931,42 @@ exports[`Search Results Page considers a given search filter query param and dis font-size: 13px; } -.emotion-60:focus { +.emotion-66:focus { outline: none; } -.emotion-60[disabled], -.emotion-60:disabled { +.emotion-66[disabled], +.emotion-66:disabled { pointer-events: none; } -.emotion-60:active, -.emotion-60:focus, -.emotion-60:hover { +.emotion-66:active, +.emotion-66:focus, +.emotion-66:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-60:hover, -.emotion-60:active { +.emotion-66:hover, +.emotion-66:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-60, -.emotion-60:hover { +.emotion-66, +.emotion-66:hover { background-color: #E8EDEB; border-color: #C1C7C6; color: #889397; cursor: not-allowed; } -.emotion-60:focus { +.emotion-66:focus { box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-60>*:last-child { +.emotion-66>*:last-child { grid-template-columns: 1fr 16px; -webkit-box-pack: start; -ms-flex-pack: start; @@ -709,46 +974,46 @@ exports[`Search Results Page considers a given search filter query param and dis justify-content: flex-start; } -.emotion-60>*:last-child>svg { +.emotion-66>*:last-child>svg { justify-self: right; width: 16px; height: 16px; } -.emotion-60>*:last-child>svg { +.emotion-66>*:last-child>svg { color: #3D4F58; } -.emotion-60>*:last-child { +.emotion-66>*:last-child { padding: 0 4px 0 12px; } -.emotion-60:focus { +.emotion-66:focus { box-shadow: 0 0 0 3px #0498EC; border-color: rgba(255, 255, 255, 0); } -.emotion-60:disabled { +.emotion-66:disabled { cursor: not-allowed; pointer-events: unset; box-shadow: unset; } -.emotion-60:disabled:active { +.emotion-66:disabled:active { pointer-events: none; } -.emotion-60:disabled { +.emotion-66:disabled { background-color: #E8EDEB; color: #889397; } -.emotion-60:disabled>*:last-child>svg { +.emotion-66:disabled>*:last-child>svg { color: #889397; } @media only screen and (max-width: 1024px) { - .emotion-60 { + .emotion-66 { height: 36px; font-size: 16px; } @@ -761,15 +1026,76 @@ exports[`Search Results Page considers a given search filter query param and dis class="emotion-2 emotion-3" >

- Search results for "stitch" + Search Results

+
Realm Latest
+
+

No results found. Please search again.

Sorry. We weren't able to find any results for your query. The page might have been moved or deleted.

Specify your search

+
+
+
+
+
+

No results found. Please search again.

Sorry. We weren't able to find any results for your query. The page might have been moved or deleted.

Specify your search

- - - {searchResults?.length ? ( - <> - - {searchResults.map(({ title, preview, url, searchProperty }, index) => ( - - reportAnalytics('SearchSelection', { areaFrom: 'ResultsPage', rank: index, selectionUrl: url }) - } - title={title} - preview={escapeHtml(preview)} - url={url} - useLargeTitle - searchProperty={searchProperty?.[0]} - /> - ))} - - - {specifySearchText} - - - - ) : ( - <> - {!searchFinished ? ( - <> - - {[...Array(10)].map((_, index) => ( - - - - - - ))} - - - {specifySearchText} - - - - ) : ( - <> - - - - - {specifySearchText} - - - + + +

Search Results

+ { + setSearchTerm(event.target[0].value); + }} + onChange={(e) => { + setSearchField(e.target.value); + }} + /> + {!!searchFilter && ( + + {selectedCategory && ( + + {selectedCategory} + + )} - - )} - {showMobileFilters && isTabletOrMobile && } - - ) : ( - <> - {!searchResults?.length && ( - - {firstRenderComplete ? : } - + {selectedVersion && {selectedVersion}} + )} - - )} + + + + + {!!searchTerm ? ( + <> + {searchResults?.length ? ( + <> + + {searchResults.map(({ title, preview, url, searchProperty }, index) => ( + + reportAnalytics('SearchSelection', { + areaFrom: 'ResultsPage', + rank: index, + selectionUrl: url, + }) + } + title={title} + preview={escapeHtml(preview)} + url={url} + useLargeTitle + searchProperty={searchProperty?.[0]} + /> + ))} + + + {specifySearchText} + + + + ) : ( + <> + {!searchFinished ? ( + <> + + {[...Array(10)].map((_, index) => ( + + + + + + ))} + + + {specifySearchText} + + + + ) : ( + <> + + + + + {specifySearchText} + + + + )} + + )} + {showMobileFilters && isTabletOrMobile && } + + ) : ( + <> + {!searchResults?.length && ( + + {firstRenderComplete ? : } + + )} + + )} + ); From eed1e240225b7fbb09090f2348afa015b90e599f Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Thu, 29 Jun 2023 15:16:56 -0400 Subject: [PATCH 09/47] Adding feature flag --- src/components/SearchResults/SearchResults.js | 37 +- tests/unit/SearchResults.test.js | 5 +- .../__snapshots__/SearchResults.test.js.snap | 3703 +++++------------ 3 files changed, 1176 insertions(+), 2569 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 8087d95bd..29380c58d 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -53,6 +53,14 @@ const HeaderContainer = styled('div')` grid-area: header; `; +const HeaderText = styled('h1')` + color: ${palette.black} !important; + font-size: 18px; + line-height: 21px; + ${commonTextStyling}; + letter-spacing: 0.8px; +`; + const FiltersContainer = styled('div')` grid-area: filters; @media ${theme.screenSize.upToMedium} { @@ -239,6 +247,7 @@ const SearchResults = () => { const [showMobileFilters, setShowMobileFilters] = useState(false); const { filters, searchPropertyMapping } = useMarianManifests(); const specifySearchText = 'Specify your search'; + const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; const resetFilters = useCallback(() => { setSelectedCategory(null); @@ -315,17 +324,23 @@ const SearchResults = () => { > -

Search Results

- { - setSearchTerm(event.target[0].value); - }} - onChange={(e) => { - setSearchField(e.target.value); - }} - /> + {newSearchInput ? ( + <> +

Search Results

+ { + setSearchTerm(event.target[0].value); + }} + onChange={(e) => { + setSearchField(e.target.value); + }} + /> + + ) : ( + Search results for "{searchTerm}" + )} {!!searchFilter && ( {selectedCategory && ( diff --git a/tests/unit/SearchResults.test.js b/tests/unit/SearchResults.test.js index 68f510ef2..c5228a6ad 100644 --- a/tests/unit/SearchResults.test.js +++ b/tests/unit/SearchResults.test.js @@ -32,7 +32,7 @@ const expectFilteredResults = (wrapper, filteredByRealm) => { // Check the result does link to the provided doc expect(wrapper.queryByText('stitch').closest('a')).toHaveProperty('href', `http://localhost/${FILTERED_RESULT.url}`); - expect(wrapper.queryAllByDisplayValue('stitch').length).toBe(1); + expect(wrapper.queryAllByText('Search results for "stitch"').length).toBe(1); // Check the dropdowns are filled in expectValuesForFilters(wrapper, 'Realm', 'Latest'); @@ -69,8 +69,7 @@ const expectUnfilteredResults = (wrapper) => { ); // We always show this text automatically on page load in the search bar, regardless of filter - expect(wrapper.queryAllByDisplayValue('stitch').length).toBe(1); - + expect(wrapper.queryAllByText('Search results for "stitch"').length).toBe(1); // Check the dropdowns are not filled in expectValuesForFilters(wrapper, 'Filter by Category', 'Filter by Version'); }; diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap index 0219c68b0..1bc30bfc0 100644 --- a/tests/unit/__snapshots__/SearchResults.test.js.snap +++ b/tests/unit/__snapshots__/SearchResults.test.js.snap @@ -34,286 +34,21 @@ exports[`Search Results Page considers a given search filter query param and dis } .emotion-4 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-weight: 400; - font-size: 48px; - line-height: 62px; - font-family: 'MongoDB Value Serif','Times New Roman',serif; - color: #00684A; -} - -.emotion-5 { - outline: none; + color: #001E2B!important; + font-size: 18px; + line-height: 21px; + font-family: Akzidenz; + font-weight: bolder; + letter-spacing: 0.5px; + margin: 0; + letter-spacing: 0.8px; } .emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; -} - -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-12 { margin-top: 8px; } -.emotion-15 { +.emotion-9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -333,7 +68,7 @@ exports[`Search Results Page considers a given search filter query param and dis margin-right: 8px; } -.emotion-17 { +.emotion-11 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -353,18 +88,18 @@ exports[`Search Results Page considers a given search filter query param and dis margin-right: 8px; } -.emotion-18 { +.emotion-12 { display: none; margin-top: 16px; } @media only screen and (max-width: 767px) { - .emotion-18 { + .emotion-12 { display: block; } } -.emotion-20 { +.emotion-14 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -399,35 +134,35 @@ exports[`Search Results Page considers a given search filter query param and dis height: 36px; } -.emotion-20:focus { +.emotion-14:focus { outline: none; } -.emotion-20[disabled], -.emotion-20:disabled { +.emotion-14[disabled], +.emotion-14:disabled { pointer-events: none; } -.emotion-20:active, -.emotion-20:focus, -.emotion-20:hover { +.emotion-14:active, +.emotion-14:focus, +.emotion-14:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-20:hover, -.emotion-20:active { +.emotion-14:hover, +.emotion-14:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-20:focus { +.emotion-14:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-21 { +.emotion-15 { overflow: hidden; position: absolute; top: 0; @@ -437,7 +172,7 @@ exports[`Search Results Page considers a given search filter query param and dis border-radius: 5px; } -.emotion-22 { +.emotion-16 { display: grid; grid-auto-flow: column; -webkit-box-pack: center; @@ -457,14 +192,14 @@ exports[`Search Results Page considers a given search filter query param and dis gap: 6px; } -.emotion-23 { +.emotion-17 { color: #889397; height: 16px; width: 16px; justify-self: right; } -.emotion-24 { +.emotion-18 { box-shadow: none; display: grid; grid-area: results; @@ -473,23 +208,23 @@ exports[`Search Results Page considers a given search filter query param and dis width: 100%; } -.emotion-24:hover>.emotion-26 { +.emotion-18:hover>.emotion-20 { opacity: 0.2; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-24:hover>.emotion-26:hover { +.emotion-18:hover>.emotion-20:hover { opacity: 1; } -.emotion-24:not(:hover)>.emotion-26 { +.emotion-18:not(:hover)>.emotion-20 { opacity: 1; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-27 { +.emotion-21 { color: #494747; height: 100%; -webkit-text-decoration: none; @@ -503,37 +238,37 @@ exports[`Search Results Page considers a given search filter query param and dis width: 100%; } -.emotion-27:hover, -.emotion-27:focus { +.emotion-21:hover, +.emotion-21:focus { color: #494747; -webkit-text-decoration: none; text-decoration: none; } -.emotion-27:hover .emotion-30, -.emotion-27:focus .emotion-30 { +.emotion-21:hover .emotion-24, +.emotion-21:focus .emotion-24 { background-color: rgba(231, 238, 236, 0.4); -webkit-transition: background-color 150ms ease-in; transition: background-color 150ms ease-in; } -.emotion-27>div { +.emotion-21>div { padding: 24px; } -.emotion-27:hover, -.emotion-27:focus { +.emotion-21:hover, +.emotion-21:focus { color: unset; -webkit-text-decoration: unset; text-decoration: unset; } -.emotion-27:hover>div, -.emotion-27:focus>div { +.emotion-21:hover>div, +.emotion-21:focus>div { background-color: unset!important; } -.emotion-27:before { +.emotion-21:before { content: ''; position: absolute; top: calc(-16px / 2); @@ -543,13 +278,13 @@ exports[`Search Results Page considers a given search filter query param and dis background-color: transparent; } -.emotion-29 { +.emotion-23 { height: 100%; position: relative; } @media only screen and (max-width: 480px) { - .emotion-29 { + .emotion-23 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -561,7 +296,7 @@ exports[`Search Results Page considers a given search filter query param and dis } } -.emotion-31 { +.emotion-25 { font-family: Akzidenz; font-size: 13px; line-height: 24px; @@ -578,25 +313,25 @@ exports[`Search Results Page considers a given search filter query param and dis } @media not all and (max-width: 480px) { - .emotion-31 { + .emotion-25 { font-weight: 600; } } @media only screen and (max-width: 480px) { - .emotion-31 { + .emotion-25 { font-size: 16px; line-height: 24px; } @media not all and (max-width: 480px) { - .emotion-31 { + .emotion-25 { font-weight: 600; } } } -.emotion-33 { +.emotion-27 { font-size: 13px; line-height: 20px; margin-bottom: 16px; @@ -607,7 +342,7 @@ exports[`Search Results Page considers a given search filter query param and dis min-height: 20px; } -.emotion-35 { +.emotion-29 { margin: unset; font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -617,27 +352,27 @@ exports[`Search Results Page considers a given search filter query param and dis font-weight: 400; } -.emotion-35 strong, -.emotion-35 b { +.emotion-29 strong, +.emotion-29 b { font-weight: 700; } -.emotion-36 { +.emotion-30 { bottom: 0; margin-bottom: 24px; } -.emotion-42 { +.emotion-36 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-42 { + .emotion-36 { display: none; } } -.emotion-44 { +.emotion-38 { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -653,12 +388,12 @@ exports[`Search Results Page considers a given search filter query param and dis margin-bottom: 16px; } -.emotion-46 { +.emotion-40 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-46 { + .emotion-40 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -669,34 +404,34 @@ exports[`Search Results Page considers a given search filter query param and dis flex-direction: row; } - .emotion-46>div { + .emotion-40>div { margin-bottom: 0; margin-right: 8px; } } @media only screen and (max-width: 480px) { - .emotion-46 { + .emotion-40 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } - .emotion-46>div { + .emotion-40>div { width: 100%; } - .emotion-46>div:first-of-type { + .emotion-40>div:first-of-type { margin-bottom: 8px; margin-right: 0; } - .emotion-46>div>div { + .emotion-40>div>div { width: 100%; } } -.emotion-48 { +.emotion-42 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -711,25 +446,25 @@ exports[`Search Results Page considers a given search filter query param and dis margin-bottom: 16px; } -.emotion-50 { +.emotion-44 { width: 175px; } -.emotion-52 { +.emotion-46 { position: relative; } @media only screen and (max-width: 1024px) { - .emotion-52 label, - .emotion-52 p, - .emotion-52 button, - .emotion-52 div, - .emotion-52 span { + .emotion-46 label, + .emotion-46 p, + .emotion-46 button, + .emotion-46 div, + .emotion-46 span { font-size: 13px; } } -.emotion-53 { +.emotion-47 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -739,22 +474,22 @@ exports[`Search Results Page considers a given search filter query param and dis flex-direction: column; } -.emotion-53>label+button, -.emotion-53>p+button { +.emotion-47>label+button, +.emotion-47>p+button { margin-top: 3px; } @media only screen and (max-width: 1024px) { - .emotion-53 label, - .emotion-53 p, - .emotion-53 button, - .emotion-53 div, - .emotion-53 span { + .emotion-47 label, + .emotion-47 p, + .emotion-47 button, + .emotion-47 div, + .emotion-47 span { font-size: 13px; } } -.emotion-54 { +.emotion-48 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -793,35 +528,35 @@ exports[`Search Results Page considers a given search filter query param and dis font-size: 13px; } -.emotion-54:focus { +.emotion-48:focus { outline: none; } -.emotion-54[disabled], -.emotion-54:disabled { +.emotion-48[disabled], +.emotion-48:disabled { pointer-events: none; } -.emotion-54:active, -.emotion-54:focus, -.emotion-54:hover { +.emotion-48:active, +.emotion-48:focus, +.emotion-48:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-54:hover, -.emotion-54:active { +.emotion-48:hover, +.emotion-48:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-54:focus { +.emotion-48:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-54>*:last-child { +.emotion-48>*:last-child { grid-template-columns: 1fr 16px; -webkit-box-pack: start; -ms-flex-pack: start; @@ -829,33 +564,33 @@ exports[`Search Results Page considers a given search filter query param and dis justify-content: flex-start; } -.emotion-54>*:last-child>svg { +.emotion-48>*:last-child>svg { justify-self: right; width: 16px; height: 16px; } -.emotion-54>*:last-child>svg { +.emotion-48>*:last-child>svg { color: #3D4F58; } -.emotion-54>*:last-child { +.emotion-48>*:last-child { padding: 0 4px 0 12px; } -.emotion-54:focus { +.emotion-48:focus { box-shadow: 0 0 0 3px #0498EC; border-color: rgba(255, 255, 255, 0); } @media only screen and (max-width: 1024px) { - .emotion-54 { + .emotion-48 { height: 36px; font-size: 16px; } } -.emotion-57 { +.emotion-51 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -875,14 +610,14 @@ exports[`Search Results Page considers a given search filter query param and dis overflow: hidden; } -.emotion-58 { +.emotion-52 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } -.emotion-59 { +.emotion-53 { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -892,7 +627,7 @@ exports[`Search Results Page considers a given search filter query param and dis justify-self: left; } -.emotion-66 { +.emotion-60 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -931,42 +666,42 @@ exports[`Search Results Page considers a given search filter query param and dis font-size: 13px; } -.emotion-66:focus { +.emotion-60:focus { outline: none; } -.emotion-66[disabled], -.emotion-66:disabled { +.emotion-60[disabled], +.emotion-60:disabled { pointer-events: none; } -.emotion-66:active, -.emotion-66:focus, -.emotion-66:hover { +.emotion-60:active, +.emotion-60:focus, +.emotion-60:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-66:hover, -.emotion-66:active { +.emotion-60:hover, +.emotion-60:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-66, -.emotion-66:hover { +.emotion-60, +.emotion-60:hover { background-color: #E8EDEB; border-color: #C1C7C6; color: #889397; cursor: not-allowed; } -.emotion-66:focus { +.emotion-60:focus { box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-66>*:last-child { +.emotion-60>*:last-child { grid-template-columns: 1fr 16px; -webkit-box-pack: start; -ms-flex-pack: start; @@ -974,46 +709,46 @@ exports[`Search Results Page considers a given search filter query param and dis justify-content: flex-start; } -.emotion-66>*:last-child>svg { +.emotion-60>*:last-child>svg { justify-self: right; width: 16px; height: 16px; } -.emotion-66>*:last-child>svg { +.emotion-60>*:last-child>svg { color: #3D4F58; } -.emotion-66>*:last-child { +.emotion-60>*:last-child { padding: 0 4px 0 12px; } -.emotion-66:focus { +.emotion-60:focus { box-shadow: 0 0 0 3px #0498EC; border-color: rgba(255, 255, 255, 0); } -.emotion-66:disabled { +.emotion-60:disabled { cursor: not-allowed; pointer-events: unset; box-shadow: unset; } -.emotion-66:disabled:active { +.emotion-60:disabled:active { pointer-events: none; } -.emotion-66:disabled { +.emotion-60:disabled { background-color: #E8EDEB; color: #889397; } -.emotion-66:disabled>*:last-child>svg { +.emotion-60:disabled>*:last-child>svg { color: #889397; } @media only screen and (max-width: 1024px) { - .emotion-66 { + .emotion-60 { height: 36px; font-size: 16px; } @@ -1026,76 +761,15 @@ exports[`Search Results Page considers a given search filter query param and dis class="emotion-2 emotion-3" >

- Search Results + Search results for "stitch"

-
Realm Latest
-
-

No results found. Please search again.

Sorry. We weren't able to find any results for your query. The page might have been moved or deleted.

Specify your search

-

- - Search MongoDB Documentation - -

-
+ +
+
+
+
- Find guides, examples, and best practices for working with the MongoDB data platform. -

+ +

+ + Search MongoDB Documentation + +

+

+ Find guides, examples, and best practices for working with the MongoDB data platform. +

+
@@ -2859,293 +2430,28 @@ exports[`Search Results Page renders loading images before returning no results } .emotion-4 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-weight: 400; - font-size: 48px; - line-height: 62px; - font-family: 'MongoDB Value Serif','Times New Roman',serif; - color: #00684A; -} - -.emotion-5 { - outline: none; -} - -.emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; -} - -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + color: #001E2B!important; + font-size: 18px; + line-height: 21px; + font-family: Akzidenz; + font-weight: bolder; + letter-spacing: 0.5px; + margin: 0; + letter-spacing: 0.8px; } -.emotion-12 { +.emotion-6 { display: none; margin-top: 16px; } @media only screen and (max-width: 767px) { - .emotion-12 { + .emotion-6 { display: block; } } -.emotion-14 { +.emotion-8 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -3180,35 +2486,35 @@ exports[`Search Results Page renders loading images before returning no results height: 36px; } -.emotion-14:focus { +.emotion-8:focus { outline: none; } -.emotion-14[disabled], -.emotion-14:disabled { +.emotion-8[disabled], +.emotion-8:disabled { pointer-events: none; } -.emotion-14:active, -.emotion-14:focus, -.emotion-14:hover { +.emotion-8:active, +.emotion-8:focus, +.emotion-8:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-14:hover, -.emotion-14:active { +.emotion-8:hover, +.emotion-8:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-14:focus { +.emotion-8:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-15 { +.emotion-9 { overflow: hidden; position: absolute; top: 0; @@ -3218,7 +2524,7 @@ exports[`Search Results Page renders loading images before returning no results border-radius: 5px; } -.emotion-16 { +.emotion-10 { display: grid; grid-auto-flow: column; -webkit-box-pack: center; @@ -3238,14 +2544,14 @@ exports[`Search Results Page renders loading images before returning no results gap: 6px; } -.emotion-17 { +.emotion-11 { color: #889397; height: 16px; width: 16px; justify-self: right; } -.emotion-18 { +.emotion-12 { box-shadow: none; display: grid; grid-area: results; @@ -3254,23 +2560,23 @@ exports[`Search Results Page renders loading images before returning no results width: 100%; } -.emotion-18:hover>.e1yoi6mj6 { +.emotion-12:hover>.e1yoi6mj6 { opacity: 0.2; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-18:hover>.e1yoi6mj6:hover { +.emotion-12:hover>.e1yoi6mj6:hover { opacity: 1; } -.emotion-18:not(:hover)>.e1yoi6mj6 { +.emotion-12:not(:hover)>.e1yoi6mj6 { opacity: 1; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-20 { +.emotion-14 { background-color: #fff; box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); height: 152px; @@ -3284,23 +2590,23 @@ exports[`Search Results Page renders loading images before returning no results grid-template-rows: 1fr 2fr 1fr; } -.emotion-20>div { +.emotion-14>div { padding: 24px; } -.emotion-20:hover, -.emotion-20:focus { +.emotion-14:hover, +.emotion-14:focus { color: unset; -webkit-text-decoration: unset; text-decoration: unset; } -.emotion-20:hover>div, -.emotion-20:focus>div { +.emotion-14:hover>div, +.emotion-14:focus>div { background-color: unset!important; } -.emotion-20:before { +.emotion-14:before { content: ''; position: absolute; top: calc(-16px / 2); @@ -3310,23 +2616,23 @@ exports[`Search Results Page renders loading images before returning no results background-color: transparent; } -.emotion-20 * { +.emotion-14 * { padding: 2px; height: 15px!important; margin-right: 10px!important; } -.emotion-40 { +.emotion-34 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-40 { + .emotion-34 { display: none; } } -.emotion-42 { +.emotion-36 { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -3349,90 +2655,29 @@ exports[`Search Results Page renders loading images before returning no results class="emotion-2 emotion-3" >

- Search Results + Search results for "noresultsreturned"

-
-
-
-
-

Search MongoDB Documentation

Find guides, examples, and best practices for working with the MongoDB data platform.

From 660587fb9df826429480c63b9302c96efc541820 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Wed, 5 Jul 2023 15:06:47 -0400 Subject: [PATCH 12/47] updating border radius --- src/components/Tag.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tag.js b/src/components/Tag.js index ff40e8152..5a0226ba0 100644 --- a/src/components/Tag.js +++ b/src/components/Tag.js @@ -15,7 +15,7 @@ export const searchTagStyle = css` cursor: pointer; height: 26px; padding: 4px 11px 4px 11px; - border-radius: 11px; + border-radius: 12px; font-size: ${theme.fontSize.tiny}; margin-right: ${theme.size.small}; `; From e47ab53436f60891999b37a51a1ddb9e3341b6d8 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Thu, 6 Jul 2023 10:00:44 -0400 Subject: [PATCH 13/47] DOP-3789: updating card styling --- src/components/SearchResults/SearchResult.js | 12 ++++++++---- src/components/SearchResults/SearchResults.js | 15 +++++++++++---- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index b74c4186f..3eab8d924 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -10,10 +10,11 @@ import SearchContext from './SearchContext'; const LINK_COLOR = '#494747'; // Use string for match styles due to replace/innerHTML -const SEARCH_MATCH_STYLE = `background-color: ${palette.yellow.light2};`; +const SEARCH_MATCH_STYLE = `background-color: ${palette.green.light2} ; border-radius: 3px; padding-left: 2px; padding-right: 2px;`; const largeResultTitle = css` font-size: ${theme.size.default}; + color: #016bf8; line-height: ${theme.size.medium}; /* Only add bold on larger devices */ @media ${theme.screenSize.smallAndUp} { @@ -114,7 +115,11 @@ const sanitizePreviewHtml = (text) => sanitizeHtml(text, { allowedTags: ['span'], allowedAttributes: { span: ['style'] }, - allowedStyles: { span: { 'background-color': [new RegExp(`^${palette.yellow.light2}$`, 'i')] } }, + // allowedStyles: { span: { + // 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], + // 'border-radius':[`^\d+(?:px|em|%)$`], + // 'padding-left': [`^\d+(?:px|em|%)$`], + // 'padding-right': [`^\d+(?:px|em|%)$`] } }, }); const SearchResult = React.memo( @@ -130,7 +135,6 @@ const SearchResult = React.memo( ...props }) => { const { searchPropertyMapping, searchTerm } = useContext(SearchContext); - const highlightedTitle = highlightSearchTerm(title, searchTerm); const highlightedPreviewText = highlightSearchTerm(preview, searchTerm); const resultLinkRef = useRef(null); const category = searchPropertyMapping?.[searchProperty]?.['categoryTitle']; @@ -141,7 +145,7 @@ const SearchResult = React.memo( diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 48c77118c..ed8d73ba7 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -123,6 +123,10 @@ const StyledSearchFilters = styled(SearchFilters)` `; const searchResultStyling = css` + background-color: #ffffff; + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); + border-radius: 45px; + border: 1px solid rgba(58, 63, 60, 0.15); background-color: #fff; box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 0.4); height: ${SEARCH_RESULT_HEIGHT}; @@ -179,7 +183,6 @@ const StyledLoadingSkeletonContainer = styled('div')` `; const StyledSearchResults = styled('div')` - box-shadow: none; display: grid; grid-area: results; /* Build space between rows into row height for hover effect */ @@ -189,10 +192,13 @@ const StyledSearchResults = styled('div')` /* Create the opaque effect on hover by opaquing everything but a hovered result */ :hover { > ${StyledSearchResult} { - opacity: 0.2; - transition: opacity 150ms ease-in; + // opacity: 0.2; + // transition: opacity 150ms ease-in; + // delete this ^^ + :hover { opacity: 1; + box-shadow: 0px 0px 5px 1px rgba(58, 63, 60, 0.15); } } } @@ -301,7 +307,8 @@ const SearchResults = () => { From 620dbab4f4e503f7f1789ad7917ef02517fd1e75 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Thu, 6 Jul 2023 13:49:36 -0400 Subject: [PATCH 14/47] proper format for empty result on prod --- src/components/SearchResults/SearchResults.js | 254 ++++++++------- .../__snapshots__/SearchResults.test.js.snap | 297 ++++-------------- 2 files changed, 196 insertions(+), 355 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 0e3b01d67..c43acc4c6 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -322,123 +322,153 @@ const SearchResults = () => { setShowMobileFilters, }} > - - - {newSearchInput ? ( - <> -

Search Results

- { - setSearchTerm(event.target[0].value); - }} - onChange={(e) => { - setSearchField(e.target.value); - }} - /> - - ) : ( - <>{!!searchTerm && Search results for "{searchTerm}"} - )} - {!!searchFilter && ( - - {selectedCategory && ( - - {selectedCategory} - - - )} - {selectedVersion && {selectedVersion}} - - )} - - - - - {!!searchTerm ? ( - <> - {searchResults?.length ? ( + {!!searchTerm ? ( + + + {newSearchInput ? ( <> - - {searchResults.map(({ title, preview, url, searchProperty }, index) => ( - - reportAnalytics('SearchSelection', { - areaFrom: 'ResultsPage', - rank: index, - selectionUrl: url, - }) - } - title={title} - preview={escapeHtml(preview)} - url={url} - useLargeTitle - searchProperty={searchProperty?.[0]} - /> - ))} - - - {specifySearchText} - - +

Search Results

+ { + setSearchResults([]); + setSearchFinished(false); + setSearchTerm(event.target[0].value); + }} + onChange={(e) => { + setSearchField(e.target.value); + }} + /> ) : ( - <> - {!searchFinished ? ( - <> - - {[...Array(10)].map((_, index) => ( - - - - - - ))} - - - {specifySearchText} - - - - ) : ( - <> - - - - - {specifySearchText} - - - - )} - + <>{!!searchTerm && Search results for "{searchTerm}"} )} - {showMobileFilters && isTabletOrMobile && } - - ) : ( - <> - {!searchResults?.length && ( - - {firstRenderComplete ? : } - + {!!searchFilter && ( + + {selectedCategory && ( + + {selectedCategory} + + + )} + {selectedVersion && {selectedVersion}} + )} - - )} - + + + + + {!!searchTerm ? ( + <> + {searchResults?.length ? ( + <> + + {searchResults.map(({ title, preview, url, searchProperty }, index) => ( + + reportAnalytics('SearchSelection', { + areaFrom: 'ResultsPage', + rank: index, + selectionUrl: url, + }) + } + title={title} + preview={escapeHtml(preview)} + url={url} + useLargeTitle + searchProperty={searchProperty?.[0]} + /> + ))} + + + {specifySearchText} + + + + ) : ( + <> + {!searchFinished ? ( + <> + + {[...Array(10)].map((_, index) => ( + + + + + + ))} + + + {specifySearchText} + + + + ) : ( + <> + + + + + {specifySearchText} + + + + )} + + )} + {showMobileFilters && isTabletOrMobile && } + + ) : ( + <> + {!searchResults?.length && ( + + {firstRenderComplete ? : } + + )} + + )} + + ) : ( + <> + {newSearchInput && ( + + +

Search Results

+ { + setSearchResults([]); + setSearchFinished(false); + setSearchTerm(event.target[0].value); + }} + onChange={(e) => { + setSearchField(e.target.value); + }} + /> + + + )} + {!searchResults?.length && ( + + {firstRenderComplete ? : } + + )} + + )} ); diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap index a8b2330eb..d66327af7 100644 --- a/tests/unit/__snapshots__/SearchResults.test.js.snap +++ b/tests/unit/__snapshots__/SearchResults.test.js.snap @@ -2003,155 +2003,11 @@ exports[`Search Results Page does not return results for a given search term wit exports[`Search Results Page renders correctly without browser 1`] = ` .emotion-0 { - -webkit-column-gap: 46px; - column-gap: 46px; - display: grid; - grid-template-areas: 'header .' 'results filters'; - grid-template-columns: auto 173px; - margin: 32px 108px 64px 32px; - max-width: 1150px; - row-gap: 32px; -} - -@media only screen and (max-width: 1440px) { - .emotion-0 { - margin: 32px 40px 64px 40px; - } -} - -@media only screen and (max-width: 767px) { - .emotion-0 { - -webkit-column-gap: 0; - column-gap: 0; - grid-template-areas: 'header' 'results'; - grid-template-columns: auto; - margin: 32px 24px 64px 24px; - } -} - -.emotion-2 { - grid-area: header; -} - -.emotion-4 { - display: none; - margin-top: 16px; -} - -@media only screen and (max-width: 767px) { - .emotion-4 { - display: block; - } -} - -.emotion-6 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; -} - -.emotion-6:focus { - outline: none; -} - -.emotion-6[disabled], -.emotion-6:disabled { - pointer-events: none; -} - -.emotion-6:active, -.emotion-6:focus, -.emotion-6:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-6:hover, -.emotion-6:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-6:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-7 { - overflow: hidden; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 5px; -} - -.emotion-8 { - display: grid; - grid-auto-flow: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - width: 100%; - pointer-events: none; - position: relative; - z-index: 0; - padding: 0 11px; - gap: 6px; -} - -.emotion-9 { - color: #889397; - height: 16px; - width: 16px; - justify-self: right; -} - -.emotion-10 { margin-bottom: calc(50vh - 28px - 40px - 166px / 2); margin-top: calc(50vh - 28px - 40px - 166px / 2); - grid-area: results; - margin-top: 200px; } -.emotion-12 { +.emotion-2 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2170,17 +2026,17 @@ exports[`Search Results Page renders correctly without browser 1`] = ` text-align: center; } -.emotion-14 { +.emotion-4 { height: calc(40px + 16px); width: calc(40px + 16px); } -.emotion-14 span { +.emotion-4 span { height: 40px; width: 40px; } -.emotion-16 { +.emotion-6 { border: none; -webkit-appearance: unset; padding: unset; @@ -2199,7 +2055,7 @@ exports[`Search Results Page renders correctly without browser 1`] = ` width: 28px; } -.emotion-16:before { +.emotion-6:before { content: ''; -webkit-transition: 150ms all ease-in-out; transition: 150ms all ease-in-out; @@ -2216,9 +2072,9 @@ exports[`Search Results Page renders correctly without browser 1`] = ` transform: scale(0.8); } -.emotion-16:active:before, -.emotion-16:hover:before, -.emotion-16:focus:before { +.emotion-6:active:before, +.emotion-6:hover:before, +.emotion-6:focus:before { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); @@ -2226,29 +2082,29 @@ exports[`Search Results Page renders correctly without browser 1`] = ` transform: scale(1); } -.emotion-16:focus { +.emotion-6:focus { outline: none; } -.emotion-16:active, -.emotion-16:hover { +.emotion-6:active, +.emotion-6:hover { color: #3D4F58; } -.emotion-16:active:before, -.emotion-16:hover:before { +.emotion-6:active:before, +.emotion-6:hover:before { background-color: #E7EEEC; } -.emotion-16:focus { +.emotion-6:focus { color: #1A567E; } -.emotion-16:focus:before { +.emotion-6:focus:before { background-color: #C5E4F2; } -.emotion-17 { +.emotion-7 { position: absolute; top: 0; bottom: 0; @@ -2268,20 +2124,20 @@ exports[`Search Results Page renders correctly without browser 1`] = ` justify-content: center; } -.emotion-18 { +.emotion-8 { color: #001E2B; height: 40px; width: 40px; } -.emotion-20 { +.emotion-10 { color: #001E2B; font-size: 18px; line-height: 21px; margin-bottom: 16px; } -.emotion-22 { +.emotion-12 { font-size: 16px; line-height: 24px; } @@ -2292,91 +2148,46 @@ exports[`Search Results Page renders correctly without browser 1`] = `
-
- -
-
-
-
+ +
+ +

+ + Search MongoDB Documentation + +

+

- -

- - Search MongoDB Documentation - -

-

- Find guides, examples, and best practices for working with the MongoDB data platform. -

-
+ Find guides, examples, and best practices for working with the MongoDB data platform. +

From 2a0669d029877fe77e5cefda5c4b28d43da39870 Mon Sep 17 00:00:00 2001 From: bianca-laube <135655735+bianca-laube@users.noreply.github.com> Date: Fri, 7 Jul 2023 09:24:33 -0400 Subject: [PATCH 15/47] catching infinite load edge case Co-authored-by: Seung Park --- src/components/SearchResults/SearchResults.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index c43acc4c6..592dbcbc7 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -451,6 +451,8 @@ const SearchResults = () => { value={searchField} placeholder="Search" onSubmit={(event) => { + const newValue = event.target[0]?.value; + if (newValue === searchTerm) return; setSearchResults([]); setSearchFinished(false); setSearchTerm(event.target[0].value); From 14d0c7c55c166e19d93c4924a3c410dd7c00da60 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 7 Jul 2023 09:27:17 -0400 Subject: [PATCH 16/47] changing link colour if selected in history --- src/components/SearchResults/SearchResult.js | 37 +++++++++++-------- src/components/SearchResults/SearchResults.js | 8 ++-- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 3eab8d924..cf7f8aa74 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -14,7 +14,6 @@ const SEARCH_MATCH_STYLE = `background-color: ${palette.green.light2} ; border-r const largeResultTitle = css` font-size: ${theme.size.default}; - color: #016bf8; line-height: ${theme.size.medium}; /* Only add bold on larger devices */ @media ${theme.screenSize.smallAndUp} { @@ -53,6 +52,22 @@ const SearchResultContainer = styled('div')` position: relative; `; +const StyledResultTitle = styled('p')` + font-family: Akzidenz; + color: #016bf8; + font-size: ${theme.fontSize.small}; + line-height: ${theme.size.medium}; + letter-spacing: 0.5px; + height: ${theme.size.medium}; + margin-bottom: ${theme.size.small}; + margin-top: 0; + ${truncate(1)}; + ${({ useLargeTitle }) => useLargeTitle && largeResultTitle}; + @media ${theme.screenSize.upToSmall} { + ${largeResultTitle}; + } +`; + const SearchResultLink = styled('a')` color: ${LINK_COLOR}; height: 100%; @@ -67,6 +82,11 @@ const SearchResultLink = styled('a')` transition: background-color 150ms ease-in; } } + :visited { + ${StyledResultTitle} { + color: #5e0c9e; + } + } `; const StyledPreviewText = styled(Body)` @@ -78,21 +98,6 @@ const StyledPreviewText = styled(Body)` min-height: 20px; `; -const StyledResultTitle = styled('p')` - font-family: Akzidenz; - font-size: ${theme.fontSize.small}; - line-height: ${theme.size.medium}; - letter-spacing: 0.5px; - height: ${theme.size.medium}; - margin-bottom: ${theme.size.small}; - margin-top: 0; - ${truncate(1)}; - ${({ useLargeTitle }) => useLargeTitle && largeResultTitle}; - @media ${theme.screenSize.upToSmall} { - ${largeResultTitle}; - } -`; - const StyledTag = styled(Tag)` ${searchTagStyle} `; diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index ed8d73ba7..a955f3fb0 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -123,19 +123,17 @@ const StyledSearchFilters = styled(SearchFilters)` `; const searchResultStyling = css` - background-color: #ffffff; - box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); border-radius: 45px; - border: 1px solid rgba(58, 63, 60, 0.15); background-color: #fff; - box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 0.4); height: ${SEARCH_RESULT_HEIGHT}; position: relative; /* place-self adds both align-self and justify-self for flexbox */ place-self: center; width: 100%; > div { - padding: ${theme.size.medium}; + padding: 20px; + padding-left: 30px; } :hover, :focus { From 9fcda2fc0fd9525004d9f6a96264981455fdb605 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 7 Jul 2023 09:33:08 -0400 Subject: [PATCH 17/47] fixing infinite loop edge case second location --- src/components/SearchResults/SearchResults.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 592dbcbc7..15a6e4232 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -332,6 +332,8 @@ const SearchResults = () => { value={searchField} placeholder="Search" onSubmit={(event) => { + const newValue = event.target[0]?.value; + if (newValue === searchTerm) return; setSearchResults([]); setSearchFinished(false); setSearchTerm(event.target[0].value); From f667fb64d6575439eb95ecf9dec3c2c71c669eb8 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 7 Jul 2023 10:38:30 -0400 Subject: [PATCH 18/47] getting rid of redunt checks --- src/components/SearchResults/SearchResults.js | 114 ++++++++---------- 1 file changed, 49 insertions(+), 65 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 15a6e4232..cc92c4bdd 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -344,7 +344,7 @@ const SearchResults = () => { /> ) : ( - <>{!!searchTerm && Search results for "{searchTerm}"} + Search results for "{searchTerm}" )} {!!searchFilter && ( @@ -363,85 +363,69 @@ const SearchResults = () => { - {!!searchTerm ? ( + {searchResults?.length ? ( <> - {searchResults?.length ? ( + + {searchResults.map(({ title, preview, url, searchProperty }, index) => ( + + reportAnalytics('SearchSelection', { + areaFrom: 'ResultsPage', + rank: index, + selectionUrl: url, + }) + } + title={title} + preview={escapeHtml(preview)} + url={url} + useLargeTitle + searchProperty={searchProperty?.[0]} + /> + ))} + + + {specifySearchText} + + + + ) : ( + <> + {!searchFinished ? ( <> - {searchResults.map(({ title, preview, url, searchProperty }, index) => ( - - reportAnalytics('SearchSelection', { - areaFrom: 'ResultsPage', - rank: index, - selectionUrl: url, - }) - } - title={title} - preview={escapeHtml(preview)} - url={url} - useLargeTitle - searchProperty={searchProperty?.[0]} - /> + {[...Array(10)].map((_, index) => ( + + + + + ))} {specifySearchText} - + ) : ( <> - {!searchFinished ? ( - <> - - {[...Array(10)].map((_, index) => ( - - - - - - ))} - - - {specifySearchText} - - - - ) : ( - <> - - - - - {specifySearchText} - - - - )} + + + + + {specifySearchText} + + )} - {showMobileFilters && isTabletOrMobile && } - - ) : ( - <> - {!searchResults?.length && ( - - {firstRenderComplete ? : } - - )} )} + {showMobileFilters && isTabletOrMobile && } ) : ( <> From 060932ee233d81e6df88a6a49deb409013778598 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 7 Jul 2023 14:41:40 -0400 Subject: [PATCH 19/47] added the feature flag --- src/components/SearchResults/SearchResult.js | 23 +++++++++++++++---- src/components/SearchResults/SearchResults.js | 20 +++++++++++----- src/components/Tag.js | 7 ++++++ 3 files changed, 39 insertions(+), 11 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 26a8b1875..2a3f33974 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -5,7 +5,7 @@ import styled from '@emotion/styled'; import { palette } from '@leafygreen-ui/palette'; import { Body } from '@leafygreen-ui/typography'; import { theme } from '../../theme/docsTheme'; -import Tag, { searchTagStyle } from '../Tag'; +import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag'; import SearchContext from './SearchContext'; const LINK_COLOR = '#494747'; @@ -93,7 +93,7 @@ const StyledResultTitle = styled('p')` `; const StyledTag = styled(Tag)` - ${searchTagStyle} + ${({ newSearchInput }) => (newSearchInput ? searchTagStyleFeature : searchTagStyle)} `; const StylingTagContainer = styled('div')` @@ -135,6 +135,7 @@ const SearchResult = React.memo( const resultLinkRef = useRef(null); const category = searchPropertyMapping?.[searchProperty]?.['categoryTitle']; const version = searchPropertyMapping?.[searchProperty]?.['versionSelectorLabel']; + const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; return ( @@ -152,9 +153,21 @@ const SearchResult = React.memo( }} /> - {!!category && {category}} - {!!version && {version}} - {url.includes('/api/') && {'API'}} + {!!category && ( + + {category} + + )} + {!!version && ( + + {version} + + )} + {url.includes('/api/') && ( + + {'API'} + + )} {learnMoreLink && ( diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 27c84c016..617be16e0 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -16,7 +16,7 @@ import { getSearchbarResultsFromJSON } from '../../utils/get-searchbar-results-f import { escapeHtml } from '../../utils/escape-reserved-html-characters'; import { searchParamsToURL } from '../../utils/search-params-to-url'; import { useMarianManifests } from '../../hooks/use-marian-manifests'; -import Tag, { searchTagStyle } from '../Tag'; +import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag'; import SearchContext from './SearchContext'; import SearchFilters from './SearchFilters'; import SearchResult from './SearchResult'; @@ -222,7 +222,7 @@ const FilterBadgesWrapper = styled('div')` `; const StyledTag = styled(Tag)` - ${searchTagStyle} + ${({ newSearchInput }) => (newSearchInput ? searchTagStyleFeature : searchTagStyle)} `; const ResultTag = styled('div')` @@ -355,12 +355,16 @@ const SearchResults = () => { {!!searchFilter && ( {selectedCategory && ( - + {selectedCategory} )} - {selectedVersion && {selectedVersion}} + {selectedVersion && ( + + {selectedVersion} + + )} )} @@ -371,12 +375,16 @@ const SearchResults = () => { {!!searchFilter && ( {selectedCategory && ( - + {selectedCategory} )} - {selectedVersion && {selectedVersion}} + {selectedVersion && ( + + {selectedVersion} + + )} )} diff --git a/src/components/Tag.js b/src/components/Tag.js index 5a0226ba0..7052f9505 100644 --- a/src/components/Tag.js +++ b/src/components/Tag.js @@ -12,6 +12,13 @@ const baseStyle = css` `; export const searchTagStyle = css` + cursor: pointer; + height: 26px; + font-size: ${theme.fontSize.small}; + margin-right: ${theme.size.small}; +`; + +export const searchTagStyleFeature = css` cursor: pointer; height: 26px; padding: 4px 11px 4px 11px; From f072d3ab4126aa59abbcb19cfb690f7ffe206bc0 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 7 Jul 2023 15:38:16 -0400 Subject: [PATCH 20/47] fixing cards in mobile view --- src/components/SearchResults/SearchResult.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index cf7f8aa74..d9fa308c4 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -15,10 +15,7 @@ const SEARCH_MATCH_STYLE = `background-color: ${palette.green.light2} ; border-r const largeResultTitle = css` font-size: ${theme.size.default}; line-height: ${theme.size.medium}; - /* Only add bold on larger devices */ - @media ${theme.screenSize.smallAndUp} { - font-weight: 600; - } + font-weight: 600; `; // Truncates text to a maximum number of lines @@ -44,11 +41,6 @@ const LearnMoreLink = styled('a')` const SearchResultContainer = styled('div')` height: 100%; - @media ${theme.screenSize.upToSmall} { - display: flex; - flex-direction: column; - height: 100%; - } position: relative; `; From 63da22978bfe6ca1ad8fa997fd82442fcf381851 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Fri, 7 Jul 2023 15:50:09 -0400 Subject: [PATCH 21/47] fixing the colour of the title --- src/components/SearchResults/SearchResult.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 9ae8c8221..c992d0244 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -46,6 +46,7 @@ const SearchResultContainer = styled('div')` const StyledResultTitle = styled('p')` font-family: 'Euclid Circular A'; + color: #016bf8; font-size: ${theme.fontSize.small}; line-height: ${theme.size.medium}; letter-spacing: 0.5px; From 33e813bc782e3a33e5c0fe4e9869baf29ae0553b Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 10 Jul 2023 09:38:35 -0400 Subject: [PATCH 22/47] adding feature flag --- src/components/SearchResults/SearchResult.js | 12 ++++++++---- src/components/SearchResults/SearchResults.js | 4 +--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index c992d0244..7931ddd55 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -46,7 +46,7 @@ const SearchResultContainer = styled('div')` const StyledResultTitle = styled('p')` font-family: 'Euclid Circular A'; - color: #016bf8; + ${({ newSearchInput }) => (newSearchInput ? `color: #016bf8;` : ``)} font-size: ${theme.fontSize.small}; line-height: ${theme.size.medium}; letter-spacing: 0.5px; @@ -75,9 +75,12 @@ const SearchResultLink = styled('a')` } } :visited { - ${StyledResultTitle} { + ${({ newSearchInput }) => + newSearchInput + ? `${StyledResultTitle} { color: #5e0c9e; - } + }` + : ``} } `; @@ -139,13 +142,14 @@ const SearchResult = React.memo( const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; return ( - + { From ab571c9a0c43a27a71b2b5c7194c42f12fc10c60 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 10 Jul 2023 09:59:01 -0400 Subject: [PATCH 23/47] fixing html sanitizer --- src/components/SearchResults/SearchResult.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 7931ddd55..5ce7d3888 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -115,11 +115,14 @@ const sanitizePreviewHtml = (text) => sanitizeHtml(text, { allowedTags: ['span'], allowedAttributes: { span: ['style'] }, - // allowedStyles: { span: { - // 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], - // 'border-radius':[`^\d+(?:px|em|%)$`], - // 'padding-left': [`^\d+(?:px|em|%)$`], - // 'padding-right': [`^\d+(?:px|em|%)$`] } }, + allowedStyles: { + span: { + 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], + 'border-radius': [`^+(?:px|em|%)$`], + 'padding-left': [`^+(?:px|em|%)$`], + 'padding-right': [`^+(?:px|em|%)$`], + }, + }, }); const SearchResult = React.memo( From f4bdc8d9b076da0ee83602e058571d7bbe0bfbc5 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 10 Jul 2023 14:44:02 -0400 Subject: [PATCH 24/47] changed styleTag with feature flag --- src/components/SearchResults/SearchResult.js | 22 +++++-------------- src/components/SearchResults/SearchResults.js | 19 +++++----------- 2 files changed, 11 insertions(+), 30 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 2a3f33974..faecfe468 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -11,6 +11,7 @@ import SearchContext from './SearchContext'; const LINK_COLOR = '#494747'; // Use string for match styles due to replace/innerHTML const SEARCH_MATCH_STYLE = `background-color: ${palette.yellow.light2};`; +const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; const largeResultTitle = css` font-size: ${theme.size.default}; @@ -93,7 +94,7 @@ const StyledResultTitle = styled('p')` `; const StyledTag = styled(Tag)` - ${({ newSearchInput }) => (newSearchInput ? searchTagStyleFeature : searchTagStyle)} + ${newSearchInput ? searchTagStyleFeature : searchTagStyle} `; const StylingTagContainer = styled('div')` @@ -135,7 +136,6 @@ const SearchResult = React.memo( const resultLinkRef = useRef(null); const category = searchPropertyMapping?.[searchProperty]?.['categoryTitle']; const version = searchPropertyMapping?.[searchProperty]?.['versionSelectorLabel']; - const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; return ( @@ -153,21 +153,9 @@ const SearchResult = React.memo( }} /> - {!!category && ( - - {category} - - )} - {!!version && ( - - {version} - - )} - {url.includes('/api/') && ( - - {'API'} - - )} + {!!category && {category}} + {!!version && {version}} + {url.includes('/api/') && {'API'}} {learnMoreLink && ( diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 617be16e0..647c53db6 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -31,6 +31,7 @@ const LANDING_PAGE_MARGIN = '40px'; const ROW_GAP = theme.size.default; const SKELETON_BORDER_RADIUS = '12px'; const SEARCH_RESULT_HEIGHT = '152px'; +const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; const CALC_MARGIN = `calc(50vh - ${LANDING_MODULE_MARGIN} - ${LANDING_PAGE_MARGIN} - ${EMPTY_STATE_HEIGHT} / 2)`; @@ -222,7 +223,7 @@ const FilterBadgesWrapper = styled('div')` `; const StyledTag = styled(Tag)` - ${({ newSearchInput }) => (newSearchInput ? searchTagStyleFeature : searchTagStyle)} + ${newSearchInput ? searchTagStyleFeature : searchTagStyle} `; const ResultTag = styled('div')` @@ -355,16 +356,12 @@ const SearchResults = () => { {!!searchFilter && ( {selectedCategory && ( - + {selectedCategory} )} - {selectedVersion && ( - - {selectedVersion} - - )} + {selectedVersion && {selectedVersion}} )} @@ -375,16 +372,12 @@ const SearchResults = () => { {!!searchFilter && ( {selectedCategory && ( - + {selectedCategory} )} - {selectedVersion && ( - - {selectedVersion} - - )} + {selectedVersion && {selectedVersion}} )} From 6c0ab2f1724c921b7e34af14bc57fb3798c5099c Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 10 Jul 2023 15:36:10 -0400 Subject: [PATCH 25/47] FIXED sanitizeHTML --- src/components/SearchResults/SearchResult.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 5ce7d3888..03ff87376 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -118,9 +118,9 @@ const sanitizePreviewHtml = (text) => allowedStyles: { span: { 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], - 'border-radius': [`^+(?:px|em|%)$`], - 'padding-left': [`^+(?:px|em|%)$`], - 'padding-right': [`^+(?:px|em|%)$`], + 'border-radius': [new RegExp(`^3px$`)], + 'padding-left': [new RegExp(`^2px$`)], + 'padding-right': [new RegExp(`^2px$`)], }, }, }); From 36a1f24d6bb051574dc78bf0543dd1a6e766e507 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Wed, 12 Jul 2023 10:57:27 -0400 Subject: [PATCH 26/47] working completely with the feature flag --- src/components/SearchResults/SearchResult.js | 74 +- src/components/SearchResults/SearchResults.js | 18 +- .../__snapshots__/SearchResults.test.js.snap | 5896 +---------------- 3 files changed, 238 insertions(+), 5750 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 9b39df25d..ddfc4cefa 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -10,8 +10,10 @@ import SearchContext from './SearchContext'; const LINK_COLOR = '#494747'; // Use string for match styles due to replace/innerHTML -const SEARCH_MATCH_STYLE = `background-color: ${palette.green.light2} ; border-radius: 3px; padding-left: 2px; padding-right: 2px;`; const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; +const SEARCH_MATCH_STYLE = newSearchInput + ? `background-color: ${palette.green.light2} ; border-radius: 3px; padding-left: 2px; padding-right: 2px;` + : `background-color: ${palette.yellow.light2};`; const largeResultTitle = css` font-size: ${theme.size.default}; @@ -42,12 +44,11 @@ const LearnMoreLink = styled('a')` const SearchResultContainer = styled('div')` height: 100%; - position: relative; `; const StyledResultTitle = styled('p')` font-family: 'Euclid Circular A'; - ${({ newSearchInput }) => (newSearchInput ? `color: #016bf8;` : ``)} + ${newSearchInput ? `color: #016bf8;` : ``} font-size: ${theme.fontSize.small}; line-height: ${theme.size.medium}; letter-spacing: 0.5px; @@ -59,6 +60,7 @@ const StyledResultTitle = styled('p')` @media ${theme.screenSize.upToSmall} { ${largeResultTitle}; } + position: relative; `; const SearchResultLink = styled('a')` @@ -76,12 +78,7 @@ const SearchResultLink = styled('a')` } } :visited { - ${({ newSearchInput }) => - newSearchInput - ? `${StyledResultTitle} { - color: #5e0c9e; - }` - : ``} + ${newSearchInput ? `${StyledResultTitle} {color: #5e0c9e;}` : ``} } `; @@ -113,18 +110,27 @@ const highlightSearchTerm = (text, searchTerm) => // since we are using dangerouslySetInnerHTML, this helper sanitizes input to be safe const sanitizePreviewHtml = (text) => - sanitizeHtml(text, { - allowedTags: ['span'], - allowedAttributes: { span: ['style'] }, - allowedStyles: { - span: { - 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], - 'border-radius': [new RegExp(`^3px$`)], - 'padding-left': [new RegExp(`^2px$`)], - 'padding-right': [new RegExp(`^2px$`)], - }, - }, - }); + sanitizeHtml( + text, + newSearchInput + ? { + allowedTags: ['span'], + allowedAttributes: { span: ['style'] }, + allowedStyles: { + span: { + 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], + 'border-radius': [new RegExp(`^3px$`)], + 'padding-left': [new RegExp(`^2px$`)], + 'padding-right': [new RegExp(`^2px$`)], + }, + }, + } + : { + allowedTags: ['span'], + allowedAttributes: { span: ['style'] }, + allowedStyles: { span: { 'background-color': [new RegExp(`^${palette.yellow.light2}$`, 'i')] } }, + } + ); const SearchResult = React.memo( ({ @@ -139,21 +145,31 @@ const SearchResult = React.memo( ...props }) => { const { searchPropertyMapping, searchTerm } = useContext(SearchContext); + const highlightedTitle = highlightSearchTerm(title, searchTerm); const highlightedPreviewText = highlightSearchTerm(preview, searchTerm); const resultLinkRef = useRef(null); const category = searchPropertyMapping?.[searchProperty]?.['categoryTitle']; const version = searchPropertyMapping?.[searchProperty]?.['versionSelectorLabel']; + const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; return ( - + - + {newSearchInput ? ( + + ) : ( + + )} div { - padding: 20px; - padding-left: 30px; + ${newSearchInput ? `padding: 20px; padding-left: 30px;` : `padding: ${theme.size.medium};`} } :hover, :focus { @@ -190,6 +193,7 @@ const StyledLoadingSkeletonContainer = styled('div')` `; const StyledSearchResults = styled('div')` + box-shadow: none; display: grid; grid-area: results; /* Build space between rows into row height for hover effect */ @@ -199,13 +203,11 @@ const StyledSearchResults = styled('div')` /* Create the opaque effect on hover by opaquing everything but a hovered result */ :hover { > ${StyledSearchResult} { - // opacity: 0.2; - // transition: opacity 150ms ease-in; - // delete this ^^ + ${!newSearchInput && `opacity: 0.2; transition: opacity 150ms ease-in;`} :hover { opacity: 1; - box-shadow: 0px 0px 5px 1px rgba(58, 63, 60, 0.15); + ${newSearchInput && `box-shadow: 0px 0px 5px 1px rgba(58, 63, 60, 0.15);`} } } } diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap index e33619c0e..c7d6e2b63 100644 --- a/tests/unit/__snapshots__/SearchResults.test.js.snap +++ b/tests/unit/__snapshots__/SearchResults.test.js.snap @@ -45,5490 +45,61 @@ exports[`Search Results Page considers a given search filter query param and dis } .emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; -} - -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.emotion-14 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - line-height: 20px; - letter-spacing: 0.4px; - color: #001E2B; -} - -.emotion-15 { - margin-top: 8px; -} - -.emotion-18 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 4px; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - padding: 4px 8px; - background-color: #E3FCF7; - border: 1px solid #C0FAE6; - color: #00684A; - cursor: pointer; - height: 26px; - padding: 4px 11px 4px 11px; - border-radius: 11px; - font-size: 12px; - margin-right: 8px; -} - -.emotion-20 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 4px; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - padding: 4px 8px; - background-color: #E1F7FF; - border: 1px solid #C3E7FE; - color: #1254B7; - cursor: pointer; - height: 26px; - padding: 4px 11px 4px 11px; - border-radius: 11px; - font-size: 12px; - margin-right: 8px; -} - -.emotion-21 { - display: none; - margin-top: 16px; -} - -@media only screen and (max-width: 767px) { - .emotion-21 { - display: block; - } -} - -.emotion-23 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; -} - -.emotion-23:focus { - outline: none; -} - -.emotion-23[disabled], -.emotion-23:disabled { - pointer-events: none; -} - -.emotion-23:active, -.emotion-23:focus, -.emotion-23:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-23:hover, -.emotion-23:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-23:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-24 { - overflow: hidden; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 5px; -} - -.emotion-25 { - display: grid; - grid-auto-flow: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - width: 100%; - pointer-events: none; - position: relative; - z-index: 0; - padding: 0 11px; - gap: 6px; -} - -.emotion-26 { - color: #889397; - height: 16px; - width: 16px; - justify-self: right; -} - -.emotion-27 { - box-shadow: none; - display: grid; - grid-area: results; - grid-auto-rows: calc(152px + 16px); - height: 100%; - width: 100%; -} - -.emotion-27:hover>.emotion-29 { - opacity: 0.2; - -webkit-transition: opacity 150ms ease-in; - transition: opacity 150ms ease-in; -} - -.emotion-27:hover>.emotion-29:hover { - opacity: 1; -} - -.emotion-27:not(:hover)>.emotion-29 { - opacity: 1; - -webkit-transition: opacity 150ms ease-in; - transition: opacity 150ms ease-in; -} - -.emotion-30 { - color: #494747; - height: 100%; - -webkit-text-decoration: none; - text-decoration: none; - border-radius: 24px; - background-color: #fff; - box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); - height: 152px; - position: relative; - place-self: center; - width: 100%; -} - -.emotion-30:hover, -.emotion-30:focus { - color: #494747; - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-30:hover .emotion-33, -.emotion-30:focus .emotion-33 { - background-color: rgba(231, 238, 236, 0.4); - -webkit-transition: background-color 150ms ease-in; - transition: background-color 150ms ease-in; -} - -.emotion-30>div { - padding: 24px; -} - -.emotion-30:hover, -.emotion-30:focus { - color: unset; - -webkit-text-decoration: unset; - text-decoration: unset; -} - -.emotion-30:hover>div, -.emotion-30:focus>div { - background-color: unset!important; -} - -.emotion-30:before { - content: ''; - position: absolute; - top: calc(-16px / 2); - left: 0; - right: 0; - bottom: calc(-16px / 2); - background-color: transparent; -} - -.emotion-32 { - height: 100%; - position: relative; -} - -@media only screen and (max-width: 480px) { - .emotion-32 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; - } -} - -.emotion-34 { - font-family: Akzidenz; - font-size: 13px; - line-height: 24px; - letter-spacing: 0.5px; - height: 24px; - margin-bottom: 8px; - margin-top: 0; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; - font-size: 16px; - line-height: 24px; -} - -@media not all and (max-width: 480px) { - .emotion-34 { - font-weight: 600; - } -} - -@media only screen and (max-width: 480px) { - .emotion-34 { - font-size: 16px; - line-height: 24px; - } - - @media not all and (max-width: 480px) { - .emotion-34 { - font-weight: 600; - } - } -} - -.emotion-36 { - font-size: 13px; - line-height: 20px; - margin-bottom: 16px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - min-height: 20px; -} - -.emotion-38 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 13px; - line-height: 20px; - color: #001E2B; - font-weight: 400; -} - -.emotion-38 strong, -.emotion-38 b { - font-weight: 700; -} - -.emotion-39 { - bottom: 0; - margin-bottom: 24px; -} - -.emotion-45 { - grid-area: filters; -} - -@media only screen and (max-width: 767px) { - .emotion-45 { - display: none; - } -} - -.emotion-47 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #3D4F58; - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - white-space: nowrap; - font-family: Akzidenz; - font-weight: bolder; - letter-spacing: 0.5px; - margin: 0; - margin-bottom: 16px; -} - -.emotion-49 { - grid-area: filters; -} - -@media only screen and (max-width: 767px) { - .emotion-49 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: none; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - - .emotion-49>div { - margin-bottom: 0; - margin-right: 8px; - } -} - -@media only screen and (max-width: 480px) { - .emotion-49 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .emotion-49>div { - width: 100%; - } - - .emotion-49>div:first-of-type { - margin-bottom: 8px; - margin-right: 0; - } - - .emotion-49>div>div { - width: 100%; - } -} - -.emotion-51 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-bottom: 16px; -} - -.emotion-53 { - width: 175px; -} - -.emotion-55 { - position: relative; -} - -@media only screen and (max-width: 1024px) { - .emotion-55 label, - .emotion-55 p, - .emotion-55 button, - .emotion-55 div, - .emotion-55 span { - font-size: 13px; - } -} - -.emotion-56 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.emotion-56>label+button, -.emotion-56>p+button { - margin-top: 3px; -} - -@media only screen and (max-width: 1024px) { - .emotion-56 label, - .emotion-56 p, - .emotion-56 button, - .emotion-56 div, - .emotion-56 span { - font-size: 13px; - } -} - -.emotion-57 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; - font-weight: 400; - background-color: #FFFFFF; - width: 100%; - font-size: 13px; -} - -.emotion-57:focus { - outline: none; -} - -.emotion-57[disabled], -.emotion-57:disabled { - pointer-events: none; -} - -.emotion-57:active, -.emotion-57:focus, -.emotion-57:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-57:hover, -.emotion-57:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-57:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-57>*:last-child { - grid-template-columns: 1fr 16px; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; -} - -.emotion-57>*:last-child>svg { - justify-self: right; - width: 16px; - height: 16px; -} - -.emotion-57>*:last-child>svg { - color: #3D4F58; -} - -.emotion-57>*:last-child { - padding: 0 4px 0 12px; -} - -.emotion-57:focus { - box-shadow: 0 0 0 3px #0498EC; - border-color: rgba(255, 255, 255, 0); -} - -@media only screen and (max-width: 1024px) { - .emotion-57 { - height: 36px; - font-size: 16px; - } -} - -.emotion-60 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - gap: 4px; - overflow: hidden; -} - -.emotion-61 { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; -} - -.emotion-62 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #889397; - height: 16px; - width: 16px; - justify-self: left; -} - -.emotion-69 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; - font-weight: 400; - background-color: #FFFFFF; - width: 100%; - font-size: 13px; -} - -.emotion-69:focus { - outline: none; -} - -.emotion-69[disabled], -.emotion-69:disabled { - pointer-events: none; -} - -.emotion-69:active, -.emotion-69:focus, -.emotion-69:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-69:hover, -.emotion-69:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-69, -.emotion-69:hover { - background-color: #E8EDEB; - border-color: #C1C7C6; - color: #889397; - cursor: not-allowed; -} - -.emotion-69:focus { - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-69>*:last-child { - grid-template-columns: 1fr 16px; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; -} - -.emotion-69>*:last-child>svg { - justify-self: right; - width: 16px; - height: 16px; -} - -.emotion-69>*:last-child>svg { - color: #3D4F58; -} - -.emotion-69>*:last-child { - padding: 0 4px 0 12px; -} - -.emotion-69:focus { - box-shadow: 0 0 0 3px #0498EC; - border-color: rgba(255, 255, 255, 0); -} - -.emotion-69:disabled { - cursor: not-allowed; - pointer-events: unset; - box-shadow: unset; -} - -.emotion-69:disabled:active { - pointer-events: none; -} - -.emotion-69:disabled { - background-color: #E8EDEB; - color: #889397; -} - -.emotion-69:disabled>*:last-child>svg { - color: #889397; -} - -@media only screen and (max-width: 1024px) { - .emotion-69 { - height: 36px; - font-size: 16px; - } -} - -
-
-

- Search Results -

- -
-
- 1 RESULTS -
-
- - Realm - - - - - - Latest - -
-
-
- -
-
-
- -
-

- - stitch - - (realm filter) -

-

- - Stitch - - preview (with realm filter) -

-
- - Realm - - - Latest - -
-
- -
-
-

- Specify your search -

-
-
-
-
- -
-
-
-
-
-
- -
-
-
- -
-
-
- -`; - -exports[`Search Results Page does not return results for a given search term with an ill-formed searchProperty 1`] = ` - - .emotion-0 { - -webkit-column-gap: 46px; - column-gap: 46px; - display: grid; - grid-template-areas: 'header .' 'results filters'; - grid-template-columns: auto 173px; - margin: 32px 108px 64px 32px; - max-width: 1150px; - row-gap: 32px; -} - -@media only screen and (max-width: 1440px) { - .emotion-0 { - margin: 32px 40px 64px 40px; - } -} - -@media only screen and (max-width: 767px) { - .emotion-0 { - -webkit-column-gap: 0; - column-gap: 0; - grid-template-areas: 'header' 'results'; - grid-template-columns: auto; - margin: 32px 24px 64px 24px; - } -} - -.emotion-2 { - grid-area: header; -} - -.emotion-4 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-weight: 400; - font-size: 48px; - line-height: 62px; - font-family: 'MongoDB Value Serif','Times New Roman',serif; - color: #00684A; -} - -.emotion-5 { - outline: none; -} - -.emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; -} - -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.emotion-14 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - line-height: 20px; - letter-spacing: 0.4px; - color: #001E2B; -} - -.emotion-15 { - display: none; - margin-top: 16px; -} - -@media only screen and (max-width: 767px) { - .emotion-15 { - display: block; - } -} - -.emotion-17 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; -} - -.emotion-17:focus { - outline: none; -} - -.emotion-17[disabled], -.emotion-17:disabled { - pointer-events: none; -} - -.emotion-17:active, -.emotion-17:focus, -.emotion-17:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-17:hover, -.emotion-17:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-17:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-18 { - overflow: hidden; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 5px; -} - -.emotion-19 { - display: grid; - grid-auto-flow: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - width: 100%; - pointer-events: none; - position: relative; - z-index: 0; - padding: 0 11px; - gap: 6px; -} - -.emotion-20 { - color: #889397; - height: 16px; - width: 16px; - justify-self: right; -} - -.emotion-21 { - margin-bottom: calc(50vh - 28px - 40px - 166px / 2); - margin-top: calc(50vh - 28px - 40px - 166px / 2); - grid-area: results; - margin-top: 80px; -} - -.emotion-23 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - font-family: Akzidenz; - letter-spacing: 0.5px; - margin: 0 auto; - max-width: 337px; - text-align: center; -} - -.emotion-25 { - height: calc(40px + 16px); - width: calc(40px + 16px); -} - -.emotion-25 span { - height: 40px; - width: 40px; -} - -.emotion-27 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - color: #89979B; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: color 150ms ease-in-out; - transition: color 150ms ease-in-out; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; -} - -.emotion-27:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-27:active:before, -.emotion-27:hover:before, -.emotion-27:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-27:focus { - outline: none; -} - -.emotion-27:active, -.emotion-27:hover { - color: #3D4F58; -} - -.emotion-27:active:before, -.emotion-27:hover:before { - background-color: #E7EEEC; -} - -.emotion-27:focus { - color: #1A567E; -} - -.emotion-27:focus:before { - background-color: #C5E4F2; -} - -.emotion-29 { - color: #001E2B; - height: 40px; - width: 40px; -} - -.emotion-31 { - color: #001E2B; - font-size: 18px; - line-height: 21px; - margin-bottom: 16px; -} - -.emotion-33 { - font-size: 16px; - line-height: 24px; -} - -.emotion-35 { - grid-area: filters; -} - -@media only screen and (max-width: 767px) { - .emotion-35 { - display: none; - } -} - -.emotion-37 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #3D4F58; - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - white-space: nowrap; - font-family: Akzidenz; - font-weight: bolder; - letter-spacing: 0.5px; - margin: 0; - margin-bottom: 16px; -} - -.emotion-39 { - grid-area: filters; -} - -@media only screen and (max-width: 767px) { - .emotion-39 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: none; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - - .emotion-39>div { - margin-bottom: 0; - margin-right: 8px; - } -} - -@media only screen and (max-width: 480px) { - .emotion-39 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .emotion-39>div { - width: 100%; - } - - .emotion-39>div:first-of-type { - margin-bottom: 8px; - margin-right: 0; - } - - .emotion-39>div>div { - width: 100%; - } -} - -.emotion-41 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-bottom: 16px; -} - -.emotion-43 { - width: 175px; -} - -.emotion-45 { - position: relative; -} - -@media only screen and (max-width: 1024px) { - .emotion-45 label, - .emotion-45 p, - .emotion-45 button, - .emotion-45 div, - .emotion-45 span { - font-size: 13px; - } -} - -.emotion-46 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.emotion-46>label+button, -.emotion-46>p+button { - margin-top: 3px; -} - -@media only screen and (max-width: 1024px) { - .emotion-46 label, - .emotion-46 p, - .emotion-46 button, - .emotion-46 div, - .emotion-46 span { - font-size: 13px; - } -} - -.emotion-47 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; - font-weight: 400; - background-color: #FFFFFF; - color: #5C6C75; - width: 100%; - font-size: 13px; -} - -.emotion-47:focus { - outline: none; -} - -.emotion-47[disabled], -.emotion-47:disabled { - pointer-events: none; -} - -.emotion-47:active, -.emotion-47:focus, -.emotion-47:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-47:hover, -.emotion-47:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-47:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-47>*:last-child { - grid-template-columns: 1fr 16px; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; -} - -.emotion-47>*:last-child>svg { - justify-self: right; - width: 16px; - height: 16px; -} - -.emotion-47>*:last-child>svg { - color: #3D4F58; -} - -.emotion-47>*:last-child { - padding: 0 4px 0 12px; -} - -.emotion-47:focus { - box-shadow: 0 0 0 3px #0498EC; - border-color: rgba(255, 255, 255, 0); -} - -@media only screen and (max-width: 1024px) { - .emotion-47 { - height: 36px; - font-size: 16px; - } -} - -.emotion-50 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - gap: 4px; - overflow: hidden; -} - -.emotion-51 { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; -} - -.emotion-52 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #889397; - height: 16px; - width: 16px; - justify-self: left; -} - -.emotion-59 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; - font-weight: 400; - background-color: #FFFFFF; - color: #5C6C75; - width: 100%; - font-size: 13px; -} - -.emotion-59:focus { - outline: none; -} - -.emotion-59[disabled], -.emotion-59:disabled { - pointer-events: none; -} - -.emotion-59:active, -.emotion-59:focus, -.emotion-59:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-59:hover, -.emotion-59:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-59, -.emotion-59:hover { - background-color: #E8EDEB; - border-color: #C1C7C6; - color: #889397; - cursor: not-allowed; -} - -.emotion-59:focus { - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-59>*:last-child { - grid-template-columns: 1fr 16px; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; -} - -.emotion-59>*:last-child>svg { - justify-self: right; - width: 16px; - height: 16px; -} - -.emotion-59>*:last-child>svg { - color: #3D4F58; -} - -.emotion-59>*:last-child { - padding: 0 4px 0 12px; -} - -.emotion-59:focus { - box-shadow: 0 0 0 3px #0498EC; - border-color: rgba(255, 255, 255, 0); -} - -.emotion-59:disabled { - cursor: not-allowed; - pointer-events: unset; - box-shadow: unset; -} - -.emotion-59:disabled:active { - pointer-events: none; -} - -.emotion-59:disabled { - background-color: #E8EDEB; - color: #889397; -} - -.emotion-59:disabled>*:last-child>svg { - color: #889397; -} - -@media only screen and (max-width: 1024px) { - .emotion-59 { - height: 36px; - font-size: 16px; - } -} - -
-
-

- Search Results -

- -
-
- 0 RESULTS -
-
-
- -
-
-
-
- -

- - No results found. Please search again. - -

-

- Sorry. We weren't able to find any results for your query. The page might have been moved or deleted. -

-
-
-
-

- Specify your search -

-
-
-
-
- -
-
-
-
-
-
- -
-
-
- -
-
-
- -`; - -exports[`Search Results Page renders correctly without browser 1`] = ` - - .emotion-0 { - margin-bottom: calc(50vh - 28px - 40px - 166px / 2); - margin-top: calc(50vh - 28px - 40px - 166px / 2); -} - -.emotion-2 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - font-family: Akzidenz; - letter-spacing: 0.5px; - margin: 0 auto; - max-width: 337px; - text-align: center; -} - -.emotion-4 { - height: calc(40px + 16px); - width: calc(40px + 16px); -} - -.emotion-4 span { - height: 40px; - width: 40px; -} - -.emotion-6 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - color: #89979B; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: color 150ms ease-in-out; - transition: color 150ms ease-in-out; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; -} - -.emotion-6:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-6:active:before, -.emotion-6:hover:before, -.emotion-6:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-6:focus { - outline: none; -} - -.emotion-6:active, -.emotion-6:hover { - color: #3D4F58; -} - -.emotion-6:active:before, -.emotion-6:hover:before { - background-color: #E7EEEC; -} - -.emotion-6:focus { - color: #1A567E; -} - -.emotion-6:focus:before { - background-color: #C5E4F2; -} - -.emotion-7 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-8 { - color: #001E2B; - height: 40px; - width: 40px; -} - -.emotion-10 { - color: #001E2B; - font-size: 18px; - line-height: 21px; - margin-bottom: 16px; -} - -.emotion-12 { - font-size: 16px; - line-height: 24px; -} - -
-
- -

- - Search MongoDB Documentation - -

-

- Find guides, examples, and best practices for working with the MongoDB data platform. -

-
-
- -`; - -exports[`Search Results Page renders loading images before returning no results 1`] = ` - - .emotion-0 { - -webkit-column-gap: 46px; - column-gap: 46px; - display: grid; - grid-template-areas: 'header .' 'results filters'; - grid-template-columns: auto 173px; - margin: 32px 108px 64px 32px; - max-width: 1150px; - row-gap: 32px; -} - -@media only screen and (max-width: 1440px) { - .emotion-0 { - margin: 32px 40px 64px 40px; - } -} - -@media only screen and (max-width: 767px) { - .emotion-0 { - -webkit-column-gap: 0; - column-gap: 0; - grid-template-areas: 'header' 'results'; - grid-template-columns: auto; - margin: 32px 24px 64px 24px; - } -} - -.emotion-2 { - grid-area: header; -} - -.emotion-4 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-weight: 400; - font-size: 48px; - line-height: 62px; - font-family: 'MongoDB Value Serif','Times New Roman',serif; - color: #00684A; -} - -.emotion-5 { - outline: none; -} - -.emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; -} - -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.emotion-14 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - line-height: 20px; - letter-spacing: 0.4px; - color: #001E2B; -} - -.emotion-15 { - display: none; - margin-top: 16px; -} - -@media only screen and (max-width: 767px) { - .emotion-15 { - display: block; - } -} - -.emotion-17 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; -} - -.emotion-17:focus { - outline: none; -} - -.emotion-17[disabled], -.emotion-17:disabled { - pointer-events: none; -} - -.emotion-17:active, -.emotion-17:focus, -.emotion-17:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-17:hover, -.emotion-17:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-17:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-18 { - overflow: hidden; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 5px; -} - -.emotion-19 { - display: grid; - grid-auto-flow: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - width: 100%; - pointer-events: none; - position: relative; - z-index: 0; - padding: 0 11px; - gap: 6px; -} - -.emotion-20 { - color: #889397; - height: 16px; - width: 16px; - justify-self: right; -} - -.emotion-21 { - box-shadow: none; - display: grid; - grid-area: results; - grid-auto-rows: calc(152px + 16px); - height: 100%; - width: 100%; -} - -.emotion-21:hover>.e1yoi6mj7 { - opacity: 0.2; - -webkit-transition: opacity 150ms ease-in; - transition: opacity 150ms ease-in; -} - -.emotion-21:hover>.e1yoi6mj7:hover { - opacity: 1; -} - -.emotion-21:not(:hover)>.e1yoi6mj7 { - opacity: 1; - -webkit-transition: opacity 150ms ease-in; - transition: opacity 150ms ease-in; -} - -.emotion-23 { - background-color: #fff; - box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); - height: 152px; - position: relative; - place-self: center; - width: 100%; - box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important; - color: red; - box-sizing: border-box; - padding: 15px; - display: grid; - grid-template-rows: 1fr 2fr 1fr; -} - -.emotion-23>div { - padding: 24px; -} - -.emotion-23:hover, -.emotion-23:focus { - color: unset; - -webkit-text-decoration: unset; - text-decoration: unset; -} - -.emotion-23:hover>div, -.emotion-23:focus>div { - background-color: unset!important; -} - -.emotion-23:before { - content: ''; - position: absolute; - top: calc(-16px / 2); - left: 0; - right: 0; - bottom: calc(-16px / 2); - background-color: transparent; -} - -.emotion-23 * { - padding: 2px; - height: 15px!important; - margin-right: 10px!important; -} - -.emotion-43 { - grid-area: filters; -} - -@media only screen and (max-width: 767px) { - .emotion-43 { - display: none; - } -} - -.emotion-45 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #3D4F58; - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - white-space: nowrap; - font-family: Akzidenz; - font-weight: bolder; - letter-spacing: 0.5px; - margin: 0; - margin-bottom: 16px; -} - -
-
-

- Search Results -

- -
-
- 0 RESULTS -
-
-
- -
-
-
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
-
-

- Specify your search -

- - - ‌ - -
- - ‌ - -
- -
-
- -`; - -exports[`Search Results Page renders loading images before returning nonempty results 1`] = ` - - .emotion-0 { - -webkit-column-gap: 46px; - column-gap: 46px; - display: grid; - grid-template-areas: 'header .' 'results filters'; - grid-template-columns: auto 173px; - margin: 32px 108px 64px 32px; - max-width: 1150px; - row-gap: 32px; -} - -@media only screen and (max-width: 1440px) { - .emotion-0 { - margin: 32px 40px 64px 40px; - } -} - -@media only screen and (max-width: 767px) { - .emotion-0 { - -webkit-column-gap: 0; - column-gap: 0; - grid-template-areas: 'header' 'results'; - grid-template-columns: auto; - margin: 32px 24px 64px 24px; - } -} - -.emotion-2 { - grid-area: header; -} - -.emotion-4 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-weight: 400; - font-size: 48px; - line-height: 62px; - font-family: 'MongoDB Value Serif','Times New Roman',serif; - color: #00684A; -} - -.emotion-5 { - outline: none; -} - -.emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; -} - -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.emotion-14 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - line-height: 20px; - letter-spacing: 0.4px; - color: #001E2B; -} - -.emotion-15 { - display: none; - margin-top: 16px; -} - -@media only screen and (max-width: 767px) { - .emotion-15 { - display: block; - } -} - -.emotion-17 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - padding: 0; - margin: 0; - background-color: transparent; - border: 1px solid transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-transition: all 150ms ease-in-out; - transition: all 150ms ease-in-out; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - z-index: 0; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - border-radius: 6px; - background-color: #F9FBFA; - border-color: #889397; - color: #001E2B; - font-size: 13px; - line-height: 20px; - font-weight: 500; - height: 36px; -} - -.emotion-17:focus { - outline: none; -} - -.emotion-17[disabled], -.emotion-17:disabled { - pointer-events: none; -} - -.emotion-17:active, -.emotion-17:focus, -.emotion-17:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-17:hover, -.emotion-17:active { - color: #001E2B; - background-color: #FFFFFF; - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-17:focus { - background-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-18 { - overflow: hidden; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 5px; -} - -.emotion-19 { - display: grid; - grid-auto-flow: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - width: 100%; - pointer-events: none; - position: relative; - z-index: 0; - padding: 0 11px; - gap: 6px; -} - -.emotion-20 { - color: #889397; - height: 16px; - width: 16px; - justify-self: right; -} - -.emotion-21 { - box-shadow: none; - display: grid; - grid-area: results; - grid-auto-rows: calc(152px + 16px); - height: 100%; - width: 100%; -} - -.emotion-21:hover>.e1yoi6mj7 { - opacity: 0.2; - -webkit-transition: opacity 150ms ease-in; - transition: opacity 150ms ease-in; -} - -.emotion-21:hover>.e1yoi6mj7:hover { - opacity: 1; -} - -.emotion-21:not(:hover)>.e1yoi6mj7 { - opacity: 1; - -webkit-transition: opacity 150ms ease-in; - transition: opacity 150ms ease-in; -} - -.emotion-23 { - background-color: #fff; - box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); - height: 152px; - position: relative; - place-self: center; - width: 100%; - box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important; - color: red; - box-sizing: border-box; - padding: 15px; - display: grid; - grid-template-rows: 1fr 2fr 1fr; -} - -.emotion-23>div { - padding: 24px; -} - -.emotion-23:hover, -.emotion-23:focus { - color: unset; - -webkit-text-decoration: unset; - text-decoration: unset; -} - -.emotion-23:hover>div, -.emotion-23:focus>div { - background-color: unset!important; -} - -.emotion-23:before { - content: ''; - position: absolute; - top: calc(-16px / 2); - left: 0; - right: 0; - bottom: calc(-16px / 2); - background-color: transparent; -} - -.emotion-23 * { - padding: 2px; - height: 15px!important; - margin-right: 10px!important; -} - -.emotion-43 { - grid-area: filters; -} - -@media only screen and (max-width: 767px) { - .emotion-43 { - display: none; - } -} - -.emotion-45 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #3D4F58; - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - white-space: nowrap; - font-family: Akzidenz; - font-weight: bolder; - letter-spacing: 0.5px; - margin: 0; - margin-bottom: 16px; -} - -
-
-

- Search Results -

- -
-
- 0 RESULTS -
-
-
- -
-
-
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
- - - ‌ - -
- - - - ‌ - -
- - - - ‌ - - - ‌ - - -
-
-
-

- Specify your search -

- - - ‌ - -
- - ‌ - -
- -
-
- -`; - -exports[`Search Results Page renders results from a given search term query param and displays category and version tags 1`] = ` - - .emotion-0 { - -webkit-column-gap: 46px; - column-gap: 46px; - display: grid; - grid-template-areas: 'header .' 'results filters'; - grid-template-columns: auto 173px; - margin: 32px 108px 64px 32px; - max-width: 1150px; - row-gap: 32px; -} - -@media only screen and (max-width: 1440px) { - .emotion-0 { - margin: 32px 40px 64px 40px; - } -} - -@media only screen and (max-width: 767px) { - .emotion-0 { - -webkit-column-gap: 0; - column-gap: 0; - grid-template-areas: 'header' 'results'; - grid-template-columns: auto; - margin: 32px 24px 64px 24px; - } -} - -.emotion-2 { - grid-area: header; -} - -.emotion-4 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-weight: 400; - font-size: 48px; - line-height: 62px; - font-family: 'MongoDB Value Serif','Times New Roman',serif; - color: #00684A; -} - -.emotion-5 { - outline: none; -} - -.emotion-6 { - position: relative; - display: grid; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - justify-items: center; - border: 1px solid; - border-radius: 6px; - z-index: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: border-color,box-shadow; - font-size: 13px; - line-height: 20px; - height: 36px; - grid-template-columns: 36px 1fr; - grid-auto-columns: 36px; - color: #001E2B; - background: #FFFFFF; - border-color: #889397; -} - -.emotion-6:hover:not(:disabled):not(:focus-within), -.emotion-6:active:not(:disabled):not(:focus-within) { - box-shadow: 0 0 0 3px #E8EDEB; -} - -.emotion-7 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #5C6C75; - left: 12px; -} - -.emotion-8 { - font-size: inherit; - line-height: inherit; - color: inherit; - background-color: inherit; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - width: 100%; - height: 1.5em; - font-weight: 400; - z-index: 1; - outline: none; - border: none; - padding: 0; -} - -.emotion-8:disabled { - cursor: not-allowed; -} - -.emotion-8:disabled:hover, -.emotion-8:disabled:active { - box-shadow: none; -} - -.emotion-8::-webkit-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-moz-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8:-ms-input-placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::placeholder { - font-size: inherit; - line-height: inherit; -} - -.emotion-8::-ms-clear, -.emotion-8::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.emotion-8::-webkit-search-decoration, -.emotion-8::-webkit-search-cancel-button, -.emotion-8::-webkit-search-results-button, -.emotion-8::-webkit-search-results-decoration { - display: none; -} - -.emotion-8:-webkit-autofill { - color: inherit; - background: transparent; - border: none; - -webkit-text-fill-color: inherit; -} - -.emotion-8:-webkit-autofill:not(:disabled) { - box-shadow: 0 0 0 100px #FFFFFF inset; -} - -.emotion-8:-webkit-autofill:not(:disabled):focus { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #0498EC; -} - -.emotion-8:-webkit-autofill:not(:disabled):hover:not(:focus) { - box-shadow: 0 0 0 100px #FFFFFF inset,0 0 0 3px #E8EDEB; -} - -.emotion-8::-webkit-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::-moz-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:-ms-input-placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8::placeholder { - color: #889397; - font-weight: 400; -} - -.emotion-8:disabled::-webkit-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::-moz-placeholder { - color: #889397; -} - -.emotion-8:disabled:-ms-input-placeholder { - color: #889397; -} - -.emotion-8:disabled::placeholder { - color: #889397; -} - -.emotion-8:disabled:-webkit-autofill, -.emotion-8:disabled:-webkit-autofill:hover, -.emotion-8:disabled:-webkit-autofill:focus { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - border: 1px solid #889397; - -webkit-text-fill-color: #889397; - box-shadow: 0 0 0 100px #E8EDEB inset; -} - -.emotion-9 { - border: none; - -webkit-appearance: unset; - padding: unset; - display: inline-block; - border-radius: 100px; - position: relative; - cursor: pointer; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: 150ms ease-in-out; - transition: 150ms ease-in-out; - transition-property: color,box-shadow; - background-color: rgba(255, 255, 255, 0); - height: 28px; - width: 28px; - color: #889397; - height: 28px; - width: 28px; -} - -.emotion-9:before { - content: ''; - -webkit-transition: 150ms all ease-in-out; - transition: 150ms all ease-in-out; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 100%; - opacity: 0; - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.emotion-9:active:before, -.emotion-9:hover:before, -.emotion-9:focus:before { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.emotion-9:focus { - outline: none; -} - -.emotion-9:active, -.emotion-9:hover { - color: #001E2B; -} - -.emotion-9:active:before, -.emotion-9:hover:before { - background-color: #E8EDEB; -} - -.emotion-9:focus-visible { - color: #001E2B; - box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; -} - -.emotion-9:focus-visible:before { - background-color: #E8EDEB; + margin-top: 8px; } -.emotion-10 { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.emotion-9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; + border-radius: 4px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 8px; + background-color: #E3FCF7; + border: 1px solid #C0FAE6; + color: #00684A; + cursor: pointer; + height: 26px; + font-size: 13px; + margin-right: 8px; } .emotion-11 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 4px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 8px; + background-color: #E1F7FF; + border: 1px solid #C3E7FE; + color: #1254B7; + cursor: pointer; + height: 26px; + font-size: 13px; + margin-right: 8px; } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.emotion-14 { - margin: unset; - font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - line-height: 20px; - letter-spacing: 0.4px; - color: #001E2B; -} - -.emotion-15 { display: none; margin-top: 16px; } @media only screen and (max-width: 767px) { - .emotion-15 { + .emotion-12 { display: block; } } -.emotion-17 { +.emotion-14 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -5563,35 +134,35 @@ exports[`Search Results Page renders results from a given search term query para height: 36px; } -.emotion-17:focus { +.emotion-14:focus { outline: none; } -.emotion-17[disabled], -.emotion-17:disabled { +.emotion-14[disabled], +.emotion-14:disabled { pointer-events: none; } -.emotion-17:active, -.emotion-17:focus, -.emotion-17:hover { +.emotion-14:active, +.emotion-14:focus, +.emotion-14:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-17:hover, -.emotion-17:active { +.emotion-14:hover, +.emotion-14:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-17:focus { +.emotion-14:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-18 { +.emotion-15 { overflow: hidden; position: absolute; top: 0; @@ -5601,7 +172,7 @@ exports[`Search Results Page renders results from a given search term query para border-radius: 5px; } -.emotion-19 { +.emotion-16 { display: grid; grid-auto-flow: column; -webkit-box-pack: center; @@ -5621,14 +192,14 @@ exports[`Search Results Page renders results from a given search term query para gap: 6px; } -.emotion-20 { +.emotion-17 { color: #889397; height: 16px; width: 16px; justify-self: right; } -.emotion-21 { +.emotion-18 { box-shadow: none; display: grid; grid-area: results; @@ -5637,67 +208,67 @@ exports[`Search Results Page renders results from a given search term query para width: 100%; } -.emotion-21:hover>.emotion-23 { +.emotion-18:hover>.emotion-20 { opacity: 0.2; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-21:hover>.emotion-23:hover { +.emotion-18:hover>.emotion-20:hover { opacity: 1; } -.emotion-21:not(:hover)>.emotion-23 { +.emotion-18:not(:hover)>.emotion-20 { opacity: 1; -webkit-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } -.emotion-24 { +.emotion-21 { color: #494747; height: 100%; -webkit-text-decoration: none; text-decoration: none; border-radius: 24px; - background-color: #fff; box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); + background-color: #fff; height: 152px; position: relative; place-self: center; width: 100%; } -.emotion-24:hover, -.emotion-24:focus { +.emotion-21:hover, +.emotion-21:focus { color: #494747; -webkit-text-decoration: none; text-decoration: none; } -.emotion-24:hover .emotion-27, -.emotion-24:focus .emotion-27 { +.emotion-21:hover .emotion-24, +.emotion-21:focus .emotion-24 { background-color: rgba(231, 238, 236, 0.4); -webkit-transition: background-color 150ms ease-in; transition: background-color 150ms ease-in; } -.emotion-24>div { +.emotion-21>div { padding: 24px; } -.emotion-24:hover, -.emotion-24:focus { +.emotion-21:hover, +.emotion-21:focus { color: unset; -webkit-text-decoration: unset; text-decoration: unset; } -.emotion-24:hover>div, -.emotion-24:focus>div { +.emotion-21:hover>div, +.emotion-21:focus>div { background-color: unset!important; } -.emotion-24:before { +.emotion-21:before { content: ''; position: absolute; top: calc(-16px / 2); @@ -5707,26 +278,12 @@ exports[`Search Results Page renders results from a given search term query para background-color: transparent; } -.emotion-26 { +.emotion-23 { height: 100%; - position: relative; -} - -@media only screen and (max-width: 480px) { - .emotion-26 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; - } } -.emotion-28 { - font-family: Akzidenz; +.emotion-25 { + font-family: 'Euclid Circular A'; font-size: 13px; line-height: 24px; letter-spacing: 0.5px; @@ -5739,28 +296,19 @@ exports[`Search Results Page renders results from a given search term query para overflow: hidden; font-size: 16px; line-height: 24px; -} - -@media not all and (max-width: 480px) { - .emotion-28 { - font-weight: 600; - } + font-weight: 600; + position: relative; } @media only screen and (max-width: 480px) { - .emotion-28 { + .emotion-25 { font-size: 16px; line-height: 24px; - } - - @media not all and (max-width: 480px) { - .emotion-28 { - font-weight: 600; - } + font-weight: 600; } } -.emotion-30 { +.emotion-27 { font-size: 13px; line-height: 20px; margin-bottom: 16px; @@ -5771,7 +319,7 @@ exports[`Search Results Page renders results from a given search term query para min-height: 20px; } -.emotion-32 { +.emotion-29 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -5781,71 +329,27 @@ exports[`Search Results Page renders results from a given search term query para font-weight: 400; } -.emotion-32 strong, -.emotion-32 b { +.emotion-29 strong, +.emotion-29 b { font-weight: 700; } -.emotion-33 { +.emotion-30 { bottom: 0; margin-bottom: 24px; } .emotion-36 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 4px; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - padding: 4px 8px; - background-color: #E3FCF7; - border: 1px solid #C0FAE6; - color: #00684A; - cursor: pointer; - height: 26px; - padding: 4px 11px 4px 11px; - border-radius: 11px; - font-size: 12px; - margin-right: 8px; -} - -.emotion-38 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 4px; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - padding: 4px 8px; - background-color: #E1F7FF; - border: 1px solid #C3E7FE; - color: #1254B7; - cursor: pointer; - height: 26px; - padding: 4px 11px 4px 11px; - border-radius: 11px; - font-size: 12px; - margin-right: 8px; -} - -.emotion-39 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-39 { + .emotion-36 { display: none; } } -.emotion-41 { +.emotion-38 { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -5861,12 +365,12 @@ exports[`Search Results Page renders results from a given search term query para margin-bottom: 16px; } -.emotion-43 { +.emotion-40 { grid-area: filters; } @media only screen and (max-width: 767px) { - .emotion-43 { + .emotion-40 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5877,34 +381,34 @@ exports[`Search Results Page renders results from a given search term query para flex-direction: row; } - .emotion-43>div { + .emotion-40>div { margin-bottom: 0; margin-right: 8px; } } @media only screen and (max-width: 480px) { - .emotion-43 { + .emotion-40 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } - .emotion-43>div { + .emotion-40>div { width: 100%; } - .emotion-43>div:first-of-type { + .emotion-40>div:first-of-type { margin-bottom: 8px; margin-right: 0; } - .emotion-43>div>div { + .emotion-40>div>div { width: 100%; } } -.emotion-45 { +.emotion-42 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5919,25 +423,25 @@ exports[`Search Results Page renders results from a given search term query para margin-bottom: 16px; } -.emotion-47 { +.emotion-44 { width: 175px; } -.emotion-49 { +.emotion-46 { position: relative; } @media only screen and (max-width: 1024px) { - .emotion-49 label, - .emotion-49 p, - .emotion-49 button, - .emotion-49 div, - .emotion-49 span { + .emotion-46 label, + .emotion-46 p, + .emotion-46 button, + .emotion-46 div, + .emotion-46 span { font-size: 13px; } } -.emotion-50 { +.emotion-47 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -5947,22 +451,22 @@ exports[`Search Results Page renders results from a given search term query para flex-direction: column; } -.emotion-50>label+button, -.emotion-50>p+button { +.emotion-47>label+button, +.emotion-47>p+button { margin-top: 3px; } @media only screen and (max-width: 1024px) { - .emotion-50 label, - .emotion-50 p, - .emotion-50 button, - .emotion-50 div, - .emotion-50 span { + .emotion-47 label, + .emotion-47 p, + .emotion-47 button, + .emotion-47 div, + .emotion-47 span { font-size: 13px; } } -.emotion-51 { +.emotion-48 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -6001,35 +505,35 @@ exports[`Search Results Page renders results from a given search term query para font-size: 13px; } -.emotion-51:focus { +.emotion-48:focus { outline: none; } -.emotion-51[disabled], -.emotion-51:disabled { +.emotion-48[disabled], +.emotion-48:disabled { pointer-events: none; } -.emotion-51:active, -.emotion-51:focus, -.emotion-51:hover { +.emotion-48:active, +.emotion-48:focus, +.emotion-48:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-51:hover, -.emotion-51:active { +.emotion-48:hover, +.emotion-48:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-51:focus { +.emotion-48:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-51>*:last-child { +.emotion-48>*:last-child { grid-template-columns: 1fr 16px; -webkit-box-pack: start; -ms-flex-pack: start; @@ -6037,33 +541,33 @@ exports[`Search Results Page renders results from a given search term query para justify-content: flex-start; } -.emotion-51>*:last-child>svg { +.emotion-48>*:last-child>svg { justify-self: right; width: 16px; height: 16px; } -.emotion-51>*:last-child>svg { +.emotion-48>*:last-child>svg { color: #3D4F58; } -.emotion-51>*:last-child { +.emotion-48>*:last-child { padding: 0 4px 0 12px; } -.emotion-51:focus { +.emotion-48:focus { box-shadow: 0 0 0 3px #0498EC; border-color: rgba(255, 255, 255, 0); } @media only screen and (max-width: 1024px) { - .emotion-51 { + .emotion-48 { height: 36px; font-size: 16px; } } -.emotion-54 { +.emotion-51 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6083,14 +587,14 @@ exports[`Search Results Page renders results from a given search term query para overflow: hidden; } -.emotion-55 { +.emotion-52 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } -.emotion-56 { +.emotion-53 { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -6100,7 +604,7 @@ exports[`Search Results Page renders results from a given search term query para justify-self: left; } -.emotion-63 { +.emotion-60 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -6139,42 +643,42 @@ exports[`Search Results Page renders results from a given search term query para font-size: 13px; } -.emotion-63:focus { +.emotion-60:focus { outline: none; } -.emotion-63[disabled], -.emotion-63:disabled { +.emotion-60[disabled], +.emotion-60:disabled { pointer-events: none; } -.emotion-63:active, -.emotion-63:focus, -.emotion-63:hover { +.emotion-60:active, +.emotion-60:focus, +.emotion-60:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-63:hover, -.emotion-63:active { +.emotion-60:hover, +.emotion-60:active { color: #001E2B; background-color: #FFFFFF; box-shadow: 0 0 0 3px #E8EDEB; } -.emotion-63, -.emotion-63:hover { +.emotion-60, +.emotion-60:hover { background-color: #E8EDEB; border-color: #C1C7C6; color: #889397; cursor: not-allowed; } -.emotion-63:focus { +.emotion-60:focus { box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; } -.emotion-63>*:last-child { +.emotion-60>*:last-child { grid-template-columns: 1fr 16px; -webkit-box-pack: start; -ms-flex-pack: start; @@ -6182,46 +686,46 @@ exports[`Search Results Page renders results from a given search term query para justify-content: flex-start; } -.emotion-63>*:last-child>svg { +.emotion-60>*:last-child>svg { justify-self: right; width: 16px; height: 16px; } -.emotion-63>*:last-child>svg { +.emotion-60>*:last-child>svg { color: #3D4F58; } -.emotion-63>*:last-child { +.emotion-60>*:last-child { padding: 0 4px 0 12px; } -.emotion-63:focus { +.emotion-60:focus { box-shadow: 0 0 0 3px #0498EC; border-color: rgba(255, 255, 255, 0); } -.emotion-63:disabled { +.emotion-60:disabled { cursor: not-allowed; pointer-events: unset; box-shadow: unset; } -.emotion-63:disabled:active { +.emotion-60:disabled:active { pointer-events: none; } -.emotion-63:disabled { +.emotion-60:disabled { background-color: #E8EDEB; color: #889397; } -.emotion-63:disabled>*:last-child>svg { +.emotion-60:disabled>*:last-child>svg { color: #889397; } @media only screen and (max-width: 1024px) { - .emotion-63 { + .emotion-60 { height: 36px; font-size: 16px; } @@ -6271,34 +775,23 @@ exports[`Search Results Page renders results from a given search term query para
-
- 1 RESULTS -
-
-
- {searchResults?.length ? ( + {searchResults?.length && searchFinished ? ( <> {searchResults.map(({ title, preview, url, searchProperty }, index) => ( From 01931ca21804edcc50bcd810f9354613d77e2c7e Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 11:54:24 -0400 Subject: [PATCH 34/47] working with feature flag --- src/components/SearchResults/SearchResults.js | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index f2901c055..8841d8ae5 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -292,23 +292,22 @@ const SearchResults = () => { setFirstRenderComplete(true); const { q, searchProperty } = queryString.parse(search); if (q === '' && !firstRenderComplete) setFirstLoadEmpty(true); - if (q === '') { - console.log('FINISHED: if search is empty'); - setSearchFinished(true); - } + if (q === '') setSearchFinished(true); setSearchTerm(q); setSearchField(q); setSearchFilter(searchProperty); }, [search, firstRenderComplete]); + // add loading skeleton when new filter selected and loading results useEffect(() => { - setSearchFinished(false); - }, [searchFilter]); + newSearchInput && setSearchFinished(false); + }, [searchFilter, newSearchInput]); // Update results on a new search query or filters // When the filter is changed, find the corresponding property to display useEffect(() => { if (!searchTerm || !Object.keys(searchPropertyMapping).length) { + if (!searchTerm && firstRenderComplete) setSearchFinished(true); return; } const fetchNewSearchResults = async () => { @@ -320,7 +319,7 @@ const SearchResults = () => { setSearchFinished(true); }; fetchNewSearchResults(); - }, [searchFilter, searchPropertyMapping, searchTerm]); + }, [searchFilter, searchPropertyMapping, searchTerm, firstRenderComplete]); return ( <> @@ -358,10 +357,7 @@ const SearchResults = () => { const newValue = event.target[0]?.value; if (newValue === searchTerm) return; setSearchResults([]); - if (!!newValue) { - console.log('FINISHED: got new value'); - setSearchFinished(false); - } + if (!!newValue) setSearchFinished(false); setSearchTerm(event.target[0].value); setFirstLoadEmpty(false); }} @@ -500,8 +496,9 @@ const SearchResults = () => { const newValue = event.target[0]?.value; if (newValue === searchTerm) return; setSearchResults([]); - setSearchFinished(false); + if (!!newValue) setSearchFinished(false); setSearchTerm(event.target[0].value); + setFirstLoadEmpty(false); }} onChange={(e) => { setSearchField(e.target.value); @@ -510,7 +507,7 @@ const SearchResults = () => { )} - {!searchResults?.length && ( + {!searchResults?.length && searchFinished && ( {firstRenderComplete ? : } From 74666767c34fb129b159966348230f52d362307c Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 13:05:48 -0400 Subject: [PATCH 35/47] changed naming of variable --- src/components/SearchResults/SearchResult.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index e4fd2b1d9..da661f973 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -108,7 +108,7 @@ const highlightSearchTerm = (text, searchTerm) => (result) => `${result}` ); -const attrFeatureJson = newSearchInput +const spanAllowedStyles = newSearchInput ? { 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], 'border-radius': [new RegExp(`^3px$`)], @@ -123,7 +123,7 @@ const sanitizePreviewHtml = (text) => allowedTags: ['span'], allowedAttributes: { span: ['style'] }, allowedStyles: { - span: attrFeatureJson, + span: spanAllowedStyles, }, }); From f9624df7f7dc631304073469506b2f98c48f10e7 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 14:37:55 -0400 Subject: [PATCH 36/47] fixing empty search on init load --- src/components/SearchResults/SearchResults.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index cb5799c4d..e8dc39e79 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -291,8 +291,8 @@ const SearchResults = () => { useEffect(() => { setFirstRenderComplete(true); const { q, searchProperty } = queryString.parse(search); - if (q === '' && !firstRenderComplete) setFirstLoadEmpty(true); - if (q === '') setSearchFinished(true); + if ((q === '' || q === undefined) && !firstRenderComplete) setFirstLoadEmpty(true); + if (q === '' || q === undefined) setSearchFinished(true); setSearchTerm(q); setSearchField(q); setSearchFilter(searchProperty); From ac3ca898d41167ac4caa18686082109c12b53cb1 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 14:58:29 -0400 Subject: [PATCH 37/47] fixing color variable --- src/components/SearchResults/EmptyResults.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchResults/EmptyResults.js b/src/components/SearchResults/EmptyResults.js index 5e9fdb1bf..0d4c1fb58 100644 --- a/src/components/SearchResults/EmptyResults.js +++ b/src/components/SearchResults/EmptyResults.js @@ -70,7 +70,7 @@ const NoResultText = styled('div')` `; const SupportingText2 = styled('p')` - color: var(--gray-dark-1-new, #5c6c75); + color: ${palette.gray.dark1}; font-size: 13px; font-family: Euclid Circular A; font-style: normal; From 928f0e7cb9ca837627892ac9cb99dbaff3e67b8b Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 15:44:04 -0400 Subject: [PATCH 38/47] adding back functionality --- src/components/SearchResults/SearchResults.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index a2e4ee731..f25471982 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -291,8 +291,8 @@ const SearchResults = () => { useEffect(() => { setFirstRenderComplete(true); const { q, searchProperty } = queryString.parse(search); - if (q === '' && !firstRenderComplete) setFirstLoadEmpty(true); - if (q === '') setSearchFinished(true); + if ((q === '' || q === undefined) && !firstRenderComplete) setFirstLoadEmpty(true); + if (q === '' || q === undefined) setSearchFinished(true); setSearchTerm(q); setSearchField(q); setSearchFilter(searchProperty); From 7df813e693f0bae4921bbb1b1aca12c857063ea3 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 15:45:31 -0400 Subject: [PATCH 39/47] getting rid of double var declaration --- src/components/SearchResults/SearchResults.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index e8dc39e79..77a6d0ccb 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -261,7 +261,6 @@ const SearchResults = () => { const [firstLoadEmpty, setFirstLoadEmpty] = useState(false); const { filters, searchPropertyMapping } = useMarianManifests(); const specifySearchText = 'Specify your search'; - const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; const resetFilters = useCallback(() => { setSelectedCategory(null); From 0252740e129b942e2b043307b7fcdc301425497a Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Mon, 17 Jul 2023 16:04:05 -0400 Subject: [PATCH 40/47] getting rid of the double init variable --- src/components/SearchResults/SearchResults.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index f25471982..5f452c0f5 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -261,7 +261,6 @@ const SearchResults = () => { const [firstLoadEmpty, setFirstLoadEmpty] = useState(false); const { filters, searchPropertyMapping } = useMarianManifests(); const specifySearchText = 'Specify your search'; - const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true'; const resetFilters = useCallback(() => { setSelectedCategory(null); @@ -301,7 +300,7 @@ const SearchResults = () => { // add loading skeleton when new filter selected and loading results useEffect(() => { newSearchInput && setSearchFinished(false); - }, [searchFilter, newSearchInput]); + }, [searchFilter]); // Update results on a new search query or filters // When the filter is changed, find the corresponding property to display From 1052efe73396469e2036d01e13894b0aeb77b1cc Mon Sep 17 00:00:00 2001 From: Seung Park Date: Tue, 18 Jul 2023 13:14:03 -0400 Subject: [PATCH 41/47] refactor ternary operators. remove firstload state --- src/components/SearchResults/SearchResults.js | 246 ++++++++++-------- 1 file changed, 134 insertions(+), 112 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 77a6d0ccb..0e7dc9cdb 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -258,7 +258,6 @@ const SearchResults = () => { const [selectedCategory, setSelectedCategory] = useState(null); const [selectedVersion, setSelectedVersion] = useState(null); const [showMobileFilters, setShowMobileFilters] = useState(false); - const [firstLoadEmpty, setFirstLoadEmpty] = useState(false); const { filters, searchPropertyMapping } = useMarianManifests(); const specifySearchText = 'Specify your search'; @@ -290,7 +289,7 @@ const SearchResults = () => { useEffect(() => { setFirstRenderComplete(true); const { q, searchProperty } = queryString.parse(search); - if ((q === '' || q === undefined) && !firstRenderComplete) setFirstLoadEmpty(true); + // if ((q === '' || q === undefined) && !firstRenderComplete) setFirstLoadEmpty(true); if (q === '' || q === undefined) setSearchFinished(true); setSearchTerm(q); setSearchField(q); @@ -337,59 +336,130 @@ const SearchResults = () => { setShowMobileFilters, }} > - {!(!newSearchInput && !searchTerm) ? ( + {newSearchInput && ( + {/* new header for search bar */} - {newSearchInput ? ( - <> -

Search Results

- { - const newValue = event.target[0]?.value; - if (newValue === searchTerm) return; - setSearchResults([]); - if (!!newValue) setSearchFinished(false); - setSearchTerm(event.target[0].value); - setFirstLoadEmpty(false); - }} - onChange={(e) => { - setSearchField(e.target.value); - }} - /> - - - {searchResults?.length ? searchResults.length : '0'} RESULTS - - {!!searchFilter && ( - - {selectedCategory && ( - - {selectedCategory} - - - )} - {selectedVersion && {selectedVersion}} - +

Search Results

+ { + const newValue = event.target[0]?.value; + if (newValue === searchTerm || !newValue?.length) return; + setSearchResults([]); + if (!!newValue) setSearchFinished(false); + setSearchTerm(event.target[0].value); + // setFirstLoadEmpty(false); + }} + onChange={(e) => { + setSearchField(e.target.value); + }} + /> + + + {!!searchTerm && !!searchFinished && ( + <>{searchResults?.length ? searchResults.length : '0'} RESULTS + )} + + {!!searchFilter && ( + + {selectedCategory && ( + + {selectedCategory} + + )} - - - ) : ( - <> - Search results for "{searchTerm}" - {!!searchFilter && ( - - {selectedCategory && ( - - {selectedCategory} - - - )} - {selectedVersion && {selectedVersion}} - + {selectedVersion && {selectedVersion}} + + )} + + + + {/* loading state for new search input */} + {!!searchTerm && !searchFinished && ( + <> + + {[...Array(10)].map((_, index) => ( + + + + + + ))} + + + {specifySearchText} + + + + )} + + {/* empty search results */} + {!!searchTerm && !!searchFinished && !searchResults.length && ( + <> + + + + + )} + + {/* search results for new search page */} + {!!searchTerm && !!searchFinished && !!searchResults.length && ( + <> + + {searchResults.map(({ title, preview, url, searchProperty }, index) => ( + + reportAnalytics('SearchSelection', { areaFrom: 'ResultsPage', rank: index, selectionUrl: url }) + } + title={title} + preview={escapeHtml(preview)} + url={url} + useLargeTitle + searchProperty={searchProperty?.[0]} + /> + ))} + + + {specifySearchText} + + + + )} + + )} + + {/* old search page */} + {!newSearchInput && !searchTerm && ( + <> + {!searchResults?.length && ( + + {firstRenderComplete ? : } + + )} + + )} + {!newSearchInput && !!searchTerm && ( + + + Search results for "{searchTerm}" + {!!searchFilter && ( + + {selectedCategory && ( + + {selectedCategory} + + )} - + {selectedVersion && {selectedVersion}} + )} + {/* loading state for new search input */} @@ -454,6 +459,7 @@ const SearchResults = () => { )} + {showMobileFilters && isTabletOrMobile && } )} From 39d6f51265d80bc51b298128d17374807227d0a4 Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Wed, 19 Jul 2023 14:11:35 -0400 Subject: [PATCH 46/47] fixing loading skeleton --- src/components/SearchResults/SearchResults.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index eaef4db10..d0e37a04e 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -301,7 +301,7 @@ const SearchResults = () => { // add loading skeleton when new filter selected and loading results useEffect(() => { - newSearchInput && setSearchFinished(false); + if (newSearchInput) setSearchFinished(false); }, [searchFilter]); // Update results on a new search query or filters @@ -402,7 +402,7 @@ const SearchResults = () => { {specifySearchText} - + )} From 7b85d7cc31cc090c7ccd5970bd42e2b7c38d78fa Mon Sep 17 00:00:00 2001 From: Bianca Laube Date: Wed, 19 Jul 2023 15:54:55 -0400 Subject: [PATCH 47/47] getting rid of duplicate search filter --- src/components/SearchResults/SearchResults.js | 23 ++++++------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index d0e37a04e..417e1bf83 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -300,10 +300,6 @@ const SearchResults = () => { }, [search, firstRenderComplete]); // add loading skeleton when new filter selected and loading results - useEffect(() => { - if (newSearchInput) setSearchFinished(false); - }, [searchFilter]); - // Update results on a new search query or filters // When the filter is changed, find the corresponding property to display useEffect(() => { @@ -311,6 +307,7 @@ const SearchResults = () => { if (!searchTerm && firstRenderComplete) setSearchFinished(true); return; } + if (newSearchInput) setSearchFinished(false); const fetchNewSearchResults = async () => { const result = await fetch(searchParamsToURL(searchTerm, searchFilter)); const resultJson = await result.json(); @@ -400,10 +397,6 @@ const SearchResults = () => { ))} - - {specifySearchText} - - )} @@ -426,10 +419,6 @@ const SearchResults = () => { > - - {specifySearchText} - - )} @@ -453,12 +442,14 @@ const SearchResults = () => { /> ))} - - {specifySearchText} - - )} + {!firstLoadEmpty && ( + + {specifySearchText} + + + )} {showMobileFilters && isTabletOrMobile && } )}