@public-ui/sample-react 1.7.25 → 1.7.26-rc.1

package/src/components/button/width.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { KolButton } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const ARGS = {
 	className: 'w-8rem',
@@ -11,20 +12,26 @@ const ARGS = {
 };
 
 export const ButtonWidth: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
-			<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
-			<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-			<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
-			<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
-			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-		</div>
-		<div className="flex flex-warp gap-14">
-			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolButton with adjusted widths.</p>
+		</SampleDescription>
+
+		<div className="grid gap-14">
+			<div className="flex flex-warp gap-14">
+				<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
+				<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
+				<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
+				<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
+				<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+			</div>
+			<div className="flex flex-warp gap-14">
+				<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
+				<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
+				<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
+				<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
+				<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+			</div>
 		</div>
-	</div>
+	</>
 );

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

@@ -1,13 +1,24 @@
 import React from 'react';
-import { KolButton, KolButtonGroup } from '@public-ui/react';
+import { KolBadge, KolButton, KolButtonGroup } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonGroupBasic: FC = () => (
-	<KolButtonGroup>
-		<KolButton _label="Active" _variant="primary"></KolButton>
-		<KolButton _label="Not active" _disabled></KolButton>
-		<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger"></KolButton>
-		<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
-	</KolButtonGroup>
+	<>
+		<SampleDescription>
+			<p>KolButtonGroup shows multiple KolButton-elements visually grouped together.</p>
+
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
+		</SampleDescription>
+
+		<KolButtonGroup>
+			<KolButton _label="Active" _variant="primary"></KolButton>
+			<KolButton _label="Not active" _disabled></KolButton>
+			<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger"></KolButton>
+			<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
+		</KolButtonGroup>
+	</>
 );

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

@@ -2,22 +2,32 @@ import React from 'react';
 import { KolButtonLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => (
-	<div className="grid gap-4">
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _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.{' '}
-			<KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _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.
-			<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
-			Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
-		</p>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				KolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different display-properties
+				such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
+			</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _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.{' '}
+				<KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _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.
+				<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
+				Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+			</p>
+		</div>
+	</>
 );

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

@@ -2,36 +2,43 @@ import React from 'react';
 import { KolButtonLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkIcons: FC = () => (
-	<div className="grid gap-4">
-		<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
-		<KolButtonLink
-			_icons={{
-				right: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon rechts"
-		/>
-		<KolButtonLink
-			_icons={{
-				top: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon oben"
-		/>
-		<KolButtonLink
-			_icons={{
-				bottom: 'codicon codicon-home',
-			}}
-			_label="Ich bin ein Link mit Icon unten"
-		/>
-		<KolButtonLink
-			_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"
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolButtonLink with icons in different locations.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+			<KolButtonLink
+				_icons={{
+					right: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon rechts"
+			/>
+			<KolButtonLink
+				_icons={{
+					top: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon oben"
+			/>
+			<KolButtonLink
+				_icons={{
+					bottom: 'codicon codicon-home',
+				}}
+				_label="Ich bin ein Link mit Icon unten"
+			/>
+			<KolButtonLink
+				_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"
+			/>
+		</div>
+	</>
 );

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

@@ -2,13 +2,20 @@ import React from 'react';
 import { KolButtonLink } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkImage: FC = () => (
-	<div className="grid gap-4">
-		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
-		<br />
-		<KolButtonLink _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
-		</KolButtonLink>
-	</div>
+	<>
+		<SampleDescription>
+			<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">
+			<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
+			<br />
+			<KolButtonLink _label="">
+				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+			</KolButtonLink>
+		</div>
+	</>
 );

package/src/components/card/basic.tsx

@@ -2,11 +2,18 @@ import React from 'react';
 import { KolCard } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const CardBasic: FC = () => (
-	<KolCard _heading="Titel" _hasFooter>
-		<div slot="header">Zusätzlicher Header</div>
-		<div slot="content">Inhalt</div>
-		<div slot="footer">Fusszeile</div>
-	</KolCard>
+	<>
+		<SampleDescription>
+			<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>
+		</SampleDescription>
+
+		<KolCard _heading="Titel" _hasFooter>
+			<div slot="header">Zusätzlicher Header</div>
+			<div slot="content">Inhalt</div>
+			<div slot="footer">Fusszeile</div>
+		</KolCard>
+	</>
 );

package/src/components/card/routes.ts

@@ -2,17 +2,8 @@ import { Routes } from '../../shares/types';
 
 import { CardBasic } from './basic';
 
-import { CardConfirm } from './confirm';
-
-import { CardFlex } from './flex';
-
-import { CardSelection } from './selection';
-
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
-		confirm: CardConfirm,
-		flex: CardFlex,
-		selection: CardSelection,
 	},
 };

package/src/components/details/basic.tsx

@@ -2,18 +2,27 @@ import React from 'react';
 import { KolDetails } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const DetailsBasic: FC = () => (
-	<p className="grid gap-4">
-		<KolDetails _summary="Nach Laden der Seite geschlossen">
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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 invidunt.
-		</KolDetails>
-		<KolDetails _summary="Nach Laden der Seite geöffnet" _open>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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 invidunt.
-		</KolDetails>
-	</p>
+	<>
+		<SampleDescription>
+			<p>
+				KolDetails hides its content until opened. The open state can be toggled either by clicking the label or by setting the <code>_open</code>-prop
+				programmatically. The sample includes an initially open state and a disabled but open Details component.
+			</p>
+		</SampleDescription>
+		<p className="grid gap-4">
+			<KolDetails _summary="Nach Laden der Seite geschlossen">
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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 invidunt.
+			</KolDetails>
+			<KolDetails _summary="Nach Laden der Seite geöffnet" _open>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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 invidunt.
+			</KolDetails>
+		</p>
+	</>
 );

package/src/components/heading/badged.tsx

@@ -2,26 +2,34 @@ import React from 'react';
 import { KolBadge, KolHeading } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBadged: FC = () => (
-	<div className="grid gap-4">
-		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
-		</KolHeading>
-		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
-		</KolHeading>
-		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
-		</KolHeading>
-		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
-		</KolHeading>
-		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
-		</KolHeading>
-		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
-		</KolHeading>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolHeading with its different levels and content provided using the export slot instead of the <code>_label</code>-property.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolHeading _label="" _level={1}>
+				Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			</KolHeading>
+			<KolHeading _label="" _level={2}>
+				Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			</KolHeading>
+			<KolHeading _label="" _level={3}>
+				Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			</KolHeading>
+			<KolHeading _label="" _level={4}>
+				Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			</KolHeading>
+			<KolHeading _label="" _level={5}>
+				Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			</KolHeading>
+			<KolHeading _label="" _level={6}>
+				Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			</KolHeading>
+		</div>
+	</>
 );

package/src/components/heading/basic.tsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
-		<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
-		<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
-		<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
-		<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
-		<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
-	</div>
+	<>
+		<SampleDescription>
+			<p>KolHeading renders a heading with the given level.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
+			<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
+			<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
+			<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
+			<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
+			<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
+		</div>
+	</>
 );

package/src/components/heading/paragraph.tsx

@@ -2,44 +2,50 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingParagraph: FC = () => (
-	<div className="grid gap-4">
-		<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
-			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>
-		<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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>
-		<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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>
-		<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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>
-		<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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>
-		<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolHeading with its different levels combined with some text content each.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<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
+				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>
+			<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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>
+			<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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>
+			<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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>
+			<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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>
+			<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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>
+	</>
 );

package/src/components/icon/basic.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { KolIcon } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const IconBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolIcon _ariaLabel="" _icons="codicon codicon-home" />
-		<KolIcon
-			style={{
-				color: 'red',
-			}}
-			_ariaLabel=""
-			_icons="codicon codicon-home"
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolIcon _ariaLabel="" _icons="codicon codicon-home" />
+			<KolIcon
+				style={{
+					color: 'red',
+				}}
+				_ariaLabel=""
+				_icons="codicon codicon-home"
+			/>
+		</div>
+	</>
 );

package/src/components/image/basic.tsx

@@ -1,5 +1,13 @@
 import { FC } from 'react';
 import { KolImage } from '@public-ui/react';
 import React from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const ImageBasic: FC = () => <KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;
+export const ImageBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
+		</SampleDescription>
+		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+	</>
+);

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

@@ -2,23 +2,31 @@ import React from 'react';
 import { KolIndentedText } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const IndentedTextBasic: FC = () => (
-	<div className="grid gap-4">
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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 invidunt.
-		</p>
-		<KolIndentedText>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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 invidunt.
-		</KolIndentedText>
-		<p>
-			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-			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 invidunt.
-		</p>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				KolIndentedText renders the given slot content, styled as indented text. The sample shows two regular paragraphs with an indented paragraph in between.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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 invidunt.
+			</p>
+			<KolIndentedText>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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 invidunt.
+			</KolIndentedText>
+			<p>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				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 invidunt.
+			</p>
+		</div>
+	</>
 );

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

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputCheckboxBasic: FC = () => <FormWrap RefComponent={InputCheckboxVariants} />;
+export const InputCheckboxBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolInputCheckbox renders a checkbox. The sample shows KolInputCheckbox in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} />
+	</>
+);