@public-ui/sample-react 1.7.0-rc.9 → 1.7.1

package/src/components/input-text/partials/cases.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputText } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+
+export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputText
+				{...props}
+				_hint={HINT_MSG}
+				_error={ERROR_MSG}
+				_placeholder="Mit Icons"
+				_icons={{
+					left: 'codicon codicon-arrow-left',
+					right: {
+						icon: 'codicon codicon-arrow-right',
+						style: {
+							'font-size': '200%',
+						},
+					},
+				}}
+				_on={{
+					onBlur: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+				_hideLabel
+				_required
+				_type="search"
+				_touched
+				_label="Suche"
+			/>
+			<KolInputText {...props} ref={ref} _placeholder="Placeholder" _label="Vorname (text)" _required />
+			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
+			<KolInputText {...props} _placeholder="Placeholder" _error={ERROR_MSG} _touched _type="url" _label="URL (url)" />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
+			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
+			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
+			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
+			<KolInputText {...props} _value="Value" _disabled _label="Vorname (text, disabled)" />
+		</div>
+	);
+});

package/src/components/input-text/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputTextCases } from './cases';
+
+export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<InputTextCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<InputTextCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-text/routes.ts

@@ -4,12 +4,9 @@ import { InputTextBasic } from './basic';
 import { InputTextBlur } from './blur';
 import { InputTextFocus } from './focus';
 
-import { InputTextHiddenLabel } from './hidden-label';
-
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		'hidden-label': InputTextHiddenLabel,
 		blur: InputTextBlur,
 		focus: InputTextFocus,
 	},

package/src/components/kolibri/animated.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { KolKolibri } from '@public-ui/react';
+
+export const KolibriAnimated: FC = () => <KolKolibri _animate style={{ width: 300 }}></KolKolibri>;

package/src/components/kolibri/basic.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { KolKolibri } from '@public-ui/react';
+
+export const KolibriBasic: FC = () => <KolKolibri style={{ width: 300 }} />;

package/src/components/kolibri/no-label.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { KolKolibri } from '@public-ui/react';
+
+export const KolibriNoLabel: FC = () => <KolKolibri _labeled={false} style={{ width: 300 }}></KolKolibri>;

package/src/components/kolibri/routes.ts

@@ -0,0 +1,13 @@
+import { Routes } from '../../shares/types';
+
+import { KolibriBasic } from './basic';
+import { KolibriAnimated } from './animated';
+import { KolibriNoLabel } from './no-label';
+
+export const KOLIBRI_ROUTES: Routes = {
+	kolibri: {
+		basic: KolibriBasic,
+		animated: KolibriAnimated,
+		'no-label': KolibriNoLabel,
+	},
+};

package/src/components/link/icons.tsx

@@ -5,27 +5,27 @@ import { FC } from 'react';
 
 export const LinkIcons: FC = () => (
 	<div className="grid gap-4">
-		<KolLink _icon="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+		<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
 		<KolLink
-			_icon={{
+			_icons={{
 				right: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon rechts"
 		/>
 		<KolLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon oben"
 		/>
 		<KolLink
-			_icon={{
+			_icons={{
 				bottom: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon unten"
 		/>
 		<KolLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 				right: 'codicon codicon-home',
 				bottom: 'codicon codicon-home',

package/src/components/link/image.tsx

@@ -9,9 +9,8 @@ export const LinkImage: FC = () => (
 		<br />
 		<KolLink _href="#" _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
-			<KolKolibri></KolKolibri>
+			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
-		<KolKolibri />
 		<br />
 		<KolLink _href="#" _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />

package/src/components/link/target.tsx

@@ -5,11 +5,10 @@ import { FC } from 'react';
 
 export const LinkTarget: FC = () => (
 	<div className="d-flex gap-4">
-		<KolLink _href="#" _label="Ich bin ein Link ohne Target" />
-		<KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />
-		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+		<KolLink _href="#" _label="Ich bin ein Link ohne Target" /> <KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+		<KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
+		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
+		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
 	</div>
 );

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

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { KolLinkGroup } from '@public-ui/react';
+
+const links = [
+	{ _label: 'Link 1', _href: 'https://www.w3.org' },
+	{ _label: 'Link 2', _href: 'https://www.w3.org' },
+	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+];
+export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} />;

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

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { KolLinkGroup } from '@public-ui/react';
+
+const links = [
+	{ _label: 'Link 1', _href: 'https://www.w3.org' },
+	{ _label: 'Link 2', _href: 'https://www.w3.org' },
+	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+];
+export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" />;

package/src/components/link-group/routes.ts

@@ -1,5 +1,10 @@
 import { Routes } from '../../shares/types';
+import { LinkGroupBasic } from './basic';
+import { LinkGroupHorizontal } from './horizontal';
 
 export const LINK_GROUP_ROUTES: Routes = {
-	'link-group': {},
+	'link-group': {
+		basic: LinkGroupBasic,
+		horizontal: LinkGroupHorizontal,
+	},
 };

package/src/components/logo/basic.tsx

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+import { KolLogo } from '@public-ui/react';
+import { Bundesministerium } from '@public-ui/components';
+
+export const LogoBasic: FC = () => <KolLogo _org={Bundesministerium['Die Bundesregierung']} style={{ width: 300 }} />;

package/src/components/logo/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { LogoBasic } from './basic';
+
+export const LOGO_ROUTES: Routes = {
+	logo: {
+		basic: LogoBasic,
+	},
+};

package/src/components/modal/basic.tsx

@@ -0,0 +1,37 @@
+import React, { FC, useRef } from 'react';
+import { KolButton, KolCard, KolModal } from '@public-ui/react';
+
+export const ModalBasic: FC = () => {
+	const modalElement = useRef<HTMLKolModalElement>(null);
+
+	return (
+		<div>
+			<KolModal _ariaLabel="" _width="80%" ref={modalElement}>
+				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
+					<div slot="content">
+						<KolButton
+							_label="Schließen"
+							_on={{
+								onClick: () => {
+									if (modalElement?.current) {
+										modalElement.current._activeElement = null;
+									}
+								},
+							}}
+						/>
+					</div>
+				</KolCard>
+			</KolModal>
+			<KolButton
+				_label="Modal öffnen"
+				_on={{
+					onClick: (event: Event) => {
+						if (modalElement?.current) {
+							modalElement.current._activeElement = event.target as HTMLElement;
+						}
+					},
+				}}
+			/>
+		</div>
+	);
+};

package/src/components/modal/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { ModalBasic } from './basic';
+
+export const MODAL_ROUTES: Routes = {
+	modal: {
+		basic: ModalBasic,
+	},
+};

package/src/components/nav/active.tsx

@@ -18,7 +18,7 @@ export const NavActive: FC = () => {
 		setLinks([
 			{
 				_label: 'Main',
-				_icon: 'fa-solid fa-house',
+				_icons: 'fa-solid fa-house',
 				_on: {
 					onClick: () => handleLinks('Main'),
 				},
@@ -44,7 +44,7 @@ export const NavActive: FC = () => {
 				_children: [
 					{
 						_label: 'Main',
-						_icon: 'fa-solid fa-house',
+						_icons: 'fa-solid fa-house',
 						_on: {
 							onClick: () => handleLinks('/'),
 						},

package/src/components/nav/basic.tsx

@@ -9,7 +9,7 @@ export const NavBasic: FC = () => (
 		_links={[
 			{
 				_label: 'Homepage',
-				_icon: 'fa-solid fa-house',
+				_icons: 'fa-solid fa-house',
 				_href: '#/',
 			},
 			{
@@ -34,7 +34,7 @@ export const NavBasic: FC = () => (
 						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#abc',
-						_icon: 'fa-solid fa-cat',
+						_icons: 'fa-solid fa-cat',
 						_children: [
 							{
 								_active: true,

package/src/components/pagination/basic.tsx

@@ -5,8 +5,9 @@ import { FC } from 'react';
 
 export const PaginationBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolPagination _total={10} _page={6} _siblingCount={0} />
-		<KolPagination _total={10} _page={6} _siblingCount={2} _variant="danger" />
-		<KolPagination _total={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" />
+		<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/popover/basic.tsx

@@ -12,21 +12,21 @@ export const PopoverBasic: FC = () => {
 
 	return (
 		<div className="grid gap-4 max-w-[400px] mx-auto pt-8">
-			<KolButton _label="Oben" _icon="codicon codicon-arrow-up" _variant="primary" _on={{ onClick: () => setTop(!top) }}></KolButton>
+			<KolButton _label="Oben" _icons="codicon codicon-arrow-up" _variant="primary" _on={{ onClick: () => setTop(!top) }}></KolButton>
 			<KolPopover _show={top}>Ich bin oberhalb</KolPopover>
-			<KolButton _label="Rechts" _icon="codicon codicon-arrow-right" _variant="danger" _on={{ onClick: () => setRight(!right) }}></KolButton>
+			<KolButton _label="Rechts" _icons="codicon codicon-arrow-right" _variant="danger" _on={{ onClick: () => setRight(!right) }}></KolButton>
 			<KolPopover _align="right" _show={right}>
 				Ich bin rechts
 			</KolPopover>
-			<KolButton _label="Unten" _icon="codicon codicon-arrow-down" _variant="secondary" _on={{ onClick: () => setBottom(!bottom) }}></KolButton>
+			<KolButton _label="Unten" _icons="codicon codicon-arrow-down" _variant="secondary" _on={{ onClick: () => setBottom(!bottom) }}></KolButton>
 			<KolPopover _align="bottom" _show={bottom}>
 				Ich bin unterhalb
 			</KolPopover>
-			<KolButton _label="Links" _icon="codicon codicon-arrow-left" _variant="normal" _on={{ onClick: () => setLeft(!left) }}></KolButton>
+			<KolButton _label="Links" _icons="codicon codicon-arrow-left" _variant="normal" _on={{ onClick: () => setLeft(!left) }}></KolButton>
 			<KolPopover _align="left" _show={left}>
 				Ich bin links
 			</KolPopover>
-			<KolButton _label="PR starten" _icon="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
+			<KolButton _label="PR starten" _icons="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
 			<KolPopover _show={login}>
 				<KolInputText>Benutzername</KolInputText>
 				<KolInputPassword>Passwort</KolInputPassword>

package/src/components/quote/basic.tsx

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { KolQuote } from '@public-ui/react';
+
+export const QuoteBasic: FC = () => (
+	<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

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { KolQuote } from '@public-ui/react';
+
+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
+								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>
+);

package/src/components/quote/routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '../../shares/types';
+
+import { QuoteBasic } from './basic';
+import { QuoteBlock } from './block';
+
+export const QUOTE_ROUTES: Routes = {
+	quote: {
+		basic: QuoteBasic,
+		block: QuoteBlock,
+	},
+};

package/src/components/select/basic.tsx

@@ -1,51 +1,5 @@
-import React from 'react';
-import { SelectOption } from '@public-ui/components';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { SelectVariants } from './partials/variants';
 
-import { KolForm, KolSelect } from '@public-ui/react';
-
-import { FC } from 'react';
-
-import countries from 'world_countries_lists/data/countries/de/countries.json';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-const STATUS_OPTIONS: SelectOption<string>[] = [
-	{
-		label: '- Keine Auswahl',
-		value: '',
-		disabled: true,
-	},
-];
-
-type Country = {
-	id: number;
-	alpha2: string;
-	alpha3: string;
-	name: string;
-};
-(countries as Country[]).forEach((country) =>
-	STATUS_OPTIONS.push({
-		label: country.name,
-		value: country.alpha2,
-	}),
-);
-
-export const SelectBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolSelect
-			_id=""
-			_options={STATUS_OPTIONS}
-			_error={ERROR_MSG}
-			_label="Anrede"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolSelect _id="" _options={STATUS_OPTIONS} _label="Anrede" _multiple _required _error={ERROR_MSG} />
-	</KolForm>
-);
+export const SelectBasic: FC = () => <FormWrap RefComponent={SelectVariants} />;

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

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+
+import { Components, SelectOption } from '@public-ui/components';
+import { KolSelect } from '@public-ui/react';
+import { ERROR_MSG } from '../../../shares/constants';
+
+import countries from 'world_countries_lists/data/countries/de/countries.json';
+
+type Country = {
+	id: number;
+	alpha2: string;
+	alpha3: string;
+	name: string;
+};
+
+const SALUTATION_OPTIONS: SelectOption<string>[] = [
+	{
+		label: '- Keine Auswahl',
+		value: '',
+		disabled: true,
+	},
+	{
+		label: 'Frau',
+		value: 'Frau',
+	},
+	{
+		label: 'Herr',
+		value: 'Herr',
+	},
+	{
+		label: 'Divers',
+		value: 'Divers',
+	},
+];
+
+const COUNTRY_OPTIONS: SelectOption<string>[] = [
+	...(countries as Country[]).map((country) => ({
+		label: country.name,
+		value: country.alpha2,
+	})),
+];
+
+export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolSelect
+				{...props}
+				ref={ref}
+				_options={SALUTATION_OPTIONS}
+				_error={ERROR_MSG}
+				_label="Anrede"
+				_icons={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+				_touched
+			/>
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _error={ERROR_MSG} _touched />
+			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
+			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl mit Fehler" _multiple _required _error={ERROR_MSG} _touched />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { SelectCases } from './cases';
+
+export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<SelectCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<SelectCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -1,45 +1,17 @@
-import React, { useState } from 'react';
+import React, { FC } from 'react';
 import { KolSplitButton } from '@public-ui/react';
 
-import { FC } from 'react';
-
 export const SplitButtonBasic: FC = () => {
-	const [showDropdown, setShowDropdown] = useState(false);
-
 	return (
 		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" _onClick={console.log}>
-				I am
-				<br />a dwarf
-			</KolSplitButton>
-			<KolSplitButton _label="ohne label" _hide-label _icon="codicon codicon-git-pull-request">
-				and
-				<br />
-				I&apos;m
-				<br />
-				digging
-				<br />a hole
-			</KolSplitButton>
-			<KolSplitButton _label="kick me">
-				diggy
-				<br />
-				diggy
-				<br />
-				hole
+			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: console.log }}>
+				Drowndown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="schon offen" _show-dropdown={showDropdown}>
-				diggy
-				<br />
-				diggy
-				<br />
-				hole
+			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request">
+				Drowndown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label={`vorherigen ${showDropdown ? 'schließen' : 'öffnen'}`} _onClick={() => setShowDropdown(!showDropdown)}>
-				diggy
-				<br />
-				diggy
-				<br />
-				hole
+			<KolSplitButton _label="schon offen" _show>
+				Dropdown initial sichtbar
 			</KolSplitButton>
 		</div>
 	);

package/src/components/table/badge-size.tsx

@@ -38,7 +38,7 @@ const HEADERS: KoliBriTableHeaders = {
 								backgroundColor: 'red',
 								width: '80%',
 							}}
-							_icon="codicon codicon-location"
+							_icons="codicon codicon-location"
 							_label={'Speichern'}
 						/>,
 					);
@@ -48,4 +48,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/render-cell.tsx

@@ -31,12 +31,12 @@ const HEADERS: KoliBriTableHeaders = {
 			{
 				label: 'Aktion (react)',
 				key: 'order',
-				render: (el, cell, tupel) => {
+				render: (el) => {
 					// https://reactjs.org/docs/portals.html
 					getRoot(el).render(
 						<>
 							<KolButton _label={'Speichern'} />
-							<KolInputText _id="test">Eingabe</KolInputText>
+							<KolInputText _label="Eingabe" />
 						</>,
 					);
 				},
@@ -45,4 +45,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/routes.ts

@@ -4,12 +4,14 @@ import { TableBadgeSize } from './badge-size';
 
 import { TableRenderCell } from './render-cell';
 
-import { TableSortTabel } from './sort-date';
+import { TableSortTable } from './sort-date';
+import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
 		'render-cell': TableRenderCell,
-		'sort-data': TableSortTabel,
+		'sort-data': TableSortTable,
+		'with-pagination': TableWithPagination,
 	},
 };