refactored -> changes requested

Refs: #6909

packages/components/src/components/@shared/alert-fc/component.tsx

@@ -1,29 +1,41 @@
+import { h, type FunctionalComponent as FC } from '@stencil/core';
+import type { JSXBase } from '@stencil/core/internal';
 import clsx from 'clsx';
-import type { FunctionalComponent as FC } from '@stencil/core';
-import { h } from '@stencil/core';
+
+import { KolButtonWcTag, KolHeadingWcTag, KolIconTag } from '../../../core/component-names';
+import type { AlertType, InternalAlertProps } from '../../../schema';
 import { Log } from '../../../schema';
-import type { JSXBase } from '@stencil/core/internal';
-import { AlertIcon, CloserButton, Content, HeadingContent } from './components';
-import { DEFAULT_PROPS, type KolAlertFcProps } from './_types';
+import { translate } from '../../../i18n';
+
+const Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = (props) => {
+	return <KolIconTag class="heading-icon" _label={props.label ? '' : props.ariaLabel} _icons={props.icon} />;
+};
+
+const AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {
+	switch (type) {
+		case 'error':
+			return <Icon ariaLabel={translate('kol-error')} icon="codicon codicon-error" label={label} />;
+		case 'info':
+			return <Icon ariaLabel={translate('kol-info')} icon="codicon codicon-info" label={label} />;
+		case 'warning':
+			return <Icon ariaLabel={translate('kol-warning')} icon="codicon codicon-warning" label={label} />;
+		case 'success':
+			return <Icon ariaLabel={translate('kol-success')} icon="codicon codicon-pass" label={label} />;
+		default:
+			return <Icon ariaLabel={translate('kol-message')} icon="codicon codicon-comment" label={label} />;
+	}
+};
+
+export type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &
+	Partial<Omit<InternalAlertProps, 'on'>> & {
+		onCloserClick?: () => void;
+		onVibrationTimeout?: () => void;
+	};
 
 const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
-	const {
-		class: classNames = {},
-		_type = DEFAULT_PROPS._type,
-		_variant = DEFAULT_PROPS._variant,
-		_label,
-		_hasCloser,
-		_alert,
-		onVibrationTimeout,
-		onCloserClick,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		_on,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		_level,
-		...other
-	} = props;
+	const { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onVibrationTimeout, onCloserClick, level, ...other } = props;
 
-	if (_alert && navigator.vibrate) {
+	if (alert && navigator.vibrate) {
 		/**
 		 * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate
 		 * - https://googlechrome.github.io/samples/vibration/
@@ -39,28 +51,37 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 		}, 10000);
 	}
 
-	const rootClasses = {
-		'kol-alert-wc': true,
-		alert: true,
-		[_type as string]: true,
-		[_variant as string]: true,
-		hasCloser: !!_hasCloser,
-	};
-
 	const rootProps = {
-		class: clsx(rootClasses, classNames),
-		role: _alert ? 'alert' : undefined,
+		class: clsx('kol-alert-wc', 'alert', type, variant, { hasCloser: !!hasCloser }, classNames),
+		role: alert ? 'alert' : undefined,
 		...other,
 	} as Partial<JSXBase.HTMLAttributes<HTMLDivElement>>;
 
 	return (
 		<div {...rootProps}>
 			<div class="heading">
-				<AlertIcon label={_label} type={_type} />
-				<HeadingContent {...props}>{children}</HeadingContent>
-				{_hasCloser && <CloserButton label={props._label} onClick={onCloserClick} />}
+				<AlertIcon label={label} type={type} />
+				<div class="heading-content">
+					{label ? <KolHeadingWcTag _label={label} _level={level} /> : null}
+					{variant === 'msg' && <div class="content">{children}</div>}
+				</div>
+				{hasCloser && (
+					<KolButtonWcTag
+						class="close"
+						_ariaDescription={label?.trim() || ''}
+						_hideLabel
+						_icons={{
+							left: {
+								icon: 'codicon codicon-close',
+							},
+						}}
+						_label={translate('kol-close-alert')}
+						_on={{ onClick: onCloserClick }}
+						_tooltipAlign="left"
+					></KolButtonWcTag>
+				)}
 			</div>
-			{_variant === 'card' && <Content>{children}</Content>}
+			{variant === 'card' && <div class="content">{children}</div>}
 		</div>
 	);
 };

packages/components/src/components/@shared/form-field-msg.tsx

@@ -21,8 +21,8 @@ export const FormFieldMsg: FunctionalComponent<FormFieldMsgProps> = ({ _alert, _
 		 */
 		aria-hidden="true"
 		id={`${_id}-error`}
-		_alert={_alert}
-		_type="error"
+		alert={_alert}
+		type="error"
 		class={clsx({
 			error: true,
 			'visually-hidden': _hideError === true,

packages/components/src/components/alert/component.tsx

@@ -4,6 +4,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { watchHeadingLevel } from '../heading/validation';
 import type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';
 import { KolAlertFc } from '../@shared';
+import type { KolAlertFcProps } from '../@shared/alert-fc/component';
 
 /**
  * @internal
@@ -23,9 +24,22 @@ export class KolAlertWc implements AlertAPI {
 	};
 
 	public render(): JSX.Element {
+		const { _alert, _hasCloser, _label, _level, _type, _variant } = this.state;
+
+		const props: KolAlertFcProps = {
+			alert: _alert,
+			hasCloser: _hasCloser,
+			label: _label,
+			level: _level,
+			type: _type,
+			variant: _variant,
+			onCloserClick: this.close,
+			onVibrationTimeout: this.handleVibrationTimeout,
+		};
+
 		return (
 			<Host>
-				<KolAlertFc {...this.state} onCloserClick={this.close} onVibrationTimeout={this.handleVibrationTimeout}>
+				<KolAlertFc {...props}>
 					<slot />
 				</KolAlertFc>
 			</Host>

packages/components/src/components/form/shadow.tsx

@@ -54,7 +54,7 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc _type="error" _variant="msg">
+			<KolAlertFc type="error" variant="msg">
 				{translate('kol-error-list-message')}
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>

packages/components/src/schema/components/alert.ts

@@ -26,6 +26,8 @@ type OptionalAlertProps = {
 type RequiredAlertStates = RequiredAlertProps;
 type OptionalAlertStates = OptionalAlertProps;
 
+export type InternalAlertProps = RequiredAlertProps & OptionalAlertProps;
+
 export type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;
 export type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;
 export type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;