BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update message blocks

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-14 17:10:48 -05:00
parent 31c44d3d92
commit bcc5de6d7e
11 changed files with 33 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/component/message/DangerMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const DangerMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function DangerMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-danger-message-block" data-testid="mattrixwv-danger-message-block"
@@ -15,12 +14,7 @@ const DangerMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-danger-xlight text-danger-dark" "bg-danger-xlight text-danger-dark"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
DangerMessageBlock.displayName = "DangerMessageBlock";
export default DangerMessageBlock;

12
lib/component/message/DarkMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const DarkMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function DarkMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-dark-message-block" data-testid="mattrixwv-dark-message-block"
@@ -15,12 +14,7 @@ const DarkMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-dark text-dark-xlight" "bg-dark text-dark-xlight"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
DarkMessageBlock.displayName = "DarkMessageBlock";
export default DarkMessageBlock;

12
lib/component/message/InfoMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const InfoMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function InfoMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-info-message-block" data-testid="mattrixwv-info-message-block"
@@ -15,12 +14,7 @@ const InfoMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-info-xlight text-info-xdark" "bg-info-xlight text-info-xdark"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
InfoMessageBlock.displayName = "InfoMessageBlock";
export default InfoMessageBlock;

12
lib/component/message/LightMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const LightMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function LightMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-light-message-block" data-testid="mattrixwv-light-message-block"
@@ -15,12 +14,7 @@ const LightMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-white text-black" "bg-white text-black"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
LightMessageBlock.displayName = "LightMessageBlock";
export default LightMessageBlock;

12
lib/component/message/MessageBlock.tsx
View File

@@ -1,14 +1,13 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function MessageBlock({
className, className,
outline = "sm", outline = "sm",
rounded = "lg", rounded = "lg",
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<div <div
data-testid="mattrixwv-message-block" data-testid="mattrixwv-message-block"
@@ -30,12 +29,7 @@ const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
"rounded-xl": rounded === "xl" "rounded-xl": rounded === "xl"
} }
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
MessageBlock.displayName = "MessageBlock";
export default MessageBlock;

12
lib/component/message/MoltenMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const MoltenMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function MoltenMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-molten-message-block" data-testid="mattrixwv-molten-message-block"
@@ -15,12 +14,7 @@ const MoltenMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-molten-xlight text-molten-mid" "bg-molten-xlight text-molten-mid"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
MoltenMessageBlock.displayName = "MoltenMessageBlock";
export default MoltenMessageBlock;

12
lib/component/message/PrimaryMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const PrimaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function PrimaryMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-primary-message-block" data-testid="mattrixwv-primary-message-block"
@@ -15,12 +14,7 @@ const PrimaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-primary-xlight text-primary-dark" "bg-primary-xlight text-primary-dark"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
PrimaryMessageBlock.displayName = "PrimaryMessageBlock";
export default PrimaryMessageBlock;

12
lib/component/message/SecondaryMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const SecondaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function SecondaryMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-secondary-message-block" data-testid="mattrixwv-secondary-message-block"
@@ -15,12 +14,7 @@ const SecondaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-secondary-xlight text-secondary-mid" "bg-secondary-xlight text-secondary-mid"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
SecondaryMessageBlock.displayName = "SecondaryMessageBlock";
export default SecondaryMessageBlock;

12
lib/component/message/SuccessMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const SuccessMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function SuccessMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-success-message-block" data-testid="mattrixwv-success-message-block"
@@ -15,12 +14,7 @@ const SuccessMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-success-xlight text-success-mid" "bg-success-xlight text-success-mid"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
SuccessMessageBlock.displayName = "SuccessMessageBlock";
export default SuccessMessageBlock;

12
lib/component/message/TertiaryMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function TertiaryMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-tertiary-message-block" data-testid="mattrixwv-tertiary-message-block"
@@ -15,12 +14,7 @@ const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-tertiary-xlight text-tertiary-mid" "bg-tertiary-xlight text-tertiary-mid"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
TertiaryMessageBlock.displayName = "TertiaryMessageBlock";
export default TertiaryMessageBlock;

12
lib/component/message/WarningMessageBlock.tsx
View File

@@ -1,13 +1,12 @@
import type { MessageBlockProps } from "$/types/MessageTypes"; import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock"; import MessageBlock from "./MessageBlock";
const WarningMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({ export default function WarningMessageBlock({
className, className,
...messageProps ...messageProps
}, ref ) => { }: Readonly<MessageBlockProps>){
return ( return (
<MessageBlock <MessageBlock
data-testid="mattrixwv-warning-message-block" data-testid="mattrixwv-warning-message-block"
@@ -15,12 +14,7 @@ const WarningMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className, className,
"bg-warning-xlight text-warning-dark" "bg-warning-xlight text-warning-dark"
)} )}
ref={ref}
{...messageProps} {...messageProps}
/> />
); );
}); }
WarningMessageBlock.displayName = "WarningMessageBlock";
export default WarningMessageBlock;