diff --git a/Gemfile.lock b/Gemfile.lock index 884e60c2f..810cb0439 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - ably-ui (7.10.0) + ably-ui (7.10.0.dev.caff705) view_component (>= 2.33, < 2.50) GEM diff --git a/cypress/integration/core/meganav/behaviour.spec.js b/cypress/integration/core/meganav/behaviour.spec.js index a7d30fe98..a46ecb7bd 100644 --- a/cypress/integration/core/meganav/behaviour.spec.js +++ b/cypress/integration/core/meganav/behaviour.spec.js @@ -3,6 +3,11 @@ import { PLATFORM_PANEL_OPEN_CONTROL, WHY_ABLY_PANEL, WHY_ABLY_PANEL_OPEN_CONTROL, + SEARCH_PANEL, + SEARCH_PANEL_OPEN_CONTROL, + SEARCH_PANEL_MOBILE_INPUT, + SEARCH_PANEL_INPUT, + SEARCH_PANEL_MOBILE_CLEAR, MOBILE_DROPDOWN, MOBILE_DROPDOWN_CONTROL, MOBILE_PLATFORM_PANEL, @@ -53,6 +58,36 @@ describe("Opening panels on desktop", () => { cy.get(OUTSIDE_MEGANAV).trigger("click", { force: true }); cy.get(PLATFORM_PANEL).should("not.be.visible"); }); + + it("toggle the search panel when a control is clicked", () => { + cy.get(SEARCH_PANEL).should("not.be.visible"); + + cy.get(SEARCH_PANEL_OPEN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL).should("be.visible"); + + cy.get(SEARCH_PANEL_OPEN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL).should("not.be.visible"); + }); + + it("do not display other panels on hover when search panel is open", () => { + cy.get(SEARCH_PANEL_OPEN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL).should("be.visible"); + + cy.get(PLATFORM_PANEL_OPEN_CONTROL).trigger("mouseenter"); + cy.get(PLATFORM_PANEL).should("not.be.visible"); + }); + + it("should focus on input when search panel is opened", () => { + cy.get(SEARCH_PANEL_OPEN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL).should("be.visible"); + cy.get(SEARCH_PANEL_INPUT).then(($input) => { + const input = $input.get(0); + + cy.focused().should(($focused) => { + expect($focused[0]).to.eql(input); + }); + }); + }); }; beforeEach("set viewport", () => { @@ -97,6 +132,30 @@ describe("Opening panels on mobile", () => { cy.get(MOBILE_PLATFORM_PANEL_CLOSE_CONTROL).trigger("click"); cy.get(MOBILE_PLATFORM_PANEL).should("not.be.visible"); }); + + it("shows the search input and suggestions", () => { + cy.get(MOBILE_DROPDOWN_CONTROL).trigger("click"); + cy.get(MOBILE_DROPDOWN).should("be.visible"); + + cy.get(SEARCH_PANEL_MOBILE_INPUT).should("be.visible"); + cy.get(SEARCH_PANEL_MOBILE_INPUT).trigger("focus"); + cy.contains("Popular pages"); + }); + + it("shows the search input and the clear button after typing", () => { + cy.get(MOBILE_DROPDOWN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL_MOBILE_CLEAR).should("not.be.visible"); + cy.get(SEARCH_PANEL_MOBILE_INPUT).type("a"); + cy.get(SEARCH_PANEL_MOBILE_CLEAR).should("be.visible"); + }); + + it("should clear the input and not show clear after typing and clicking clear", () => { + cy.get(MOBILE_DROPDOWN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL_MOBILE_INPUT).type("a"); + cy.get(SEARCH_PANEL_MOBILE_CLEAR).trigger("click"); + cy.get(SEARCH_PANEL_MOBILE_CLEAR).should("not.be.visible"); + cy.get(SEARCH_PANEL_MOBILE_INPUT).should("not.have.value", "a"); + }); }; beforeEach("set viewport", () => { @@ -279,3 +338,71 @@ describe("Notice", () => { sharedNonDefaultsSpecs("/components/meganav?framwork=vw"); }); }); + +describe("Search", () => { + describe("mobile", () => { + const sharedSpecs = () => { + it("shows suggestions dropdown", () => { + cy.get(MOBILE_DROPDOWN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL_MOBILE_INPUT).trigger("focus"); + cy.get(SEARCH_PANEL_MOBILE_INPUT).type("a"); + cy.get("[data-id='meganav-search-autocomplete-list'] li") + .its("length") + .should("be.gte", 0); + }); + }; + + beforeEach("set viewport", () => { + cy.viewport("iphone-8"); + }); + + describe("react", () => { + beforeEach(() => { + cy.visit("/components/meganav"); + }); + + sharedSpecs(); + }); + + describe("vw", () => { + beforeEach(() => { + cy.visit("/components/meganav?framework=vw"); + }); + + sharedSpecs(); + }); + }); + + describe("desktop", () => { + const sharedSpecs = () => { + it("shows suggestions dropdown", () => { + cy.get(SEARCH_PANEL_OPEN_CONTROL).trigger("click"); + cy.get(SEARCH_PANEL_INPUT).trigger("focus"); + cy.get(SEARCH_PANEL_INPUT).type("a"); + cy.get("[data-id='meganav-search-autocomplete-list'] li") + .its("length") + .should("be.gte", 0); + }); + }; + + beforeEach("set viewport", () => { + cy.viewport("macbook-15"); + }); + + describe("react", () => { + beforeEach(() => { + cy.visit("/components/meganav"); + }); + + sharedSpecs(); + }); + + describe("vw", () => { + beforeEach(() => { + cy.visit("/components/meganav?framework=vw"); + }); + + sharedSpecs(); + }); + }); +}); diff --git a/cypress/integration/core/meganav/parity.spec.js b/cypress/integration/core/meganav/parity.spec.js index f3964ee41..b0b8abf79 100644 --- a/cypress/integration/core/meganav/parity.spec.js +++ b/cypress/integration/core/meganav/parity.spec.js @@ -75,9 +75,11 @@ describe("Panels", () => { cy.get('[data-id="meganav-control-mobile-dropdown"]').trigger( "click" ); - cy.get('[data-id="meganav-mobile-dropdown"]') - .contains(name) - .trigger("click"); + + cy.get('[data-id="meganav-mobile-panel-controls"]').within(() => { + cy.contains(name).trigger("click"); + }); + cy.get('[data-id="meganav-mobile-dropdown"]'); }, selector: `#${lowercaseName}-panel-mobile`, componentName: `${noSpacesName}PanelMobile`, diff --git a/cypress/integration/core/meganav/shared.js b/cypress/integration/core/meganav/shared.js index 1aa6eeb3d..7a23e517d 100644 --- a/cypress/integration/core/meganav/shared.js +++ b/cypress/integration/core/meganav/shared.js @@ -24,6 +24,15 @@ export const MOBILE_PLATFORM_PANEL_OPEN_CONTROL = export const MOBILE_PLATFORM_PANEL_CLOSE_CONTROL = "[data-id='meganav-control-mobile-panel-close'][aria-controls='platform-panel-mobile']"; +export const SEARCH_PANEL = "#panel-search"; +export const SEARCH_PANEL_OPEN_CONTROL = + "[data-id='meganav-control'][aria-controls='panel-search']"; +export const SEARCH_PANEL_INPUT = "[data-id='meganav-search-input']"; +export const SEARCH_PANEL_MOBILE_INPUT = + "[data-id='meganav-mobile-search-input']"; +export const SEARCH_PANEL_MOBILE_CLEAR = + "[data-id='meganav-search-input-clear']"; + export const OUTSIDE_MEGANAV = "body"; export const NOTICE = "[data-id='ui-notice']"; diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb index 48c1959f7..2d092ea32 100644 --- a/lib/ably_ui/version.rb +++ b/lib/ably_ui/version.rb @@ -1,3 +1,3 @@ module AblyUi - VERSION = '7.10.0' + VERSION = '7.10.0.dev.caff705' end diff --git a/modules-config.js b/modules-config.js index 0f3a06dcd..f29c3f31f 100644 --- a/modules-config.js +++ b/modules-config.js @@ -34,6 +34,10 @@ module.exports = [ "Slider", "CustomerLogos", "CompanyAutocomplete", + "MeganavSearch", + "MeganavSearchSuggestions", + "MeganavSearchPanel", + "MeganavSearchAutocomplete", ], }, { diff --git a/package.json b/package.json index 4a4458a57..ceee4ac14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "7.10.0", + "version": "7.10.0-dev.caff705", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", @@ -65,6 +65,7 @@ "release": "./scripts/release.sh" }, "dependencies": { + "addsearch-js-client": "^0.6.7", "array-flat-polyfill": "^1.0.1", "deepmerge": "^4.2.2", "dompurify": "^2.2.9", diff --git a/preview/.gitignore b/preview/.gitignore index e9a57012e..bb9da8026 100644 --- a/preview/.gitignore +++ b/preview/.gitignore @@ -31,3 +31,5 @@ /yarn-error.log yarn-debug.log* .yarn-integrity + +.env diff --git a/preview/Gemfile b/preview/Gemfile index b3121a6ef..2a3a88538 100644 --- a/preview/Gemfile +++ b/preview/Gemfile @@ -36,7 +36,9 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine' gem 'responders' -gem 'ably-ui', '7.10.0', require: 'ably_ui' +gem 'ably-ui', '7.10.0.dev.caff705', require: 'ably_ui' # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias gem 'psych', '< 4' + +gem 'dotenv-rails', groups: [:development, :test] diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock index 84674c004..409e01eb2 100644 --- a/preview/Gemfile.lock +++ b/preview/Gemfile.lock @@ -1,7 +1,7 @@ GEM remote: https://rubygems.org/ specs: - ably-ui (7.10.0) + ably-ui (7.10.0.dev.caff705) view_component (>= 2.33, < 2.50) actioncable (6.0.5.1) actionpack (= 6.0.5.1) @@ -65,6 +65,10 @@ GEM byebug (11.1.3) concurrent-ruby (1.1.10) crass (1.0.6) + dotenv (2.8.1) + dotenv-rails (2.8.1) + dotenv (= 2.8.1) + railties (>= 3.2) erubi (1.10.0) ffi (1.15.5) globalid (1.0.0) @@ -167,9 +171,10 @@ PLATFORMS x86_64-linux DEPENDENCIES - ably-ui (= 7.10.0) + ably-ui (= 7.10.0.dev.caff705) bootsnap (>= 1.4.2) byebug + dotenv-rails listen (~> 3.2) psych (< 4) puma (~> 4.3) diff --git a/preview/app/views/layouts/application.html.erb b/preview/app/views/layouts/application.html.erb index 8e192b434..928d91cad 100644 --- a/preview/app/views/layouts/application.html.erb +++ b/preview/app/views/layouts/application.html.erb @@ -7,7 +7,7 @@ <%= csp_meta_tag %> <%= stylesheet_packs_with_chunks_tag 'application' %> - + <%= yield %> <%= javascript_packs_with_chunks_tag 'application' %> diff --git a/preview/config/application.rb b/preview/config/application.rb index 6c7f54d7a..2a5e94862 100644 --- a/preview/config/application.rb +++ b/preview/config/application.rb @@ -24,6 +24,8 @@ class Application < Rails::Application # Don't generate system test files. config.generators.system_tests = nil + config.add_search_api_key = ENV['ADDSEARCH_API_KEY'] + Dir[ File.join( AblyUi::Integration.asset_paths, diff --git a/preview/package.json b/preview/package.json index 536d587b3..c321c50af 100644 --- a/preview/package.json +++ b/preview/package.json @@ -2,7 +2,7 @@ "name": "preview", "private": true, "dependencies": { - "@ably/ui": "7.10.0", + "@ably/ui": "7.10.0-dev.caff705", "@babel/preset-react": "^7.12.5", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.3.0", diff --git a/preview/yarn.lock b/preview/yarn.lock index 4d3bde508..ea6146beb 100644 --- a/preview/yarn.lock +++ b/preview/yarn.lock @@ -2,11 +2,12 @@ # yarn lockfile v1 -"@ably/ui@7.10.0": - version "7.10.0" - resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-7.10.0.tgz#ff7193c3f14754567022ef518686374331f5654c" - integrity sha512-endv20qWWAIUeZCr/K+034nIgGu0ZWqAIlcOGJ91s5QCnaTOUhf43LKUOJmU/b/YB8RGMa27XtaOYDC7yP+w/w== +"@ably/ui@7.10.0-dev.caff705": + version "7.10.0-dev.caff705" + resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-7.10.0-dev.caff705.tgz#30116d2a70145211a5387cf8072c572a784a6723" + integrity sha512-TzcfA7DwUjTaE5p3YzaYdrnJyvcIql2/LZHqfC/Ux8ge9Z5Hm87IKnfXh+k8c2Vw5191jjn4knC9c1R70azp2g== dependencies: + addsearch-js-client "^0.6.7" array-flat-polyfill "^1.0.1" deepmerge "^4.2.2" dompurify "^2.2.9" @@ -920,9 +921,9 @@ regenerator-runtime "^0.13.4" "@babel/runtime@^7.9.2": - version "7.16.7" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" - integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== dependencies: regenerator-runtime "^0.13.4" @@ -1318,6 +1319,15 @@ acorn@^7.0.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== +addsearch-js-client@^0.6.7: + version "0.6.7" + resolved "https://registry.yarnpkg.com/addsearch-js-client/-/addsearch-js-client-0.6.7.tgz#9710704fbe85aa17885793ba1b6a972734a373b1" + integrity sha512-n3WcpcvUH1bIkWuLsyzc3xy+icA29RcFt0rl8+nHvh+eNubjwgRzSZ8CTfx+35lnE1wsgoFQ/GpuNnGfWMBXTQ== + dependencies: + es6-promise "^4.2.8" + isomorphic-fetch "^3.0.0" + js-base64 "^3.6.0" + aggregate-error@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -2921,9 +2931,9 @@ domelementtype@^2.0.1: integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== dompurify@^2.2.9: - version "2.3.4" - resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.4.tgz#1cf5cf0105ccb4debdf6db162525bd41e6ddacc6" - integrity sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ== + version "2.3.10" + resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.10.tgz#901f7390ffe16a91a5a556b94043314cd4850385" + integrity sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g== domutils@^1.7.0: version "1.7.0" @@ -3072,6 +3082,11 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" +es6-promise@^4.2.8: + version "4.2.8" + resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a" + integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w== + escalade@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" @@ -4427,6 +4442,14 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= +isomorphic-fetch@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4" + integrity sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA== + dependencies: + node-fetch "^2.6.1" + whatwg-fetch "^3.4.1" + isstream@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" @@ -4445,6 +4468,11 @@ js-base64@^2.1.8: resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== +js-base64@^3.6.0: + version "3.7.2" + resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745" + integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ== + js-cookie@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8" @@ -4624,7 +4652,7 @@ locate-path@^5.0.0: lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" - integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== lodash.get@^4.0: version "4.4.2" @@ -4644,7 +4672,7 @@ lodash.memoize@^4.1.2: lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" - integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ== lodash.toarray@^4.4.0: version "4.4.0" @@ -5086,6 +5114,13 @@ node-emoji@^1.8.1: dependencies: lodash.toarray "^4.4.0" +node-fetch@^2.6.1: + version "2.6.7" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" + integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ== + dependencies: + whatwg-url "^5.0.0" + node-forge@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3" @@ -6676,9 +6711,9 @@ reduce-css-calc@^2.1.8: postcss-value-parser "^3.3.0" redux@^4.0.5: - version "4.1.2" - resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104" - integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw== + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== dependencies: "@babel/runtime" "^7.9.2" @@ -7736,6 +7771,11 @@ tough-cookie@~2.5.0: psl "^1.1.28" punycode "^2.1.1" +tr46@~0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" + integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== + trim-newlines@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144" @@ -8027,6 +8067,11 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" +webidl-conversions@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" + integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== + webpack-assets-manifest@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/webpack-assets-manifest/-/webpack-assets-manifest-3.1.1.tgz#39bbc3bf2ee57fcd8ba07cda51c9ba4a3c6ae1de" @@ -8166,6 +8211,19 @@ websocket-extensions@>=0.1.1: resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42" integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg== +whatwg-fetch@^3.4.1: + version "3.6.2" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c" + integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA== + +whatwg-url@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" + integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== + dependencies: + tr46 "~0.0.3" + webidl-conversions "^3.0.0" + which-boxed-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6" diff --git a/src/core/Meganav/component.css b/src/core/Meganav/component.css index 5a4b9c5aa..2f16efdde 100644 --- a/src/core/Meganav/component.css +++ b/src/core/Meganav/component.css @@ -48,11 +48,15 @@ .ui-meganav-link { @apply text-menu2 font-medium block; - @apply mx-8 lg:mx-12 px-0 py-20; + @apply mr-12 lg:mr-24 px-0 py-20; @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none; @apply transition-colors; } + .ui-meganav-item { + flex: 1 0 auto; + } + .ui-meganav-mobile-link { @apply p-menu-row relative -left-8 w-extend-8; @apply text-menu2 font-medium block text-cool-black text-left; diff --git a/src/core/Meganav/component.html.erb b/src/core/Meganav/component.html.erb index bf12c69ef..29721aa25 100644 --- a/src/core/Meganav/component.html.erb +++ b/src/core/Meganav/component.html.erb @@ -2,20 +2,25 @@ <%= notice %>
- <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %> +
+ <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %> +
<%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %> <% if @session_data[:signedIn] %> <%= render(AblyUi::Core::MeganavItemsSignedIn.new(session_data: @session_data, theme_name: @theme_name, url_base: url_base)) %> <% else %> diff --git a/src/core/Meganav/component.js b/src/core/Meganav/component.js index ae67fb5e5..ab8884ddd 100644 --- a/src/core/Meganav/component.js +++ b/src/core/Meganav/component.js @@ -17,6 +17,8 @@ import MeganavControl from "../MeganavControl/component"; import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component"; import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component"; import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component"; +import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component"; +import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component"; // Close menu when user clicks outside of viewport const windowOnBlur = (closeAll) => { @@ -115,6 +117,8 @@ export default function Meganav({ themeName } = { themeName: null }) { const controls = MeganavControl(); const panelOpenControls = MobilePanelOpenClick(); const panelCloseControls = MobilePanelCloseClick(); + const search = MeganavSearchAutocomplete(); + const searchSuggestions = MeganavSearchSuggestions(); const mobileDropdownControl = MeganavControlMobileDropdown({ clearPanels: () => @@ -124,9 +128,11 @@ export default function Meganav({ themeName } = { themeName: null }) { const closeAll = () => [ mobileDropdownControl, + searchSuggestions, ...panelOpenControls, ...panelCloseControls, ...controls, + ...search, ].forEach((i) => i.clear()); const teardowns = [ @@ -134,9 +140,11 @@ export default function Meganav({ themeName } = { themeName: null }) { documentClick(closeAll), windowOnBlur(closeAll), mobileDropdownControl, + searchSuggestions, ...controls, ...panelOpenControls, ...panelCloseControls, + ...search, ].map((i) => i.teardown); return () => teardowns.forEach((teardown) => teardown()); diff --git a/src/core/Meganav/component.jsx b/src/core/Meganav/component.jsx index 3382e9da4..864ac4792 100644 --- a/src/core/Meganav/component.jsx +++ b/src/core/Meganav/component.jsx @@ -18,23 +18,27 @@ import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx"; import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx"; import MeganavContentWhyAbly from "../MeganavContentWhyAbly/component.jsx"; import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx"; +import MeganavSearch from "../MeganavSearch/component.jsx"; const SignIn = ({ sessionState, theme, loginLink, absUrl }) => { return sessionState.signedIn ? ( ) : (