Improve Alert component

This commit is contained in:
Arnaud 2024-08-28 10:01:48 +02:00
parent 2023ecbd25
commit e1a20e96ab
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
3 changed files with 61 additions and 15 deletions

View File

@ -1,5 +1,5 @@
import "./alert.css"; import "./alert.css";
import { CSSProperties } from "react"; import { CSSProperties, ReactNode } from "react";
interface CustomStyleCSS extends CSSProperties { interface CustomStyleCSS extends CSSProperties {
"--codex-border-radius"?: string; "--codex-border-radius"?: string;
@ -11,7 +11,9 @@ interface CustomStyleCSS extends CSSProperties {
type Props = { type Props = {
variant: "success" | "warning" | "toast"; variant: "success" | "warning" | "toast";
message: string; title: string;
children: ReactNode;
className?: string; className?: string;
@ -23,12 +25,16 @@ type Props = {
* --codex-font-family * --codex-font-family
*/ */
style?: CustomStyleCSS; style?: CustomStyleCSS;
Icon?: ReactNode;
}; };
export function Alert({ export function Alert({
variant, variant,
message,
style, style,
title,
Icon,
children,
className = "", className = "",
...rest ...rest
}: Props) { }: Props) {
@ -38,8 +44,16 @@ export function Alert({
style={style} style={style}
{...rest} {...rest}
> >
<b className="alert-message">{variant} ! </b> {Icon && (
<div>{message}</div> <span className="alert-circleIcon">
<span className="alert-icon">{Icon}</span>
</span>
)}
<div className="alert-body">
<b className="alert-title">{title}</b>
<div className="alert-message">{children}</div>
</div>
</div> </div>
); );
} }

View File

@ -1,23 +1,42 @@
.alert { .alert {
border: 1px solid var(--codex-alert-border-color); border-top: 2px solid rgb(var(--codex-alert-color));
color: 1px solid var(--codex-alert-border-color); background-color: rgba(var(--codex-alert-color), 0.1);
color: 1px solid var(--codex-alert-color);
border-radius: var(--codex-border-radius); border-radius: var(--codex-border-radius);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
font-family: var(--codex-font-family); font-family: var(--codex-font-family);
color: var(--codex-alert-color); color: var(--codex-color);
word-break: break-word; word-break: break-word;
display: flex;
gap: 1rem;
} }
.alert-message { .alert-icon {
display: flex;
width: 1rem;
color: rgb(var(--codex-alert-color));
}
.alert-circleIcon {
background: rgba(var(--codex-alert-color), 0.2);
border-radius: 75px;
height: 1.75rem;
width: 1.75rem;
display: flex;
justify-content: center;
align-items: center;
}
.alert-title {
text-transform: capitalize; text-transform: capitalize;
margin-bottom: 0.25rem;
display: inline-block;
} }
.alert--success { .alert--success {
--codex-alert-border-color: var(--codex-color-primary); --codex-alert-color: var(--codex-color-success);
--codex-alert-color: var(--codex-color-primary);
} }
.alert--warning { .alert--warning {
--codex-alert-border-color: var(--codex-color-warning);
--codex-alert-color: var(--codex-color-warning); --codex-alert-color: var(--codex-color-warning);
} }

View File

@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react"; import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "../src/components/Alert/Alert"; import { Alert } from "../src/components/Alert/Alert";
import { AlertCircle, CircleIcon, InfoIcon } from "lucide-react";
const meta = { const meta = {
title: "Overlays/Alert", title: "Overlays/Alert",
@ -20,21 +21,33 @@ type Story = StoryObj<typeof meta>;
export const Success: Story = { export const Success: Story = {
args: { args: {
message: "This is a success message.", title: "Success",
children: "This is a success message.",
variant: "success", variant: "success",
}, },
}; };
export const Warning: Story = { export const Warning: Story = {
args: { args: {
message: "This is a warning message.", children: "This is a warning message.",
variant: "warning", variant: "warning",
title: "Warning",
},
};
export const Icon: Story = {
args: {
Icon: <InfoIcon />,
children: "This is a warning message.",
variant: "success",
title: "Success",
}, },
}; };
export const CustomStyle: Story = { export const CustomStyle: Story = {
args: { args: {
message: "This is a custom style message.", title: "Warning",
children: "This is a custom style message.",
variant: "warning", variant: "warning",
style: { "--codex-color-warning": "red" }, style: { "--codex-color-warning": "red" },
}, },