chore: update snapshots

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

@@ -11,7 +11,7 @@ import { DBCheckboxProps, DBCheckboxState } from './model';
 import {
 	cls,
 	delay,
-	getBooleanAsString,
+	stringPropVisible,
 	getHideProp,
 	hasVoiceOver,
 	uuid
@@ -24,10 +24,7 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import {
-	handleFrameworkEvent,
-	stringPropVisible
-} from '../../utils/form-components';
+import { handleFrameworkEvent } from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
 useMetadata({

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

@@ -11,7 +11,7 @@ import {
 import {
 	cls,
 	delay,
-	getBooleanAsString,
+	stringPropVisible,
 	getHideProp,
 	hasVoiceOver,
 	isArrayOfStrings,
@@ -35,10 +35,7 @@ import {
 	ValueLabelType
 } from '../../shared/model';
 import DBInfotext from '../infotext/infotext.lite';
-import {
-	handleFrameworkEvent,
-	stringPropVisible
-} from '../../utils/form-components';
+import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
 	angular: {

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

@@ -69,6 +69,11 @@ export type DBNotificationDefaultProps = {
 	 */
 	timestamp?: string;
 
+	/**
+	 * Enables or disables the visibility of the timestamp.
+	 */
+	showTimestamp?: boolean;
+
 	/**
 	 * The variant attribute changes the styling of the notification.
 	 * The docked notifications are used e.g. between header and main content to show a global alert.

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

@@ -2,9 +2,8 @@ import { Show, Slot, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBNotificationProps, DBNotificationState } from './model';
 import DBButton from '../button/button.lite';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
-import { cls, getHideProp } from '../../utils';
+import { cls, getHideProp, stringPropVisible } from '../../utils';
 import { ClickEvent } from '../../shared/model';
-import { stringPropVisible } from '../../utils/form-components';
 
 useMetadata({});
 
@@ -40,7 +39,8 @@ export default function DBNotification(props: DBNotificationProps) {
 					{props.text}
 				</Show>
 			</p>
-			<Show when={props.timestamp}>
+			<Show
+				when={stringPropVisible(props.timestamp, props.showTimestamp)}>
 				<span>{props.timestamp}</span>
 			</Show>
 

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

@@ -12,7 +12,7 @@ import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
 import {
 	cls,
 	delay,
-	getBooleanAsString,
+	stringPropVisible,
 	getHideProp,
 	hasVoiceOver,
 	uuid
@@ -33,10 +33,7 @@ import {
 	InputEvent,
 	InteractionEvent
 } from '../../shared/model';
-import {
-	handleFrameworkEvent,
-	stringPropVisible
-} from '../../utils/form-components';
+import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
 	angular: {

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

@@ -9,23 +9,26 @@ import {
 } from '@builder.io/mitosis';
 import { DBTextareaProps, DBTextareaState } from './model';
 import DBInfotext from '../infotext/infotext.lite';
-import { cls, delay, getHideProp, hasVoiceOver, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getHideProp,
+	stringPropVisible,
+	hasVoiceOver,
+	uuid
+} from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX,
 	DEFAULT_PLACEHOLDER,
-	DEFAULT_PLACEHOLDER_ID_SUFFIX,
 	DEFAULT_ROWS,
 	DEFAULT_VALID_MESSAGE,
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
-import {
-	handleFrameworkEvent,
-	stringPropVisible
-} from '../../utils/form-components';
+import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
 	angular: {

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

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

packages/components/src/utils/index.ts

@@ -272,6 +272,17 @@ export const getHideProp = (show?: boolean): any => {
 	return getBooleanAsString(!show);
 };
 
+export const stringPropVisible = (
+	givenString?: string,
+	showString?: boolean
+) => {
+	if (showString === undefined) {
+		return !!givenString;
+	} else {
+		return showString && givenString;
+	}
+};
+
 export default {
 	getRootProps,
 	filterPassingProps,
@@ -287,5 +298,6 @@ export default {
 	delay,
 	enableCustomElementAttributePassing,
 	getBooleanAsString,
-	getHideIcon: getHideProp
+	getHideProp,
+	stringPropVisible
 };

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

@@ -20,6 +20,7 @@
 			[showIcon]="exampleProps?.showIcon"
 			[showHeadline]="exampleProps?.showHeadline"
 			[timestamp]="exampleProps?.timestamp"
+			[showTimestamp]="exampleProps?.showTimestamp"
 			(onClose)="showNotification(exampleName)"
 		>
 			@if (exampleProps?.link) {

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

@@ -14,6 +14,7 @@
 			[visualAid]="exampleProps?.visualAid"
 			[checked]="exampleProps?.checked"
 			[disabled]="exampleProps?.disabled"
+			[required]="exampleProps?.required"
 			[showLabel]="exampleProps?.showLabel"
 			[size]="exampleProps?.size"
 			[emphasis]="exampleProps?.emphasis"

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

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

showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt

@@ -1 +1 @@
-["Required required unchecked checkbox","Required","Required - Indeterminate required mixed checkbox","Required","Required required unchecked checkbox","TODO: Add a validMessage","Required","TODO: Add a validMessage","Required - Indeterminate required mixed checkbox","TODO: Add a validMessage","Required","Required TODO: Add a validMessage required checked checkbox","Select this checkbox","Required","Select this checkbox","Required - Indeterminate required mixed checkbox"]
+["True required unchecked checkbox","True","end of Required group","True","True required unchecked checkbox","required checked True TODO: Add a validMessage checkbox","True","TODO: Add a validMessage","end of Required group","TODO: Add a validMessage","True","True TODO: Add a validMessage required checked checkbox","required unchecked True Select this checkbox checkbox","True","Select this checkbox","end of Required group"]

showcases/screen-reader/__snapshots__/macos/webkit/DBInput-next-1.txt

@@ -1 +1 @@
-["Label (Default) Basic edit text","Label","Label Helper Message edit text","Helper Message"]
+["Label (Default) False edit text","Label","Label True edit text","Message"]

showcases/screen-reader/__snapshots__/macos/webkit/DBInput-required-1.txt

@@ -1 +1 @@
-["Label Required required edit text","TODO: Add a validMessage. Test","Test selected","Fill out this field","TODO: Add a validMessage. Test"]
+["Label Functional edit text","t","Test selected","Test","t"]

showcases/screen-reader/__snapshots__/macos/webkit/DBLink-default-1.txt

@@ -1 +1 @@
-["link Enabled (Default)/Hover/Pressed","dimmed link Disabled. This item is dimmed"]
+["link (Default) False","dimmed link True. This item is dimmed"]

showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-default-1.txt

@@ -1 +1 @@
-["(Def) Enabled off switch","on (Def) Enabled switch","(Def) Enabled","Checked on switch","off Checked switch","Checked","Disabled dimmed off switch. This item is dimmed","dimmed","Disabled"]
+["(Default) False off switch","on (Default) False switch","(Default) False","True on switch","off True switch","True","True","on True switch","True"]

showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-icon-1.txt

@@ -1 +1 @@
-["(Def) No Visual Aid + unchecked off switch","(Def) No Visual Aid + unchecked","Visual Aid + unchecked off switch","on Visual Aid + unchecked switch","Visual Aid + unchecked"]
+["(Default) False + Unchecked off switch","(Default) False + Unchecked","(Default) False + Checked on switch","off (Default) False + Checked switch","(Default) False + Checked"]

showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-next-1.txt

@@ -1 +1 @@
-["Label","Label (Default) Basic edit text","Label","Label Helper Message edit text","Helper Message"]
+["Label","Label (Default) False edit text","Label","Label true edit text","Message"]

showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-required-1.txt

@@ -1 +1 @@
-["Label Required required edit text","TODO: Add a validMessage. Test","Test selected","Fill out this field","TODO: Add a validMessage. Test"]
+["Label True required edit text","TODO: Add a validMessage","Test selected","Fill out this field","TODO: Add a validMessage. Test"]

showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt

@@ -1 +1 @@
-["check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","TODO: Add a valid Message","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed.","check box, half checked, required, Required Indeterminate"]
+["check box, not checked, required, True","TODO: Add a valid Message. checked","True","TODO: Add a valid Message","True","check box, checked, required, True","Please check this box if you want to proceed.. not checked","True","Please check this box if you want to proceed.","Please check this box if you want to proceed."]

showcases/screen-reader/__snapshots__/windows/chromium/DBInput-tab-1.txt

@@ -1 +1 @@
-["Label, edit, (Default) Basic, blank","Label, edit, Helper Message, Helper Message, blank"]
+["Label, edit, (Default) False, blank","Label, edit, Message, True, blank"]

showcases/screen-reader/__snapshots__/windows/chromium/DBLink-default-1.txt

@@ -1 +1 @@
-["link, Enabled (Default) slash Hover slash Pressed","unavailable, link, Disabled"]
+["link, (Default) False","unavailable, link, True"]

showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-default-1.txt

@@ -1 +1 @@
-["check box, not checked, (Def) Enabled","checked","check box, checked, Checked","not checked","check box, unavailable, not checked, Disabled"]
+["check box, not checked, (Default) False","checked","check box, checked, True","not checked","check box, not checked, True"]

showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-icon-1.txt

@@ -1 +1 @@
-["check box, not checked, (Def) No Visual Aid plus unchecked","check box, not checked, Visual Aid plus unchecked","checked"]
+["check box, not checked, (Default) False plus Unchecked","check box, checked, (Default) False plus Checked","not checked"]

showcases/screen-reader/__snapshots__/windows/chromium/DBTextarea-required-1.txt

@@ -1 +1 @@
-["Label, edit, required, multi line, Required, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"]
+["Label, edit, required, multi line, True, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"]

showcases/screen-reader/tests/input.spec.ts

@@ -43,7 +43,7 @@ test.describe('DBInput', () => {
 		test,
 		title: 'required',
 		description: 'should inform user for changes',
-		url: './#/03/input?page=requirement',
+		url: './#/03/input?page=required',
 		async testFn(voiceOver, nvda) {
 			if (voiceOver) {
 				/* Goto desired input */

showcases/shared/badge.json

@@ -132,39 +132,18 @@
 			{
 				"name": "(Default) Text"
 			},
-			{
-				"name": "(Default) Text - Medium",
-				"props": {
-					"size": "medium"
-				}
-			},
 			{
 				"name": "Dot - Small",
 				"content": "",
 				"props": {
 					"noContent": true
 				}
 			},
-			{
-				"name": "Dot - Medium",
-				"content": "",
-				"props": {
-					"noContent": true,
-					"size": "medium"
-				}
-			},
 			{
 				"name": "Icon - Small",
 				"props": {
 					"example": "icon"
 				}
-			},
-			{
-				"name": "Icon - Medium",
-				"props": {
-					"example": "icon",
-					"size": "medium"
-				}
 			}
 		]
 	},
@@ -229,6 +208,27 @@
 				"props": {
 					"example": "number"
 				}
+			},
+			{
+				"name": "(Default) Text - Medium",
+				"props": {
+					"size": "medium"
+				}
+			},
+			{
+				"name": "Dot - Medium",
+				"content": "",
+				"props": {
+					"noContent": true,
+					"size": "medium"
+				}
+			},
+			{
+				"name": "Icon - Medium",
+				"props": {
+					"example": "icon",
+					"size": "medium"
+				}
 			}
 		]
 	}

showcases/shared/link.json

@@ -26,7 +26,7 @@
 		]
 	},
 	{
-		"name": "Semantic",
+		"name": "Variant",
 		"examples": [
 			{
 				"name": "(Default) Adaptive",

showcases/shared/notification.json

@@ -235,6 +235,29 @@
 			}
 		]
 	},
+	{
+		"name": "Show Timestamp",
+		"examples": [
+			{
+				"name": "(Default) False",
+				"style": { "width": "300px" },
+				"props": {
+					"variant": "overlay",
+					"showTimestamp": false,
+					"timestamp": "10 min ago"
+				}
+			},
+			{
+				"name": "True",
+				"style": { "width": "300px" },
+				"props": {
+					"variant": "overlay",
+					"showTimestamp": true,
+					"timestamp": "10 min ago"
+				}
+			}
+		]
+	},
 	{
 		"name": "Examples - Variant:Docked",
 		"codeFileName": "ContentVariantDocked",