refactor: patternhub examples to align with figma props

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -26,7 +26,7 @@ import {
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import {
 	handleFrameworkEvent,
-	messageVisible
+	stringPropVisible
 } from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
@@ -182,7 +182,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				</Show>
 			</label>
 
-			<Show when={messageVisible(props.message, props.showMessage)}>
+			<Show when={stringPropVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}

packages/components/src/components/infotext/infotext.lite.tsx

@@ -19,7 +19,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}
-			data-hide-icon-after={getHideProp(props.showIcon ?? true)}>
+			data-hide-icon-before={getHideProp(props.showIcon ?? true)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>

packages/components/src/components/input/input.lite.tsx

@@ -37,7 +37,7 @@ import {
 import DBInfotext from '../infotext/infotext.lite';
 import {
 	handleFrameworkEvent,
-	messageVisible
+	stringPropVisible
 } from '../../utils/form-components';
 
 useMetadata({});
@@ -231,7 +231,7 @@ export default function DBInput(props: DBInputProps) {
 				</datalist>
 			</Show>
 			{props.children}
-			<Show when={messageVisible(props.message, props.showMessage)}>
+			<Show when={stringPropVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}

packages/components/src/components/notification/model.ts

@@ -44,11 +44,6 @@ export type DBNotificationDefaultProps = {
 	 */
 	headline?: string | any;
 
-	/**
-	 * The linkVariant will be used if slotLink is set.
-	 */
-	linkVariant?: NotificationLinkVariantType;
-
 	/**
 	 * The slotImage can be set instead of an icon.
 	 */
@@ -59,6 +54,16 @@ export type DBNotificationDefaultProps = {
 	 */
 	link?: any;
 
+	/**
+	 * The linkVariant will be used if slotLink is set.
+	 */
+	linkVariant?: NotificationLinkVariantType;
+
+	/**
+	 * Enables or disables the visibility of the headline.
+	 */
+	showHeadline?: boolean;
+
 	/**
 	 * The timestamp attribute can be set for overlay notifications
 	 */

packages/components/src/components/notification/notification.lite.tsx

@@ -4,6 +4,7 @@ import DBButton from '../button/button.lite';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
 import { cls, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { stringPropVisible } from '../../utils/form-components';
 
 useMetadata({});
 
@@ -31,7 +32,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-hide-icon={getHideProp(props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
-			<Show when={props.headline}>
+			<Show when={stringPropVisible(props.headline, props.showHeadline)}>
 				<header>{props.headline}</header>
 			</Show>
 			<p>

packages/components/src/components/select/select.lite.tsx

@@ -35,7 +35,7 @@ import {
 } from '../../shared/model';
 import {
 	handleFrameworkEvent,
-	messageVisible
+	stringPropVisible
 } from '../../utils/form-components';
 
 useMetadata({
@@ -250,7 +250,7 @@ export default function DBSelect(props: DBSelectProps) {
 			<span id={state._placeholderId}>
 				{props.placeholder ?? props.label}
 			</span>
-			<Show when={messageVisible(props.message, props.showMessage)}>
+			<Show when={stringPropVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}

packages/components/src/components/textarea/textarea.lite.tsx

@@ -24,7 +24,7 @@ import {
 import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
 import {
 	handleFrameworkEvent,
-	messageVisible
+	stringPropVisible
 } from '../../utils/form-components';
 
 useMetadata({});
@@ -178,7 +178,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				cols={props.cols}
 			/>
 
-			<Show when={messageVisible(props.message, props.showMessage)}>
+			<Show when={stringPropVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}

packages/components/src/utils/form-components.ts

@@ -10,12 +10,12 @@ export const handleFrameworkEvent = (
 	// ANGULAR: component.writeValue(event.target[modelValue]);
 };
 
-export const messageVisible = (message?: string, showMessage?: boolean) => {
+export const stringPropVisible = (message?: string, showMessage?: boolean) => {
 	if (showMessage === undefined) {
 		return !!message;
 	} else {
 		return showMessage && message;
 	}
 };
 
-export default { messageVisible, handleFrameworkEvent };
+export default { messageVisible: stringPropVisible, handleFrameworkEvent };

showcases/angular-showcase/src/app/components/button/button.component.html

@@ -15,6 +15,7 @@
 			[size]="exampleProps?.size"
 			[icon]="exampleProps?.icon"
 			[noText]="exampleProps?.noText"
+			[showIcon]="exampleProps?.showIcon"
 			[disabled]="exampleProps?.disabled"
 			[width]="exampleProps?.width"
 			(click)="showAlert(exampleName)"

showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html

@@ -18,8 +18,22 @@
 			[required]="exampleProps?.required"
 			[indeterminate]="exampleProps?.indeterminate"
 			[showLabel]="exampleProps?.showLabel"
+			[validation]="exampleProps?.validation"
+			[invalidMessage]="exampleProps?.invalidMessage"
+			[validMessage]="exampleProps?.validMessage"
 			[size]="exampleProps?.size"
 			>{{ exampleName }}</db-checkbox
 		>
+		@if (
+			exampleProps?.showLabel !== undefined && !exampleProps?.showLabel
+		) {
+			<db-infotext
+				semantic="informational"
+				size="small"
+				[showIcon]="false"
+			>
+				{{ exampleName }}
+			</db-infotext>
+		}
 	</ng-template>
 </app-default-component>

showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts

@@ -1,15 +1,22 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { DBCheckbox } from '../../../../../../output/angular/src';
+import {
+	DBBadge,
+	DBCheckbox,
+	DBInfotext
+} from '../../../../../../output/angular/src';
 import defaultComponentVariants from '../../../../../shared/checkbox.json';
 import { DefaultComponent } from '../default.component';
 import { environment } from '../../../environments/environment';
 
 @Component({
 	selector: 'app-checkbox',
 	templateUrl: './checkbox.component.html',
-	imports: environment.webComponents
-		? [DefaultComponent]
-		: [DefaultComponent, DBCheckbox],
+	imports: [
+		environment.webComponents
+			? [DefaultComponent]
+			: [DefaultComponent, DBCheckbox, DBInfotext],
+		DBBadge
+	],
 	standalone: true,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

showcases/angular-showcase/src/app/components/infotext/infotext.component.html

@@ -14,6 +14,7 @@
 			[size]="exampleProps?.size"
 			[semantic]="exampleProps?.semantic"
 			[icon]="exampleProps?.icon"
+			[showIcon]="exampleProps?.showIcon"
 		>
 			{{ exampleName }}
 		</db-infotext>

showcases/angular-showcase/src/app/components/input/input.component.html

@@ -24,6 +24,10 @@
 			[iconAfter]="exampleProps?.iconAfter"
 			[readOnly]="exampleProps?.readOnly"
 			[showLabel]="exampleProps?.showLabel"
+			[showMessage]="exampleProps?.showMessage"
+			[invalidMessage]="exampleProps?.invalidMessage"
+			[validMessage]="exampleProps?.validMessage"
+			[validation]="exampleProps?.validation"
 			[dataList]="
 				exampleProps?.dataList
 					? getDataList(exampleProps?.variant)

showcases/angular-showcase/src/app/components/radio/radio.component.html

@@ -19,6 +19,7 @@
 			[required]="exampleProps?.required"
 			[disabled]="exampleProps?.disabled"
 			[showLabel]="exampleProps?.showLabel"
+			[validation]="exampleProps?.validation"
 		>
 			{{ exampleName }}
 		</db-radio>

showcases/react-showcase/src/components/button/index.tsx

@@ -14,7 +14,8 @@ const getButton = ({
 	width,
 	disabled,
 	children,
-	type
+	type,
+	showIcon
 }: DBButtonProps) => (
 	<DBButton
 		variant={variant}
@@ -24,6 +25,7 @@ const getButton = ({
 		icon={icon}
 		disabled={disabled}
 		width={width}
+		showIcon={showIcon}
 		onClick={() => {
 			// eslint-disable-next-line no-alert
 			alert(children.toString());

showcases/react-showcase/src/components/checkbox/index.tsx

@@ -1,4 +1,4 @@
-import { DBCheckbox } from '../../../../../output/react/src';
+import { DBCheckbox, DBInfotext } from '../../../../../output/react/src';
 import DefaultComponent from '../default-component';
 import { getVariants } from '../data';
 import defaultComponentVariants from '../../../../shared/checkbox.json';
@@ -15,20 +15,33 @@ const getCheckbox = ({
 	disabled,
 	indeterminate,
 	variant,
-	showLabel
+	showLabel,
+	validation,
+	invalidMessage,
+	validMessage
 }: DBCheckboxProps) => (
-	<DBCheckbox
-		label={label}
-		size={size}
-		name={name}
-		defaultChecked={checked}
-		required={required}
-		disabled={disabled}
-		variant={variant}
-		showLabel={showLabel}
-		indeterminate={indeterminate}>
-		{children}
-	</DBCheckbox>
+	<>
+		<DBCheckbox
+			label={label}
+			size={size}
+			name={name}
+			defaultChecked={checked}
+			invalidMessage={invalidMessage}
+			validMessage={validMessage}
+			required={required}
+			disabled={disabled}
+			variant={variant}
+			showLabel={showLabel}
+			indeterminate={indeterminate}
+			validation={validation}>
+			{children}
+		</DBCheckbox>
+		{showLabel !== undefined && !showLabel && (
+			<DBInfotext size="small" semantic="informational" showIcon={false}>
+				{children}
+			</DBInfotext>
+		)}
+	</>
 );
 
 const CheckboxComponent = (props: BaseComponentProps) => {

showcases/react-showcase/src/components/infotext/index.tsx

@@ -5,8 +5,14 @@ import { type DBInfotextProps } from '../../../../../output/react/src/components
 import { getVariants } from '../data';
 import { type BaseComponentProps } from '../base-component-data';
 
-const getInfotext = ({ semantic, size, icon, children }: DBInfotextProps) => (
-	<DBInfotext semantic={semantic} size={size} icon={icon}>
+const getInfotext = ({
+	semantic,
+	size,
+	icon,
+	children,
+	showIcon
+}: DBInfotextProps) => (
+	<DBInfotext semantic={semantic} size={size} icon={icon} showIcon={showIcon}>
 		{children}
 	</DBInfotext>
 );

showcases/react-showcase/src/components/input/index.tsx

@@ -36,7 +36,11 @@ const getInput = ({
 	variant,
 	readOnly,
 	dataList,
-	showLabel
+	showLabel,
+	showMessage,
+	validMessage,
+	validation,
+	invalidMessage
 }: DBInputProps & { dataList: boolean }) => {
 	return (
 		<DBInput
@@ -53,6 +57,10 @@ const getInput = ({
 			readOnly={readOnly}
 			iconAfter={iconAfter}
 			icon={icon}
+			showMessage={showMessage}
+			invalidMessage={invalidMessage}
+			validMessage={validMessage}
+			validation={validation}
 			dataList={dataList ? getDataList(variant) : undefined}
 		/>
 	);

showcases/react-showcase/src/components/notification/index.tsx

@@ -16,7 +16,9 @@ const getNotification = ({
 	link,
 	timestamp,
 	linkVariant,
-	img
+	img,
+	showIcon,
+	showHeadline
 }: DBNotificationProps & { link: boolean; img: boolean }) => (
 	<DBNotification
 		semantic={semantic}
@@ -38,7 +40,9 @@ const getNotification = ({
 		onClose={() => {
 			// eslint-disable-next-line no-alert
 			alert(children.toString());
-		}}>
+		}}
+		showIcon={showIcon}
+		showHeadline={showHeadline}>
 		{children}
 	</DBNotification>
 );