[polaris.shopify.com] Refactor site search (ready for review)

.changeset/smart-carrots-exist.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Major refactor of site search

polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss

@@ -31,7 +31,7 @@
   }
 
   @media (hover: hover) {
-    &.isHighlighted a {
+    &[data-is-current-result="true"] a {
       background: var(--search-highlight-color);
     }
   }

polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx

@@ -1,14 +1,10 @@
 import Image from "../Image";
 import Link from "next/link";
-import { SearchResultItem } from "../../types";
-import {
-  className,
-  getReadableStatusValue,
-  slugify,
-} from "../../utils/various";
+import { getReadableStatusValue, slugify } from "../../utils/various";
 import { Status } from "../../types";
 import styles from "./ComponentGrid.module.scss";
 import StatusBadge from "../StatusBadge";
+import { useGlobalSearchResult } from "../GlobalSearch/GlobalSearch";
 
 interface ComponentGridProps {
   children: React.ReactNode;
@@ -18,7 +14,7 @@ function ComponentGrid({ children }: ComponentGridProps) {
   return <ul className={styles.ComponentGrid}>{children}</ul>;
 }
 
-interface ComponentGridItemProps extends SearchResultItem {
+interface ComponentGridItemProps {
   name: string;
   description: string;
   url: string;
@@ -29,20 +25,14 @@ function ComponentGridItem({
   name,
   description,
   url,
-  searchResultData,
   status,
 }: ComponentGridItemProps) {
+  const searchAttributes = useGlobalSearchResult();
+
   return (
-    <li
-      key={name}
-      className={className(
-        styles.Component,
-        searchResultData?.isHighlighted && styles.isHighlighted
-      )}
-      {...searchResultData?.itemAttributes}
-    >
+    <li key={name} className={styles.Component} {...searchAttributes}>
       <Link href={url} passHref>
-        <a tabIndex={searchResultData?.tabIndex}>
+        <a tabIndex={searchAttributes?.tabIndex}>
           <div className={styles.Preview}>
             <Image
               src={`/images/components/${slugify(name)}.png`}

polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss

@@ -0,0 +1,139 @@
+@import "../../styles/fonts.scss";
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.FoundationsGrid {
+  h2 {
+    @include heading-2;
+    margin-bottom: 1.5rem;
+  }
+
+  ul {
+    display: grid;
+    gap: 0.75rem;
+    // https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
+    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
+
+    @media screen and (max-width: $breakpointDesktopLarge) {
+      // Foundations section currently has 5 articles. This avoids
+      // a 4 + 1 situation which looks horrible.
+      grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
+    }
+  }
+}
+
+.FoundationsGridItem {
+  @media (hover: hover) {
+    &[data-is-current-result="true"] {
+      background: var(--search-highlight-color);
+    }
+  }
+
+  &[data-category="foundations"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-1);
+    }
+  }
+
+  &[data-category="design"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-2);
+    }
+  }
+
+  &[data-category="content"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-3);
+    }
+  }
+
+  &[data-category="patterns"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-4);
+    }
+  }
+
+  a {
+    height: 100%;
+    position: relative;
+    padding: 1.25rem 1.25rem 1rem;
+    display: block;
+    color: inherit;
+    border-radius: var(--border-radius-800);
+    box-shadow: var(--card-shadow);
+
+    &[data-is-current-result="true"] {
+      background: var(--search-highlight-color);
+    }
+
+    &:hover {
+      box-shadow: var(--card-shadow-hover);
+    }
+
+    &:focus-visible {
+      box-shadow: var(--focus-outline);
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 45px;
+      margin: auto;
+      border-radius: var(--border-radius-800) var(--border-radius-800) 0 0;
+      opacity: 0.25;
+    }
+
+    .Icon {
+      position: relative;
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50px;
+      width: 50px;
+      border-radius: var(--border-radius-800);
+
+      svg {
+        filter: brightness(-100%);
+        opacity: 0.66;
+      }
+
+      @include dark-mode {
+        svg {
+          filter: brightness(1000%);
+        }
+      }
+    }
+
+    h4 {
+      @include heading-4;
+      color: var(--text-strong);
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: pre;
+    }
+
+    p {
+      margin: 0;
+      font-size: var(--font-size-100);
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  a:before,
+  .Icon {
+    background: var(--decorative-1);
+  }
+}

polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+import React from "react";
+import { stripMarkdownLinks } from "../../utils/various";
+import { useGlobalSearchResult } from "../GlobalSearch/GlobalSearch";
+import styles from "./FoundationsGrid.module.scss";
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+function FoundationsGrid({ title, children }: Props) {
+  return (
+    <div className={styles.FoundationsGrid}>
+      <div key={title} className={styles.Category}>
+        <div className={styles.Text}>
+          {title && <h2>{title}</h2>}
+          <ul>{children}</ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface FoundationsGridItemProps {
+  title: string;
+  excerpt: string;
+  url: string;
+  icon: JSX.Element;
+  category: string;
+}
+
+function FoundationsGridItem({
+  title,
+  excerpt,
+  url,
+  icon,
+  category,
+}: FoundationsGridItemProps) {
+  const searchAttributes = useGlobalSearchResult();
+
+  return (
+    <li className={styles.FoundationsGridItem} data-category={category}>
+      <Link href={url} passHref>
+        <a {...searchAttributes}>
+          <div className={styles.Icon}>{icon}</div>
+          <h4>{title}</h4>
+          <p>{stripMarkdownLinks(excerpt)}</p>
+        </a>
+      </Link>
+    </li>
+  );
+}
+
+FoundationsGrid.Item = FoundationsGridItem;
+
+export default FoundationsGrid;

polaris.shopify.com/src/components/FoundationsGrid/index.ts

@@ -0,0 +1,3 @@
+import FoundationsGrid from "./FoundationsGrid";
+
+export default FoundationsGrid;

polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.module.scss

@@ -1,125 +1,5 @@
-@import "../../styles/fonts.scss";
-@import "../../styles/variables.scss";
-@import "../../styles/mixins.scss";
-
-.FoundationsIndexPage {
-  h2 {
-    @include heading-2;
-    margin-bottom: 1.5rem;
-  }
-}
-
 .Categories {
   display: flex;
   flex-direction: column;
   gap: 3rem;
 }
-
-.Category {
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    display: grid;
-    gap: 0.75rem;
-    // https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
-    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
-
-    @media screen and (max-width: $breakpointDesktopLarge) {
-      // Foundations section currently has 5 articles. This avoids
-      // a 4 + 1 situation which looks horrible.
-      grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
-    }
-  }
-
-  a {
-    height: 100%;
-    position: relative;
-    padding: 1.25rem 1.25rem 1rem;
-    display: block;
-    color: inherit;
-    border-radius: var(--border-radius-800);
-    box-shadow: var(--card-shadow);
-
-    &:hover {
-      box-shadow: var(--card-shadow-hover);
-    }
-
-    &:focus-visible {
-      box-shadow: var(--focus-outline);
-    }
-
-    &:before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 45px;
-      margin: auto;
-      border-radius: var(--border-radius-800) var(--border-radius-800) 0 0;
-      opacity: 0.25;
-    }
-
-    .Icon {
-      position: relative;
-      margin-bottom: 1rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 50px;
-      width: 50px;
-      border-radius: var(--border-radius-800);
-
-      svg {
-        filter: brightness(-100%);
-        opacity: 0.66;
-      }
-
-      @include dark-mode {
-        svg {
-          filter: brightness(1000%);
-        }
-      }
-    }
-
-    h4 {
-      @include heading-4;
-      color: var(--text-strong);
-      overflow: hidden;
-      width: 100%;
-      text-overflow: ellipsis;
-      white-space: pre;
-    }
-
-    p {
-      margin: 0;
-      font-size: var(--font-size-100);
-      display: -webkit-box;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-  }
-}
-
-.Categories {
-  .Category {
-    &:nth-child(1) a:before,
-    &:nth-child(1) .Icon {
-      background: var(--decorative-1);
-    }
-    &:nth-child(2) a:before,
-    &:nth-child(2) .Icon {
-      background: var(--decorative-2);
-    }
-    &:nth-child(3) a:before,
-    &:nth-child(3) .Icon {
-      background: var(--decorative-3);
-    }
-    &:nth-child(4) a:before,
-    &:nth-child(4) .Icon {
-      background: var(--decorative-4);
-    }
-  }
-}