@public-ui/sample-react 2.0.7 → 2.0.9

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

package/src/components/handout/basic.tsx

@@ -717,8 +717,8 @@ export const HandoutBasic: FC = () => (
 				).
 			</KolDetails>
 		</div>
-		<div className="grid gap-4 grid-cols-12">
-			<KolCard className="col-span-2" _label="Heading" _level={2}>
+		<div className="grid gap-4 sm:grid-cols-6 md:grid-cols-6  xl:grid-cols-12">
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _label="Heading" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolHeading _label="Überschrift Stufe 1" _level={1}></KolHeading>
 					<KolHeading _label="Überschrift Stufe 2" _level={2}></KolHeading>
@@ -751,7 +751,7 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard> */}
-			<KolCard className="col-span-2" _label="Abbreviation and Progress" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _label="Abbreviation and Progress" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<p>
 						Ich bin eine{' '}
@@ -787,7 +787,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _label="Button, LinkButton and Tab" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolTabs _label="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 						<div className="grid gap-2 py-2">
@@ -847,7 +847,7 @@ export const HandoutBasic: FC = () => (
 					</KolTabs>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _label="Accordion, Link and ButtonLink" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2" _label="Accordion, Link and ButtonLink" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolAccordion _label="Links" _level={3} _open>
 						<div className="grid gap-2" slot="">
@@ -887,7 +887,7 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _label="Alert" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3" _label="Alert" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolAlert _label="Default message" _type="default">
 						This is the text of the alert.
@@ -904,7 +904,7 @@ export const HandoutBasic: FC = () => (
 					</KolAlert>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _label="Nav and Breadcrumb" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2" _label="Nav and Breadcrumb" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<div>
 						<KolNav
@@ -975,7 +975,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-5" _label="Input" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 				<KolForm slot="">
 					<div className="grid gap-4 grid-cols-3 p-2">
 						<KolInputColor _label={`Farbe`} />
@@ -998,7 +998,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</KolForm>
 			</KolCard>
-			<KolCard className="col-span-5" _label="Table with Pagination" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolTable _label="Tabelle" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
 				</div>

package/src/components/heading/badged.tsx

@@ -3,38 +3,44 @@ import React from 'react';
 import { KolBadge, KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBadged: FC = () => (
-	<div className="grid gap-4">
-		<KolHeading _label="" _level={1}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={2}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={3}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#06539e" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={4}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#ae0000" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={5}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#8b008b" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={6}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier werden sechs verschiedene Überschriften mit unterschiedlichen Leveln und Label-Farben dargestellt. Es gibt keine Interaktionsmöglichkeit.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolHeading _label="" _level={1}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={2}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={3}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#06539e" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={4}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#ae0000" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={5}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#8b008b" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={6}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+		</div>
+	</>
 );

package/src/components/heading/basic.tsx

@@ -3,14 +3,20 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react';
 
 import type { 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>Hier sind sechs verschiedene Überschriften mit unterschiedlichen Leveln dargestellt. Es gibt keine Interaktionsmöglichkeit.</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

@@ -3,44 +3,53 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react';
 
 import type { 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>
+				Hier sind sechs verschiedene Überschriften mit unterschiedlichen Leveln dargestellt. Sie haben jeweils noch ein Beispieltext. Es gibt keine
+				Interaktionsmöglichkeit.
+			</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

@@ -3,16 +3,22 @@ import React from 'react';
 import { KolIcon } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const IconBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolIcon _label="" _icons="codicon codicon-home" />
-		<KolIcon
-			style={{
-				color: 'red',
-			}}
-			_label=""
-			_icons="codicon codicon-home"
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier werden zwei verschiedene Icons in unterschiedlichen Farben angezeigt. Es gibt keine Interaktionsmöglichkeit.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolIcon _label="" _icons="codicon codicon-home" />
+			<KolIcon
+				style={{
+					color: 'red',
+				}}
+				_label=""
+				_icons="codicon codicon-home"
+			/>
+		</div>
+	</>
 );

package/src/components/image/basic.tsx

@@ -1,6 +1,13 @@
 import type { FC } from 'react';
 import React from 'react';
-
+import { SampleDescription } from '../SampleDescription';
 import { KolImage } from '@public-ui/react';
 
-export const ImageBasic: FC = () => <KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;
+export const ImageBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier wird ein Beispielbild angezeigt. Es gibt keine Interaktionsmöglichkeit. </p>
+		</SampleDescription>
+		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+	</>
+);

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

@@ -3,23 +3,29 @@ import React from 'react';
 import { KolIndentedText } from '@public-ui/react';
 
 import type { 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>Hier wird ein Indented Text zwischen zwei normalen Texten angezeigt. Es gibt keine Interaktionsmöglichkeit. </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

@@ -3,5 +3,17 @@ import React 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>
+				Hier werden verschiedene Checkboxen mit betiteltem Wunschausgangsverhalten angezeigt. Die Checkbox &apos;Nicht ausgewählt&apos; ist Standardmäßig nicht
+				ausgewählt usw. Die Buttons unten haben keine direkte Funktion, außer, dass Sie ausgewählt werden können. Der Unterschied zwischen der linken und
+				Rechten Darstellung ist, dass erst nach anklicken im Rechten Teil ein Label angezeigt wird.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} />
+	</>
+);

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

@@ -3,5 +3,18 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputCheckboxButton: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="button" />;
+export const InputCheckboxButton: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier werden verschiedene Checkboxen mit betiteltem Wunschausgangsverhalten angezeigt. Die Checkbox &apos;Nicht ausgewählt&apos; ist Standardmäßig nicht
+				ausgewählt usw. Die Buttons unten haben keine direkte Funktion, außer, dass Sie ausgewählt werden können. Der Unterschied zwischen der linken und
+				Rechten Darstellung ist, dass erst nach anklicken im Rechten Teil ein Label angezeigt wird. In diesem Beispiel sind die Checkboxen als Buttons
+				dargestellt.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="button" />
+	</>
+);

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

@@ -1,7 +1,20 @@
 import type { FC } from 'react';
 import React from 'react';
-
-import { FormWrap } from '../FormWrap';
+import { SampleDescription } from '../SampleDescription';
 import { InputCheckboxVariants } from './partials/variants';
+import { FormWrap } from '../FormWrap';
 
-export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;
+export const InputCheckboxSwitch: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				{' '}
+				Hier werden verschiedene Checkboxen mit betiteltem Wunschausgangsverhalten angezeigt. Die Checkbox &apos;Nicht ausgewählt&apos; ist Standardmäßig nicht
+				ausgewählt usw. Die Buttons unten haben keine direkte Funktion, außer, dass Sie ausgewählt werden können. Der Unterschied zwischen der linken und
+				Rechten Darstellung ist, dass erst nach anklicken im Rechten Teil ein Label angezeigt wird. In diesem Beispiel sind die Checkboxen als Switches
+				dargestellt.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />
+	</>
+);

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

@@ -3,5 +3,16 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputColorVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputColorBasic: FC = () => <FormWrap RefComponent={InputColorVariants} />;
+export const InputColorBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind verschiedene Formular-Felder mit Farben angezeigt. Links mit Label, Rechts nur nach anklicken mit Label. Die Farben können verändert werden.
+				Die Buttons unten haben keine direkte Funktion. Sie können angeklickt werden.{' '}
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputColorVariants} />
+	</>
+);

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

@@ -3,5 +3,18 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputDateVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputDateBasic: FC = () => <FormWrap RefComponent={InputDateVariants} />;
+export const InputDateBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier sieht man ein Formularfeld mit verschiedenen Zeiteingaben. Bei Datumseingabe kann ein Datum in einem Kalender ausgewählt werden, aber auch
+				eingetippt werden. Es gibt ein gleiches Verhalten im nächsten Feld. Die Felder Monat und Woche sind Freitextfelder. Im Feld Zeit können nur Werte von 0
+				bis 23 und 0 bis 59 angegeben werden. Mit den Feldern Zahleneingabe gibt es keine Interaktionsmöglichekeit. Ein gleiches Verhalten gibt es im Rechten
+				Feld, hier werden die Label erst nach anklicken angezeigt.{' '}
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputDateVariants} />
+	</>
+);

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

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputEmailVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputEmailBasic: FC = () => <FormWrap RefComponent={InputEmailVariants} />;
+export const InputEmailBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier verstehe ich es nicht. (Fehlermeldung bei Standard.) </p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputEmailVariants} />
+	</>
+);

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

@@ -3,5 +3,16 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputFileVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputFileBasic: FC = () => <FormWrap RefComponent={InputFileVariants} />;
+export const InputFileBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier können einzelne oder mehrere Files ausgewählt werden. Bei &apos;Datei hochladen&apos; wird der Name der ausgewählten Datei angezeigt. Bei
+				&apos;Datei hochladen (Multiple)&apos; werden die Anzahl der ausgewählten Dateien angezeigt.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputFileVariants} />
+	</>
+);

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

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputPasswordVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputPasswordBasic: FC = () => <FormWrap RefComponent={InputPasswordVariants} />;
+export const InputPasswordBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind Passwort Eingabefelder dargestellt. Im Feld &apos;Passwort P&apos; eingegebene Zeichen werden verdeckt angezeigt.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputPasswordVariants} />
+	</>
+);