@public-ui/sample-react 4.3.1-rc.0 → 4.3.1-rc.4

package/src/components/heading/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBasic: FC = () => (
@@ -11,13 +12,13 @@ export const HeadingBasic: FC = () => (
 			<p>KolHeading renders a heading with the given level.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="basic">
 			<KolHeading _label="I'm a H1-heading" _level={1} />
 			<KolHeading _label="I'm a H2-heading" _level={2} />
 			<KolHeading _label="I'm a H3-heading" _level={3} />
 			<KolHeading _label="I'm a H4-heading" _level={4} />
 			<KolHeading _label="I'm a H5-heading" _level={5} />
 			<KolHeading _label="I'm a H6-heading" _level={6} />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/heading/paragraph.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const HeadingParagraph: FC = () => (
@@ -11,7 +12,7 @@ export const HeadingParagraph: FC = () => (
 			<p>This sample shows KolHeading with its different levels combined with some text content each.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="paragraph">
 			<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
 			<p>
 				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -48,6 +49,6 @@ export const HeadingParagraph: FC = () => (
 				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
 			</p>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/heading/secondary.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const HeadingSecondary: FC = () => (
@@ -13,8 +14,8 @@ export const HeadingSecondary: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="secondary">
 			<KolHeading _label="This is a H1 headline" _secondaryHeadline="This is a secondary headline" _level={1} />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/icon/all-kolicons.tsx

@@ -26,7 +26,7 @@ export const IconAllKolicons: FC = () => {
 				{Object.entries(icons).map(([key]) => {
 					return (
 						<div className="flex gap-4" key={key}>
-							<KolIcon _label="" _icons={'kolicon-' + key} />
+							<KolIcon _label={`Icon ${key}`} _icons={'kolicon-' + key} />
 							<span>kolicon-{key}</span>
 						</div>
 					);

package/src/components/icon/basic.tsx

@@ -12,21 +12,21 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block" _label="" _icons="kolicon-alert-info" />
-			<KolIcon className="block" _label="" _icons="kolicon-kolibri" />
-			<KolIcon className="block" _label="" _icons="kolicon-house" />
-			<KolIcon className="block" _label="" _icons="kolicon-settings" />
+			<KolIcon className="block" _label="Alert Info Icon" _icons="kolicon-alert-info" />
+			<KolIcon className="block" _label="Kolibri Icon" _icons="kolicon-kolibri" />
+			<KolIcon className="block" _label="House Icon" _icons="kolicon-house" />
+			<KolIcon className="block" _label="Settings Icon" _icons="kolicon-settings" />
 
 			<KolIcon
 				className="block w-[1em] h-[1em]"
 				style={{
 					color: 'red',
 				}}
-				_label=""
+				_label="House Icon"
 				_icons="kolicon-house"
 			/>
 
-			<KolIcon className="block" _label="" _icons="codicon codicon-plus" />
+			<KolIcon className="block" _label="Plus Icon" _icons="codicon codicon-plus" />
 		</div>
 	</>
 );

package/src/components/icon/font.tsx

@@ -5,38 +5,46 @@ import { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { fetchVariantData } from '../../shares/fetchVariantData';
-import { getCustomThemes } from '../../shares/store';
+import { getTheme } from '../../shares/store';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const IconFont: FC = () => {
 	const [searchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const theme = searchParams.get('theme') ?? getTheme();
 	const iconVariants = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariants') : []), [theme]);
 	const iconVariantsButton = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsButton') : []), [theme]);
 	const iconVariantsInput = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsInput') : []), [theme]);
 
+	/* Themes without variants only render the fallback text – there is nothing theme specific to snapshot. */
+	const hasIconVariants = Array.isArray(iconVariants) && iconVariants.length > 0;
+	const hasIconVariantsButton = Array.isArray(iconVariantsButton) && iconVariantsButton.length > 0;
+	const hasIconVariantsInput = Array.isArray(iconVariantsInput) && iconVariantsInput.length > 0;
+
 	return (
 		<>
 			<SampleDescription>
 				<p>KolIcon renders different icon fonts depending on your theme.</p>
 			</SampleDescription>
 
-			<div className="grid grid-cols-2 gap-8 p-8">
-				{!Array.isArray(iconVariants) || iconVariants.length === 0 ? (
+			<SampleBlock id="icons" className="grid grid-cols-2 gap-8 p-8" skipSnapshot={!hasIconVariants}>
+				{!hasIconVariants ? (
 					<p>This theme has no variants for icons.</p>
 				) : (
 					iconVariants.map((element) => {
 						return (
 							<div className="flex gap-4" key={element}>
-								<KolIcon _label="" _icons={element} />
-								<span>&lt;KolIcon _icons='{element}' _label="" /&gt;</span>
+								<KolIcon _label={element} _icons={element} />
+								<span>
+									&lt;KolIcon _icons='{element}' _label="{element}" /&gt;
+								</span>
 							</div>
 						);
 					})
 				)}
-			</div>
-			<div className="grid grid-cols-2 gap-8 p-8">
-				{!Array.isArray(iconVariantsButton) || iconVariantsButton.length === 0 ? (
+			</SampleBlock>
+			<SampleBlock id="buttons" className="grid grid-cols-2 gap-8 p-8" skipSnapshot={!hasIconVariantsButton}>
+				{!hasIconVariantsButton ? (
 					<p>This theme has no variants for icons in buttons.</p>
 				) : (
 					iconVariantsButton.map((element) => {
@@ -48,9 +56,9 @@ export const IconFont: FC = () => {
 						);
 					})
 				)}
-			</div>
-			<div className="grid gap-8 p-8">
-				{!Array.isArray(iconVariantsInput) || iconVariantsInput.length === 0 ? (
+			</SampleBlock>
+			<SampleBlock id="inputs" className="grid gap-8 p-8" skipSnapshot={!hasIconVariantsInput}>
+				{!hasIconVariantsInput ? (
 					<p>This theme has no variants for icons in inputs.</p>
 				) : (
 					iconVariantsInput.map((element) => {
@@ -62,7 +70,7 @@ export const IconFont: FC = () => {
 						);
 					})
 				)}
-			</div>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/image/basic.tsx

@@ -1,6 +1,7 @@
 import { KolImage } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ImageBasic: FC = () => (
@@ -9,10 +10,12 @@ export const ImageBasic: FC = () => (
 			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
 		</SampleDescription>
 
-		<KolImage
-			_alt="KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo"
-			_src="assets/sample-image.png"
-			className="w-image"
-		/>
+		<SampleBlock id="basic" fitContent>
+			<KolImage
+				_alt="KoliBri design system illustration showing three people working on laptops surrounded by UI components, charts, and the KoliBri hummingbird logo"
+				_src="assets/sample-image.png"
+				className="w-image"
+			/>
+		</SampleBlock>
 	</>
 );

package/src/components/input-checkbox/partials/cases.tsx

@@ -5,22 +5,83 @@ import { KolInputCheckbox } from '@public-ui/react-v19';
 import { ERROR_MSG } from '../../../shares/constants';
 
 import type { Components } from '@public-ui/components';
-export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxCases(props, ref) {
+import { SampleBlock } from '../../SampleBlock';
+
+type InputCheckboxCasesProps = Components.KolInputCheckbox & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, InputCheckboxCasesProps>(function InputCheckboxCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<KolInputCheckbox {...props} _label="Not selected" _value={false} _required />
-			<KolInputCheckbox {...props} _label="Indeterminate" _value={null} _indeterminate />
-			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Selected" _tooltipAlign="right" _value={true} />
-			<KolInputCheckbox {...props} _checked _icons={{ unchecked: 'ckolicon-cross' }} _label={'With a very long label and upheavals '.repeat(5)} _value={true} />
-			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
-			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
-			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
-			<KolInputCheckbox {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="With error" _touched _value={true} _hint="Hint text" _required />
-			<KolInputCheckbox {...props} _label="With access key" _accessKey="c" _value={null}></KolInputCheckbox>
-			<KolInputCheckbox {...props} _label="With short key" _shortKey="s" _value={null}></KolInputCheckbox>
-			<KolInputCheckbox {...props} _label="" _value={false} _required>
-				<span slot="expert">Expert Slot & required</span>
-			</KolInputCheckbox>
+			<SampleBlock {...block('unchecked')}>
+				<KolInputCheckbox {...props} _label="Not selected" _value={false} _required />
+			</SampleBlock>
+			<SampleBlock {...block('indeterminate')}>
+				<KolInputCheckbox {...props} _label="Indeterminate" _value={null} _indeterminate />
+			</SampleBlock>
+			<SampleBlock {...block('checked')}>
+				<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Selected" _tooltipAlign="right" _value={true} />
+			</SampleBlock>
+			<SampleBlock {...block('long-label')}>
+				<KolInputCheckbox
+					{...props}
+					_checked
+					_icons={{ unchecked: 'ckolicon-cross' }}
+					_label={'With a very long label and upheavals '.repeat(5)}
+					_value={true}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
+			</SampleBlock>
+			<SampleBlock {...block('checked-disabled')}>
+				<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
+			</SampleBlock>
+			<SampleBlock {...block('indet-disabled')}>
+				<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolInputCheckbox
+					{...props}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="With error"
+					_touched
+					_value={true}
+					_hint="Hint text"
+					_required
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputCheckbox {...props} _label="With access key" _accessKey="c" _value={null}></KolInputCheckbox>
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputCheckbox {...props} _label="With short key" _shortKey="s" _value={null}></KolInputCheckbox>
+			</SampleBlock>
+			<SampleBlock {...block('info-popover')}>
+				<KolInputCheckbox
+					{...props}
+					_label="With popover"
+					_value={false}
+					_required
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				>
+					<span slot="expert">Expert Slot & required</span>
+				</KolInputCheckbox>
+			</SampleBlock>
 		</div>
 	);
 });

package/src/components/input-checkbox/partials/variants.tsx

@@ -4,28 +4,25 @@ import { InputCheckboxCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
 		<>
 			<SampleColumns>
-				<fieldset>
-					<legend>Label align &quot;left&quot; with label</legend>
-					<InputCheckboxCases {...props} _labelAlign="left" />
-				</fieldset>
-				<fieldset>
-					<legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
-					<InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
-				</fieldset>
+				<SampleGroup heading='Label align "left" with label'>
+					<InputCheckboxCases blockIdPrefix="left" {...props} _labelAlign="left" />
+				</SampleGroup>
+				<SampleGroup heading='Label align "left" without Label (hideLabel)'>
+					<InputCheckboxCases blockIdPrefix="left-hide" snapshotOnly="error" ref={ref} {...props} _hideLabel _labelAlign="left" />
+				</SampleGroup>
 			</SampleColumns>
 			<SampleColumns>
-				<fieldset>
-					<legend>Label align &quot;right&quot; with label</legend>
-					<InputCheckboxCases {...props} />
-				</fieldset>
-				<fieldset>
-					<legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
-					<InputCheckboxCases ref={ref} {...props} _hideLabel />
-				</fieldset>
+				<SampleGroup heading='Label align "right" with label'>
+					<InputCheckboxCases blockIdPrefix="right" {...props} />
+				</SampleGroup>
+				<SampleGroup heading='Label align "right" without Label (hideLabel)'>
+					<InputCheckboxCases blockIdPrefix="right-hide" snapshotOnly="error" ref={ref} {...props} _hideLabel />
+				</SampleGroup>
 			</SampleColumns>
 		</>
 	);

package/src/components/input-color/partials/cases.tsx

@@ -3,11 +3,29 @@ import { KolInputColor } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
-export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
+type InputColorCasesProps = Components.KolInputColor & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputColorCases = forwardRef<HTMLKolInputColorElement, InputColorCasesProps>(function InputColorCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputColor
 					{...props}
 					_msg={{ _type: 'error', _description: ERROR_MSG }}
@@ -17,22 +35,47 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 					_label="Color (Black background test)"
 					_value="#f08080"
 				/>
-			</div>
-			<KolInputColor
-				{...props}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Color with error"
-				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
-				_touched
-			/>
-			<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint message.' }} _label="Color" _touched />
-			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" _touched />
-			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" _touched />
-			<KolInputColor {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Color" _touched />
-			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
-			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
-			<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>
-			<KolInputColor {...props} _label="With short key" _shortKey="s"></KolInputColor>
+			</SampleBlock>
+			<SampleBlock {...block('suggestions-error')}>
+				<KolInputColor
+					{...props}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Color with error"
+					_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
+					_touched
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint message.' }} _label="Color" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolInputColor {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Color" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('hint')}>
+				<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputColor {...props} _label="With short key" _shortKey="s"></KolInputColor>
+			</SampleBlock>
+			<SampleBlock {...block('info-popover')}>
+				<KolInputColor
+					{...props}
+					_label="With short popover"
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				></KolInputColor>
+			</SampleBlock>
 		</div>
 	);
 });

package/src/components/input-color/partials/variants.tsx

@@ -4,17 +4,16 @@ import { InputColorCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const InputColorVariants = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Color</legend>
-				<InputColorCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Color (hideLabel)</legend>
-				<InputColorCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Color">
+				<InputColorCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Color (hideLabel)">
+				<InputColorCases blockIdPrefix="hide-label" snapshotOnly="suggestions-error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

package/src/components/input-date/partials/cases.tsx

@@ -3,36 +3,80 @@ import { KolInputDate } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
-export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
+type InputDateCasesProps = Components.KolInputDate & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputDateCases = forwardRef<HTMLKolInputDateElement, InputDateCasesProps>(function InputDateCases({ blockIdPrefix, snapshotOnly, ...props }, ref) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />
-			</div>
-			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
-			<KolInputDate
-				{...props}
-				_step={1}
-				_type="datetime-local"
-				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Local datetime (with seconds)"
-				_required
-				_touched
-			/>
-			<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Date" _touched />
-			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Date" _touched />
-			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Date" _touched />
-			<KolInputDate {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Date" _touched />
-			<KolInputDate {...props} _type="month" _label="Month" _required />
-			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
-			<KolInputDate {...props} _type="time" _label="Time (standard)" _required />
-			<KolInputDate {...props} _step={1} _type="time" _label="Time (with seconds)" _required />
-			<KolInputDate {...props} _readOnly _label="Date input (read-only)" _required />
-			<KolInputDate {...props} _disabled _label="Date input (Disabled)" _required />
-			<KolInputDate {...props} _label="With access key" _accessKey="s" />
-			<KolInputDate {...props} _label="With short key" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('datetime-local')}>
+				<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
+			</SampleBlock>
+			<SampleBlock {...block('datetime-seconds')}>
+				<KolInputDate
+					{...props}
+					_step={1}
+					_type="datetime-local"
+					_hint={HINT_MSG}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Local datetime (with seconds)"
+					_required
+					_touched
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Date" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Date" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Date" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolInputDate {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Date" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('month')}>
+				<KolInputDate {...props} _type="month" _label="Month" _required />
+			</SampleBlock>
+			<SampleBlock {...block('week')}>
+				<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
+			</SampleBlock>
+			<SampleBlock {...block('time')}>
+				<KolInputDate {...props} _type="time" _label="Time (standard)" _required />
+			</SampleBlock>
+			<SampleBlock {...block('time-seconds')}>
+				<KolInputDate {...props} _step={1} _type="time" _label="Time (with seconds)" _required />
+			</SampleBlock>
+			<SampleBlock {...block('readonly')}>
+				<KolInputDate {...props} _readOnly _label="Date input (read-only)" _required />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputDate {...props} _disabled _label="Date input (Disabled)" _required />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputDate {...props} _label="With access key" _accessKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputDate {...props} _label="With short key" _shortKey="s" />
+			</SampleBlock>
 		</div>
 	);
 });