@public-ui/sample-react 2.0.8 → 2.0.9

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/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}

package/src/components/nav/horizontal.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
-
 import { KolNav } from '@public-ui/react';
-
+import { SampleDescription } from '../SampleDescription';
 import { LINKS } from './links';
 
 import type { FC } from 'react';
-export const NavHorizontal: FC = () => <KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />;
+export const NavHorizontal: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist ein Beispiel für eine horizontale Navigation. Durch anklicken des rechten + Symbols kann die Navigation erweitert und Untermenüs geöffnet
+				werden.
+			</p>
+		</SampleDescription>
+		<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+	</>
+);

package/src/components/pagination/basic.tsx

@@ -3,22 +3,30 @@ import React from 'react';
 import { KolPagination } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const PaginationBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
-		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
-		<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
-		<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
-		<KolPagination
-			_max={4}
-			_page={6}
-			_siblingCount={0}
-			_boundaryCount={2}
-			_hasButtons={false}
-			_label="Test Paginierung 4"
-			_on={{}}
-			_pageSizeOptions={[10, 100]}
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind fünf Beispiele für eine Paginierung oder Seitennummerierung. Unten Rechts kann zwischen zwei Optionen für die Seitengröße gewechselt werden.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
+			<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
+			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
+			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
+			<KolPagination
+				_max={4}
+				_page={6}
+				_siblingCount={0}
+				_boundaryCount={2}
+				_hasButtons={false}
+				_label="Test Paginierung 4"
+				_on={{}}
+				_pageSizeOptions={[10, 100]}
+			/>
+		</div>
+	</>
 );

package/src/components/progress/basic.tsx

@@ -3,10 +3,16 @@ import React from 'react';
 import { KolProgress } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ProgressBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-		<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Fortschrittsbalken und Fortschrittskreis. Der Fortschritt verändert sich nicht.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
+			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		</div>
+	</>
 );

package/src/components/quote/basic.tsx

@@ -2,7 +2,13 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolQuote } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBasic: FC = () => (
-	<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für ein Zitat.</p>
+		</SampleDescription>
+		<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+	</>
 );