Skip to content

Commit

Permalink
SUL23-605: fine tuning the sul people page. (#204)
Browse files Browse the repository at this point in the history 
* SUL23-605: fine tuning

* src/

* asking for feedback

* Fix on click handlers

* fixup to the group classes

* adding hover and active

* Added checkmark visual indicator

---------

Co-authored-by: Mike Decker <[email protected]>
  • Loading branch information
@jenbreese @pookmish
jenbreese and pookmish authored Aug 28, 2024
1 parent 02f7af3 commit 703ae1d
Show file tree
Hide file tree
Showing 4 changed files with 866 additions and 865 deletions.
36 changes: 18 additions & 18 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,38 +15,38 @@
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
"@heroicons/react": "^2.1.5",
"@mui/base": "^5.0.0-dev.20240529-082515-213b5e33ab",
"@next/third-parties": "^14.2.5",
"@mui/base": "5.0.0-beta.40",
"@next/third-parties": "^14.2.7",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.14",
"@tanstack/react-query": "^5.51.23",
"@types/node": "^22.2.0",
"@types/react": "^18.3.3",
"@tailwindcss/typography": "^0.5.15",
"@tanstack/react-query": "^5.52.2",
"@types/node": "^22.5.1",
"@types/react": "^18.3.4",
"autoprefixer": "^10.4.20",
"axios": "^1.7.3",
"axios": "^1.7.5",
"critters": "^0.0.24",
"decanter": "^7.3.0",
"graphql": "^16.9.0",
"graphql-request": "^7.1.0",
"graphql-tag": "^2.12.6",
"html-react-parser": "^5.1.12",
"html-react-parser": "^5.1.14",
"jsona": "^1.12.1",
"next": "^14.2.5",
"next": "^14.2.7",
"next-drupal": "^1.6.0",
"postcss": "^8.4.41",
"react": "^18.3.1",
"react-aria": "^3.34.1",
"react-aria": "^3.34.3",
"react-dom": "^18.3.1",
"react-error-boundary": "^4.0.13",
"react-focus-lock": "^2.12.1",
"react-obfuscate": "^3.6.9",
"react-focus-lock": "^2.13.2",
"react-obfuscate": "^3.7.0",
"react-obfuscate-email": "^1.1.5",
"react-stately": "^3.32.1",
"react-stately": "^3.32.2",
"react-super-responsive-table": "^5.2.3",
"react-tiny-oembed": "^1.1.0",
"sharp": "^0.33.4",
"tailwind-merge": "^2.4.0",
"tailwindcss": "^3.4.9",
"sharp": "^0.33.5",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.10",
"typescript": "^5.5.4",
"usehooks-ts": "^3.1.0"
},
Expand All @@ -57,11 +57,11 @@
"@graphql-codegen/typescript-operations": "4.2.3",
"@types/qs": "^6.9.15",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.5",
"eslint-config-next": "^14.2.7",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-deprecation": "^3.0.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-unused-imports": "4.0.1",
"eslint-plugin-unused-imports": "4.1.3",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6"
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/patterns/elements/telephone-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

// @ts-ignore
import Obfuscate from "react-obfuscate"
import {HTMLProps} from "react"
import {HTMLAttributes} from "react"

const TelephoneLink = ({tel, ...props}: {tel: string} & HTMLProps<HTMLLinkElement>) => {
const TelephoneLink = ({tel, ...props}: {tel: string} & Omit<HTMLAttributes<HTMLLinkElement>, "onClick">) => {
return <Obfuscate tel={tel} {...props} />
}
export default TelephoneLink
109 changes: 54 additions & 55 deletions src/components/views/sul-people/sul-people-table-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@ import {EnvelopeIcon} from "@heroicons/react/24/outline"
import {Maybe, NodeStanfordPerson} from "@/lib/gql/__generated__/drupal.d"
import {Table, Thead, Tbody, Tr, Th, Td} from "react-super-responsive-table"
import "react-super-responsive-table/dist/SuperResponsiveTableStyle.css"
import {useId, useRef, useState} from "react"
import {HTMLAttributes, useId, useRef, useState} from "react"
import {MagnifyingGlassIcon} from "@heroicons/react/24/solid"
import {CheckIcon} from "@heroicons/react/16/solid"
import {twMerge} from "tailwind-merge"
import {clsx} from "clsx"

export type TablePerson = {
id: NodeStanfordPerson["id"]
Expand All @@ -33,33 +36,17 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
const id = useId()
const keywordRef = useRef<HTMLInputElement>(null)

const [typeFilter, setTypeFilter] = useState<string[]>([])
const [typeFilter, setTypeFilter] = useState<string>("")
const [keywordFilter, setKeywordFilter] = useState("")

let displayedItems = items

if (typeFilter.length >= 1) {
if (typeFilter) {
displayedItems = items.filter(
item => !!item.types?.map(type => type.toLowerCase()).filter(value => typeFilter.includes(value)).length
item => !!item.types?.map(type => type.toLowerCase()).filter(value => typeFilter === value).length
)
}

const updateTypeFilter = (type?: string) => {
if (!type) {
return setTypeFilter([])
}
setTypeFilter(prevState => {
const newState = [...prevState]
const existingIndex = newState.indexOf(type)
if (existingIndex >= 0) {
newState.splice(existingIndex, 1)
} else {
newState.push(type)
}
return newState
})
}

if (keywordFilter) {
displayedItems = displayedItems.filter(
item =>
Expand All @@ -75,7 +62,7 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
className="mx-auto mb-32 flex w-fit flex-wrap justify-center gap-30 lg:flex-nowrap"
onSubmit={e => e.preventDefault()}
>
<div className="relative max-w-[350px] md:w-[435px]">
<div className="relative w-full md:w-[435px]">
<label className="pl-15 text-18 font-semibold leading-[23px]" htmlFor={id}>
Search by name, title, or subject
</label>
Expand Down Expand Up @@ -113,42 +100,19 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
<span className="sr-only">Search</span>
</button>
</div>
<div className="self-end">
<div className="w-full self-end md:w-[435px]">
<fieldset className="mx-auto flex w-fit items-center rounded-full">
<legend className="sr-only">Filter by speciality</legend>
<label className="group hidden cursor-pointer border-r-0 md:block">
<input
type="checkbox"
className="peer sr-only"
checked={!typeFilter.length}
onChange={() => updateTypeFilter()}
/>
<span className="block rounded-l-full border border-r-0 border-black-80 p-9 px-20 text-18 no-underline group-hover:border-cardinal-red-dark group-hover:text-cardinal-red-dark group-hover:underline peer-checked:bg-[#979694] peer-checked:bg-opacity-20 peer-focus:border-2 peer-focus:border-black-80 peer-focus:bg-[#979694] peer-focus:bg-opacity-10">
All specialists
</span>
</label>
<label className="group cursor-pointer">
<input
type="checkbox"
className="peer sr-only"
checked={typeFilter.includes("subject specialist")}
onChange={() => updateTypeFilter("subject specialist")}
/>
<span className="block items-center rounded-l-full border border-r-0 border-black-80 p-9 pr-20 text-18 no-underline group-hover:border-cardinal-red-dark group-hover:text-cardinal-red-dark group-hover:underline peer-checked:bg-[#979694] peer-checked:bg-opacity-20 peer-focus:border-2 peer-focus:border-black-80 peer-focus:bg-[#979694] peer-focus:bg-opacity-10 md:rounded-l-none">
Subject specialists
</span>
</label>
<label className="group cursor-pointer">
<input
type="checkbox"
className="peer sr-only"
checked={typeFilter.includes("technical specialist")}
onChange={() => updateTypeFilter("technical specialist")}
/>
<span className="block items-center rounded-r-full border border-black-80 p-9 pr-20 text-18 no-underline group-hover:border-cardinal-red-dark group-hover:text-cardinal-red-dark group-hover:underline peer-checked:bg-[#979694] peer-checked:bg-opacity-20 peer-focus:border-2 peer-focus:border-black-80 peer-focus:bg-[#979694] peer-focus:bg-opacity-10">
Technical specialists
</span>
</label>
<ToggleOption checked={!typeFilter} onChange={() => setTypeFilter("")} first>
All
</ToggleOption>
<ToggleOption
checked={typeFilter === "subject specialist"}
onChange={() => setTypeFilter("subject specialist")}
last
>
Subject specialists
</ToggleOption>
</fieldset>
</div>
</form>
Expand Down Expand Up @@ -260,4 +224,39 @@ const SulPeopleTableView = ({items, hasHeading}: Props) => {
</div>
)
}

const ToggleOption = ({
checked,
onChange,
first,
last,
children,
...props
}: HTMLAttributes<HTMLLabelElement> & {
checked: boolean
onChange: () => void
first?: boolean
last?: boolean
}) => {
return (
<label {...props} className="group cursor-pointer">
<input type="radio" name="specialist" className="peer sr-only" checked={checked} onChange={onChange} />

<span
className={twMerge(
"flex items-center whitespace-nowrap border border-black-80 p-4 pl-16 pr-32 text-14 leading-[30px] no-underline hover:border-cardinal-red-dark hover:bg-[#979694] hover:bg-opacity-10 hover:text-cardinal-red-dark hover:underline peer-checked:bg-[#979694] peer-checked:bg-opacity-20 peer-focus:border-2 peer-focus:border-black-80 peer-focus:bg-[#979694] peer-focus:bg-opacity-10 peer-focus:text-cardinal-red-dark peer-focus:underline md:text-16 peer-checked:[&_svg]:text-black",
clsx({
"rounded-l-full": first,
"rounded-r-full": last,
"border-r-0": !last,
})
)}
>
<CheckIcon width={20} className="text-transparent" />
{children}
</span>
</label>
)
}

export default SulPeopleTableView
Loading

0 comments on commit 703ae1d

Please sign in to comment.