@public-ui/sample-react 2.0.8 → 2.0.10

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.15.1
+ * @remix-run/router v1.15.3
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.22.1
+ * React Router v6.22.3
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-ui/components": "2.0.8",
-    "@public-ui/react": "2.0.8",
-    "@public-ui/themes": "2.0.8",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.57",
-    "@types/react-dom": "18.2.19",
-    "@unocss/preset-uno": "0.58.5",
-    "@unocss/webpack": "0.58.5",
+    "@public-ui/components": "2.0.10",
+    "@public-ui/react": "2.0.10",
+    "@public-ui/themes": "2.0.10",
+    "@types/node": "ts5.4",
+    "@types/react": "18.2.68",
+    "@types/react-dom": "18.2.22",
+    "@unocss/preset-uno": "0.58.6",
+    "@unocss/webpack": "0.58.6",
     "ajv": "8.12.0",
-    "chromedriver": "121.0.2",
+    "chromedriver": "122.0.6",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.1",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.22.1",
-    "react-router-dom": "6.22.1",
-    "rimraf": "3.0.2",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
+    "rimraf": "5.0.5",
     "ts-prune": "0.10.3",
-    "typescript": "5.3.3",
+    "typescript": "5.4.3",
     "world_countries_lists": "2.9.0",
-    "yup": "1.3.3"
+    "yup": "1.4.0"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router';
 import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 
 import PackageJson from '@public-ui/components/package.json';
-import { KolAlert, KolBadge } from '@public-ui/react';
+import { KolBadge } from '@public-ui/react';
 
 import { BackPage } from './components/BackPage';
 import { Sidebar } from './components/Sidebar';
@@ -17,7 +17,8 @@ import { THEMES, THEME_OPTIONS, isDraftTheme } from './shares/theme';
 import type { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
 import type { Option } from '@public-ui/components';
-import type { Theme } from './shares/theme';
+import type { Theme, ThemeAndUnstyled } from './shares/theme';
+
 setStorage(localStorage);
 
 const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
@@ -51,7 +52,7 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						element={
 							<div className="d-grid gap-4">
 								{THEME_OPTIONS.filter((theme) => THEMES.indexOf((theme as Option<Theme>).value) >= 0).map((theme) => (
-									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
+									<div className="d-grid gap-2" key={(theme as Option<ThemeAndUnstyled>).value} data-theme={(theme as Option<ThemeAndUnstyled>).value}>
 										<div className="mt-4">
 											<strong>{theme.label}</strong>
 										</div>
@@ -106,10 +107,10 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
+	const theme: ThemeAndUnstyled = (searchParams.get('theme') as ThemeAndUnstyled) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
-	setTheme(theme as Theme); // set for `getTheme` usages within the application
+	setTheme(theme); // set for `getTheme` usages within the application
 	useSetCurrentLocation();
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
@@ -139,7 +140,7 @@ export const App: FC = () => {
 					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
-						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
+						<Route path="*" element={<Navigate to={ROUTE_LIST[0]} replace />} />
 						<Route path="back-page" element={<BackPage />} />
 					</Routes>
 				</main>

package/src/components/Sidebar.tsx

@@ -47,7 +47,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 	const handlePreviousClick = () => {
 		const currentIndex = getIndexOfSample();
-		const nextIndex = currentIndex === 0 ? routeList.length - 1 : currentIndex - 1;
+		const nextIndex = currentIndex <= 0 ? routeList.length - 1 : currentIndex - 1;
 		location.replace(`#${routeList[nextIndex]}`);
 	};
 

package/src/components/abbr/basic.tsx

@@ -1,37 +1,41 @@
 import React from 'react';
 
 import { KolAbbr } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 export const AbbrBasic: FC = () => (
 	<>
+		<SampleDescription>
+			<p>Beim Bewegen der Maus über den unterstrichenen Abkürzungen, soll die ausgeschriebene Abkürzung an verschiedenen Stellen erscheinen.</p>
+		</SampleDescription>
 		<p>
-			Ich bin <KolAbbr _label="Abkürzung">z.B.</KolAbbr> eine Abkürzung.
+			Ich bin <KolAbbr _label="zum Beispiel">z.B.</KolAbbr> eine Abkürzung.
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _label="Abkürzung" _tooltipAlign="right">
+			<KolAbbr _label="zum Beispiel" _tooltipAlign="right">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (rechts).
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _label="Abkürzung" _tooltipAlign="bottom">
+			<KolAbbr _label="zum Beispiel" _tooltipAlign="bottom">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (unten).
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _label="Abkürzung" _tooltipAlign="left">
+			<KolAbbr _label="zum Beispiel" _tooltipAlign="left">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (links).
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _label="Abkürzung" _tooltipAlign="top">
+			<KolAbbr _label="zum Beispiel" _tooltipAlign="top">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (oben).

package/src/components/accordion/basic.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
 
 import { KolAccordion } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const AccordionBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolAccordion _label="Überschrift Accordion Tab 1" _level={1}>
-			<div slot="">Inhalt Accordion Tab 1</div>
-		</KolAccordion>
-		<KolAccordion _disabled _label="Überschrift Accordion Tab 2 (deaktiviert)" _level={1} _open>
-			<div slot="">Inhalt Accordion Tab 2</div>
-		</KolAccordion>
-		<KolAccordion _label="Überschrift Accordion Tab 3" _level={1}>
-			<div slot="">Inhalt Accordion Tab 3</div>
-		</KolAccordion>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Beim klicken mit der Maus auf die einzelnen Überschriften, soll der Inhalt darunter aufgeklappt und beim erneuten klicken wieder zugeklappt werden.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolAccordion _label="Überschrift Accordion Tab 1" _level={1}>
+				<div slot="">Inhalt Accordion Tab 1</div>
+			</KolAccordion>
+			<KolAccordion _disabled _label="Überschrift Accordion Tab 2 (deaktiviert)" _level={1} _open>
+				<div slot="">Inhalt Accordion Tab 2</div>
+			</KolAccordion>
+			<KolAccordion _label="Überschrift Accordion Tab 3" _level={1}>
+				<div slot="">Inhalt Accordion Tab 3</div>
+			</KolAccordion>
+		</div>
+	</>
 );

package/src/components/accordion/headlines.tsx

@@ -1,28 +1,34 @@
 import React from 'react';
 
 import { KolAccordion } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const AccordionHeadlines: FC = () => (
-	<div className="grid gap-4">
-		<KolAccordion _label="Überschrift Level 1" _level={1}>
-			<div slot="">Inhalt Accordion Tab 1</div>
-		</KolAccordion>
-		<KolAccordion _label="Überschrift Level 2" _level={2}>
-			<div slot="">Inhalt Accordion Tab 2</div>
-		</KolAccordion>
-		<KolAccordion _label="Überschrift Level 3" _level={3}>
-			<div slot="">Inhalt Accordion Tab 3</div>
-		</KolAccordion>
-		<KolAccordion _label="Überschrift Level 4" _level={4}>
-			<div slot="">Inhalt Accordion Tab 4</div>
-		</KolAccordion>
-		<KolAccordion _label="Überschrift Level 5" _level={5}>
-			<div slot="">Inhalt Accordion Tab 5</div>
-		</KolAccordion>
-		<KolAccordion _label="Überschrift Level 6" _level={6}>
-			<div slot="">Inhalt Accordion Tab 6</div>
-		</KolAccordion>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Beim klicken mit der Maus auf die einzelnen Überschriften, soll der Inhalt darunter aufgeklappt und beim erneuten klicken wieder zugeklappt werden.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolAccordion _label="Überschrift Level 1" _level={1}>
+				<div slot="">Inhalt Accordion Tab 1</div>
+			</KolAccordion>
+			<KolAccordion _label="Überschrift Level 2" _level={2}>
+				<div slot="">Inhalt Accordion Tab 2</div>
+			</KolAccordion>
+			<KolAccordion _label="Überschrift Level 3" _level={3}>
+				<div slot="">Inhalt Accordion Tab 3</div>
+			</KolAccordion>
+			<KolAccordion _label="Überschrift Level 4" _level={4}>
+				<div slot="">Inhalt Accordion Tab 4</div>
+			</KolAccordion>
+			<KolAccordion _label="Überschrift Level 5" _level={5}>
+				<div slot="">Inhalt Accordion Tab 5</div>
+			</KolAccordion>
+			<KolAccordion _label="Überschrift Level 6" _level={6}>
+				<div slot="">Inhalt Accordion Tab 6</div>
+			</KolAccordion>
+		</div>
+	</>
 );

package/src/components/accordion/list.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolAccordion } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const LIST = [
 	{
@@ -19,11 +20,16 @@ const LIST = [
 ];
 
 export const AccordionList: FC = () => (
-	<div className="grid gap-4">
-		{LIST.map(({ heading, content }, index) => (
-			<KolAccordion _label={heading} _level={1} _open={index === 1} key={index}>
-				<p>{content}</p>
-			</KolAccordion>
-		))}
-	</div>
+	<>
+		<SampleDescription>
+			<p>Beim klicken mit der Maus auf die einzelnen Überschriften, soll der Inhalt darunter aufgeklappt und beim erneuten klicken wieder zugeklappt werden.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			{LIST.map(({ heading, content }, index) => (
+				<KolAccordion _label={heading} _level={1} _open={index === 1} key={index}>
+					<p>{content}</p>
+				</KolAccordion>
+			))}
+		</div>
+	</>
 );

package/src/components/alert/basic.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-
 import { KolAlert } from '@public-ui/react';
-
 import type { FC } from 'react';
 import type { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 
 type PropsByType = {
 	level: HeadingLevel;
@@ -32,11 +31,19 @@ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 );
 
 export const AlertBasic: FC<PropsBasic> = ({ variant = 'msg' }) => (
-	<div className="grid gap-4">
-		<AlertByType level={1} type="default" variant={variant} />
-		<AlertByType level={2} type="error" variant={variant} />
-		<AlertByType level={3} type="info" variant={variant} />
-		<AlertByType level={4} type="success" variant={variant} />
-		<AlertByType level={5} type="warning" variant={variant} />
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				Hier werden verschiedene Alerts gezeigt. Beim klicken auf das X soll das Schließen-Event ausgelöst werden. In diesem Beispiel erscheint eine Textbox mit
+				Inhalt Schließen.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<AlertByType level={1} type="default" variant={variant} />
+			<AlertByType level={2} type="error" variant={variant} />
+			<AlertByType level={3} type="info" variant={variant} />
+			<AlertByType level={4} type="success" variant={variant} />
+			<AlertByType level={5} type="warning" variant={variant} />
+		</div>
+	</>
 );

package/src/components/alert/html.tsx

@@ -1,29 +1,34 @@
 import React from 'react';
 
 import { KolAlert } from '@public-ui/react';
-
+import { SampleDescription } from '../SampleDescription';
 import type { FC } from 'react';
 
 export const AlertHtml: FC = () => (
-	<div>
-		<KolAlert _label="Ausgabe von HTML-Code im Alert" _type="info">
-			<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
-			<div className="grid gap-4 sm:grid-cols-2">
-				<div>
-					<h3>Text in einer linken Spalte</h3>
-					<p>
-						Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur dicta
-						accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
-					</p>
-				</div>
-				<div>
-					<h3>Text in einer rechten Spalte</h3>
-					<p>
-						Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo. Possimus,
-						molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!
-					</p>
+	<>
+		<SampleDescription>
+			<p>Hier werden Alerts als html ausgegeben.</p>
+		</SampleDescription>
+		<div>
+			<KolAlert _label="Ausgabe von HTML-Code im Alert" _type="info">
+				<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
+				<div className="grid gap-4 sm:grid-cols-2">
+					<div>
+						<h3>Text in einer linken Spalte</h3>
+						<p>
+							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur
+							dicta accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
+						</p>
+					</div>
+					<div>
+						<h3>Text in einer rechten Spalte</h3>
+						<p>
+							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo.
+							Possimus, molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!
+						</p>
+					</div>
 				</div>
-			</div>
-		</KolAlert>
-	</div>
+			</KolAlert>
+		</div>
+	</>
 );

package/src/components/avatar/basic.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
-
 import { KolAvatar } from '@public-ui/react';
-
+import React from 'react';
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
 export const AvatarBasic: FC = () => (
-	<div className="flex flex-wrap gap-4">
-		<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
+	<>
+		<SampleDescription>
+			<p>Hier werden verschiedene Avatar-Typen angezeigt</p>
+		</SampleDescription>
+		<div className="flex flex-wrap gap-4">
+			<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
 
-		{/* intentional trailing space    👇 - it's supposed to be trimmed */}
-		<KolAvatar _label="Elke Mustermann " />
-		<KolAvatar _label="Marianne" />
-	</div>
+			{/* intentional trailing space    👇 - it's supposed to be trimmed */}
+			<KolAvatar _label="Elke Mustermann " />
+			<KolAvatar _label="Marianne" />
+		</div>
+	</>
 );

package/src/components/badge/basic.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 
 import { KolBadge } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const BadgeBasic: FC = () => (
-	<div className="flex gap-2">
-		<KolBadge _label="schwarz"></KolBadge>
-		<KolBadge _color="#86ffc6" _label="türkis"></KolBadge>
-		<KolBadge _color="#06539e" _label="blau"></KolBadge>
-		<KolBadge _color="#ae0000" _label="rot"></KolBadge>
-		<KolBadge _color="#8b008b" _label="lila"></KolBadge>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier werden verschiedenfarbige Badges angezeigt</p>
+		</SampleDescription>
+		<div className="flex gap-2">
+			<KolBadge _label="schwarz"></KolBadge>
+			<KolBadge _color="#86ffc6" _label="türkis"></KolBadge>
+			<KolBadge _color="#06539e" _label="blau"></KolBadge>
+			<KolBadge _color="#ae0000" _label="rot"></KolBadge>
+			<KolBadge _color="#8b008b" _label="lila"></KolBadge>
+		</div>
+	</>
 );

package/src/components/badge/button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { KolBadge, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
@@ -16,15 +17,23 @@ const createBadgeProps = (label: string) => ({
 
 export const BadgeButton: FC = () => (
 	<>
-		<div className="mb-4">
-			<KolHeading _label="Badge" _level={2} />
-		</div>
-		<div className="flex gap-2">
-			<KolBadge _label="schwarz" {...createBadgeProps('schwarz')}></KolBadge>
-			<KolBadge _label="türkis" _color="#86ffc6" {...createBadgeProps('türkis')}></KolBadge>
-			<KolBadge _label="blau" _color="#06539e" {...createBadgeProps('blau')}></KolBadge>
-			<KolBadge _label="rot" _color="#ae0000" {...createBadgeProps('rot')}></KolBadge>
-			<KolBadge _label="lila" _color="#8b008b" {...createBadgeProps('lila')}></KolBadge>
-		</div>
+		<SampleDescription>
+			<p>
+				Hier werden verschiedenfarbige Badges mit X Button angezeigt. Beim klicken auf das X soll das Schließen-Event ausgelöst werden. In diesem Beispiel
+				erscheint eine Textbox mit Inhalt.{' '}
+			</p>
+		</SampleDescription>
+		<>
+			<div className="mb-4">
+				<KolHeading _label="Badge" _level={2} />
+			</div>
+			<div className="flex gap-2">
+				<KolBadge _label="schwarz" {...createBadgeProps('schwarz')}></KolBadge>
+				<KolBadge _label="türkis" _color="#86ffc6" {...createBadgeProps('türkis')}></KolBadge>
+				<KolBadge _label="blau" _color="#06539e" {...createBadgeProps('blau')}></KolBadge>
+				<KolBadge _label="rot" _color="#ae0000" {...createBadgeProps('rot')}></KolBadge>
+				<KolBadge _label="lila" _color="#8b008b" {...createBadgeProps('lila')}></KolBadge>
+			</div>
+		</>
 	</>
 );

package/src/components/breadcrumb/basic.tsx

@@ -1,54 +1,60 @@
 import React from 'react';
 
 import { KolBreadcrumb } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const BreadcrumbBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolBreadcrumb
-			_label="Breadcrumb aus Text-Links"
-			_links={[
-				{ _label: 'Startseite', _href: '#/back-page' },
-				{ _label: 'Unterseite der Startseite', _href: '#/back-page' },
-				{
-					_label: 'Unterseite der Unterseite',
-					_href: '#/back-page',
-				},
-			]}
-		></KolBreadcrumb>
-		<KolBreadcrumb
-			_label="Breadcrumb aus Icons- oder Text-Links"
-			_links={[
-				{
-					_label: 'Startseite',
-					_icons: 'codicon codicon-home',
-					_hideLabel: true,
-					_href: '#/back-page',
-				},
-				{
-					_label: 'Unterseite der Startseite mit sehr langem Link-Test',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'Unterseite der Unterseite',
-					_href: '#/back-page',
-				},
-			]}
-		></KolBreadcrumb>
-		<KolBreadcrumb
-			_label="Breadcrumb aus Icons- und Text-Links"
-			_links={[
-				{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
-				{
-					_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'Unterseite der Unterseite',
-					_href: '#/back-page',
-				},
-			]}
-		></KolBreadcrumb>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier wird eine Breadcrumb-Navigation dargestellt. Beim klicken auf die Links wird man auf Unterseiten weitergeleitet.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolBreadcrumb
+				_label="Breadcrumb aus Text-Links"
+				_links={[
+					{ _label: 'Startseite', _href: '#/back-page' },
+					{ _label: 'Unterseite der Startseite', _href: '#/back-page' },
+					{
+						_label: 'Unterseite der Unterseite',
+						_href: '#/back-page',
+					},
+				]}
+			></KolBreadcrumb>
+			<KolBreadcrumb
+				_label="Breadcrumb aus Icons- oder Text-Links"
+				_links={[
+					{
+						_label: 'Startseite',
+						_icons: 'codicon codicon-home',
+						_hideLabel: true,
+						_href: '#/back-page',
+					},
+					{
+						_label: 'Unterseite der Startseite mit sehr langem Link-Test',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'Unterseite der Unterseite',
+						_href: '#/back-page',
+					},
+				]}
+			></KolBreadcrumb>
+			<KolBreadcrumb
+				_label="Breadcrumb aus Icons- und Text-Links"
+				_links={[
+					{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
+					{
+						_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'Unterseite der Unterseite',
+						_href: '#/back-page',
+					},
+				]}
+			></KolBreadcrumb>
+		</div>
+	</>
 );