DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests 1 Actions Projects 1 Wiki Activity

List components #31

Merged
stne3960 merged 68 commits from list_item into main 2025-12-18 12:41:13 +01:00
Conversation 12 Commits 68 Files Changed 8 +58 -58
1 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 957735bba3 - Show all commits

78
frontend/src/components/ListItem/ListItem.tsx
View File

@ -1,65 +1,65 @@
import type { HTMLAttributes } from 'react'; import type { HTMLAttributes } from "react";
import clsx from "clsx";
import { CheckmarkIcon } from "../Icon/Icon";
export interface ListItemProps extends HTMLAttributes<HTMLDivElement> { export interface ListItemProps
extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
title: string; title: string;
subtitle?: string; subtitle?: string;
selected?: boolean; selected?: boolean;
focused?: boolean; focused?: boolean;
} }
const checkmarkIconClasses = 'w-(--font-size-body-md) h-(--font-size-body-md) ml-(--spacing-sm)'; const baseClasses =
"w-full px-(--padding-md) py-(--padding-md) cursor-pointer flex items-center justify-between";
function CheckmarkIcon() { const defaultStateClasses = clsx(
return ( "bg-base-canvas text-base-ink-strong",
<svg "hover:bg-sky-100 hover:text-base-ink-max",
className={checkmarkIconClasses} "focus-visible:bg-sky-100 focus-visible:text-primary focus-visible:outline-none",
viewBox="0 0 24 24" );
fill="none"
stroke="currentColor" const selectedStateClasses = clsx(
strokeWidth="2" "bg-base-canvas text-base-ink-placeholder",
strokeLinecap="round" "hover:bg-sky-100 hover:text-base-ink-max",
strokeLinejoin="round" "focus-visible:bg-sky-100 focus-visible:text-primary focus-visible:outline-none",
> );
<polyline points="20 6 9 17 4 12" />
</svg> const focusedStateClasses = "bg-sky-100 text-base-ink-max";
);
function getStateClasses(selected: boolean, focused: boolean): string {
if (selected && focused) return focusedStateClasses;
if (selected) return selectedStateClasses;
if (focused) return focusedStateClasses;
return defaultStateClasses;
} }
const baseClasses = 'w-full px-(--padding-md) py-(--padding-md) cursor-pointer flex items-center justify-between';
const defaultStateClasses =
'bg-base-canvas text-base-ink-strong hover:bg-sky-100 hover:text-base-ink-max focus-visible:bg-sky-100 focus-visible:text-primary focus-visible:outline-none';
const selectedStateClasses =
'bg-base-canvas text-base-ink-placeholder hover:bg-sky-100 hover:text-base-ink-max focus-visible:bg-sky-100 focus-visible:text-primary focus-visible:outline-none';
const focusedStateClasses = 'bg-sky-100 text-base-ink-max';
export default function ListItem({ export default function ListItem({
title, title,
subtitle, subtitle,
selected = false, selected = false,
focused = false, focused = false,
className = '', className,
...props ...props
}: ListItemProps) { }: ListItemProps) {
const getStateClasses = () => {
if (selected && focused) return focusedStateClasses;
if (selected) return selectedStateClasses;
if (focused) return focusedStateClasses;
return defaultStateClasses;
};
const classes = [baseClasses, getStateClasses(), className].filter(Boolean).join(' ');
return ( return (
<div className={classes} tabIndex={-1} role="option" aria-selected={selected} {...props}> <div
className={clsx(
baseClasses,
getStateClasses(selected, focused),
className,
)}
tabIndex={-1}
role="option"
aria-selected={selected}
{...props}
>
<div> <div>
<div className="body-normal-md">{title}</div> <div className="body-normal-md">{title}</div>
{subtitle && <div className="body-light-sm">{subtitle}</div>} {subtitle && <div className="body-light-sm">{subtitle}</div>}
</div> </div>
{selected && ( {selected && (
<div className="shrink-0"> <div className="shrink-0 ml-(--spacing-sm)">
<CheckmarkIcon /> <CheckmarkIcon />
</div> </div>
)} )}