feat: Switch stable rework

packages/components/src/components/switch/model.ts

@@ -1,17 +1,19 @@
 import {
 	ChangeEventProps,
 	ChangeEventState,
-	EmphasisProps,
 	FocusEventProps,
 	FocusEventState,
 	FormCheckProps,
+	FormMessageProps,
 	FormProps,
 	FormState,
+	FromValidState,
 	GlobalProps,
 	GlobalState,
 	IconLeadingProps,
 	IconProps,
 	IconTrailingProps,
+	LabelPositionProps,
 	SizeProps
 } from '../../shared/model';
 
@@ -20,6 +22,10 @@ export type DBSwitchDefaultProps = {
 	 * Add additional icons to indicate active/inactive state.
 	 */
 	visualAid?: boolean | string;
+	/**
+	 * Use accent styling (same visual appearance as valid state).
+	 */
+	accent?: boolean | string;
 };
 
 export type DBSwitchProps = DBSwitchDefaultProps &
@@ -28,16 +34,18 @@ export type DBSwitchProps = DBSwitchDefaultProps &
 	FocusEventProps<HTMLInputElement> &
 	FormProps &
 	FormCheckProps &
-	EmphasisProps &
+	FormMessageProps &
 	SizeProps &
 	IconProps &
 	IconTrailingProps &
-	IconLeadingProps;
+	IconLeadingProps &
+	LabelPositionProps;
 
 export type DBSwitchDefaultState = {};
 
 export type DBSwitchState = DBSwitchDefaultState &
 	GlobalState &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
-	FormState;
+	FormState &
+	FromValidState;

packages/components/src/components/switch/switch.lite.tsx

@@ -1,5 +1,6 @@
 import {
 	onMount,
+	onUpdate,
 	Show,
 	useDefaultProps,
 	useMetadata,
@@ -8,18 +9,29 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 
+import {
+	DEFAULT_INVALID_MESSAGE,
+	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+	DEFAULT_MESSAGE_ID_SUFFIX,
+	DEFAULT_VALID_MESSAGE,
+	DEFAULT_VALID_MESSAGE_ID_SUFFIX
+} from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import {
 	cls,
+	delay,
 	getBoolean,
 	getBooleanAsString,
 	getHideProp,
+	hasVoiceOver,
+	stringPropVisible,
 	uuid
 } from '../../utils';
 import {
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
 } from '../../utils/form-components';
+import DBInfotext from '../infotext/infotext.lite';
 import { DBSwitchProps, DBSwitchState } from './model';
 
 useMetadata({
@@ -30,14 +42,65 @@ useMetadata({
 		}
 	}
 });
-useDefaultProps<DBSwitchProps>({});
+useDefaultProps<DBSwitchProps>({
+	labelPosition: 'trailing'
+});
 
 export default function DBSwitch(props: DBSwitchProps) {
 	// This is used as forwardRef
 	const _ref = useRef<HTMLInputElement | any>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBSwitchState>({
 		_id: undefined,
+		_messageId: undefined as string | undefined,
+		_validMessageId: undefined as string | undefined,
+		_invalidMessageId: undefined as string | undefined,
+		_invalidMessage: undefined as string | undefined,
+		_descByIds: '' as string,
+		_voiceOverFallback: '' as string,
+
+		hasValidState: () => {
+			return !!(props.validMessage ?? props.validation === 'valid');
+		},
+		handleValidation: () => {
+			if (!_ref?.validity?.valid || props.validation === 'invalid') {
+				state._descByIds = state._invalidMessageId!;
+				state._invalidMessage =
+					props.invalidMessage ||
+					_ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						state._invalidMessage || DEFAULT_INVALID_MESSAGE;
+					delay(() => {
+						state._voiceOverFallback = '';
+					}, 1000);
+				}
+				return;
+			}
+			if (
+				state.hasValidState() &&
+				_ref?.validity?.valid &&
+				props.required
+			) {
+				state._descByIds = state._validMessageId!;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.validMessage ?? DEFAULT_VALID_MESSAGE;
+					delay(() => {
+						state._voiceOverFallback = '';
+					}, 1000);
+				}
+				return;
+			}
+
+			if (stringPropVisible(props.message, props.showMessage)) {
+				state._descByIds = state._messageId!;
+				return;
+			}
+
+			state._descByIds = '';
+		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			useTarget({
 				angular: () =>
@@ -49,6 +112,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 					}
 				}
 			});
+			state.handleValidation();
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
 			if (props.onBlur) {
@@ -64,18 +128,40 @@ export default function DBSwitch(props: DBSwitchProps) {
 
 	onMount(() => {
 		state._id = props.id ?? `switch-${uuid()}`;
+		state._messageId = `${state._id}${DEFAULT_MESSAGE_ID_SUFFIX}`;
+		state._validMessageId = `${state._id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
+		state._invalidMessageId = `${state._id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
+		state.handleValidation();
 	});
 
+	onUpdate(() => {
+		state.handleValidation();
+	}, [
+		props.validation,
+		props.required,
+		props.message,
+		props.showMessage,
+		props.validMessage,
+		props.invalidMessage,
+		props.checked
+	]);
+
 	// jscpd:ignore-end
 
 	return (
 		<label
 			data-visual-aid={getBooleanAsString(props.visualAid)}
 			data-size={props.size}
 			data-hide-label={getHideProp(props.showLabel)}
-			data-emphasis={props.emphasis}
 			htmlFor={state._id}
+			data-label-position={
+				getHideProp(props.showLabel) === 'true'
+					? undefined
+					: props.labelPosition
+			}
+			data-accent={getBooleanAsString(props.accent)}
 			data-hide-asterisk={getHideProp(props.showRequiredAsterisk)}
+			data-custom-validity={props.validation}
 			class={cls('db-switch', props.className)}>
 			<input
 				id={state._id}
@@ -85,8 +171,10 @@ export default function DBSwitch(props: DBSwitchProps) {
 				checked={getBoolean(props.checked, 'checked')}
 				value={props.value}
 				disabled={getBoolean(props.disabled, 'disabled')}
-				aria-invalid={props.validation === 'invalid'}
-				data-custom-validity={props.validation}
+				aria-invalid={
+					props.validation === 'invalid' ? 'true' : undefined
+				}
+				aria-describedby={state._descByIds || undefined}
 				name={props.name}
 				required={getBoolean(props.required, 'required')}
 				data-aid-icon={props.iconLeading ?? props.icon}
@@ -101,9 +189,39 @@ export default function DBSwitch(props: DBSwitchProps) {
 					state.handleFocus(event)
 				}
 			/>
-			<Show when={props.label} else={props.children}>
-				{props.label}
+			<span class="db-switch-label">
+				<Show when={props.label} else={props.children}>
+					{props.label}
+				</Show>
+			</span>
+			<Show when={stringPropVisible(props.message, props.showMessage)}>
+				<DBInfotext
+					id={state._messageId}
+					size="small"
+					icon={props.messageIcon}
+					semantic="adaptive">
+					{props.message}
+				</DBInfotext>
+			</Show>
+			<Show when={state.hasValidState()}>
+				<DBInfotext
+					id={state._validMessageId}
+					size="small"
+					semantic="successful">
+					{props.validMessage ?? DEFAULT_VALID_MESSAGE}
+				</DBInfotext>
 			</Show>
+			<DBInfotext
+				id={state._invalidMessageId}
+				size="small"
+				semantic="critical">
+				{state._invalidMessage ??
+					props.invalidMessage ??
+					DEFAULT_INVALID_MESSAGE}
+			</DBInfotext>
+			<span data-visually-hidden="true" role="status">
+				{state._voiceOverFallback}
+			</span>
 		</label>
 	);
 }