@public-ui/sample-react 2.0.7 → 2.0.9

package/src/components/input-password/show-password.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { KolForm, KolInputPassword } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -17,25 +18,33 @@ export const InputPasswordShowPassword: FC = () => {
 	}, [isPasswordVisible]);
 
 	return (
-		<KolForm>
-			<KolInputPassword
-				_placeholder="Mit 'Passwort anzeigen' Button"
-				_label="Passwort"
-				ref={passwordRef}
-				_smartButton={{
-					_icons: {
-						left: {
-							icon: 'codicon codicon-eye',
+		<>
+			<SampleDescription>
+				<p>
+					Hier wird ein Passwort Eingabefeld angezeigt. Durch klicken auf den im Feld Rechts stehenden Button, kann zwischen verdecktem und angezeigtem Passwort
+					gewechselt werden.
+				</p>
+			</SampleDescription>
+			<KolForm>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
 						},
-					},
-					_hideLabel: true,
-					_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-					_on: {
-						onClick: handleTogglePasswordClick,
-					},
-				}}
-				className="block"
-			/>
-		</KolForm>
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+				/>
+			</KolForm>
+		</>
 	);
 };

package/src/components/input-radio/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputRadioVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputRadioBasic: FC = () => <FormWrap RefComponent={InputRadioVariants} />;
+export const InputRadioBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind Radio-Buttons in verschiedenen Ausführungen angezeigt. Es kann immer nur einer der drei Radio-Buttons gleichzeitig angeklickt werden.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputRadioVariants} />
+	</>
+);

package/src/components/input-radio/select.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolForm, KolInputRadio } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../shares/constants';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
@@ -13,7 +14,12 @@ const options = [
 ];
 
 export const InputRadioSelect: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputRadio _error={ERROR_MSG} _options={options} _label="Anrede" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel Radio-Button. Nur eine gleichzeitige Auswahl ist möglich. </p>
+		</SampleDescription>
+		<KolForm className="grid gap-4">
+			<KolInputRadio _error={ERROR_MSG} _options={options} _label="Anrede" />
+		</KolForm>
+	</>
 );

package/src/components/input-range/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputRangeVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputRangeBasic: FC = () => <FormWrap RefComponent={InputRangeVariants} />;
+export const InputRangeBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Schieberegler mit Schalter am Rand. Der Wert kann von 0 bis 50 verändert werden.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputRangeVariants} />
+	</>
+);

package/src/components/input-text/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputTextVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputTextBasic: FC = () => <FormWrap RefComponent={InputTextVariants} />;
+export const InputTextBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind verschiedene Freitexteingabefelder.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputTextVariants} />
+	</>
+);

package/src/components/input-text/blur.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
-
 import { KolForm, KolInputText } from '@public-ui/react';
-
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
 import type { FC } from 'react';
+
 export const InputTextBlur: FC = () => (
-	<KolForm>
-		<KolInputText
-			_on={{
-				onBlur: console.log,
-			}}
-			_type="search"
-			_label="Suche"
-		/>
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Freitexteingabefeld. </p>
+		</SampleDescription>
+		<KolForm>
+			<KolInputText
+				_on={{
+					onBlur: console.log,
+				}}
+				_type="search"
+				_label="Suche"
+			/>
+		</KolForm>
+	</>
 );

package/src/components/input-text/focus.tsx

@@ -3,6 +3,7 @@ import React, { useLayoutEffect, useRef } from 'react';
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputTextFocus: FC = () => {
 	const ref = useRef<HTMLKolInputTextElement | null>(null);
@@ -14,14 +15,19 @@ export const InputTextFocus: FC = () => {
 	}, [ref]);
 
 	return (
-		<KolForm>
-			<div className="grid gap-4">
-				<KolInputText ref={ref} _label="Vorname" />
-				<KolInputText _label="Nachname" />
-				<div>
-					<KolButton _label="Submit"></KolButton>
+		<>
+			<SampleDescription>
+				<p>Hier sind zwei Freitexteingabefelder.</p>
+			</SampleDescription>
+			<KolForm>
+				<div className="grid gap-4">
+					<KolInputText ref={ref} _label="Vorname" />
+					<KolInputText _label="Nachname" />
+					<div>
+						<KolButton _label="Submit"></KolButton>
+					</div>
 				</div>
-			</div>
-		</KolForm>
+			</KolForm>
+		</>
 	);
 };

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

@@ -14,7 +14,6 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				_error={ERROR_MSG}
 				_placeholder="Mit Icons"
 				_icons={{
-					left: 'codicon codicon-arrow-left',
 					right: {
 						icon: 'codicon codicon-arrow-right',
 						style: {
@@ -28,13 +27,13 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 					onClick: console.log,
 					onFocus: console.log,
 				}}
-				_hideLabel
 				_required
 				_type="search"
 				_touched
-				_label="Suche"
+				_label="Vorname (text)"
+				_accessKey="V"
+				ref={ref}
 			/>
-			<KolInputText {...props} ref={ref} _accessKey="V" _placeholder="Placeholder" _label="Vorname (text)" _required />
 			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
 			<KolInputText {...props} _placeholder="Placeholder" _error={ERROR_MSG} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />

package/src/components/link/basic.tsx

@@ -2,25 +2,31 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolLink } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _href="#/back-page" _label="Simple Link" />
-		<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
-		<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
-		<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
-			als <strong>inline-Element</strong> ausgegeben.
-		</p>
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-			<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und
-			andere Eigenschaften zuweisen.
-			<br />
-			<br />
-			Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über
-			die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
-		</p>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier sind Beispiele für verschiedene Links.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="Simple Link" />
+			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
+				als <strong>inline-Element</strong> ausgegeben.
+			</p>
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
+				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und
+				andere Eigenschaften zuweisen.
+				<br />
+				<br />
+				Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über
+				die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+			</p>
+		</div>
+	</>
 );

package/src/components/link/icons.tsx

@@ -3,40 +3,46 @@ import React from 'react';
 import { KolLink } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkIcons: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
-		<KolLink
-			_icons={{
-				right: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon rechts"
-			_href="#/back-page"
-		/>
-		<KolLink
-			_icons={{
-				top: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon oben"
-			_href="#/back-page"
-		/>
-		<KolLink
-			_icons={{
-				bottom: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon unten"
-			_href="#/back-page"
-		/>
-		<KolLink
-			_icons={{
-				top: 'codicon codicon-home',
-				right: 'codicon codicon-home',
-				bottom: 'codicon codicon-home',
-				left: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit allen Icons"
-			_href="#/back-page"
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier sind verschiedene Darstellungsweisen von Links mit Icons.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
+			<KolLink
+				_icons={{
+					right: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon rechts"
+				_href="#/back-page"
+			/>
+			<KolLink
+				_icons={{
+					top: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon oben"
+				_href="#/back-page"
+			/>
+			<KolLink
+				_icons={{
+					bottom: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon unten"
+				_href="#/back-page"
+			/>
+			<KolLink
+				_icons={{
+					top: 'codicon codicon-home',
+					right: 'codicon codicon-home',
+					bottom: 'codicon codicon-home',
+					left: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit allen Icons"
+				_href="#/back-page"
+			/>
+		</div>
+	</>
 );

package/src/components/link/image.tsx

@@ -3,18 +3,24 @@ import React from 'react';
 import { KolKolibri, KolLink } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkImage: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
-		<br />
-		<KolLink _href="#/back-page" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
-			<KolKolibri style={{ width: '300px' }}></KolKolibri>
-		</KolLink>
-		<br />
-		<KolLink _href="#/back-page" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
-		</KolLink>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Link, der als Text gerendert wird und zwei Darstellungen des KoliBri-Theming.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
+			<br />
+			<KolLink _href="#/back-page" _label="">
+				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+				<KolKolibri style={{ width: '300px' }}></KolKolibri>
+			</KolLink>
+			<br />
+			<KolLink _href="#/back-page" _label="">
+				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+			</KolLink>
+		</div>
+	</>
 );

package/src/components/link/target.tsx

@@ -3,14 +3,20 @@ import React from 'react';
 import { KolLink } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkTarget: FC = () => (
-	<div className="d-flex gap-4">
-		<KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
-		<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-		<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
-		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
-		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier sind sechs Links mit verschiedenen beschriebenen Weiterleitungen.</p>
+		</SampleDescription>
+		<div className="d-flex gap-4">
+			<KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
+			<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+			<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
+			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
+			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+		</div>
+	</>
 );

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

@@ -3,19 +3,25 @@ import React from 'react';
 import { KolLinkButton } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const ARGS = {
 	_href: '#/back-page',
 };
 
 export const LinkButtonBasic: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-wrap gap-14">
-			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+	<>
+		<SampleDescription>
+			<p>Hier sind fünf Buttons. Nach anklicken erscheint ein Popup mit &apos;Klick!&apos;</p>
+		</SampleDescription>
+		<div className="grid gap-14">
+			<div className="flex flex-wrap gap-14">
+				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			</div>
 		</div>
-	</div>
+	</>
 );

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

@@ -2,10 +2,18 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolLinkGroup } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const links = [
 	{ _label: 'Link 1', _href: '#/back-page' },
 	{ _label: 'Link 2', _href: '#/back-page' },
 	{ _label: 'Link 3', _href: '#/back-page' },
 ];
-export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} _label="" />;
+export const LinkGroupBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist eine LinkGroup bestehend aus drei Links die zu https://www.w3.org/ weiterleiten.</p>
+		</SampleDescription>
+		<KolLinkGroup _links={links} _label="" />
+	</>
+);

package/src/components/link-group/horizontal.tsx

@@ -2,10 +2,18 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolLinkGroup } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const links = [
 	{ _label: 'Link 1', _href: '#/back-page' },
 	{ _label: 'Link 2', _href: '#/back-page' },
 	{ _label: 'Link 3', _href: '#/back-page' },
 ];
-export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" _label="" />;
+export const LinkGroupHorizontal: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist eine horizontale Linkgroup bestehend aus drei Links die zu https://www.w3.org/ weiterleiten.</p>
+		</SampleDescription>
+		<KolLinkGroup _links={links} _orientation="horizontal" _label="" />
+	</>
+);

package/src/components/logo/basic.tsx

@@ -2,6 +2,14 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { Bundesministerium } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 import { KolLogo } from '@public-ui/react';
 
-export const LogoBasic: FC = () => <KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />;
+export const LogoBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Logo der Bundesregierung.</p>
+		</SampleDescription>
+		<KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />
+	</>
+);

package/src/components/modal/basic.tsx

@@ -2,38 +2,47 @@ import type { FC } from 'react';
 import React, { useRef } from 'react';
 
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
 	const modalElement = useRef<HTMLKolModalElement>(null);
 
 	return (
-		<div>
-			<KolModal _label="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-				<KolCard _label="Ich bin ein Modal" style={{ width: '100%' }}>
-					<div>
-						<KolButton
-							_label="Schließen"
-							_on={{
-								onClick: () => {
-									if (modalElement?.current) {
-										modalElement.current._activeElement = null;
-									}
-								},
-							}}
-						/>
-					</div>
-				</KolCard>
-			</KolModal>
-			<KolButton
-				_label="Modal öffnen"
-				_on={{
-					onClick: (event: Event) => {
-						if (modalElement?.current) {
-							modalElement.current._activeElement = event.target as HTMLElement;
-						}
-					},
-				}}
-			/>
-		</div>
+		<>
+			<SampleDescription>
+				<p>
+					Hier ist ein Beispiel für ein Modal. Es lässt sich öffnen. Dadurch erscheint ein Popup mit Text und &apos;Schließen&apos; Button. Durch anklicken des
+					&apos;Schließen&apos; Button, schließt sich das Modal wieder.
+				</p>
+			</SampleDescription>
+			<div>
+				<KolModal _label="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
+					<KolCard _label="Ich bin ein Modal" style={{ width: '100%' }}>
+						<div>
+							<KolButton
+								_label="Schließen"
+								_on={{
+									onClick: () => {
+										if (modalElement?.current) {
+											modalElement.current._activeElement = null;
+										}
+									},
+								}}
+							/>
+						</div>
+					</KolCard>
+				</KolModal>
+				<KolButton
+					_label="Modal öffnen"
+					_on={{
+						onClick: (event: Event) => {
+							if (modalElement?.current) {
+								modalElement.current._activeElement = event.target as HTMLElement;
+							}
+						},
+					}}
+				/>
+			</div>
+		</>
 	);
 };

package/src/components/nav/basic.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { KolInputCheckbox, KolNav } from '@public-ui/react';
-
+import { SampleDescription } from '../SampleDescription';
 import { LINKS } from './links';
 
 import type { FC } from 'react';
@@ -10,6 +10,12 @@ export const NavBasic: FC = () => {
 
 	return (
 		<>
+			<SampleDescription>
+				<p>
+					Hier ist ein Beispiel für eine Navigation. Durch anklicken des rechten + Symbols kann die Navigation erweitert und Untermenüs geöffnet werden. Durch
+					das anklicken des {'<'} Symbols kann die Navigation minimiert werden.
+				</p>
+			</SampleDescription>
 			<KolInputCheckbox
 				_label="Show icons when expanded"
 				_checked={hasIconsWhenExpanded}