/* This file is part of GNU Taler (C) 2022 Taler Systems S.A. GNU Taler is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version. GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions import CloseIcon from "../svg/close_24px.svg"; import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.svg"; import InfoOutlinedIcon from "../svg/info_outlined_24px.svg"; import ReportProblemOutlinedIcon from "../svg/report_problem_outlined_24px.svg"; import SuccessOutlinedIcon from "../svg/success_outlined_24px.svg"; import { IconButton } from "./Button.js"; // eslint-disable-next-line import/extensions import { darken, lighten } from "./colors/manipulation"; import { Paper } from "./Paper.js"; // eslint-disable-next-line import/extensions import { theme } from "./style"; import { Typography } from "./Typography.js"; const defaultIconMapping = { success: SuccessOutlinedIcon, warning: ReportProblemOutlinedIcon, error: ErrorOutlineIcon, info: InfoOutlinedIcon, }; const baseStyle = css` background-color: transparent; display: flex; padding: 6px 16px; `; const colorVariant = { standard: css` color: var(--color-light-06); background-color: var(--color-background-light-09); `, outlined: css` color: var(--color-light-06); border-width: 1px; border-style: solid; border-color: var(--color-light); `, filled: css` color: "#fff"; font-weight: ${theme.typography.fontWeightMedium}; background-color: var(--color-main); `, }; interface Props { title?: string; variant?: "filled" | "outlined" | "standard"; role?: string; onClose?: () => Promise; // icon: VNode; severity?: "info" | "warning" | "success" | "error"; children: ComponentChildren; icon?: boolean; } const getColor = theme.palette.mode === "light" ? darken : lighten; const getBackgroundColor = theme.palette.mode === "light" ? lighten : darken; function Icon({ svg }: { svg: VNode }): VNode { return (
); } function Action({ children }: { children: ComponentChildren }): VNode { return (
{children}
); } function Message({ title, children, }: { title?: string; children: ComponentChildren; }): VNode { return (
{title && ( {title} )} {children}
); } export function Alert({ variant = "standard", severity = "success", title, children, icon, onClose, ...rest }: Props): VNode { return ( {icon != false ? : null} {children} {onClose && ( )} ); }