From 9ff77f97474dc1a0aca67d8dd5c3dbc0702cca16 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 22 Oct 2024 15:40:25 -0700
Subject: [PATCH 1/4] SUL23-662 | adjust news filters

---
 .../filtering-news-card-view.client.tsx       | 121 +++++++++---------
 1 file changed, 63 insertions(+), 58 deletions(-)

diff --git a/src/components/views/stanford-news/filtering-news-card-view.client.tsx b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
index 6cadeb27..6b0499b4 100644
--- a/src/components/views/stanford-news/filtering-news-card-view.client.tsx
+++ b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
@@ -6,9 +6,8 @@ import {useCounter} from "usehooks-ts"
 import useServerAction from "@/lib/hooks/useServerAction"
 import ToggleOption from "@/components/patterns/toggle-option"
 import SelectList from "@/components/patterns/elements/select-list"
-import {ArrowPathIcon, XMarkIcon} from "@heroicons/react/20/solid"
-import {MagnifyingGlassIcon} from "@heroicons/react/24/solid"
-import {SelectOptionDefinition, SelectValue} from "@mui/base/useSelect"
+import {ArrowPathIcon, XMarkIcon, MagnifyingGlassIcon} from "@heroicons/react/20/solid"
+import {SelectOptionDefinition} from "@mui/base/useSelect"
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   /**
@@ -74,69 +73,75 @@ const FilteringNewsCardViewClient = ({children, totalItems, loadPage, typeOption
         </div>
       )}
       <form onSubmit={e => e.preventDefault()}>
-        <div className="relative w-full md:w-[435px]">
-          <label className="pl-15 text-18 font-semibold leading-[23px]" htmlFor={id}>
-            Search by title
-          </label>
+        <legend className="sr-only">Filter news</legend>
+        <div className="mb-50 flex w-full flex-col flex-wrap items-end justify-center gap-50 *:w-full *:min-w-[250px] sm:flex-row sm:*:w-fit">
+          <div className="relative w-full md:w-[435px]">
+            <label className="pl-15 text-18 font-semibold leading-[23px]" htmlFor={id}>
+              Search by title
+            </label>
 
-          <input
-            className="block h-[40.69px] w-full rounded-full p-9 pl-15 text-18"
-            ref={titleFilterRef}
-            type="text"
-            id={id}
-          />
+            <div className="relative h-40 w-full">
+              <input
+                className="g-full block h-full w-full rounded-full p-9 pl-15 text-18"
+                ref={titleFilterRef}
+                type="text"
+                id={id}
+              />
 
-          {titleFilter && (
-            <button
-              type="reset"
-              className="absolute bottom-6 right-32 z-10"
-              aria-label="Clear keyword search"
-              onClick={() => {
-                if (titleFilterRef.current) {
-                  titleFilterRef.current.value = ""
-                  titleFilterRef.current.focus()
-                }
-                setTitleFilter("")
-              }}
-            >
-              <XMarkIcon className="pr-5 text-black-50" width={30} />
-            </button>
-          )}
+              {titleFilter && (
+                <button
+                  type="reset"
+                  className="absolute right-0 top-0 z-10 mr-32 flex h-full items-center"
+                  aria-label="Clear keyword search"
+                  onClick={() => {
+                    if (titleFilterRef.current) {
+                      titleFilterRef.current.value = ""
+                      titleFilterRef.current.focus()
+                    }
+                    setTitleFilter("")
+                  }}
+                >
+                  <XMarkIcon className="pr-5 text-black-50" width={30} />
+                </button>
+              )}
 
-          <button type="submit" className="absolute bottom-6 right-10 z-10" onClick={onFilterTitle}>
-            <MagnifyingGlassIcon className="text-digital-red-dark" width={25} />
-            <span className="sr-only">Search</span>
-          </button>
-        </div>
+              <button
+                type="submit"
+                className="absolute right-0 top-0 z-10 mr-10 flex h-full items-center"
+                onClick={onFilterTitle}
+              >
+                <MagnifyingGlassIcon className="text-digital-red-dark" width={25} />
+                <span className="sr-only">Search</span>
+              </button>
+            </div>
+          </div>
 
-        <fieldset className="rs-mb-1 mx-auto flex h-25 w-fit items-center rounded-full">
-          <legend className="sr-only">Filter by speciality</legend>
-          <ToggleOption
-            name="now - 30 days"
-            checked={dateFilter === "now - 30 days"}
-            onChange={() => onDateChange("now - 30 days")}
-            first
-          >
-            Last 30 days
-          </ToggleOption>
-          <ToggleOption
-            name="now - 12 years"
-            checked={dateFilter === "now - 12 months"}
-            onChange={() => onDateChange("now - 12 months")}
-          >
-            Last 12 months
-          </ToggleOption>
-          <ToggleOption name="all" checked={!dateFilter} onChange={() => onDateChange(undefined)} last>
-            All News
-          </ToggleOption>
-        </fieldset>
+          <fieldset className="flex h-fit w-full items-center md:mb-0">
+            <legend className="sr-only">Filter by speciality</legend>
+            <ToggleOption
+              name="now - 30 days"
+              checked={dateFilter === "now - 30 days"}
+              onChange={() => onDateChange("now - 30 days")}
+              first
+            >
+              Last 30 days
+            </ToggleOption>
+            <ToggleOption
+              name="now - 12 years"
+              checked={dateFilter === "now - 12 months"}
+              onChange={() => onDateChange("now - 12 months")}
+            >
+              Last 12 months
+            </ToggleOption>
+            <ToggleOption name="all" checked={!dateFilter} onChange={() => onDateChange(undefined)} last>
+              All News
+            </ToggleOption>
+          </fieldset>
 
-        <div>
-          <label id={`${id}-type`}>Type</label>
           <SelectList
+            label="Type of news"
             options={[{value: "all", label: "All"}, ...typeOptions]}
             ariaLabelledby={`${id}-type`}
-            defaultValue="all"
             onChange={(_e, value) => onTypeChange(value as string)}
           />
         </div>

From 11a0c38faa7845458bcef77af055ad8ff45e63ee Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 22 Oct 2024 15:59:56 -0700
Subject: [PATCH 2/4] tweak gap

---
 .../views/stanford-news/filtering-news-card-view.client.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/stanford-news/filtering-news-card-view.client.tsx b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
index 6b0499b4..5b0122fd 100644
--- a/src/components/views/stanford-news/filtering-news-card-view.client.tsx
+++ b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
@@ -74,7 +74,7 @@ const FilteringNewsCardViewClient = ({children, totalItems, loadPage, typeOption
       )}
       <form onSubmit={e => e.preventDefault()}>
         <legend className="sr-only">Filter news</legend>
-        <div className="mb-50 flex w-full flex-col flex-wrap items-end justify-center gap-50 *:w-full *:min-w-[250px] sm:flex-row sm:*:w-fit">
+        <div className="mb-50 flex w-full flex-col flex-wrap items-end justify-center gap-15 *:w-full *:min-w-[250px] sm:flex-row sm:*:w-fit">
           <div className="relative w-full md:w-[435px]">
             <label className="pl-15 text-18 font-semibold leading-[23px]" htmlFor={id}>
               Search by title

From d1befc9f59c68154412c97dc5ab8936db96b6823 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 22 Oct 2024 16:03:33 -0700
Subject: [PATCH 3/4] tweak news card and grid gap

---
 src/components/node/stanford-news/card.tsx                    | 4 ++--
 .../views/stanford-news/filtering-news-card-view.client.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/node/stanford-news/card.tsx b/src/components/node/stanford-news/card.tsx
index c9bb5fc0..3bf21f6f 100644
--- a/src/components/node/stanford-news/card.tsx
+++ b/src/components/node/stanford-news/card.tsx
@@ -31,14 +31,14 @@ const StanfordNewsCard = ({node, h3Heading, ...props}: Props) => {
       )}
 
       <div className="flex flex-col">
-        <HeadingElement className="type-0 leading-cozy">
+        <HeadingElement className="type-0 mb-0 leading-cozy">
           <Link href={goToUrl} className="text-black-true underline hover:text-brick-dark hover:no-underline">
             {node.title}
           </Link>
         </HeadingElement>
 
         {node.suNewsTopics?.[0]?.name && (
-          <div className="order-first mb-10 font-semibold">{node.suNewsTopics[0].name}</div>
+          <div className="order-first mb-0 font-semibold">{node.suNewsTopics[0].name}</div>
         )}
       </div>
 
diff --git a/src/components/views/stanford-news/filtering-news-card-view.client.tsx b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
index 5b0122fd..b4ef9c93 100644
--- a/src/components/views/stanford-news/filtering-news-card-view.client.tsx
+++ b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
@@ -151,7 +151,7 @@ const FilteringNewsCardViewClient = ({children, totalItems, loadPage, typeOption
         <LoadMoreList
           key={`${dateFilter}-${typeFilter}-${titleFilter}`}
           className="@container"
-          ulProps={{className: "list-unstyled grid gap-[90px] @4xl:grid-cols-2 @7xl:grid-cols-3 mb-50"}}
+          ulProps={{className: "list-unstyled grid gap-50 @4xl:grid-cols-2 @7xl:grid-cols-3 mb-50"}}
           liProps={{className: "w-full max-w-[500px] mx-auto"}}
           loadPage={loadPage}
           totalItems={totalResults}

From 9a4d4e82616bd31de29d03a041722f230d8b08f7 Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@stanford.edu>
Date: Tue, 22 Oct 2024 17:36:44 -0700
Subject: [PATCH 4/4] added empty label option

---
 src/components/patterns/elements/select-list.tsx         | 9 ++++++++-
 .../stanford-news/filtering-news-card-view.client.tsx    | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/patterns/elements/select-list.tsx b/src/components/patterns/elements/select-list.tsx
index 2e35cca0..a657ba83 100644
--- a/src/components/patterns/elements/select-list.tsx
+++ b/src/components/patterns/elements/select-list.tsx
@@ -30,6 +30,7 @@ interface Props {
   multiple?: boolean
   disabled?: boolean
   value?: SelectValue<string, boolean>
+  emptyLabel?: string
 }
 
 interface OptionProps {
@@ -103,7 +104,7 @@ function CustomOption(props: OptionProps) {
   )
 }
 
-const SelectList = ({options, label, multiple, ariaLabelledby, ...props}: Props) => {
+const SelectList = ({options, label, multiple, ariaLabelledby, emptyLabel, ...props}: Props) => {
   const labelId = useId()
   const labeledBy = ariaLabelledby ?? labelId
   const wrapperRef = useRef<HTMLDivElement>(null)
@@ -171,6 +172,12 @@ const SelectList = ({options, label, multiple, ariaLabelledby, ...props}: Props)
           aria-labelledby={labeledBy}
         >
           <SelectProvider value={contextValue}>
+            {emptyLabel && !multiple && (
+              <CustomOption value="" rootRef={listboxRef}>
+                {emptyLabel}
+              </CustomOption>
+            )}
+
             {options.map(option => {
               return (
                 <CustomOption {...option} key={option.value} value={option.value} rootRef={listboxRef}>
diff --git a/src/components/views/stanford-news/filtering-news-card-view.client.tsx b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
index b4ef9c93..a64072e3 100644
--- a/src/components/views/stanford-news/filtering-news-card-view.client.tsx
+++ b/src/components/views/stanford-news/filtering-news-card-view.client.tsx
@@ -140,7 +140,8 @@ const FilteringNewsCardViewClient = ({children, totalItems, loadPage, typeOption
 
           <SelectList
             label="Type of news"
-            options={[{value: "all", label: "All"}, ...typeOptions]}
+            options={typeOptions}
+            emptyLabel="All"
             ariaLabelledby={`${id}-type`}
             onChange={(_e, value) => onTypeChange(value as string)}
           />