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

package/src/components/link-group/horizontal.tsx

@@ -1,9 +1,20 @@
 import React, { FC } from 'react';
-import { KolLinkGroup } from '@public-ui/react';
+import { KolBadge, 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" />;
+export const LinkGroupHorizontal: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolLinkGroup renders a list of the given links. This sample shows the horizontal alignment.</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
+		</SampleDescription>
+		<KolLinkGroup _links={links} _orientation="horizontal" />
+	</>
+);

package/src/components/logo/basic.tsx

@@ -1,5 +1,16 @@
 import React, { FC } from 'react';
-import { KolLogo } from '@public-ui/react';
+import { KolBadge, KolLogo } from '@public-ui/react';
 import { Bundesministerium } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 
-export const LogoBasic: FC = () => <KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />;
+export const LogoBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolLogo renders the logo for supported organizations.</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
+		</SampleDescription>
+		<KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />
+	</>
+);

package/src/components/modal/basic.tsx

@@ -1,11 +1,18 @@
 import React, { FC, 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>
+		<>
+			<SampleDescription>
+				<p>
+					KolModal renders content in a popover, disabling interactivity with elements behind it. In the sample, the modal can be opened and closed using the
+					buttons &quot;Open modal&quot; and &quot;Close modal&quot;.
+				</p>
+			</SampleDescription>
 			<KolModal _ariaLabel="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
 					<div slot="content">
@@ -32,6 +39,6 @@ export const ModalBasic: FC = () => {
 					},
 				}}
 			/>
-		</div>
+		</>
 	);
 };

package/src/components/nav/aria-current.tsx

@@ -2,21 +2,30 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const NavAriaCurrent: FC = () => (
-	<KolNav
-		_ariaLabel="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/back-page',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/back-page',
-				_active: true,
-			},
-		]}
-		_ariaCurrentValue="page"
-	/>
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolNav with a link to the current page. This makes the component automatically assign <code>aria-current=&quot;page&quot;</code>
+				to it.
+			</p>
+		</SampleDescription>
+		<KolNav
+			_ariaLabel="Main navigation"
+			_links={[
+				{
+					_label: 'Homepage',
+					_href: '#/back-page',
+				},
+				{
+					_label: '2 Navigation point',
+					_href: '#/back-page',
+					_active: true,
+				},
+			]}
+			_ariaCurrentValue="page"
+		/>
+	</>
 );

package/src/components/nav/basic.tsx

@@ -2,61 +2,70 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const NavBasic: FC = () => (
-	<KolNav
-		_ariaLabel="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_icons: 'codicon codicon-home',
-				_href: '#/back-page',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/back-page',
-			},
-			{
-				_active: true,
-				_label: '3 Navigation point',
-				_href: '#/back-page',
-				_children: [
-					{
-						_label: '3.1 Navigation point',
-						_href: '#/back-page',
-					},
-					{
-						_label: '3.2 Navigation point',
-						_href: '#/back-page',
-						_target: 'asdasd',
-					},
-					{
-						_active: true,
-						_label: '3.3 Navigation point',
-						_href: '#/back-page',
-						_icons: 'fa-solid fa-cat',
-						_children: [
-							{
-								_active: true,
-								_label: '3.3.1 Navigation point (active)',
-								_href: '#/back-page',
-							},
-							{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
-						],
-					},
-					{
-						_label: '3.4 Navigation point',
-						_href: '#/back-page',
-						_children: [
-							{ _label: '3.4.1 Navigation point', _href: '#/back-page' },
-							{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
-						],
-					},
-					{ _label: '3.5 Navigation point', _href: '#/back-page' },
-				],
-			},
-			{ _label: '4 Navigation point', _href: '#/back-page' },
-		]}
-		_hasCompactButton
-	/>
+	<>
+		<SampleDescription>
+			<p>
+				KolNav renders a navigation. In this sample, icons for the navigation elements can be shown or hidden using a checkbox and the navigation can be
+				collapsed, showing only icons and no text labels.
+			</p>
+		</SampleDescription>
+		<KolNav
+			_ariaLabel="Main navigation"
+			_links={[
+				{
+					_label: 'Homepage',
+					_icons: 'codicon codicon-home',
+					_href: '#/back-page',
+				},
+				{
+					_label: '2 Navigation point',
+					_href: '#/back-page',
+				},
+				{
+					_active: true,
+					_label: '3 Navigation point',
+					_href: '#/back-page',
+					_children: [
+						{
+							_label: '3.1 Navigation point',
+							_href: '#/back-page',
+						},
+						{
+							_label: '3.2 Navigation point',
+							_href: '#/back-page',
+							_target: 'asdasd',
+						},
+						{
+							_active: true,
+							_label: '3.3 Navigation point',
+							_href: '#/back-page',
+							_icons: 'fa-solid fa-cat',
+							_children: [
+								{
+									_active: true,
+									_label: '3.3.1 Navigation point (active)',
+									_href: '#/back-page',
+								},
+								{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
+							],
+						},
+						{
+							_label: '3.4 Navigation point',
+							_href: '#/back-page',
+							_children: [
+								{ _label: '3.4.1 Navigation point', _href: '#/back-page' },
+								{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
+							],
+						},
+						{ _label: '3.5 Navigation point', _href: '#/back-page' },
+					],
+				},
+				{ _label: '4 Navigation point', _href: '#/back-page' },
+			]}
+			_hasCompactButton
+		/>
+	</>
 );

package/src/components/nav/horizontal.tsx

@@ -2,58 +2,64 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const NavHorizontal: FC = () => (
-	<KolNav
-		_ariaLabel="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/back-page',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/back-page',
-			},
-			{
-				_active: true,
-				_label: '3 Navigation point',
-				_href: '#/back-page',
-				_children: [
-					{
-						_label: '3.1 Navigation point',
-					},
-					{
-						_label: '3.2 Navigation point',
-						_href: '#/back-page',
-						_target: 'asdasd',
-					},
-					{
-						_active: true,
-						_label: '3.3 Navigation point',
-						_href: '#/back-page',
-						_children: [
-							{
-								_active: true,
-								_label: '3.3.1 Navigation point (active)',
-								_href: '#/back-page',
-							},
-							{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
-						],
-					},
-					{
-						_label: '3.4 Navigation point',
-						_href: '#/back-page',
-						_children: [
-							{ _label: '3.4.1 Navigation point', _href: '#/back-page' },
-							{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
-						],
-					},
-					{ _label: '3.5 Navigation point', _href: '#/back-page' },
-				],
-			},
-			{ _label: '4 Navigation point', _href: '#/back-page' },
-		]}
-		_orientation="horizontal"
-	/>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolNav with horizontal alignment.</p>
+		</SampleDescription>
+		<KolNav
+			_ariaLabel="Main navigation"
+			_links={[
+				{
+					_label: 'Homepage',
+					_href: '#/back-page',
+				},
+				{
+					_label: '2 Navigation point',
+					_href: '#/back-page',
+				},
+				{
+					_active: true,
+					_label: '3 Navigation point',
+					_href: '#/back-page',
+					_children: [
+						{
+							_label: '3.1 Navigation point',
+						},
+						{
+							_label: '3.2 Navigation point',
+							_href: '#/back-page',
+							_target: 'asdasd',
+						},
+						{
+							_active: true,
+							_label: '3.3 Navigation point',
+							_href: '#/back-page',
+							_children: [
+								{
+									_active: true,
+									_label: '3.3.1 Navigation point (active)',
+									_href: '#/back-page',
+								},
+								{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
+							],
+						},
+						{
+							_label: '3.4 Navigation point',
+							_href: '#/back-page',
+							_children: [
+								{ _label: '3.4.1 Navigation point', _href: '#/back-page' },
+								{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
+							],
+						},
+						{ _label: '3.5 Navigation point', _href: '#/back-page' },
+					],
+				},
+				{ _label: '4 Navigation point', _href: '#/back-page' },
+			]}
+			_orientation="horizontal"
+		/>
+	</>
 );

package/src/components/nav/routes.ts

@@ -1,7 +1,5 @@
 import { Routes } from '../../shares/types';
 
-import { NavActive } from './active';
-
 import { NavAriaCurrent } from './aria-current';
 
 import { NavBasic } from './basic';
@@ -11,7 +9,6 @@ import { NavHorizontal } from './horizontal';
 export const NAV_ROUTES: Routes = {
 	nav: {
 		basic: NavBasic,
-		active: NavActive,
 		'aria-current': NavAriaCurrent,
 		horizontal: NavHorizontal,
 	},

package/src/components/pagination/basic.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import { KolPagination } from '@public-ui/react';
 
 import { 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" />
-		<KolPagination _max={10} _page={6} _siblingCount={2} _variant="danger" _label="Test Paginierung 2" />
-		<KolPagination _max={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
-		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				KolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page
+				size.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" />
+			<KolPagination _max={10} _page={6} _siblingCount={2} _variant="danger" _label="Test Paginierung 2" />
+			<KolPagination _max={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
+			<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
+		</div>
+	</>
 );

package/src/components/progress/basic.tsx

@@ -2,10 +2,16 @@ import React from 'react';
 import { KolProgress } from '@public-ui/react';
 
 import { 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>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot;.</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

@@ -1,6 +1,12 @@
 import React, { FC } 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>KolQuote renders a quote with optional citation. This sample shows a quote in the variant &quot;inline&quot; with a link for citation.</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

@@ -1,17 +1,23 @@
 import React, { FC } 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>This sample shows a quote in the &quot;block&quot; variant.</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

@@ -1,5 +1,13 @@
 import React, { FC } 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>KolSelect renders a select field. The sample shows KolSelect in a form context with all variations and states.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={SelectVariants} />
+	</>
+);

package/src/components/skip-nav/basic.tsx

@@ -1,17 +1,13 @@
-import React from 'react';
-import { KolIndentedText, KolSkipNav } from '@public-ui/react';
-
-import { FC } from 'react';
+import React, { FC } from 'react';
+import { KolSkipNav } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const SkipNavBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolIndentedText>
-			<p>
-				<b>Links sind unsichtbar geschalten</b>
-				<br />
-				Um die Links zu sehen, am besten einmal in diesen Bereich klicken und Tab-Taste drücken.
-			</p>
-		</KolIndentedText>
+		<SampleDescription>
+			<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
+			<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
+		</SampleDescription>
 		<KolSkipNav
 			_ariaLabel="Versteckte Navigation"
 			_links={[

package/src/components/spin/basic.tsx

@@ -2,5 +2,14 @@ import React from 'react';
 import { KolSpin } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const SpinBasic: FC = () => <KolSpin _show />;
+export const SpinBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot;.</p>
+		</SampleDescription>
+
+		<KolSpin _show />
+	</>
+);

package/src/components/spin/custom.tsx

@@ -3,9 +3,19 @@ import { KolSpin } from '@public-ui/react';
 import './custom.css';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const SpinCustom: FC = () => (
-	<KolSpin _show _variant="none">
-		<span slot="expert" className="loader"></span>
-	</KolSpin>
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows a custom loading animation. Using the expert slot, it is possible to insert custom animations. Custom animations are not necessarily
+				barrier-free.
+			</p>
+		</SampleDescription>
+
+		<KolSpin _show _variant="none">
+			<span slot="expert" className="loader"></span>
+		</KolSpin>
+	</>
 );

package/src/components/spin/cycle.tsx

@@ -2,5 +2,14 @@ import React from 'react';
 import { KolSpin } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const SpinCycle: FC = () => <KolSpin _show _variant="cycle" />;
+export const SpinCycle: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows the KolSpin variant &quot;cycle&quot;.</p>
+		</SampleDescription>
+
+		<KolSpin _show _variant="cycle" />
+	</>
+);

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

@@ -1,9 +1,16 @@
 import React, { FC } from 'react';
 import { KolSplitButton } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const SplitButtonBasic: FC = () => {
 	return (
-		<div className="grid gap-4">
+		<>
+			<SampleDescription>
+				<p>
+					SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon. The first sample shows the button with an
+					assigned action. In the second sample no action is assigned and clicking the button opens the context menu instead.
+				</p>
+			</SampleDescription>
 			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: console.log }}>
 				Drowndown-Inhalt
 			</KolSplitButton>
@@ -13,6 +20,6 @@ export const SplitButtonBasic: FC = () => {
 			<KolSplitButton _label="schon offen" _show>
 				Dropdown initial sichtbar
 			</KolSplitButton>
-		</div>
+		</>
 	);
 };

package/src/components/table/column-alignment.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import { KolTable, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
 type Data = (typeof DATA)[0];
@@ -8,6 +9,9 @@ const genericNonSorter = (data: Data[]): Data[] => data;
 
 export const TableColumnAlignment: FC = () => (
 	<>
+		<SampleDescription>
+			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
+		</SampleDescription>
 		<KolHeading _label="Simple table" _level={3}></KolHeading>
 		<KolTable
 			_label="Table for demonstration purposes with different text align properties"

package/src/components/table/horizontal-scrollbar.tsx

@@ -2,6 +2,7 @@ import React, { FC, useState } from 'react';
 
 import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
 import { KoliBriTableHeaders } from '@public-ui/components/src';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
@@ -18,6 +19,12 @@ export const TableHorizontalScrollbar: FC = () => {
 
 	return (
 		<>
+			<SampleDescription>
+				<p>
+					This sample shows KolTable with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and
+					to scroll it using arrow keys.
+				</p>
+			</SampleDescription>
 			<KolHeading _label="Table with scrollbar" _level={2} />
 
 			<KolTable