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

package/src/components/button-link/basic.tsx

@@ -4,6 +4,7 @@ import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => {
@@ -20,41 +21,42 @@ export const ButtonLinkBasic: FC = () => {
 					display-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
 				</p>
 			</SampleDescription>
-			<section className="text-base">
-				<KolHeading _level={2} _label="Button-Link with _inline" />
-
-				<p>
-					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
-					<strong>inline element</strong>.
-				</p>
-				<p>
-					In this paragraph, a link is inserted that is rendered as an inline-block element.
-					<KolButtonLink className="m-4" style={{ display: 'inline-block', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
-					height, and other properties to it using CSS styles.
-					<br />
-					<br />
-					After that, there is a link that is rendered as a block element.
-					<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
-					Therefore, I go over the entire width of the parent element to create a line break.
-				</p>
-
-				<KolHeading _level={2} _label="Button-Link with _inline={false}" />
-
-				<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>
-
-				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _disabled _inline={false} />
-				</p>
-				<p>
-					<KolButtonLink _label="With access key" _accessKey="c" _inline={false} _on={dummyEventHandler} />
-				</p>
-				<p>
-					<KolButtonLink _label="With short key" _shortKey="s" _inline={false} _on={dummyEventHandler} />
-				</p>
-				<p>
-					<KolButtonLink _label="Special Variant ButtonLink" _variant="theme-link" />
-				</p>
-			</section>
+			<KolHeading _level={2} _label="Button-Link with _inline" />
+
+			<p>
+				In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
+				<strong>inline element</strong>.
+			</p>
+			<p>
+				In this paragraph, a link is inserted that is rendered as an inline-block element.
+				<KolButtonLink className="m-4" style={{ display: 'inline-block', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
+				height, and other properties to it using CSS styles.
+				<br />
+				<br />
+				After that, there is a link that is rendered as a block element.
+				<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
+				Therefore, I go over the entire width of the parent element to create a line break.
+			</p>
+
+			<KolHeading _level={2} _label="Button-Link with _inline={false}" />
+
+			<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>
+
+			<SampleBlock id="basic" className="flex flex-col gap-2" fitContent>
+				<KolButtonLink _label="Standalone ButtonLink" _inline={false} _on={dummyEventHandler} />
+			</SampleBlock>
+			<SampleBlock id="disabled" className="flex flex-col gap-2" fitContent>
+				<KolButtonLink _label="Disabled ButtonLink" _disabled _inline={false} />
+			</SampleBlock>
+			<SampleBlock id="access-key" className="flex flex-col gap-2" fitContent>
+				<KolButtonLink _label="With access key" _accessKey="c" _inline={false} _on={dummyEventHandler} />
+			</SampleBlock>
+			<SampleBlock id="short-key" className="flex flex-col gap-2" fitContent>
+				<KolButtonLink _label="With short key" _shortKey="s" _inline={false} _on={dummyEventHandler} />
+			</SampleBlock>
+			<SampleBlock id="variant" className="flex flex-col gap-2" fitContent>
+				<KolButtonLink _label="Special Variant ButtonLink" _variant="theme-link" />
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/button-link/icons.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolButtonLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkIcons: FC = () => (
@@ -11,26 +12,34 @@ export const ButtonLinkIcons: FC = () => (
 			<p>This sample shows KolButtonLink with icons in different locations.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="left" fitContent>
 			<KolButtonLink _icons="kolicon-house" _label="I am a link with an icon on the left" />
+		</SampleBlock>
+		<SampleBlock id="right" fitContent>
 			<KolButtonLink
 				_icons={{
 					right: 'kolicon-house',
 				}}
 				_label="I am a link with an icon on the right"
 			/>
+		</SampleBlock>
+		<SampleBlock id="top" fitContent>
 			<KolButtonLink
 				_icons={{
 					top: 'kolicon-house',
 				}}
 				_label="I am a link with an icon at the top"
 			/>
+		</SampleBlock>
+		<SampleBlock id="bottom" fitContent>
 			<KolButtonLink
 				_icons={{
 					bottom: 'kolicon-house',
 				}}
 				_label="I am a link with icon below"
 			/>
+		</SampleBlock>
+		<SampleBlock id="all" fitContent>
 			<KolButtonLink
 				_icons={{
 					top: 'kolicon-house',
@@ -40,7 +49,9 @@ export const ButtonLinkIcons: FC = () => (
 				}}
 				_label="I am a link with all icons"
 			/>
+		</SampleBlock>
+		<SampleBlock id="hide-label" fitContent>
 			<KolButtonLink _icons="kolicon-house" _hideLabel _label="I am a link with icon only" />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/button-link/image.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolButtonLink, KolImage } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkImage: FC = () => (
@@ -11,7 +12,7 @@ export const ButtonLinkImage: FC = () => (
 			<p>This sample shows KolButtonLink with slot-content instead of a label. The sample uses an image as content.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="image">
 			<KolButtonLink _label="I am a link that is rendered as text" />
 			<KolButtonLink _label="">
 				<KolImage
@@ -21,6 +22,6 @@ export const ButtonLinkImage: FC = () => (
 					slot="expert"
 				/>
 			</KolButtonLink>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/card/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolCard } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const CardBasic: FC = () => (
@@ -11,7 +12,7 @@ export const CardBasic: FC = () => (
 			<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>
 		</SampleDescription>
 
-		<div className="w-full grid grid-cols-2 gap-4">
+		<SampleBlock id="basic" className="w-full grid grid-cols-2 gap-4" narrow>
 			<KolCard _label="Card with title and content">
 				<p>Card contents.</p>
 			</KolCard>
@@ -19,6 +20,6 @@ export const CardBasic: FC = () => (
 			<KolCard _label="Card with closer" _hasCloser>
 				<p>This card has a close button.</p>
 			</KolCard>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/card/headlines.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolCard } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const CardHeadlines: FC = () => {
@@ -12,7 +13,7 @@ export const CardHeadlines: FC = () => {
 				<p>This sample shows cards with all headline levels as title.</p>
 			</SampleDescription>
 
-			<div className="w-full grid grid-cols-2 gap-4">
+			<SampleBlock id="headlines" className="w-full grid grid-cols-2 gap-4">
 				<KolCard _label="Card with headline level 0" _level={0}>
 					<p>Card contents.</p>
 				</KolCard>
@@ -40,7 +41,7 @@ export const CardHeadlines: FC = () => {
 				<KolCard _label="Card with headline level 6" _level={6}>
 					<p>Card contents.</p>
 				</KolCard>
-			</div>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/card/linked.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolCard } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const CardLinked: FC = () => {
@@ -12,7 +13,7 @@ export const CardLinked: FC = () => {
 				<p>This sample shows KolCards with links. The headline is wrapped with an a-tag. The whole card is clickable.</p>
 			</SampleDescription>
 
-			<div className="w-full grid grid-cols-2 gap-4">
+			<SampleBlock id="linked" className="w-full grid grid-cols-2 gap-4">
 				<KolCard _label="Card with title and content" _href="#/back-page">
 					<p>This card has a link.</p>
 				</KolCard>
@@ -20,7 +21,7 @@ export const CardLinked: FC = () => {
 				<KolCard _label="Card with title and content" _href="#/back-page" _target="_blank">
 					<p>This card has a link and a target.</p>
 				</KolCard>
-			</div>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/combobox/partials/cases.tsx

@@ -5,23 +5,49 @@ import { KolCombobox } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
+import { SampleBlock } from '../../SampleBlock';
 
-export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
+type ComboboxCasesProps = Partial<Components.KolCombobox> & {
+	/** 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 ComboboxCases = ({ blockIdPrefix, snapshotOnly, ...props }: ComboboxCasesProps) => {
+	// 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">
-			<KolCombobox {...props} _hint={HINT_MSG} _label="Label" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} />
-			<KolCombobox {...props} _label="Disabled" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _disabled />
-			<KolCombobox
-				{...props}
-				_suggestions={COUNTRY_SUGGESTIONS}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_touched
-				_label="Label"
-				_placeholder="Placeholder"
-				_required
-			/>
-			<KolCombobox {...props} _label="With access key" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _accessKey="c" />
-			<KolCombobox {...props} _label="With short key" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _shortKey="s" />
+			<SampleBlock {...block('hint')}>
+				<KolCombobox {...props} _hint={HINT_MSG} _label="Label" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolCombobox {...props} _label="Disabled" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _disabled />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolCombobox
+					{...props}
+					_suggestions={COUNTRY_SUGGESTIONS}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+					_label="Label"
+					_placeholder="Placeholder"
+					_required
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolCombobox {...props} _label="With access key" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')} skipSnapshot={props._hideLabel}>
+				<KolCombobox {...props} _label="With short key" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _shortKey="s" />
+			</SampleBlock>
 		</div>
 	);
 };

package/src/components/combobox/partials/variants.tsx

@@ -2,19 +2,18 @@ import type { Components } from '@public-ui/components';
 import React from 'react';
 
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 import { ComboboxCases } from './cases';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Text</legend>
-				<ComboboxCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Text (hideLabel)</legend>
-				<ComboboxCases {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Text">
+				<ComboboxCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Text (hideLabel)">
+				<ComboboxCases blockIdPrefix="hide-label" snapshotOnly="error" {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 };

package/src/components/details/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolDetails } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const DetailsBasic: FC = () => (
@@ -14,7 +15,7 @@ export const DetailsBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<section className="grid gap-4">
+		<SampleBlock id="basic">
 			<KolDetails _label="Closed initially">
 				<p>
 					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -36,6 +37,6 @@ export const DetailsBasic: FC = () => (
 					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
 				</p>
 			</KolDetails>
-		</section>
+		</SampleBlock>
 	</>
 );

package/src/components/form/basic.tsx

@@ -1,6 +1,7 @@
 import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const FormBasic: FC = () => {
@@ -16,14 +17,14 @@ export const FormBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolForm className="w-full" _on={formEventHAndler}>
-				<div className="grid gap-2">
+			<SampleBlock id="form-basic" className="grid gap-2">
+				<KolForm className="w-full" _on={formEventHAndler}>
 					<KolInputText id="input1" _label="Input 1" />
 					<KolInputText id="input2" _label="Input 2" />
 					<KolInputText id="input3" _label="Input 3" />
 					<KolButton _label="Submit" _variant="primary" _type="submit" />
-				</div>
-			</KolForm>
+				</KolForm>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/form/error-list-scroll.tsx

@@ -0,0 +1,87 @@
+import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { SampleBlock } from '../SampleBlock';
+import { SampleDescription } from '../SampleDescription';
+
+export const FormErrorListScroll: FC = () => {
+	const formRef = useRef<HTMLKolFormElement | null>(null);
+
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows a form with error messages.</p>
+			</SampleDescription>
+
+			<SampleBlock id="error-list">
+				<KolForm
+					className="w-full"
+					ref={formRef}
+					_on={{
+						onSubmit: scrollTo,
+					}}
+					_errorList={[
+						{
+							message: 'Error in Input 2 (default scroll behaviour)',
+							selector: '#input2',
+						},
+						{
+							message: 'Error in Input 3 (no scrolling, just alert)',
+							selector: () => alert('Error in Input 3'),
+						},
+						{
+							message: 'Error in Input 4 (custom scroll behaviour)',
+							selector: '#input4',
+							options: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },
+						},
+					]}
+				>
+					<div className="flex flex-col gap-250">
+						<KolInputText id="input1" _label="Input 1" />
+						<KolInputText
+							id="input2"
+							_label="Input 2"
+							_touched
+							_msg={{
+								_description: 'Input error',
+								_type: 'error',
+							}}
+						/>
+						<KolInputText
+							id="input3"
+							_label="Input 3"
+							_touched
+							_msg={{
+								_description: 'Input error',
+								_type: 'error',
+							}}
+						/>
+						<KolInputText
+							id="input4"
+							_label="Input 4"
+							_touched
+							_msg={{
+								_description: 'Input error',
+								_type: 'error',
+							}}
+						/>
+						<div>
+							<KolButton _label="ScrollTo" _type="submit" />
+						</div>
+					</div>
+				</KolForm>
+			</SampleBlock>
+		</>
+	);
+};

package/src/components/form/error-list.tsx

@@ -1,6 +1,7 @@
-import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';
+import { KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const FormErrorList: FC = () => {
@@ -23,62 +24,61 @@ export const FormErrorList: FC = () => {
 				<p>This sample shows a form with error messages.</p>
 			</SampleDescription>
 
-			<KolForm
-				className="w-full"
-				ref={formRef}
-				_on={{
-					onSubmit: scrollTo,
-				}}
-				_errorList={[
-					{
-						message: 'Error in Input 2 (default scroll behaviour)',
-						selector: '#input2',
-					},
-					{
-						message: 'Error in Input 3 (no scrolling, just alert)',
-						selector: () => alert('Error in Input 3'),
-					},
-					{
-						message: 'Error in Input 4 (custom scroll behaviour)',
-						selector: '#input4',
-						options: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },
-					},
-				]}
-			>
-				<div className="grid gap-250">
-					<KolInputText id="input1" _label="Input 1" />
-					<KolInputText
-						id="input2"
-						_label="Input 2"
-						_touched
-						_msg={{
-							_description: 'Input error',
-							_type: 'error',
-						}}
-					/>
-					<KolInputText
-						id="input3"
-						_label="Input 3"
-						_touched
-						_msg={{
-							_description: 'Input error',
-							_type: 'error',
-						}}
-					/>
-					<KolInputText
-						id="input4"
-						_label="Input 4"
-						_touched
-						_msg={{
-							_description: 'Input error',
-							_type: 'error',
-						}}
-					/>
-					<div>
-						<KolButton _label="ScrollTo" _type="submit" />
+			<SampleBlock id="error-list">
+				<KolForm
+					className="w-full"
+					ref={formRef}
+					_on={{
+						onSubmit: scrollTo,
+					}}
+					_errorList={[
+						{
+							message: 'Error in Input 2 (default scroll behaviour)',
+							selector: '#input2',
+						},
+						{
+							message: 'Error in Input 3 (no scrolling, just alert)',
+							selector: () => alert('Error in Input 3'),
+						},
+						{
+							message: 'Error in Input 4 (custom scroll behaviour)',
+							selector: '#input4',
+							options: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },
+						},
+					]}
+				>
+					<div className="flex flex-col gap-2">
+						<KolInputText id="input1" _label="Input 1" />
+						<KolInputText
+							id="input2"
+							_label="Input 2"
+							_touched
+							_msg={{
+								_description: 'Input error',
+								_type: 'error',
+							}}
+						/>
+						<KolInputText
+							id="input3"
+							_label="Input 3"
+							_touched
+							_msg={{
+								_description: 'Input error',
+								_type: 'error',
+							}}
+						/>
+						<KolInputText
+							id="input4"
+							_label="Input 4"
+							_touched
+							_msg={{
+								_description: 'Input error',
+								_type: 'error',
+							}}
+						/>
 					</div>
-				</div>
-			</KolForm>
+				</KolForm>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/form/routes.ts

@@ -1,10 +1,12 @@
 import type { Routes } from '../../shares/types';
 import { FormBasic } from './basic';
 import { FormErrorList } from './error-list';
+import { FormErrorListScroll } from './error-list-scroll';
 
 export const FORM_ROUTES: Routes = {
 	form: {
 		basic: FormBasic,
 		'error-list': FormErrorList,
+		'error-list-scroll': FormErrorListScroll,
 	},
 };

package/src/components/heading/badged.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolBadge, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBadged: FC = () => (
@@ -13,7 +14,7 @@ export const HeadingBadged: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="badged">
 			<KolHeading _label="" _level={1}>
 				<span slot="expert">
 					A heading with a <KolBadge _label="Label"></KolBadge>
@@ -44,6 +45,6 @@ export const HeadingBadged: FC = () => (
 					A heading with a <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
 				</span>
 			</KolHeading>
-		</div>
+		</SampleBlock>
 	</>
 );