Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SUL23-662 | adjust news filters #235

Merged
merged 5 commits into from
Oct 23, 2024
Merged
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/node/stanford-news/card.tsx
Original file line number Diff line number Diff line change
@@ -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>

123 changes: 64 additions & 59 deletions src/components/views/stanford-news/filtering-news-card-view.client.tsx
Original file line number Diff line number Diff line change
@@ -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-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
</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>
@@ -146,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}