@public-ui/sample-react 2.0.2 → 2.0.4-rc.0

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.14.0
+ * @remix-run/router v1.14.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.21.0
+ * React Router v6.21.3
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,33 +1,32 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.2",
+  "version": "2.0.4-rc.0",
   "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-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.2",
-    "@public-ui/react": "2.0.2",
-    "@public-ui/themes": "2.0.2",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@public-ui/components": "2.0.4-rc.0",
+    "@public-ui/react": "2.0.4-rc.0",
+    "@public-ui/themes": "2.0.4-rc.0",
+    "@types/node": "20.11.6",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "@unocss/preset-uno": "0.58.0",
-    "@unocss/webpack": "0.58.0",
+    "@unocss/preset-uno": "0.58.3",
+    "@unocss/webpack": "0.58.3",
     "ajv": "8.12.0",
-    "chromedriver": "120.0.0",
+    "chromedriver": "120.0.2",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "formik": "2.4.5",
-    "nightwatch-axe-verbose": "2.2.2",
+    "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.0",
-    "react-router-dom": "6.21.0",
+    "react-router": "6.21.3",
+    "react-router-dom": "6.21.3",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",
@@ -55,7 +54,7 @@
     "format": "prettier --check src",
     "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
-    "start": "npm run serve",
+    "start": "npm run serve -- --open",
     "unused": "ts-prune -e src",
     "postinstall": "npm-run-all postinstall:*",
     "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",

package/src/App.tsx

@@ -3,9 +3,9 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
 import { Option } from '@public-ui/components';
-import { KolAlert } from '@public-ui/react';
+import { KolAlert, KolBadge } from '@public-ui/react';
 import { ROUTES } from './shares/routes';
-import { Theme, THEME_OPTIONS } from './shares/theme';
+import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
 import PackageJson from '@public-ui/components/package.json';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
@@ -45,20 +45,19 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						path={`${path}/all`}
 						element={
 							<div className="d-grid gap-4">
-								{THEME_OPTIONS.filter(
-									(theme) =>
-										['bmf', 'default', 'bzst-v1', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].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="mt-4">
-											<strong>{theme.label}</strong>
+								{THEME_OPTIONS.filter((theme) => ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'].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="mt-4">
+												<strong>{theme.label}</strong>
+											</div>
+											<div className="my-2">
+												<ThisRoute />
+											</div>
+											<hr aria-hidden="true" />
 										</div>
-										<div className="my-2">
-											<ThisRoute />
-										</div>
-										<hr aria-hidden="true" />
-									</div>
-								))}
+									),
+								)}
 							</div>
 						}
 					/>,
@@ -104,7 +103,7 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getTheme();
+	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
@@ -134,6 +133,7 @@ export const App: FC = () => {
 				)}
 
 				<div className="p-4" id="route-container">
+					{!hideMenus && isDraftTheme(theme) && <KolBadge className="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>} />

package/src/components/SampleDescription.tsx

@@ -6,7 +6,7 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
 	const hideMenus = useContext(HideMenusContext);
 
 	return hideMenus ? null : (
-		<div className="flex">
+		<div className="flex mb-sm">
 			<KolIndentedText>{props.children}</KolIndentedText>
 			<KolLink
 				_hideLabel

package/src/components/alert/basic.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { KolAlert } from '@public-ui/react';
 
-import { HeadingLevel } from '@public-ui/components/dist/types/types/heading-level';
-
 import { FC } from 'react';
-import { AlertType, AlertVariant } from '@public-ui/components';
+import { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
 
 type PropsByType = {
 	level: HeadingLevel;
@@ -32,7 +30,7 @@ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	</>
 );
 
-export const AlertBasic: FC<PropsBasic> = ({ 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} />

package/src/components/alert/html.tsx

@@ -6,9 +6,8 @@ import { 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 style={{ display: 'grid', gridAutoFlow: 'column', gap: '1rem' }}>
+			<div className="grid gap-4 sm:grid-cols-2">
 				<div>
 					<h4>Text in einer linken Spalte</h4>
 					<p>

package/src/components/button/access-key.tsx

@@ -2,7 +2,7 @@ import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 
 export const ButtonAccessKey: FC = () => (
-	<div className="flex gap-4">
+	<div className="flex flex-wrap gap-4">
 		<KolButton _label="Mit S access key" _accessKey="S"></KolButton>
 		<KolButton _label="Sehr kleines s" _accessKey="s"></KolButton>
 		<KolButton _label="Access key kommt nicht in label vor" _accessKey="x"></KolButton>

package/src/components/button/width.tsx

@@ -12,14 +12,14 @@ const ARGS = {
 
 export const ButtonWidth: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
 			<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
 			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
 		</div>
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>

package/src/components/card/selection.tsx

@@ -11,8 +11,8 @@ const STYLE = {
 };
 
 export const CardSelection: FC = () => (
-	<div className="flex gap-2">
-		<KolCard _label="DEBTI-25437/17-1">
+	<div className="flex flex-wrap gap-2">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -32,7 +32,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -52,7 +52,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte

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

@@ -15,8 +15,8 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Woche" _required />
 			<KolInputDate {...props} _type="time" _label="Zeit (Standard)" _required />
 			<KolInputDate {...props} _step={1} _type="time" _label="Zeit (mit Sekunden)" _required />
-			<KolInputDate {...props} _readOnly _label="Zahleneingabe (Readonly)" _required />
-			<KolInputDate {...props} _disabled _label="Zahleneingabe (Disabled)" _required />
+			<KolInputDate {...props} _readOnly _label="Datumseingabe (Readonly)" _required />
+			<KolInputDate {...props} _disabled _label="Datumseingabe (Disabled)" _required />
 		</div>
 	);
 });

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

@@ -11,7 +11,7 @@ const ARGS = {
 
 export const LinkButtonBasic: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>

package/src/components/nav/basic.tsx

@@ -2,59 +2,6 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { LINKS } from './links';
 
-export const NavBasic: FC = () => (
-	<KolNav
-		class="block w-sm"
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_icons: 'codicon codicon-home',
-				_href: '#/',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/untermenu',
-			},
-			{
-				_label: '3 Navigation point',
-				_href: '#abc',
-				_children: [
-					{
-						_label: '3.1 Navigation point',
-						_href: '#/',
-					},
-					{
-						_label: '3.2 Navigation point',
-						_href: '#abc',
-						_target: 'asdasd',
-					},
-					{
-						_label: '3.3 Navigation point',
-						_href: '#abc',
-						_icons: 'fa-solid fa-cat',
-						_children: [
-							{
-								_label: '3.3.1 Navigation point (active)',
-								_href: '#abc',
-							},
-							{ _label: '3.3.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{
-						_label: '3.4 Navigation point',
-						_href: '#abc',
-						_children: [
-							{ _label: '3.4.1 Navigation point', _href: '#abc' },
-							{ _label: '3.4.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{ _label: '3.5 Navigation point', _href: '#abc' },
-				],
-			},
-			{ _label: '4 Navigation point', _href: '#abc' },
-		]}
-		_hasCompactButton
-	/>
-);
+export const NavBasic: FC = () => <KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton />;

package/src/components/nav/horizontal.tsx

@@ -2,55 +2,6 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { LINKS } from './links';
 
-export const NavHorizontal: FC = () => (
-	<KolNav
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/nav/horizontal',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/nav/horizontal',
-			},
-			{
-				_label: '3 Navigation point',
-				_href: '#/nav/horizontal',
-				_children: [
-					{
-						_label: '3.1 Navigation point',
-					},
-					{
-						_label: '3.2 Navigation point',
-						_href: '#/nav/horizontal',
-						_target: 'asdasd',
-					},
-					{
-						_label: '3.3 Navigation point',
-						_href: '#/nav/horizontal',
-						_children: [
-							{
-								_label: '3.3.1 Navigation point (active)',
-								_href: '#abc',
-							},
-							{ _label: '3.3.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{
-						_label: '3.4 Navigation point',
-						_href: '#/nav/horizontal',
-						_children: [
-							{ _label: '3.4.1 Navigation point', _href: '#abc' },
-							{ _label: '3.4.2 Navigation point', _href: '#abc' },
-						],
-					},
-					{ _label: '3.5 Navigation point', _href: '#abc' },
-				],
-			},
-			{ _label: '4 Navigation point', _href: '#abc' },
-		]}
-		_orientation="horizontal"
-	/>
-);
+export const NavHorizontal: FC = () => <KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />;

package/src/components/nav/links.ts

@@ -0,0 +1,78 @@
+import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
+
+export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_href: '#/',
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/untermenu',
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#abc',
+		_icons: 'codicon codicon-home',
+		_children: [
+			{
+				_label: '3.1 Navigation point',
+				_icons: 'codicon codicon-home',
+				_href: '#/',
+			},
+			{
+				_label: '3.2 Navigation point',
+				_href: '#abc',
+				_target: 'asdasd',
+			},
+			{
+				_label: '3.3 Navigation point',
+				_href: '#abc',
+				_children: [
+					{
+						_label: '3.3.1 Navigation point',
+						_href: '#abc',
+					},
+					{ _label: '3.3.2 Navigation point', _href: '#abc' },
+				],
+			},
+			{
+				_label: '3.4 Navigation point',
+				_href: '#abc',
+				_children: [
+					{
+						_label: '3.4.1 Navigation point',
+						_href: '#abc',
+						_children: [
+							{ _label: '3.4.1.1 Navigation point', _href: '#abc' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#abc' },
+						],
+					},
+					{ _label: '3.4.2 Navigation point', _href: '#abc' },
+				],
+			},
+			{ _label: '3.5 Navigation point', _href: '#abc' },
+		],
+	},
+	{ _label: '4 Navigation point', _href: '#abc' },
+	{
+		_label: '5 Keine eigene Seite, nur Kategorie',
+		_active: true,
+		_children: [
+			{
+				_label: '5.1 Verschachtelter Link',
+				_href: '#abc',
+			},
+		],
+	},
+	{
+		_label: '6 Keine eigene Seite, mit Icon',
+		_icons: 'codicon codicon-squirrel',
+		_children: [
+			{
+				_label: '6.1 Verschachtelter Link',
+				_href: '#abc',
+			},
+		],
+	},
+];

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

@@ -14,12 +14,12 @@ export const SplitButtonBasic: FC = () => {
 	};
 
 	return (
-		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" className="w-200px" _on={{ onClick: handleButtonClick }}>
-				Drowndown-Inhalt
+		<div className="flex gap-4">
+			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
+				Dropdown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request" className="w-200px">
-				Drowndown-Inhalt
+			<KolSplitButton _label="Schalter ohne sichtbares Label" _hideLabel _icons="codicon codicon-git-pull-request">
+				Dropdown-Inhalt
 			</KolSplitButton>
 		</div>
 	);

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

@@ -15,11 +15,12 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'order', key: 'order', textAlign: 'center' },
+			{ label: 'order', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'date',
 				key: 'date',
 				textAlign: 'center',
+				width: '20em',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
@@ -48,4 +49,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;

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

@@ -0,0 +1,84 @@
+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];
+const genericNonSorter = (data: Data[]): Data[] => data;
+
+export const TableColumnAlignment: FC = () => (
+	<>
+		<SampleDescription>Table with columns headers and data in different text alignments.</SampleDescription>
+
+		<KolHeading _label="Simple table" _level={3}></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with different text align properties"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left' },
+						{ label: 'center', key: 'center', textAlign: 'center' },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with sortable columns"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+						{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with some but not all columns sortable"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with vertical heading"
+			_headers={{
+				horizontal: [
+					[
+						{ label: '', asTd: true },
+						{ label: 'left', key: 'left', textAlign: 'left' },
+						{ label: 'center', key: 'center', textAlign: 'center' },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+				vertical: [[{ label: 'Vertical' }]],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+	</>
+);

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

@@ -0,0 +1,57 @@
+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 = {
+	horizontal: [
+		[
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
+		],
+	],
+};
+
+export const TableHorizontalScrollbar: FC = () => {
+	const [hasWidthRestriction, setHasWidthRestriction] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				Table examples 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.
+			</SampleDescription>
+
+			<KolHeading _label="Table with scrollbar" _level={2} />
+
+			<KolTable
+				_label="Table for demonstration purposes with horizontal scrollbar."
+				_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+				_headers={HEADERS}
+				_data={DATA}
+				className="block"
+				style={{ width: '400px' }}
+			/>
+
+			<KolInputCheckbox
+				_checked={hasWidthRestriction}
+				_label="Toggle width restriction"
+				_variant="switch"
+				_on={{
+					onChange: (_event, value) => {
+						setHasWidthRestriction(Boolean(value));
+					},
+				}}
+			></KolInputCheckbox>
+
+			<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
+			<p className="mt-0">
+				<i>Scrollbar appears on very small viewport sizes</i>
+			</p>
+
+			<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+		</>
+	);
+};