Hide filtering and copy button if JS is disabled

Author: parlough

src/_includes/linter-rule-cards.md

@@ -41,7 +41,7 @@
 
 <div class="trailing">
 <a href="/tools/linter-rules/{{lint.name}}" title="Learn more about this lint and when to enable it.">Learn more</a>
-<button class="copy-button configuring" title="Copy {{lint.name}} to your clipboard.">Copy</button>
+<button class="copy-button hidden" title="Copy {{lint.name}} to your clipboard.">Copy</button>
 </div>
 
 </div>

src/_sass/components/_linter-rules.scss

@@ -11,6 +11,10 @@ body.linter-rules {
     justify-content: center;
     gap: 0.75rem;
     margin-bottom: 1.25rem;
+
+    &.hidden {
+      display: none;
+    }
   }
 
   .filter-group {
@@ -127,17 +131,15 @@ body.linter-rules {
             outline-offset: 1px;
           }
         }
+
+        button.hidden {
+          display: none;
+        }
       }
     }
   }
 }
 
-.copy-button, #filter-and-search {
-  &.configuring {
-    display: none;
-  }
-}
-
 .chip-set {
   display: flex;
   flex-direction: row;
@@ -276,90 +278,90 @@ section.content-search-results {
   margin: 0.5rem 0 1rem;
 }
 
-.select-menu {
-  display: none;
-  position: absolute;
-  overflow: auto;
-  z-index: 5;
-  background-color: white;
-  border-radius: 0.5rem;
-  border: 1px solid rgb(63, 72, 80);
-  min-width: 100%;
-  max-height: 15rem;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  overscroll-behavior: contain;
-  margin-top: 0.25rem;
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
+.button-menu-wrapper {
+  position: relative;
 
-    li {
-      &:first-child {
-        padding-top: 0.5rem;
-      }
+  .select-menu {
+    display: none;
+    position: absolute;
+    overflow: auto;
+    z-index: 5;
+    background-color: white;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(63, 72, 80);
+    min-width: 100%;
+    max-height: 15rem;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    overscroll-behavior: contain;
+    margin-top: 0.25rem;
+
+    ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+
+      li {
+        &:first-child {
+          padding-top: 0.5rem;
+        }
 
-      &:last-child {
-        padding-bottom: 0.5rem;
+        &:last-child {
+          padding-bottom: 0.5rem;
+        }
       }
-    }
 
-    button {
-      padding: 0.2rem 0.75rem 0.2rem 0.5rem;
-      width: 100%;
-      border: none;
-      background: none;
-      color: rgb(63, 72, 80);
-      font-weight: 500;
-      text-align: left;
-      user-select: none;
+      button {
+        padding: 0.2rem 0.75rem 0.2rem 0.5rem;
+        width: 100%;
+        border: none;
+        background: none;
+        color: rgb(63, 72, 80);
+        font-weight: 500;
+        text-align: left;
+        user-select: none;
 
-      &:hover {
-        @include interaction-style(4%);
-      }
+        &:hover {
+          @include interaction-style(4%);
+        }
 
-      &:focus {
-        @include interaction-style(6%);
-      }
+        &:focus {
+          @include interaction-style(6%);
+        }
 
-      &:active {
-        @include interaction-style(8%);
-      }
+        &:active {
+          @include interaction-style(8%);
+        }
 
-      display: flex;
-      flex-direction: row;
+        display: flex;
+        flex-direction: row;
 
-      .material-symbols {
-        align-self: center;
-        vertical-align: center;
-        fill: currentcolor;
-        position: relative;
-        font-size: 20px;
-        margin-right: 0.4rem;
+        .material-symbols {
+          align-self: center;
+          vertical-align: center;
+          fill: currentcolor;
+          position: relative;
+          font-size: 20px;
+          margin-right: 0.4rem;
 
-        font-variation-settings: 'FILL' 1;
-        user-select: none;
-      }
+          font-variation-settings: 'FILL' 1;
+          user-select: none;
+        }
 
-      &.selected {
-        background-color: #cae4ff;
+        &.selected {
+          background-color: #cae4ff;
+        }
       }
     }
-  }
 
-  &.show-menu {
-    display: flex;
+    &.show-menu {
+      display: flex;
+    }
   }
 }
 
 .search-wrapper:has(:focus-visible), .chip:focus-visible, .empty-button:focus-visible, .trailing a:focus-visible, .trailing button:focus-visible {
   outline: 2px solid #1967D2;
   border-color: transparent;
 }
-
-.button-menu-wrapper {
-  position: relative;
-}

src/content/assets/js/linter-rules.js

@@ -26,23 +26,12 @@ function _setupFiltering() {
       // TODO(parlough): Show toast saying copied to clipboard.
     });
 
-    copyButton.classList.remove('configuring');
+    copyButton.classList.remove('hidden');
   });
 
   const filterAndSearch = document.getElementById('filter-and-search');
   if (!filterAndSearch) return;
-
-  function displayLints(lints) {
-    lintCards.forEach(card => {
-      const lintName = card.id;
-
-      if (lints.has(lintName)) {
-        card.classList.remove('hidden');
-      } else {
-        card.classList.add('hidden');
-      }
-    });
-  }
+  filterAndSearch.classList.remove('hidden');
 
   const filterChips = filterAndSearch.querySelectorAll('button.filter-chip');
   const chips = filterAndSearch.querySelectorAll('button.chip');
@@ -107,7 +96,15 @@ function _setupFiltering() {
       lintsToShow.add(lintName);
     }
 
-    displayLints(lintsToShow);
+    lintCards.forEach(card => {
+      const lintName = card.id;
+
+      if (lintsToShow.has(lintName)) {
+        card.classList.remove('hidden');
+      } else {
+        card.classList.add('hidden');
+      }
+    });
   }
 
   searchInput.addEventListener('input', filterRules);
@@ -126,7 +123,7 @@ function _setupFiltering() {
   });
 
   document.addEventListener('keydown', (event) => {
-    // If pressing esc in a menu, close any open menus.
+    // If pressing the `esc` key in the filter area, close any open menus.
     if (event.key === 'Escape' && event.target.closest('#filter-and-search')) {
       _closeMenusAndToggle();
     }

src/content/tools/linter-rules/index.md

@@ -120,11 +120,11 @@ check out [All linter rules](/tools/linter-rules/all).
 
 ---
 
-{%- comment %}
+{% comment -%}
 TODO(parlough): Generate this HTML with some sort of component mechanism.
 {% endcomment -%}
 
-<section id="filter-and-search">
+<section id="filter-and-search" class="hidden">
   <div class="search-row">
     <div class="search-wrapper">
       <span class="material-symbols leading-icon" aria-hidden="true">search</span>