From fe55d0523b031fa358fdb1af1db38fa71988c220 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Mon, 11 Mar 2024 15:38:19 +0000 Subject: [PATCH] chore: remove CompanyAutocomplete and FeatureFooter (moved to website) --- .../core/company_autocomplete/behaviour.cy.js | 108 ---------- modules-config.js | 2 - .../javascript/packs/company-autocomplete.js | 8 - preview/app/javascript/styles/application.css | 2 - .../components/company_autocomplete.html.erb | 11 - preview/app/views/pages/index.html.erb | 6 - src/core/CompanyAutocomplete/component.css | 45 ---- src/core/CompanyAutocomplete/component.js | 204 ------------------ src/core/FeatureFooter/component.css | 12 -- src/core/FeatureFooter/component.js | 7 - 10 files changed, 405 deletions(-) delete mode 100644 cypress/e2e/core/company_autocomplete/behaviour.cy.js delete mode 100644 preview/app/javascript/packs/company-autocomplete.js delete mode 100644 preview/app/views/components/company_autocomplete.html.erb delete mode 100644 src/core/CompanyAutocomplete/component.css delete mode 100644 src/core/CompanyAutocomplete/component.js delete mode 100644 src/core/FeatureFooter/component.css delete mode 100644 src/core/FeatureFooter/component.js diff --git a/cypress/e2e/core/company_autocomplete/behaviour.cy.js b/cypress/e2e/core/company_autocomplete/behaviour.cy.js deleted file mode 100644 index 73226e293..000000000 --- a/cypress/e2e/core/company_autocomplete/behaviour.cy.js +++ /dev/null @@ -1,108 +0,0 @@ -describe("Company Autocomplete", () => { - const CONTAINER_SELECTOR = "[data-id=company-autocomplete-dropdown]"; - const ITEMS_SELECTOR = `${CONTAINER_SELECTOR} button`; - - beforeEach(() => { - cy.visit("/components/company-autocomplete"); - }); - - it("shows the drop down when you start typing", () => { - cy.get("input").type("A"); - cy.get(CONTAINER_SELECTOR).should("be.visible"); - cy.get(CONTAINER_SELECTOR).contains("All Things Apple"); - }); - - it("updates the input when a result is clicked on", () => { - cy.get("input").type("A"); - cy.get(CONTAINER_SELECTOR).should("be.visible"); - cy.get(ITEMS_SELECTOR).eq(1).click(); - cy.get("input").should("have.value", "All Things Apple"); - }); - - it("changes the focus when the down arrow is pressed", () => { - cy.get("input").type("A"); - cy.get("input") - .trigger("keydown", { code: "ArrowDown" }) - .trigger("keydown", { code: "ArrowDown" }) - .get(ITEMS_SELECTOR) - .eq(1) - .should("have.focus"); - }); - - it("changes the focus when the up arrow is pressed", () => { - cy.get("input").type("A"); - - cy.get("input") - .trigger("keydown", { code: "ArrowDown" }) - .trigger("keydown", { code: "ArrowDown" }) - .get(ITEMS_SELECTOR) - .eq(1) - .should("have.focus"); - - cy.get("input") - .trigger("keydown", { code: "ArrowUp" }) - .get(ITEMS_SELECTOR) - .eq(0) - .should("have.focus"); - }); - - it("stops changing focus when the down arrow is pressed at the last item", () => { - cy.get("input").type("A"); - - cy.get("input") - .trigger("keydown", { code: "ArrowDown" }) - .trigger("keydown", { code: "ArrowDown" }) - .trigger("keydown", { code: "ArrowDown" }) - .trigger("keydown", { code: "ArrowDown" }) - .trigger("keydown", { code: "ArrowDown" }) - .get(ITEMS_SELECTOR) - .eq(4) - .should("have.focus"); - - cy.get("input") - .trigger("keydown", { code: "ArrowDown" }) - .get(ITEMS_SELECTOR) - .eq(4) - .should("have.focus"); - }); - - it("focuses on the input when up arrow is pressed on the first item", () => { - cy.get("input").type("A"); - - cy.get("input") - .trigger("keydown", { code: "ArrowDown" }) - .get(ITEMS_SELECTOR) - .eq(0) - .should("have.focus"); - - cy.get("input") - .trigger("keydown", { code: "ArrowUp" }) - .get("input") - .should("have.focus"); - }); - - // Flaky - // it("closes the dropdown when clicked outside it", () => { - // cy.get("input").type("A"); - // cy.get("body").click(); - // cy.get(CONTAINER_SELECTOR).should("not.be.visible"); - // }); - - it("closes the dropdown when Esc is pressed", () => { - cy.get("input") - .type("A") - .trigger("keydown", { code: "Escape" }) - .get(CONTAINER_SELECTOR) - .should("not.be.visible") - .get("input") - .should("have.focus"); - }); - - // Not implemented as Cypress has no Tab support - // https://docs.cypress.io/api/commands/type#Tabbing - xit("moves focus away from input if shift-tab is pressed", () => {}); - - // Not implemented as Cypress has no Tab support - // https://docs.cypress.io/api/commands/type#Tabbing - xit("closes the menu after pressing tab on the last item", () => {}); -}); diff --git a/modules-config.js b/modules-config.js index e477f5b36..518663d2a 100644 --- a/modules-config.js +++ b/modules-config.js @@ -22,7 +22,6 @@ module.exports = [ "MeganavBlogPostsList", "Notice", "ContactFooter", - "FeatureFooter", "Footer", "Code", "ConnectStateWrapper", @@ -31,7 +30,6 @@ module.exports = [ "Icon", "Slider", "CustomerLogos", - "CompanyAutocomplete", "MeganavSearch", "MeganavSearchSuggestions", "MeganavSearchPanel", diff --git a/preview/app/javascript/packs/company-autocomplete.js b/preview/app/javascript/packs/company-autocomplete.js deleted file mode 100644 index 96c0e66f8..000000000 --- a/preview/app/javascript/packs/company-autocomplete.js +++ /dev/null @@ -1,8 +0,0 @@ -import CompanyAutocomplete from "@ably/ui/core/CompanyAutocomplete/component"; - -document.addEventListener("DOMContentLoaded", () => { - const input = document.querySelector("input"); - CompanyAutocomplete(input, "/api/companies"); - - document.body.classList.add("bg-light-grey", "m-32", "h-screen"); -}); diff --git a/preview/app/javascript/styles/application.css b/preview/app/javascript/styles/application.css index 679d3c33d..6ee836ba6 100644 --- a/preview/app/javascript/styles/application.css +++ b/preview/app/javascript/styles/application.css @@ -5,14 +5,12 @@ @import "@ably/ui/reset/styles.css"; @import "@ably/ui/core/Meganav/component.css"; @import "@ably/ui/core/ContactFooter/component.css"; -@import "@ably/ui/core/FeatureFooter/component.css"; @import "@ably/ui/core/Footer/component.css"; @import "@ably/ui/core/Code/component.css"; @import "@ably/ui/core/Notice/component.css"; @import "@ably/ui/core/Flash/component.css"; @import "@ably/ui/core/CookieMessage/component.css"; @import "@ably/ui/core/Slider/component.css"; -@import "@ably/ui/core/CompanyAutocomplete/component.css"; @import "@ably/ui/core/styles.css"; @layer base { diff --git a/preview/app/views/components/company_autocomplete.html.erb b/preview/app/views/components/company_autocomplete.html.erb deleted file mode 100644 index 2bb6b5705..000000000 --- a/preview/app/views/components/company_autocomplete.html.erb +++ /dev/null @@ -1,11 +0,0 @@ -<%= render(TitleComponent.new(react: false, vw: true)) do %> - Company Autocomplete -<% end %> - -
- -
- -<% content_for :component do %> - <%= javascript_packs_with_chunks_tag 'company-autocomplete' %> -<% end %> diff --git a/preview/app/views/pages/index.html.erb b/preview/app/views/pages/index.html.erb index 860ccfc2d..33220d42b 100644 --- a/preview/app/views/pages/index.html.erb +++ b/preview/app/views/pages/index.html.erb @@ -19,9 +19,6 @@
  • Contact footer
    • -
  • - Feature footer -
  • Footer
    • @@ -46,9 +43,6 @@
  • Customer Logos
    • -
  • - Company Autocomplete -
  • Loader
    • diff --git a/src/core/CompanyAutocomplete/component.css b/src/core/CompanyAutocomplete/component.css deleted file mode 100644 index 5ca41e936..000000000 --- a/src/core/CompanyAutocomplete/component.css +++ /dev/null @@ -1,45 +0,0 @@ -@layer components { - .ui-company-autocomplete-container { - @apply shadow-container absolute bg-white w-full z-10 font-sans; - } - - .ui-company-autocomplete-list { - @apply border border-mid-grey border-t-0; - } - - .ui-company-autocomplete-listitem { - @apply border-b border-mid-grey h-48; - } - - .ui-company-autocomplete-btn { - @apply h-full w-full flex items-center py-4 px-12; - } - - .ui-company-autocomplete-btn:focus { - @apply focus:text-gui-focus; - } - - .ui-company-autocomplete-listitem:last-child { - @apply border-b-0; - } - - .ui-company-autocomplete-listitem:hover { - @apply bg-light-grey cursor-pointer; - } - - .ui-company-autocomplete-listitem:hover .ui-company-autocomplete-name { - @apply text-gui-hover; - } - - .ui-company-autocomplete-logo { - @apply w-32; - } - - .ui-company-autocomplete-name { - @apply font-sans font-light text-cool-black ml-8 text-p3 text-left; - } - - .ui-company-autocomplete-domain { - @apply font-sans font-light text-dark-grey ml-auto text-p3; - } -} diff --git a/src/core/CompanyAutocomplete/component.js b/src/core/CompanyAutocomplete/component.js deleted file mode 100644 index b7235c0f0..000000000 --- a/src/core/CompanyAutocomplete/component.js +++ /dev/null @@ -1,204 +0,0 @@ -import "./component.css"; - -import throttle from "lodash.throttle"; - -const COMPANY_AUTOCOMPLETE_DROPDOWN = "[data-id=company-autocomplete-dropdown]"; - -const getContainer = (input) => - input.parentNode.querySelector(COMPANY_AUTOCOMPLETE_DROPDOWN); -const getItems = (container) => - container ? container.querySelectorAll("li > button") : []; -const getFocusedItemIndex = (items) => - Array.from(items).indexOf(document.activeElement); - -const clearList = (input) => { - const container = getContainer(input); - - if (container) { - container.classList.add("hidden"); - container.querySelector("ol").innerHTML = ""; - } -}; - -const renderItems = (data) => - data.map((element) => { - const listItem = document.createElement("li"); - listItem.classList.add("ui-company-autocomplete-listitem"); - - const btn = document.createElement("button"); - btn.classList.add("ui-company-autocomplete-btn"); - btn.dataset.name = element.name; - - const logo = document.createElement("img"); - logo.alt = `${element.name} logo`; - logo.src = element.logo; - logo.classList.add("ui-company-autocomplete-logo"); - - const name = document.createElement("p"); - name.textContent = element.name; - name.classList.add("ui-company-autocomplete-name"); - - const domain = document.createElement("p"); - domain.textContent = element.domain; - domain.classList.add("ui-company-autocomplete-domain"); - - btn.append(logo); - btn.append(name); - btn.append(domain); - listItem.append(btn); - - return listItem; - }); - -const renderContainer = (input) => { - let container = getContainer(input); - - if (!container) { - input.parentNode.style.position = "relative"; - - container = document.createElement("div"); - container.dataset.id = "company-autocomplete-dropdown"; - container.classList.add("ui-company-autocomplete-container"); - - const list = document.createElement("ol"); - list.classList.add("ui-company-autocomplete-list"); - - return { container, list }; - } - - return { container, list: container.querySelector("ol") }; -}; - -const renderDropdown = (input, data) => { - const parent = input.parentNode; - const { container, list } = renderContainer(input); - const items = renderItems(data); - - clearList(input); - - items.forEach((item, index) => { - list.append(item); - item.addEventListener("click", (event) => { - input.value = data[index].name; - event.preventDefault(); - }); - }); - - container.append(list); - container.classList.remove("hidden"); - parent.append(container); -}; - -const fetchData = async (url, query) => { - try { - if (!query) { - return []; - } - - const res = await fetch(`${url}?query=${query}`); - const payload = await res.json(); - - return payload; - } catch (e) { - // eslint-disable-next-line no-console - console.error(e); - return []; - } -}; - -const handleDownArrow = (input, event) => { - const container = getContainer(input); - const items = getItems(container); - const focusedItemIndex = getFocusedItemIndex(items); - - if (items.length === 0) { - return; - } else if (document.activeElement === input) { - items[0].focus(); - } else if (focusedItemIndex >= 0 && focusedItemIndex < items.length - 1) { - items[focusedItemIndex + 1].focus(); - } - - event.preventDefault(); -}; - -const handleUpArrow = (input, event) => { - const container = getContainer(input); - const items = getItems(container); - const focusedItemIndex = getFocusedItemIndex(items); - - if (items.length === 0) { - return; - } else if (focusedItemIndex === 0) { - input.focus(); - } else if (focusedItemIndex > 0) { - items[focusedItemIndex - 1].focus(); - } - - event.preventDefault(); -}; - -const handleTab = (input, event) => { - const container = getContainer(input); - const items = getItems(container); - const focusedItemIndex = getFocusedItemIndex(items); - - if (document.activeElement === input && event.shiftKey) { - clearList(input); - } else if (focusedItemIndex === items.length - 1) { - clearList(input); - } -}; - -const handleEnter = (input, event) => { - if (event.target.dataset.name) { - input.value = event.target.dataset.name; - clearList(input); - input.focus(); - event.preventDefault(); - } -}; - -const CompanyAutocomplete = (input, url) => { - if (!input || !url) return; - - input.setAttribute("autocomplete", "off"); - - input.addEventListener( - "keyup", - throttle( - async (event) => { - if (["Enter", "Space", "Tab", "Escape"].includes(event.code)) return; - - const query = event.target.value; - const data = await fetchData(url, query); - - if (data && data.length > 0) { - renderDropdown(input, data); - } - }, - 100, - { trailing: true } - ) - ); - - input.parentNode.addEventListener("keydown", (event) => { - if (event.code === "ArrowDown") { - handleDownArrow(input, event); - } else if (event.code === "ArrowUp") { - handleUpArrow(input, event); - } else if (event.code === "Enter" || event.code === "Space") { - handleEnter(input, event); - } else if (event.code === "Tab") { - handleTab(input, event); - } else if (event.code === "Escape") { - clearList(input); - } - }); - - document.body.addEventListener("click", () => { - clearList(input); - }); -}; - -export default CompanyAutocomplete; diff --git a/src/core/FeatureFooter/component.css b/src/core/FeatureFooter/component.css deleted file mode 100644 index 7f41dfe02..000000000 --- a/src/core/FeatureFooter/component.css +++ /dev/null @@ -1,12 +0,0 @@ -@layer components { - .ui-feature-footer { - background: var(--gradient-active-orange); - background-size: 100% 100%; - background-position: right center; - @apply w-full font-sans antialiased bg-gradient-active-orange; - } - - .ui-feature-footer-box { - @apply p-24 sm:p-32 xl:p-40 flex flex-col justify-between rounded-sm; - } -} diff --git a/src/core/FeatureFooter/component.js b/src/core/FeatureFooter/component.js deleted file mode 100644 index be29e40e1..000000000 --- a/src/core/FeatureFooter/component.js +++ /dev/null @@ -1,7 +0,0 @@ -import toggleChatWidget from "../hubspot-chat-toggle"; -import "./component.css"; - -export default () => - toggleChatWidget({ - dataId: "feature-footer", - });