From d1c977453cda12b2363ba56ce5033023dbeaab92 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Tue, 19 Dec 2023 08:36:59 -0700
Subject: [PATCH 01/10] create helix-query and start lookahead dropdown

---
 .../community-directory.js                    |  2 +-
 blocks/look-ahead-list/look-ahead-list.css    | 41 ++++++++++++
 blocks/look-ahead-list/look-ahead-list.js     | 64 +++++++++++++++++++
 helix-query.yaml                              | 44 +++++++++++++
 4 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 blocks/look-ahead-list/look-ahead-list.css
 create mode 100644 blocks/look-ahead-list/look-ahead-list.js
 create mode 100644 helix-query.yaml

diff --git a/blocks/community-directory/community-directory.js b/blocks/community-directory/community-directory.js
index 39c89b91..d76f0e3a 100644
--- a/blocks/community-directory/community-directory.js
+++ b/blocks/community-directory/community-directory.js
@@ -15,7 +15,7 @@ export default async function decorate(block) {
   const list = document.createElement('div');
   list.classList.add('cards-list');
   index.data.forEach((community) => {
-    const communityName = community['LiveBy Community'];
+    const communityName = community['liveby-community'];
 
     const card = document.createElement('div');
     card.classList.add('cards-item');
diff --git a/blocks/look-ahead-list/look-ahead-list.css b/blocks/look-ahead-list/look-ahead-list.css
new file mode 100644
index 00000000..654d336f
--- /dev/null
+++ b/blocks/look-ahead-list/look-ahead-list.css
@@ -0,0 +1,41 @@
+    /* Style for the dropdown */
+    .dropdown {
+      position: relative;
+      display: inline-block;
+    }
+
+    /* Style for the input field inside the dropdown */
+    .dropdown input {
+      width: 300px;
+      padding: 10px;
+      font-size: 16px;
+    }
+
+    /* Style for the dropdown content */
+    .dropdown-content {
+      display: none;
+      position: absolute;
+      background-color: #f9f9f9;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 1;
+    }
+
+    /* Style for the dropdown options */
+    .dropdown-content a {
+      padding: 12px 16px;
+      display: block;
+      cursor: pointer;
+    }
+
+    /* Style for the selected option */
+    .dropdown-content a:hover {
+      background-color: #ddd;
+    }
+
+    /* Style for the active (highlighted) option */
+    .active {
+      background-color: #4CAF50;
+      color: white;
+    }
\ No newline at end of file
diff --git a/blocks/look-ahead-list/look-ahead-list.js b/blocks/look-ahead-list/look-ahead-list.js
new file mode 100644
index 00000000..33b32846
--- /dev/null
+++ b/blocks/look-ahead-list/look-ahead-list.js
@@ -0,0 +1,64 @@
+let queryIndex;
+export async function getQueryIndex() {
+  if (!queryIndex) {
+    const resp = await fetch('/communities/query-index.json');
+    if (resp.ok) {
+      queryIndex = await resp.json();
+    }
+  }
+  return queryIndex;
+}
+
+function filterFunction() {
+  var input, filter, ul, li, a, i;
+  input = document.getElementById("myInput");
+  filter = input.value.toUpperCase();
+  div = document.getElementById("myDropdown");
+  a = div.getElementsByTagName("a");
+  for (i = 0; i < a.length; i++) {
+    txtValue = a[i].textContent || a[i].innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      a[i].style.display = "";
+    } else {
+      a[i].style.display = "none";
+    }
+  }
+}
+
+// Show/hide the dropdown when clicking on the input field
+document.getElementById("myInput").addEventListener("click", function() {
+  document.getElementById("myDropdown").style.display = "block";
+});
+
+// Close the dropdown if the user clicks outside of it
+window.onclick = function(event) {
+  if (!event.target.matches('#myInput')) {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    for (var i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (openDropdown.style.display === 'block') {
+        openDropdown.style.display = 'none';
+      }
+    }
+  }
+}
+
+export default async function decorate(block) {
+  const index = await getQueryIndex();
+/* <!-- Dropdown container -->
+<div class="dropdown">
+  <!-- Input field for lookahead filter -->
+  <input type="text" id="myInput" oninput="filterFunction()" placeholder="Search for names">
+
+  <!-- Dropdown content -->
+  <div class="dropdown-content" id="myDropdown">
+    <!-- Dropdown options -->
+    <a href="#">John Doe</a>
+    <a href="#">Jane Doe</a>
+  </div>
+</div> */
+  index.data.forEach((community) => {
+    const communityName = community['liveby-community'];
+    block.append(list);
+  });
+}
diff --git a/helix-query.yaml b/helix-query.yaml
new file mode 100644
index 00000000..f19c7c69
--- /dev/null
+++ b/helix-query.yaml
@@ -0,0 +1,44 @@
+version: 1
+auto-generated: true
+indices:
+  default:
+    include:
+      - /**
+    exclude:
+      - /drafts/**
+      - /tools/**
+      - /seach/**
+    target: /query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+  communities:
+    include:
+      - /communities/*
+    target: /communities/query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      liveby-community:
+        select: head > meta[name="liveby-community"]
+        value: attribute(el, "content")
\ No newline at end of file

From f6aae3baa5740dfac2e6fe3bccaa19ddbf63588b Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 11:36:00 -0700
Subject: [PATCH 02/10] display list w/ listeners

---
 blocks/look-ahead-list/look-ahead-list.js | 43 +++++++++++++++--------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.js b/blocks/look-ahead-list/look-ahead-list.js
index 33b32846..dbe3c931 100644
--- a/blocks/look-ahead-list/look-ahead-list.js
+++ b/blocks/look-ahead-list/look-ahead-list.js
@@ -1,5 +1,7 @@
+import { readBlockConfig } from '../../scripts/aem.js';
+
 let queryIndex;
-export async function getQueryIndex() {
+async function getQueryIndex() {
   if (!queryIndex) {
     const resp = await fetch('/communities/query-index.json');
     if (resp.ok) {
@@ -26,9 +28,9 @@ function filterFunction() {
 }
 
 // Show/hide the dropdown when clicking on the input field
-document.getElementById("myInput").addEventListener("click", function() {
+function dropClick() {
   document.getElementById("myDropdown").style.display = "block";
-});
+}
 
 // Close the dropdown if the user clicks outside of it
 window.onclick = function(event) {
@@ -44,21 +46,32 @@ window.onclick = function(event) {
 }
 
 export default async function decorate(block) {
+  const config = readBlockConfig(block);
+  block.innerHTML = '';
   const index = await getQueryIndex();
-/* <!-- Dropdown container -->
-<div class="dropdown">
-  <!-- Input field for lookahead filter -->
-  <input type="text" id="myInput" oninput="filterFunction()" placeholder="Search for names">
 
-  <!-- Dropdown content -->
-  <div class="dropdown-content" id="myDropdown">
-    <!-- Dropdown options -->
-    <a href="#">John Doe</a>
-    <a href="#">Jane Doe</a>
-  </div>
-</div> */
+  const list = document.createElement('div');
+  list.classList.add('dropdown');
+
+  const txtInput = document.createElement('input');
+  txtInput.type = 'text';
+  txtInput.placeholder = config.placeholder;
+  txtInput.id = 'myInput';
+  txtInput.addEventListener('input', filterFunction);
+  txtInput.addEventListener('click', dropClick);
+  list.append(txtInput);
+
+  const dropContent = document.createElement('div');
+  dropContent.classList.add('dropdown-content');
+  dropContent.id = 'myDropdown';
+
   index.data.forEach((community) => {
     const communityName = community['liveby-community'];
-    block.append(list);
+    const listItem = document.createElement('a');
+    listItem.href = community.path;
+    listItem.innerText = communityName;
+    dropContent.append(listItem);
   });
+  list.append(dropContent);
+  block.append(list);
 }

From 4dc8b882fcbf1b777926c0c6c331842a789be854 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 17:29:47 -0700
Subject: [PATCH 03/10] css tune

---
 blocks/look-ahead-list/look-ahead-list.css | 134 ++++++++++++++-------
 blocks/look-ahead-list/look-ahead-list.js  |  24 ++--
 styles/styles.css                          |   1 +
 3 files changed, 108 insertions(+), 51 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.css b/blocks/look-ahead-list/look-ahead-list.css
index 654d336f..ac876c1a 100644
--- a/blocks/look-ahead-list/look-ahead-list.css
+++ b/blocks/look-ahead-list/look-ahead-list.css
@@ -1,41 +1,93 @@
-    /* Style for the dropdown */
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    /* Style for the input field inside the dropdown */
-    .dropdown input {
-      width: 300px;
-      padding: 10px;
-      font-size: 16px;
-    }
-
-    /* Style for the dropdown content */
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #f9f9f9;
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-      max-height: 200px;
-      overflow-y: auto;
-      z-index: 1;
-    }
-
-    /* Style for the dropdown options */
-    .dropdown-content a {
-      padding: 12px 16px;
-      display: block;
-      cursor: pointer;
-    }
-
-    /* Style for the selected option */
-    .dropdown-content a:hover {
-      background-color: #ddd;
-    }
-
-    /* Style for the active (highlighted) option */
-    .active {
-      background-color: #4CAF50;
-      color: white;
-    }
\ No newline at end of file
+.section.look-ahead-list-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.look-ahead-list-container > .default-content-wrapper {
+  text-align: center;
+}
+
+.look-ahead-list-container > .look-ahead-list-wrapper {
+  text-align: center;
+}
+
+.look-ahead-list .dropdown {
+  display: flex;
+  text-align: center;
+  border: 1px solid var(--primary-color);
+}
+
+.look-ahead-list .dropdown:focus-within {
+  box-shadow: rgb(38, 132, 255) 0px 0px 0px 1px;
+}
+
+.look-ahead-list {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.look-ahead-list input {
+  width: 97%;
+  padding: 5px 0 5px 20px;
+  font-size: 16px;
+  text-transform: uppercase;
+  border: 0;
+}
+
+.look-ahead-list input:focus {
+  border: 0;
+  outline: none;
+}
+
+.look-ahead-list > div::after {
+  position: relative;
+  top: 8pt;
+  content: "";
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  margin-right: 8px;
+  border-right: 2px solid #ccc;
+  border-top: 2px solid #ccc;
+  transform: rotate(45deg);
+}
+
+.look-ahead-list > div:hover::after {
+  border-right: 2px solid #999;
+  border-top: 2px solid #999;
+}
+
+/* Style for the dropdown content */
+.look-ahead-list .dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+  max-height: 200px;
+  width: 100%;
+  overflow-y: auto;
+  top: 39px;
+  z-index: 1;
+}
+
+/* Style for the dropdown options */
+.look-ahead-list .dropdown-content a {
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Style for the selected option */
+.look-ahead-list .dropdown-content a:hover {
+  background-color: var(--color-tertiary);
+}
+
+@media (min-width: 992px) {
+  .section.look-ahead-list-container {
+    width: 36%;
+  }
+}
\ No newline at end of file
diff --git a/blocks/look-ahead-list/look-ahead-list.js b/blocks/look-ahead-list/look-ahead-list.js
index dbe3c931..4b310893 100644
--- a/blocks/look-ahead-list/look-ahead-list.js
+++ b/blocks/look-ahead-list/look-ahead-list.js
@@ -1,5 +1,6 @@
 import { readBlockConfig } from '../../scripts/aem.js';
 
+// Get the communities from the community index
 let queryIndex;
 async function getQueryIndex() {
   if (!queryIndex) {
@@ -11,31 +12,34 @@ async function getQueryIndex() {
   return queryIndex;
 }
 
+// Filter communties based on input control
 function filterFunction() {
-  var input, filter, ul, li, a, i;
-  input = document.getElementById("myInput");
+  var input, filter, div, txtValue, a, i;
+  input = document.getElementById('myInput');
   filter = input.value.toUpperCase();
-  div = document.getElementById("myDropdown");
-  a = div.getElementsByTagName("a");
+  div = document.getElementById('myDropdown');
+  a = div.getElementsByTagName('a');
   for (i = 0; i < a.length; i++) {
     txtValue = a[i].textContent || a[i].innerText;
     if (txtValue.toUpperCase().indexOf(filter) > -1) {
-      a[i].style.display = "";
+      a[i].style.display = '';
     } else {
-      a[i].style.display = "none";
+      a[i].style.display = 'none';
     }
   }
 }
 
 // Show/hide the dropdown when clicking on the input field
 function dropClick() {
-  document.getElementById("myDropdown").style.display = "block";
+  if (event.target.closest('.dropdown') !== null) {
+    document.getElementById('myDropdown').style.display = 'block';
+  }
 }
 
 // Close the dropdown if the user clicks outside of it
 window.onclick = function(event) {
   if (!event.target.matches('#myInput')) {
-    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var dropdowns = document.getElementsByClassName('dropdown-content');
     for (var i = 0; i < dropdowns.length; i++) {
       var openDropdown = dropdowns[i];
       if (openDropdown.style.display === 'block') {
@@ -58,7 +62,7 @@ export default async function decorate(block) {
   txtInput.placeholder = config.placeholder;
   txtInput.id = 'myInput';
   txtInput.addEventListener('input', filterFunction);
-  txtInput.addEventListener('click', dropClick);
+  block.addEventListener('click', dropClick);
   list.append(txtInput);
 
   const dropContent = document.createElement('div');
@@ -69,7 +73,7 @@ export default async function decorate(block) {
     const communityName = community['liveby-community'];
     const listItem = document.createElement('a');
     listItem.href = community.path;
-    listItem.innerText = communityName;
+    listItem.innerText = `${communityName.split(',')[0]} (${communityName})`;
     dropContent.append(listItem);
   });
   list.append(dropContent);
diff --git a/styles/styles.css b/styles/styles.css
index 4459ea49..e41ab236 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -17,6 +17,7 @@
   --primary-color: #552448;
   --primary-color-lighten: rgba(98 98 121 / 12.5%);
   --primary-color-svg-filter: invert(18%) sepia(17%) saturate(1944%) hue-rotate(264deg) brightness(93%) contrast(95%);
+  --color-tertiary: #eae3d4;
   --body-color: #3a3a3a;
   --platinum: #e7e7e7;
   --light-grey: #f6f6f6;

From 18b9f5a870b0549c6f22bdbb6421480aadee9a17 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 17:40:13 -0700
Subject: [PATCH 04/10] css clean up

---
 blocks/look-ahead-list/look-ahead-list.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.css b/blocks/look-ahead-list/look-ahead-list.css
index ac876c1a..4b0c6e98 100644
--- a/blocks/look-ahead-list/look-ahead-list.css
+++ b/blocks/look-ahead-list/look-ahead-list.css
@@ -19,7 +19,7 @@
 }
 
 .look-ahead-list .dropdown:focus-within {
-  box-shadow: rgb(38, 132, 255) 0px 0px 0px 1px;
+  box-shadow: 0px 0px 0px 1px rgb(38, 132, 255);
 }
 
 .look-ahead-list {
@@ -64,7 +64,7 @@
   display: none;
   position: absolute;
   background-color: #f9f9f9;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 11px rgba(0, 0, 0, 0.1);
   max-height: 200px;
   width: 100%;
   overflow-y: auto;

From 1721b7a469bbbd04d78a3f130382a18390d96a12 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 17:47:51 -0700
Subject: [PATCH 05/10] js clean up

---
 blocks/look-ahead-list/look-ahead-list.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.js b/blocks/look-ahead-list/look-ahead-list.js
index 4b310893..46938bc7 100644
--- a/blocks/look-ahead-list/look-ahead-list.js
+++ b/blocks/look-ahead-list/look-ahead-list.js
@@ -14,18 +14,19 @@ async function getQueryIndex() {
 
 // Filter communties based on input control
 function filterFunction() {
-  var input, filter, div, txtValue, a, i;
+  let input, filter, div, txtValue, a, i;
   input = document.getElementById('myInput');
   filter = input.value.toUpperCase();
   div = document.getElementById('myDropdown');
   a = div.getElementsByTagName('a');
-  for (i = 0; i < a.length; i++) {
+  for (i = 0; i < a.length;) {
     txtValue = a[i].textContent || a[i].innerText;
     if (txtValue.toUpperCase().indexOf(filter) > -1) {
       a[i].style.display = '';
     } else {
       a[i].style.display = 'none';
     }
+    i = i + 1;
   }
 }
 
@@ -37,14 +38,15 @@ function dropClick() {
 }
 
 // Close the dropdown if the user clicks outside of it
-window.onclick = function(event) {
+function closeDropdown(event) {
   if (!event.target.matches('#myInput')) {
-    var dropdowns = document.getElementsByClassName('dropdown-content');
-    for (var i = 0; i < dropdowns.length; i++) {
-      var openDropdown = dropdowns[i];
+    let dropdowns = document.getElementsByClassName('dropdown-content');
+    for (let i = 0; i < dropdowns.length;) {
+      let openDropdown = dropdowns[i];
       if (openDropdown.style.display === 'block') {
         openDropdown.style.display = 'none';
       }
+      i = i + 1
     }
   }
 }
@@ -79,3 +81,5 @@ export default async function decorate(block) {
   list.append(dropContent);
   block.append(list);
 }
+
+window.addEventListener('click', closeDropdown);

From caa4e960c3637658f1d76e7c4c9b0497482a3b6e Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 17:59:39 -0700
Subject: [PATCH 06/10] js update

---
 blocks/look-ahead-list/look-ahead-list.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.js b/blocks/look-ahead-list/look-ahead-list.js
index 46938bc7..8f4522af 100644
--- a/blocks/look-ahead-list/look-ahead-list.js
+++ b/blocks/look-ahead-list/look-ahead-list.js
@@ -14,11 +14,11 @@ async function getQueryIndex() {
 
 // Filter communties based on input control
 function filterFunction() {
-  let input, filter, div, txtValue, a, i;
-  input = document.getElementById('myInput');
-  filter = input.value.toUpperCase();
-  div = document.getElementById('myDropdown');
-  a = div.getElementsByTagName('a');
+  let i;
+  const input = document.getElementById('myInput');
+  const filter = input.value.toUpperCase();
+  const div = document.getElementById('myDropdown');
+  const a = div.getElementsByTagName('a');
   for (i = 0; i < a.length;) {
     txtValue = a[i].textContent || a[i].innerText;
     if (txtValue.toUpperCase().indexOf(filter) > -1) {
@@ -39,14 +39,15 @@ function dropClick() {
 
 // Close the dropdown if the user clicks outside of it
 function closeDropdown(event) {
+  let i;
   if (!event.target.matches('#myInput')) {
-    let dropdowns = document.getElementsByClassName('dropdown-content');
-    for (let i = 0; i < dropdowns.length;) {
-      let openDropdown = dropdowns[i];
+    const dropdowns = document.getElementsByClassName('dropdown-content');
+    for (i = 0; i < dropdowns.length;) {
+      const openDropdown = dropdowns[i];
       if (openDropdown.style.display === 'block') {
         openDropdown.style.display = 'none';
       }
-      i = i + 1
+      i = i + 1;
     }
   }
 }

From 1f06d65f7352a7371b835c59c4c92f9c813ba1c7 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 18:03:00 -0700
Subject: [PATCH 07/10] js linting

---
 blocks/look-ahead-list/look-ahead-list.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.js b/blocks/look-ahead-list/look-ahead-list.js
index 8f4522af..413018c8 100644
--- a/blocks/look-ahead-list/look-ahead-list.js
+++ b/blocks/look-ahead-list/look-ahead-list.js
@@ -20,18 +20,18 @@ function filterFunction() {
   const div = document.getElementById('myDropdown');
   const a = div.getElementsByTagName('a');
   for (i = 0; i < a.length;) {
-    txtValue = a[i].textContent || a[i].innerText;
+    const txtValue = a[i].textContent || a[i].innerText;
     if (txtValue.toUpperCase().indexOf(filter) > -1) {
       a[i].style.display = '';
     } else {
       a[i].style.display = 'none';
     }
-    i = i + 1;
+    i += 1;
   }
 }
 
 // Show/hide the dropdown when clicking on the input field
-function dropClick() {
+function dropClick(event) {
   if (event.target.closest('.dropdown') !== null) {
     document.getElementById('myDropdown').style.display = 'block';
   }
@@ -47,7 +47,7 @@ function closeDropdown(event) {
       if (openDropdown.style.display === 'block') {
         openDropdown.style.display = 'none';
       }
-      i = i + 1;
+      i += 1;
     }
   }
 }

From d1168b5bd71ee9ba34fb3a25669e22e8b0662a17 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 18:41:08 -0700
Subject: [PATCH 08/10] css linting

---
 blocks/look-ahead-list/look-ahead-list.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.css b/blocks/look-ahead-list/look-ahead-list.css
index 4b0c6e98..01882d5f 100644
--- a/blocks/look-ahead-list/look-ahead-list.css
+++ b/blocks/look-ahead-list/look-ahead-list.css
@@ -19,7 +19,7 @@
 }
 
 .look-ahead-list .dropdown:focus-within {
-  box-shadow: 0px 0px 0px 1px rgb(38, 132, 255);
+  box-shadow: 0 0 0 1px rgb(38, 132, 255);
 }
 
 .look-ahead-list {
@@ -64,7 +64,7 @@
   display: none;
   position: absolute;
   background-color: #f9f9f9;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 11px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 1px rgba(0 0 0 / 10%), 0 4px 11px rgba(0 0 0 / 10%);
   max-height: 200px;
   width: 100%;
   overflow-y: auto;

From 58e29edbf494160e22bb71c2808f04b21d0a3061 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 19:03:14 -0700
Subject: [PATCH 09/10] css linting color notation

---
 blocks/look-ahead-list/look-ahead-list.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.css b/blocks/look-ahead-list/look-ahead-list.css
index 01882d5f..37ec5f18 100644
--- a/blocks/look-ahead-list/look-ahead-list.css
+++ b/blocks/look-ahead-list/look-ahead-list.css
@@ -19,7 +19,7 @@
 }
 
 .look-ahead-list .dropdown:focus-within {
-  box-shadow: 0 0 0 1px rgb(38, 132, 255);
+  box-shadow: 0 0 0 1px rgb(38 132 255);
 }
 
 .look-ahead-list {

From 048c96764f37acab6cfd24dde0fac41cd3a5f694 Mon Sep 17 00:00:00 2001
From: Rob Rusher <rrusher@adobe.com>
Date: Thu, 21 Dec 2023 19:24:16 -0700
Subject: [PATCH 10/10] add communities search styles

---
 blocks/look-ahead-list/look-ahead-list.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/blocks/look-ahead-list/look-ahead-list.css b/blocks/look-ahead-list/look-ahead-list.css
index 37ec5f18..83ae15ad 100644
--- a/blocks/look-ahead-list/look-ahead-list.css
+++ b/blocks/look-ahead-list/look-ahead-list.css
@@ -90,4 +90,17 @@
   .section.look-ahead-list-container {
     width: 36%;
   }
-}
\ No newline at end of file
+
+  .section.look-ahead-list-container.community-directory-container .look-ahead-list {
+    max-width: 228px;
+  }
+
+  .section.look-ahead-list-container.community-directory-container {
+    width: 100%;
+  }
+
+  .section .look-ahead-list-wrapper {
+    text-align: left;
+    padding-left: 10px;
+  }
+}