feat: Add typed-bem integration for alert component and update snapshot

packages/components/package.json

@@ -82,6 +82,7 @@
 		"query-selector-all-shadow-root": "0.0.3",
 		"query-selector-shadow-root": "0.0.3",
 		"rgba-convert": "0.3.0",
+		"typed-bem": "1.0.0-beta.7",
 		"wcag-contrast": "3.0.0"
 	},
 	"devDependencies": {

packages/components/src/functional-components/Alert/Alert.tsx

@@ -8,13 +8,54 @@ import { KolButtonWcTag } from '../../core/component-names';
 
 import AlertIcon from '../AlertIcon';
 import KolHeadingFc from '../Heading';
+import typedBem from 'typed-bem';
+
+/**
+ * Define the BEM class names for the alert component.
+ */
+type AlertBem = {
+	'kol-alert': {
+		elements: {
+			container: {
+				modifiers: never;
+			};
+			'container-content': {
+				modifiers: never;
+			};
+			'container-heading': {
+				modifiers: never;
+			};
+			'close-button': {
+				modifiers: Set<'close'>;
+			};
+			content: {
+				modifiers: never;
+			};
+			heading: {
+				modifiers: never;
+			};
+		};
+		modifiers: Set<'msg' | 'card' | 'hasCloser' | 'default' | 'error' | 'info' | 'warning' | 'success' | 'variant'>;
+	};
+};
+
+const bem = typedBem<AlertBem>();
 
 export type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &
 	Partial<Omit<InternalAlertProps, 'on'>> & {
 		onCloserClick?: () => void;
 		onAlertTimeout?: () => void;
 	};
 
+/**
+ * Define the static BEM class names for the alert component.
+ */
+const bemContainer = bem('kol-alert', 'container'); // kol-alert__container
+const bemContainerContent = bem('kol-alert', 'container-content'); // kol-alert__container-content
+const bemCloseButton = bem('kol-alert', 'close-button'); // kol-alert__close-button
+const bemContent = bem('kol-alert', 'content'); // kol-alert__content
+const bemHeading = bem('kol-alert', 'heading'); // kol-alert__heading
+
 const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 	const { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onAlertTimeout, onCloserClick, level, ...other } = props;
 
@@ -34,27 +75,36 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 		}, 10000);
 	}
 
+	/**
+	 * Define the dynamic BEM class names for the alert component.
+	 */
+	const bemRoot = bem('kol-alert', {
+		hasCloser: !!hasCloser,
+		[type]: true,
+		[variant]: true,
+	});
+
 	const rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {
-		class: clsx('kol-alert', `kol-alert--${type}`, `kol-alert--${variant}`, { 'kol-alert--hasCloser': !!hasCloser }, classNames),
+		class: clsx(bemRoot, classNames),
 		role: alert ? 'alert' : undefined,
 		...other,
 	};
 
 	return (
 		<div {...rootProps}>
-			<div class="kol-alert__container">
+			<div class={bemContainer}>
 				<AlertIcon label={label} type={type} />
-				<div class="kol-alert__container-content">
+				<div class={bemContainerContent}>
 					{label ? (
-						<KolHeadingFc class="kol-alert__heading" level={level}>
+						<KolHeadingFc class={bemHeading} level={level}>
 							{label}
 						</KolHeadingFc>
 					) : null}
-					{variant === 'msg' && <div class="kol-alert__content">{children}</div>}
+					{variant === 'msg' && <div class={bemContent}>{children}</div>}
 				</div>
 				{hasCloser && (
 					<KolButtonWcTag
-						class="kol-alert__close-button close"
+						class={bemCloseButton}
 						_ariaDescription={label?.trim() || ''}
 						_hideLabel
 						_icons={{
@@ -68,7 +118,7 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 					></KolButtonWcTag>
 				)}
 			</div>
-			{variant === 'card' && <div class="kol-alert__content">{children}</div>}
+			{variant === 'card' && <div class={bemContent}>{children}</div>}
 		</div>
 	);
 };

packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
           Test Toast
         </strong>
       </div>
-      <kol-button-wc _ariadescription="Test Toast" _hidelabel="" _label="kol-close-alert" _tooltipalign="left" class="close kol-alert__close-button"></kol-button-wc>
+      <kol-button-wc _ariadescription="Test Toast" _hidelabel="" _label="kol-close-alert" _tooltipalign="left" class="kol-alert__close-button"></kol-button-wc>
     </div>
     <div class="kol-alert__content">
       <div>