@public-ui/sample-react 2.0.8 → 2.0.10

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/nav/links.ts

@@ -4,11 +4,16 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
 		_icons: 'codicon codicon-home',
-		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
 	},
 	{
 		_label: '2 Navigation point',
 		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
 	},
 	{
 		_label: '3 Navigation point',
@@ -54,7 +59,18 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 			{ _label: '3.5 Navigation point', _href: '#/back-page' },
 		],
 	},
-	{ _label: '4 Navigation point', _href: '#/back-page' },
+	{
+		_label: '4 Navigation point with children and onClick',
+		_children: [
+			{
+				_label: '4.1 Nested link',
+				_href: '#/back-page',
+			},
+		],
+		_on: {
+			onClick: () => console.log('4.1 Nested link clicked'),
+		},
+	},
 	{
 		_label: '5 Keine eigene Seite, nur Kategorie',
 		_active: true,

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>
+	</>
 );

package/src/components/quote/block.tsx

@@ -2,18 +2,27 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolQuote } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBlock: FC = () => (
-	<KolQuote
-		_label="RFC 1149"
-		_href="https://datatracker.ietf.org/doc/html/rfc1149"
-		_quote="Avian carriers can provide high delay, low throughput, and low altitude
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist ein Beispiel für ein Zitat. Es wird eine Quelle durch ein Label angegeben. Durch anklicken des Labels wird man auf die Quellenwebseite
+				weitergeleitet.
+			</p>
+		</SampleDescription>
+		<KolQuote
+			_label="RFC 1149"
+			_href="https://datatracker.ietf.org/doc/html/rfc1149"
+			_quote="Avian carriers can provide high delay, low throughput, and low altitude
 								service. The connection topology is limited to a single point-to-point path
 								for each carrier, used with standard carriers, but many carriers can be used
 								without significant interference with each other, outside early spring.
 								This is because of the 3D ether space available to the carriers, in contrast
 								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
 								avoidance system, which increases availability."
-		_variant="block"
-	></KolQuote>
+			_variant="block"
+		></KolQuote>
+	</>
 );

package/src/components/select/basic.tsx

@@ -3,5 +3,16 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { SelectVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const SelectBasic: FC = () => <FormWrap RefComponent={SelectVariants} />;
+export const SelectBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind Beispiele für verschiedene Auswahlfelder. Es gibt die Varianten Dropdownmenü und Liste mit Scrollbar. Es kann nur ein Element gleichzeitig
+				ausgewählt werden.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={SelectVariants} />
+	</>
+);

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

@@ -59,9 +59,17 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _error={ERROR_MSG} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
-			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl mit Fehler" _multiple _required _error={ERROR_MSG} _touched />
+			<KolSelect
+				{...props}
+				_options={COUNTRY_OPTIONS}
+				_label="Mehrfachauswahl mit Fehler"
+				_multiple
+				_required
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_touched
+			/>
 		</div>
 	);
 });

package/src/components/spin/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 import { KolSpin } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const SpinBasic: FC = () => <KolSpin _show />;
+export const SpinBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist eine drehende Animation in Deutschlandfarben.</p>
+		</SampleDescription>
+		<KolSpin _show />
+	</>
+);

package/src/components/spin/custom.tsx

@@ -1,4 +1,5 @@
 import './custom.css';
+import { SampleDescription } from '../SampleDescription';
 
 import React from 'react';
 
@@ -7,7 +8,15 @@ import { KolSpin } from '@public-ui/react';
 import type { FC } from 'react';
 
 export const SpinCustom: FC = () => (
-	<KolSpin _show _variant="none">
-		<span slot="expert" className="loader"></span>
-	</KolSpin>
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist ein Beispiel für eine custom Lade-Animation. Mittels des Expert-Slots ist es möglich, eigene Animationen einzufügen. Diese kann nach eigenen
+				Vorstellungen angepasst werden und ist nicht zwingend barrierefrei.
+			</p>
+		</SampleDescription>
+		<KolSpin _show _variant="none">
+			<span slot="expert" className="loader"></span>
+		</KolSpin>
+	</>
 );

package/src/components/spin/cycle.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 import { KolSpin } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const SpinCycle: FC = () => <KolSpin _show _variant="cycle" />;
+export const SpinCycle: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist eine drehende Animation in verschiedenen Farben.</p>
+		</SampleDescription>
+		<KolSpin _show _variant="cycle" />
+	</>
+);