scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1711-switch-icons (pull request #1558)

Browse Source 
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-03-27 09:42:52 +00:00
parent 93c7fe64bf
commit 5de2a993a7
524 changed files with 4442 additions and 6802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/scandic-web/components/TempDesignSystem/Toasts/index.tsx
View File

@@ -1,12 +1,9 @@
import { type ExternalToast, toast as sonnerToast, Toaster } from "sonner"
import {
CheckCircleIcon,
CloseLargeIcon,
CrossCircle,
InfoCircleIcon,
WarningTriangle,
} from "@/components/Icons"
MaterialIcon,
type MaterialIconSetIconProps,
} from "@scandic-hotels/design-system/Icons"
import Button from "../Button"
import Body from "../Text/Body"
@@ -20,27 +17,31 @@ export function ToastHandler() {
return <Toaster position="bottom-right" duration={5000} />
}
function getIcon(variant: ToastsProps["variant"]) {
interface AlertIconProps {
variant: ToastsProps["variant"]
}
function AlertIcon({
variant,
...props
}: AlertIconProps & MaterialIconSetIconProps) {
switch (variant) {
case "error":
return CrossCircle
return <MaterialIcon icon="cancel" {...props} />
case "info":
return InfoCircleIcon
return <MaterialIcon icon="info" {...props} />
case "success":
return CheckCircleIcon
return <MaterialIcon icon="check_circle" {...props} />
case "warning":
return WarningTriangle
return <MaterialIcon icon="warning" {...props} />
}
}
export function Toast({ children, message, onClose, variant }: ToastsProps) {
const className = toastVariants({ variant })
const Icon = getIcon(variant)
const Icon = <AlertIcon variant={variant} color="Icon/Inverted" />
return (
<div className={className}>
<div className={styles.iconContainer}>
{Icon && <Icon color="white" height={24} width={24} />}
</div>
<div className={styles.iconContainer}>{Icon && Icon}</div>
{message ? (
<Body className={styles.message}>{message}</Body>
) : (
@@ -48,7 +49,7 @@ export function Toast({ children, message, onClose, variant }: ToastsProps) {
)}
{onClose ? (
<Button onClick={onClose} variant="icon" intent="tertiary">
<CloseLargeIcon />
<MaterialIcon icon="close" />
</Button>
) : null}
</div>