diff --git a/app/components/Alert/Alert.container.tsx b/app/components/Alert/Alert.container.tsx index b937ddf..a914245 100644 --- a/app/components/Alert/Alert.container.tsx +++ b/app/components/Alert/Alert.container.tsx @@ -50,9 +50,11 @@ const AlertContainer = memo( ? "var(--color-border-invert-negative-primary)" : undefined, titleColor: "text-[var(--color-content-invert-negative-primary)]", - descriptionColor: "text-[var(--color-content-invert-negative-primary)]", + descriptionColor: + "text-[var(--color-content-invert-negative-primary)]", iconColor: "var(--color-red-red500)", - closeButtonColor: "text-[var(--color-content-invert-negative-primary)]", + closeButtonColor: + "text-[var(--color-content-invert-negative-primary)]", closeButtonIconColor: "var(--color-content-invert-primary)", }; default: diff --git a/app/components/Alert/Alert.types.ts b/app/components/Alert/Alert.types.ts index 1515d5f..c817808 100644 --- a/app/components/Alert/Alert.types.ts +++ b/app/components/Alert/Alert.types.ts @@ -1,5 +1,3 @@ -import type { ReactNode } from "react"; - export interface AlertProps { title: string; description?: string; diff --git a/app/components/Alert/Alert.view.tsx b/app/components/Alert/Alert.view.tsx index 2a49bbb..637e8df 100644 --- a/app/components/Alert/Alert.view.tsx +++ b/app/components/Alert/Alert.view.tsx @@ -1,11 +1,10 @@ -import { getAssetPath, ASSETS } from "../../lib/assetUtils"; import type { AlertViewProps } from "./Alert.types"; export function AlertView({ title, description, - status, - type, + status: _status, + type: _type, className, containerClasses, containerStyle, @@ -55,32 +54,32 @@ export function AlertView({ className={closeButtonClasses} aria-label="Close alert" > - + - - - - - - - - + + + + + + + ); } diff --git a/app/components/Tooltip/Tooltip.container.tsx b/app/components/Tooltip/Tooltip.container.tsx index b58d37b..0a16aba 100644 --- a/app/components/Tooltip/Tooltip.container.tsx +++ b/app/components/Tooltip/Tooltip.container.tsx @@ -5,13 +5,7 @@ import { TooltipView } from "./Tooltip.view"; import type { TooltipProps } from "./Tooltip.types"; const TooltipContainer = memo( - ({ - children, - text, - position = "top", - className = "", - disabled = false, - }) => { + ({ children, text, position = "top", className = "", disabled = false }) => { const [isVisible, setIsVisible] = useState(false); if (disabled) { @@ -29,8 +23,6 @@ const TooltipContainer = memo( position === "top" ? "bottom-[-7px]" : "top-[-7px]" } left-1/2 -translate-x-1/2`; - const tooltipId = `tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`; - return (
{ export const Default = Template.bind({}); Default.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "default", type: "toast", }; @@ -43,7 +44,8 @@ Default.args = { export const Positive = Template.bind({}); Positive.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "positive", type: "toast", }; @@ -51,7 +53,8 @@ Positive.args = { export const Warning = Template.bind({}); Warning.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "warning", type: "toast", }; @@ -59,7 +62,8 @@ Warning.args = { export const Danger = Template.bind({}); Danger.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "danger", type: "toast", }; @@ -67,7 +71,8 @@ Danger.args = { export const Banner = Template.bind({}); Banner.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "default", type: "banner", }; @@ -75,7 +80,8 @@ Banner.args = { export const BannerPositive = Template.bind({}); BannerPositive.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "positive", type: "banner", }; @@ -83,7 +89,8 @@ BannerPositive.args = { export const BannerWarning = Template.bind({}); BannerWarning.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "warning", type: "banner", }; @@ -91,7 +98,8 @@ BannerWarning.args = { export const BannerDanger = Template.bind({}); BannerDanger.args = { title: "Short alert banner message goes here", - description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", + description: + "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "danger", type: "banner", };