Add filter-cards block

.eslintignore

@@ -1 +1,3 @@
-helix-importer-ui
+helix-importer-ui
+tools/
+plugins/

.stylelintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["stylelint-config-standard"]
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "selector-class-pattern": null,
+    "no-descending-specificity": null
+  }
 }

blocks/columns-stats/columns-stats.css

@@ -85,7 +85,9 @@ main > .section.columns-stats-container:first-of-type {
 }
 
 /* -------------------------------------------------------------------------- */
+
 /* USTA Foundation — pill metrics strip (scoped)                              */
+
 /* -------------------------------------------------------------------------- */
 
 /* Horizontal inset comes from main > .section > div; avoid double padding here */
@@ -104,8 +106,7 @@ body.foundation .columns-stats {
 }
 
 body.foundation .columns-stats > div:first-child {
-  align-items: center;
-  justify-items: center;
+  place-items: center center;
   gap: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px);
 }
 

blocks/columns/columns.css

@@ -54,7 +54,7 @@ main > .section.columns-container:first-of-type {
 }
 
 /* Text column */
-.columns > div > div:not(.columns-img-col):not(.columns-gallery-col) {
+.columns > div > div:not(.columns-img-col, .columns-gallery-col) {
   padding: 32px 24px;
 }
 
@@ -85,15 +85,15 @@ main > .section.columns-container:first-of-type {
     order: unset;
   }
 
-  .columns > div > div:not(.columns-img-col):not(.columns-gallery-col) {
+  .columns > div > div:not(.columns-img-col, .columns-gallery-col) {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 48px;
     box-sizing: border-box;
   }
 
-  .columns > div > div:not(.columns-img-col):not(.columns-gallery-col) h2 {
+  .columns > div > div:not(.columns-img-col, .columns-gallery-col) h2 {
     font-size: 72px;
   }
 
@@ -114,7 +114,9 @@ main > .section.columns-container:first-of-type {
 }
 
 /* -------------------------------------------------------------------------- */
+
 /* Columns gallery — outer 1:1; .2-left-1-right = two 1:1 crops + one 1:2 crop */
+
 /* -------------------------------------------------------------------------- */
 
 .columns.gallery > div > .columns-gallery--2-left-1-right {
@@ -193,25 +195,27 @@ main > .section.columns-container:first-of-type {
 }
 
 /* -------------------------------------------------------------------------- */
+
 /* Foundation site — two-column copy + video card (.foundation ancestor) */
+
 /* -------------------------------------------------------------------------- */
 
 .foundation .columns {
   overflow: visible;
 }
 
-.foundation .columns > div > div:not(.columns-img-col):not(.columns-gallery-col) {
+.foundation .columns > div > div:not(.columns-img-col, .columns-gallery-col) {
   text-align: left;
   align-items: flex-start;
 }
 
-.foundation .columns > div > div:not(.columns-img-col):not(.columns-gallery-col) h2 {
+.foundation .columns > div > div:not(.columns-img-col, .columns-gallery-col) h2 {
   font-size: clamp(26px, 3.2vw, 38px);
   line-height: 1.15;
   margin: 0 0 20px;
 }
 
-.foundation .columns > div > div:not(.columns-img-col):not(.columns-gallery-col) p {
+.foundation .columns > div > div:not(.columns-img-col, .columns-gallery-col) p {
   font-size: clamp(15px, 1.6vw, 18px);
   line-height: 1.65;
   color: var(--text-color);
@@ -271,7 +275,7 @@ main > .section.columns-container:first-of-type {
     min-width: 0;
   }
 
-  .foundation .columns > div > div:not(.columns-img-col):not(.columns-gallery-col) {
+  .foundation .columns > div > div:not(.columns-img-col, .columns-gallery-col) {
     justify-content: flex-start;
     padding: 24px 0;
   }

blocks/filter-cards/filter-cards.js

@@ -113,7 +113,8 @@ export default async function decorate(block) {
 
   const data = await fetchIndex();
   allArticles = data
-    .filter((a) => a.path && a.title && a.path !== window.location.pathname)
+    .filter((a) => a.path && a.title && a.image && a.description
+      && a.path !== window.location.pathname)
     .sort((a, b) => (b.lastModified || 0) - (a.lastModified || 0));
 
   filteredArticles = [...allArticles];

blocks/form/form.css

@@ -80,7 +80,7 @@
 .form .form-field input {
   width: 100%;
   box-sizing: border-box;
-  padding: 14px 14px;
+  padding: 14px;
   border: 1px solid #000;
   border-radius: 0;
   font-size: 16px;
@@ -151,6 +151,7 @@
   .form-container .form-wrapper {
     padding: 64px 40px 72px;
   }
+
   .form .form-heading h2 {
     font-size: 56px;
     margin-bottom: 12px;
@@ -162,8 +163,7 @@
   }
 
   .form .form-input-row {
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     gap: 20px;
     align-items: flex-end;
     margin-bottom: 32px;

blocks/header/header.js

@@ -138,7 +138,16 @@ export default async function decorate(block) {
       trigger.addEventListener('click', (e) => {
         if (!isDesktop.matches) return;
         const href = trigger.getAttribute('href')?.trim() || '';
-        const isPlaceholder = !href || href === '#' || href.startsWith('javascript:');
+        let isJsProtocol = false;
+        if (href) {
+          try {
+            const proto = new URL(href, window.location.href).protocol.toLowerCase();
+            isJsProtocol = proto === `${'java'}script:`;
+          } catch {
+            isJsProtocol = false;
+          }
+        }
+        const isPlaceholder = !href || href === '#' || isJsProtocol;
         if (!isPlaceholder) return;
 
         e.preventDefault();

blocks/hero/hero.css

@@ -37,7 +37,9 @@
 }
 
 /* -------------------------------------------------------------------------- */
+
 /* USTA Foundation home hero — scoped to body.foundation only               */
+
 /* -------------------------------------------------------------------------- */
 
 body.foundation .hero-container .hero-wrapper {

blocks/player-profile/player-profile.css

@@ -67,7 +67,7 @@
   color: #fff;
   text-transform: none;
   margin: 0;
-  width: 58.33333333%;
+  width: 58.3333%;
   background: rgb(0 0 0 / 58%);
   padding: 20px 28px 24px;
   box-sizing: border-box;
@@ -137,7 +137,7 @@
   font-size: 18px;
   font-weight: 600;
   line-height: 23px;
-  color: rgb(0, 37, 193) !important;
+  color: rgb(0 37 193) !important;
   text-decoration: underline !important;
   text-underline-offset: 2px;
   letter-spacing: 0.2px;

blocks/player-profile/player-profile.js

@@ -28,8 +28,17 @@ async function fetchPlayerProfile() {
 function populateProfile(block, profile) {
   if (!profile) return;
 
-  const { firstName, gender, residencyDeclaration, uaid } = profile;
-  const { section, district, countryIso } = residencyDeclaration ?? {};
+  const {
+    firstName,
+    gender,
+    residencyDeclaration,
+    uaid,
+  } = profile;
+  const {
+    section,
+    district,
+    countryIso,
+  } = residencyDeclaration ?? {};
 
   const greet = block.querySelector('.player-profile-greeting');
   if (greet && firstName) greet.textContent = `Welcome, ${firstName}!`;

blocks/player-rankings/player-rankings.css

@@ -18,7 +18,7 @@
 .pr-cat-tabs {
   width: 100%;
   background-color: #09b5f7;
-  margin: 0 0 2rem 0;
+  margin: 0 0 2rem;
   padding-top: 0;
   box-sizing: border-box;
 }
@@ -127,7 +127,7 @@
   transition: background-color 0.15s;
   white-space: nowrap;
   text-align: center;
-  color: rgb(9, 181, 247) !important;
+  color: rgb(9 181 247) !important;
 }
 
 .pr-header-link:hover {
@@ -172,9 +172,7 @@
   font-size: 16px;
   color: #1a1a1a;
   background-color: #fff;
-  min-width: 190px;
   box-sizing: border-box;
-  -webkit-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -224,7 +222,7 @@
   letter-spacing: 0.55px;
   text-transform: uppercase;
   color: #1a1a1a;
-  margin: 0 0 1rem 0;
+  margin: 0 0 1rem;
 }
 
 .pr-sidebar-heading--filter {
@@ -274,7 +272,7 @@
 }
 
 .pr-filter-input--search[type='search']::-webkit-search-cancel-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 .pr-label-row {
@@ -363,7 +361,7 @@
   width: 100%;
   min-height: 52px;
   height: auto;
-  padding: 14px 14px;
+  padding: 14px;
   border-radius: 999px;
   background-color: #000;
   color: #fff;
@@ -586,7 +584,7 @@
   transition: background-color 0.12s, border-color 0.12s;
 }
 
-.pr-page-btn:hover:not(.pr-page-btn--active):not(.pr-page-btn--disabled) {
+.pr-page-btn:hover:not(.pr-page-btn--active, .pr-page-btn--disabled) {
   background-color: #f0f0f0;
   border-color: #aaa;
 }
@@ -675,8 +673,7 @@
     padding: 20px 16px 24px;
     border-right: none;
     border-bottom: 1px solid #e0e0e0;
-    flex-direction: column;
-    flex-wrap: nowrap;
+    flex-flow: column nowrap;
     gap: 20px;
     align-items: stretch;
   }
@@ -851,7 +848,7 @@
     min-width: 7rem;
     max-width: 9rem;
     background-color: #fff;
-    box-shadow: 4px 0 10px -4px rgba(0, 0, 0, 0.18);
+    box-shadow: 4px 0 10px -4px rgb(0 0 0 / 18%);
   }
 
   .pr-table .pr-row > .pr-td:nth-child(1) {
@@ -885,7 +882,7 @@
     min-width: 7rem;
     max-width: 9rem;
     background-color: #fff;
-    box-shadow: 4px 0 10px -4px rgba(0, 0, 0, 0.12);
+    box-shadow: 4px 0 10px -4px rgb(0 0 0 / 12%);
   }
 
   .pr-pagination {