From c25c62cd95617fb0bd8677233e0df599e3d0ba1a Mon Sep 17 00:00:00 2001 From: Makko Date: Fri, 18 Oct 2024 06:34:19 +0200 Subject: [PATCH] refactored -> changes requested Refs: #6909 --- .../src/components/@shared/alert-fc/_types.ts | 14 --- .../components/@shared/alert-fc/component.tsx | 91 ++++++++++++------- .../components/alert-icon.component.tsx | 26 ------ .../components/closer-button.component.tsx | 24 ----- .../alert-fc/components/content.component.tsx | 8 -- .../components/heading-content.component.tsx | 21 ----- .../@shared/alert-fc/components/index.ts | 4 - .../src/components/@shared/form-field-msg.tsx | 4 +- .../src/components/alert/component.tsx | 16 +++- .../components/src/components/form/shadow.tsx | 2 +- .../components/src/schema/components/alert.ts | 2 + 11 files changed, 76 insertions(+), 136 deletions(-) delete mode 100644 packages/components/src/components/@shared/alert-fc/_types.ts delete mode 100644 packages/components/src/components/@shared/alert-fc/components/alert-icon.component.tsx delete mode 100644 packages/components/src/components/@shared/alert-fc/components/closer-button.component.tsx delete mode 100644 packages/components/src/components/@shared/alert-fc/components/content.component.tsx delete mode 100644 packages/components/src/components/@shared/alert-fc/components/heading-content.component.tsx delete mode 100644 packages/components/src/components/@shared/alert-fc/components/index.ts diff --git a/packages/components/src/components/@shared/alert-fc/_types.ts b/packages/components/src/components/@shared/alert-fc/_types.ts deleted file mode 100644 index a3f356e68d..0000000000 --- a/packages/components/src/components/@shared/alert-fc/_types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { JSXBase } from '@stencil/core/internal'; -import type { AlertProps } from '../../../schema'; - -export type KolAlertFcProps = JSXBase.HTMLAttributes & - AlertProps & { - onCloserClick?: () => void; - onVibrationTimeout?: () => void; - }; - -export const DEFAULT_PROPS: Partial = { - _level: 1, - _variant: 'msg', - _type: 'default', -}; diff --git a/packages/components/src/components/@shared/alert-fc/component.tsx b/packages/components/src/components/@shared/alert-fc/component.tsx index 206957f197..514964bb74 100644 --- a/packages/components/src/components/@shared/alert-fc/component.tsx +++ b/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 ; +}; + +const AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => { + switch (type) { + case 'error': + return ; + case 'info': + return ; + case 'warning': + return ; + case 'success': + return ; + default: + return ; + } +}; + +export type KolAlertFcProps = JSXBase.HTMLAttributes & + Partial> & { + onCloserClick?: () => void; + onVibrationTimeout?: () => void; + }; const KolAlertFc: FC = (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 = (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>; return (
- - {children} - {_hasCloser && } + +
+ {label ? : null} + {variant === 'msg' &&
{children}
} +
+ {hasCloser && ( + + )}
- {_variant === 'card' && {children}} + {variant === 'card' &&
{children}
}
); }; diff --git a/packages/components/src/components/@shared/alert-fc/components/alert-icon.component.tsx b/packages/components/src/components/@shared/alert-fc/components/alert-icon.component.tsx deleted file mode 100644 index f32a95e803..0000000000 --- a/packages/components/src/components/@shared/alert-fc/components/alert-icon.component.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { h } from '@stencil/core'; -import type { FunctionalComponent as FC } from '@stencil/core'; -import { KolIconTag } from '../../../../core/component-names'; -import { translate } from '../../../../i18n'; -import type { AlertType } from '../../../../schema'; - -const Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = (props) => { - return ; -}; - -const AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => { - switch (type) { - case 'error': - return ; - case 'info': - return ; - case 'warning': - return ; - case 'success': - return ; - default: - return ; - } -}; - -export default AlertIcon; diff --git a/packages/components/src/components/@shared/alert-fc/components/closer-button.component.tsx b/packages/components/src/components/@shared/alert-fc/components/closer-button.component.tsx deleted file mode 100644 index 29875070ae..0000000000 --- a/packages/components/src/components/@shared/alert-fc/components/closer-button.component.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { FunctionalComponent as FC } from '@stencil/core'; -import { h } from '@stencil/core'; -import { KolButtonWcTag } from '../../../../core/component-names'; -import { translate } from '../../../../i18n'; - -const CloserButton: FC<{ label?: string; onClick?: () => void }> = (props) => { - return ( - - ); -}; - -export default CloserButton; diff --git a/packages/components/src/components/@shared/alert-fc/components/content.component.tsx b/packages/components/src/components/@shared/alert-fc/components/content.component.tsx deleted file mode 100644 index 3f39124f7f..0000000000 --- a/packages/components/src/components/@shared/alert-fc/components/content.component.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { h } from '@stencil/core'; -import type { FunctionalComponent as FC } from '@stencil/core'; - -const Content: FC = (_, children) => { - return
{children}
; -}; - -export default Content; diff --git a/packages/components/src/components/@shared/alert-fc/components/heading-content.component.tsx b/packages/components/src/components/@shared/alert-fc/components/heading-content.component.tsx deleted file mode 100644 index 4ab09e71cd..0000000000 --- a/packages/components/src/components/@shared/alert-fc/components/heading-content.component.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { h } from '@stencil/core'; -import type { FunctionalComponent as FC } from '@stencil/core'; -import { DEFAULT_PROPS, type KolAlertFcProps } from '../_types'; -import Content from './content.component'; -import { KolHeadingWcTag } from '../../../../core/component-names'; - -const HeadingContent: FC = ({ _label, _level = DEFAULT_PROPS._level, _variant = DEFAULT_PROPS._variant }, children) => { - const content: unknown[] = []; - - if (_label) { - content.push(); - } - - if (_variant === 'msg') { - content.push({children}); - } - - return
{content}
; -}; - -export default HeadingContent; diff --git a/packages/components/src/components/@shared/alert-fc/components/index.ts b/packages/components/src/components/@shared/alert-fc/components/index.ts deleted file mode 100644 index 8aa0f7e34a..0000000000 --- a/packages/components/src/components/@shared/alert-fc/components/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as AlertIcon } from './alert-icon.component'; -export { default as CloserButton } from './closer-button.component'; -export { default as HeadingContent } from './heading-content.component'; -export { default as Content } from './content.component'; diff --git a/packages/components/src/components/@shared/form-field-msg.tsx b/packages/components/src/components/@shared/form-field-msg.tsx index 62cec5bac1..e288c7ba81 100644 --- a/packages/components/src/components/@shared/form-field-msg.tsx +++ b/packages/components/src/components/@shared/form-field-msg.tsx @@ -21,8 +21,8 @@ export const FormFieldMsg: FunctionalComponent = ({ _alert, _ */ aria-hidden="true" id={`${_id}-error`} - _alert={_alert} - _type="error" + alert={_alert} + type="error" class={clsx({ error: true, 'visually-hidden': _hideError === true, diff --git a/packages/components/src/components/alert/component.tsx b/packages/components/src/components/alert/component.tsx index d63c297729..f315032c95 100644 --- a/packages/components/src/components/alert/component.tsx +++ b/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 ( - + diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx index 27a67a9a1e..551964ca12 100644 --- a/packages/components/src/components/form/shadow.tsx +++ b/packages/components/src/components/form/shadow.tsx @@ -54,7 +54,7 @@ export class KolForm implements FormAPI { private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element { return ( - + {translate('kol-error-list-message')}