@public-ui/sample-react 2.0.8 → 2.0.9

package/src/components/button/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FocusElement } from '../FocusInput';
 import { ButtonVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const ButtonBasic: FC = () => <FocusElement RefComponent={ButtonVariants} />;
+export const ButtonBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind anklickbare und nicht anklickbare Buttons. Es gibt außerdem Buttons mit Label und ohne Label.</p>
+		</SampleDescription>
+		<FocusElement RefComponent={ButtonVariants} />
+	</>
+);

package/src/components/button/hide-label.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const ARGS = {
 	_icons: 'codicon codicon-home',
@@ -13,20 +14,28 @@ const ARGS = {
 };
 
 export const ButtonIconOnly: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-wrap gap-14">
-			<KolButton _label="Primary" _variant="primary" _tooltipAlign="top" {...ARGS}></KolButton>
-			<KolButton _label="Secondary" _variant="secondary" _tooltipAlign="right" {...ARGS}></KolButton>
-			<KolButton _label="Normal" _variant="normal" _tooltipAlign="bottom" {...ARGS}></KolButton>
-			<KolButton _label="Danger" _variant="danger" _tooltipAlign="left" {...ARGS}></KolButton>
-			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind Buttons aktiviert und deaktiviert. Sie beinhalten kein Label. Das Label wird beim anklicken oder als Tooltip angezeigt. Beim anklicken wird
+				ein alert als Popup ausgeführt.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-14">
+			<div className="flex flex-wrap gap-14">
+				<KolButton _label="Primary" _variant="primary" _tooltipAlign="top" {...ARGS}></KolButton>
+				<KolButton _label="Secondary" _variant="secondary" _tooltipAlign="right" {...ARGS}></KolButton>
+				<KolButton _label="Normal" _variant="normal" _tooltipAlign="bottom" {...ARGS}></KolButton>
+				<KolButton _label="Danger" _variant="danger" _tooltipAlign="left" {...ARGS}></KolButton>
+				<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+			</div>
+			<div className="flex flex-wrap 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 className="flex flex-wrap 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>
+	</>
 );

package/src/components/button/icons.tsx

@@ -3,26 +3,32 @@ import React from 'react';
 import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonIcons: FC = () => (
-	<KolButton
-		_icons={{
-			bottom: 'codicon codicon-arrow-down',
-			left: {
-				icon: 'codicon codicon-arrow-left',
-			},
-			top: {
-				style: {
-					'font-size': '200%',
-					transform: 'rotate(45deg)',
+	<>
+		<SampleDescription>
+			<p>Hier wird ein Button mit dem Label &apos;Label&apos; angezeigt. Beim anklicken wird ein alert als Popup ausgeführt. </p>
+		</SampleDescription>
+		<KolButton
+			_icons={{
+				bottom: 'codicon codicon-arrow-down',
+				left: {
+					icon: 'codicon codicon-arrow-left',
 				},
-				icon: 'codicon codicon-arrow-up',
-			},
-			right: 'codicon codicon-arrow-right',
-		}}
-		_label="Label"
-		_on={{
-			onClick: (_event, _value) => alert('Klick!'),
-		}}
-	/>
+				top: {
+					style: {
+						'font-size': '200%',
+						transform: 'rotate(45deg)',
+					},
+					icon: 'codicon codicon-arrow-up',
+				},
+				right: 'codicon codicon-arrow-right',
+			}}
+			_label="Label"
+			_on={{
+				onClick: (_event, _value) => alert('Klick!'),
+			}}
+		/>
+	</>
 );

package/src/components/button/width.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const ARGS = {
 	className: 'w-8rem',
@@ -12,20 +13,25 @@ const ARGS = {
 };
 
 export const ButtonWidth: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-wrap 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>
+	<>
+		<SampleDescription>
+			<p>Hier werden breite Buttons angezeigt. Beim anklicken wird ein alert als Popup ausgeführt.</p>
+		</SampleDescription>
+		<div className="grid gap-14">
+			<div className="flex flex-wrap 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-wrap 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 className="flex flex-wrap 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>
+	</>
 );

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

@@ -1,14 +1,20 @@
 import React from 'react';
 
 import { KolButton, KolButtonGroup } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 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>Hier werden Vier verschiedene Buttons angezeigt. Drei davon lassen sich anklicken und in den Status Active versetzen.</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/icons.tsx

@@ -3,36 +3,42 @@ import React from 'react';
 import { KolButtonLink } from '@public-ui/react';
 
 import type { 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>Hier werden verschiedene Links mit Icons angezeigt. Die Links führen zu keinem Ziel.</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

@@ -3,13 +3,19 @@ import React from 'react';
 import { KolButtonLink } from '@public-ui/react';
 
 import type { 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>Hier wird ein Link angezeigt, der als Text gerendert wird. Nach klicken auf den Link wird das Bild abgrenzung.jpg angezeigt.</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

@@ -3,9 +3,15 @@ import React from 'react';
 import { KolCard } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const CardBasic: FC = () => (
-	<KolCard _label="Titel">
-		<div slot="">Inhalt</div>
-	</KolCard>
+	<>
+		<SampleDescription>
+			<p>Hier wird eine Card mit Titel und &apos;Inhalt&apos; angezeigt. Es gibt keine Interaktionsmöglichkeit.</p>
+		</SampleDescription>
+		<KolCard _label="Titel">
+			<div slot="">Inhalt</div>
+		</KolCard>
+	</>
 );

package/src/components/card/confirm.tsx

@@ -3,20 +3,26 @@ import React from 'react';
 import { KolButton, KolCard } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const CardConfirm: FC = () => (
-	<KolCard _has-footer _label="Überschrift">
-		<div>
-			<p className="p-2">
-				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut
-				doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
-				perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas
-				reiciendis.
-			</p>
-			<div className="flex gap-2 flex-justify-end">
-				<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
-				<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
+	<>
+		<SampleDescription>
+			<p>Hier wird eine Karte mit Beispieltext und zwei Knöpfen &apos;Speichern&apos; und &apos;Abbrechen&apos;.</p>
+		</SampleDescription>
+		<KolCard _has-footer _label="Überschrift">
+			<div>
+				<p className="p-2">
+					Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut
+					doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
+					perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas
+					reiciendis.
+				</p>
+				<div className="flex gap-2 flex-justify-end">
+					<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
+					<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
+				</div>
 			</div>
-		</div>
-	</KolCard>
+		</KolCard>
+	</>
 );

package/src/components/card/flex.tsx

@@ -3,33 +3,42 @@ import React from 'react';
 import { KolCard } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const CardFlex: FC = () => (
-	<div className="grid grid-cols-2 gap-4">
-		<KolCard _label="Titel">
-			<div>Inhalt</div>
-		</KolCard>
-		<KolCard _label="Titel" _hasCloser>
-			<div>
-				Inhalt
-				<br />
-				Inhalt
-			</div>
-		</KolCard>
-		<KolCard _label="Titel">
-			<div>
-				Inhalt
-				<br />
-				Inhalt
-				<br />
-				Inhalt
-			</div>
-		</KolCard>
-		<KolCard _label="Titel">
-			<div>Inhalt</div>
-		</KolCard>
-		<KolCard _label="Titel">
-			<div>Inhalt</div>
-		</KolCard>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				Hier werden mehrere Karten mit unterschiedlichen Inhalten angezeigt. Beim anklicken des &apos;x&apos; wird ein Label mit &apos;Schließen&apos;
+				angezeigt.
+			</p>
+		</SampleDescription>
+		<div className="grid grid-cols-2 gap-4">
+			<KolCard _label="Titel">
+				<div>Inhalt</div>
+			</KolCard>
+			<KolCard _label="Titel" _hasCloser>
+				<div>
+					Inhalt
+					<br />
+					Inhalt
+				</div>
+			</KolCard>
+			<KolCard _label="Titel">
+				<div>
+					Inhalt
+					<br />
+					Inhalt
+					<br />
+					Inhalt
+				</div>
+			</KolCard>
+			<KolCard _label="Titel">
+				<div>Inhalt</div>
+			</KolCard>
+			<KolCard _label="Titel">
+				<div>Inhalt</div>
+			</KolCard>
+		</div>
+	</>
 );

package/src/components/card/routes.ts

@@ -3,8 +3,10 @@ import { CardBasic } from './basic';
 import { CardConfirm } from './confirm';
 import { CardFlex } from './flex';
 import { CardSelection } from './selection';
+import { SampleDescription } from '../SampleDescription';
 
 export const CARD_ROUTES: Routes = {
+	//SYNTAXERROR
 	card: {
 		basic: CardBasic,
 		confirm: CardConfirm,

package/src/components/card/selection.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolButton, KolCard, KolInputCheckbox } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const STYLE = {
 	display: 'flex',
@@ -12,66 +13,71 @@ const STYLE = {
 };
 
 export const CardSelection: FC = () => (
-	<div className="flex flex-wrap gap-2">
-		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
-			<div>
-				<div>
-					TeCorp Endplatte
-					<br />
-					VZTA
-				</div>
+	<>
+		<SampleDescription>
+			<p>Hier werden drei Beispielbilder nach klicken auf &apos;Öffnen&apos; angezeigt. Die Checkboxen &apos;Auswählen&apos; können an und abgewählt werden.</p>
+		</SampleDescription>
+		<div className="flex flex-wrap gap-2">
+			<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
+						TeCorp Endplatte
+						<br />
+						VZTA
 					</div>
-				</div>
-				<div>
-					<div style={STYLE}>
-						<KolInputCheckbox _label={`Auswählen`} />
-						<KolButton _variant="primary" _label="Öffnen"></KolButton>
+					<div>
+						<div>
+							<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
+						</div>
 					</div>
-				</div>
-			</div>
-		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
-			<div>
-				<div>
-					TeCorp Endplatte
-					<br />
-					VZTA
-				</div>
-				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
+						<div style={STYLE}>
+							<KolInputCheckbox _label={`Auswählen`} />
+							<KolButton _variant="primary" _label="Öffnen"></KolButton>
+						</div>
 					</div>
 				</div>
+			</KolCard>
+			<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 				<div>
-					<div style={STYLE}>
-						<KolInputCheckbox _label={`Auswählen`} />
-						<KolButton _variant="primary" _label="Öffnen"></KolButton>
+					<div>
+						TeCorp Endplatte
+						<br />
+						VZTA
+					</div>
+					<div>
+						<div>
+							<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
+						</div>
 					</div>
-				</div>
-			</div>
-		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
-			<div>
-				<div>
-					TeCorp Endplatte
-					<br />
-					VZTA
-				</div>
-				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
+						<div style={STYLE}>
+							<KolInputCheckbox _label={`Auswählen`} />
+							<KolButton _variant="primary" _label="Öffnen"></KolButton>
+						</div>
 					</div>
 				</div>
+			</KolCard>
+			<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 				<div>
-					<div style={STYLE}>
-						<KolInputCheckbox _label={`Auswählen`} />
-						<KolButton _variant="primary" _label="Öffnen"></KolButton>
+					<div>
+						TeCorp Endplatte
+						<br />
+						VZTA
+					</div>
+					<div>
+						<div>
+							<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
+						</div>
+					</div>
+					<div>
+						<div style={STYLE}>
+							<KolInputCheckbox _label={`Auswählen`} />
+							<KolButton _variant="primary" _label="Öffnen"></KolButton>
+						</div>
 					</div>
 				</div>
-			</div>
-		</KolCard>
-	</div>
+			</KolCard>
+		</div>
+	</>
 );

package/src/components/details/basic.tsx

@@ -3,23 +3,32 @@ import React from 'react';
 import { KolDetails } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const DetailsBasic: FC = () => (
-	<p className="grid gap-4">
-		<KolDetails _label="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 _disabled _label="Nach Laden der Seite geöffnet (deaktiviert)" _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>
-		<KolDetails _label="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>
+				Hier sind zwei Texte und ein deaktivierter Text. Beide aktivierten Texte können durch das klicken auf den &apos;Titel&apos; geöffnet und wieder
+				geschlossen werden. Der untere Text ist nach laden der Seite bereits geöffnet, während der obere Text nach laden der Seite geschlossen ist.{' '}
+			</p>
+		</SampleDescription>
+		<p className="grid gap-4">
+			<KolDetails _label="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 _disabled _label="Nach Laden der Seite geöffnet (deaktiviert)" _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>
+			<KolDetails _label="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>
+	</>
 );