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

button-component #29

Merged
stne3960 merged 22 commits from button-component into main 2025-12-12 11:52:31 +01:00
Conversation 6 Commits 22 Files Changed 24 +24 -8
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 18275043d6 - Show all commits

32
frontend/src/components/Button/Button.tsx
View File

@ -10,13 +10,29 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
} }
const variantClasses: Record<ButtonVariant, string> = { const variantClasses: Record<ButtonVariant, string> = {
primary: primary: `
"bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border hover:border-primary focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100", bg-primary text-base-canvas
secondary: border border-primary
"bg-base-canvas text-base-ink-strong border-solid [border-width:var(--border-width-sm)] border-base-ink-soft hover:bg-base-canvas hover:text-base-ink-strong hover:border-base-ink-medium focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100", hover(bg-secondary text-base-canvas border border-primary)
red: "bg-other-red-100 text-su-white focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:border focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100", focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
green: `.trim(),
"bg-other-green text-su-white focus-visible:bg-base-canvas focus-visible:text-base-ink-strong focus-visible:border-primary focus-visible:border focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100",
secondary: `
bg-base-canvas text-base-ink-strong
border-solid [border-width:var(--border-width-sm)] border-base-ink-soft
hover(bg-base-canvas text-base-ink-strong border-base-ink-medium)
focus-visible(bg-base-canvas text-base-ink-strong border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
`.trim(),
red: `
bg-other-red-100 text-su-white
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
`.trim(),
green: `
bg-other-green text-su-white
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
`.trim(),
}; };
const sizeClasses: Record<ButtonSize, string> = { const sizeClasses: Record<ButtonSize, string> = {
@ -46,7 +62,7 @@ export default function Button({
sizeClasses[size], sizeClasses[size],
className, className,
] ]
.filter(Boolean) .filter(Boolean) // Filter out empty strings and undefined values so they won't pollute the class list
.join(" "); .join(" ");
return ( return (