@public-ui/sample-react 1.7.0-rc.8 → 1.7.0

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,
 	},
 };

package/src/components/table/sort-date.tsx

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTabel: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableSortTable: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/with-pagination.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components';
+import { KoliBriTablePaginationProps } from '@public-ui/components/src';
+import { DATA } from './test-data';
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Order', key: 'order' },
+			{ label: 'Date', key: 'date' },
+		],
+	],
+};
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _total: 1 };
+
+export const TableWithPagination: FC = () => (
+	<div>
+		<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+	</div>
+);

package/src/components/tabs/basic.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'Erster Tab',
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Zweites Tab',
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Deaktiviertes Tab',
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Letzter Tab',
+	},
+];
+export const TabsBasic: FC = () => (
+	<KolTabs _tabs={tabs}>
+		<div slot="tab-0">Inhalte von Tab 1</div>
+		<div slot="tab-1">Inhalte von Tab 2</div>
+		<div slot="tab-2">Inhalte von Tab 3</div>
+		<div slot="tab-3">Inhalte von Tab 4</div>
+	</KolTabs>
+);

package/src/components/tabs/icons-only.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'Erster Tab',
+		_hideLabel: true,
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Zweites Tab',
+		_hideLabel: true,
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Deaktiviertes Tab',
+		_hideLabel: true,
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Letzter Tab',
+		_hideLabel: true,
+	},
+];
+export const TabsIconsOnly: FC = () => (
+	<KolTabs _tabs={tabs}>
+		<div slot="tab-0">Inhalte von Tab 1</div>
+		<div slot="tab-1">Inhalte von Tab 2</div>
+		<div slot="tab-2">Inhalte von Tab 3</div>
+		<div slot="tab-3">Inhalte von Tab 4</div>
+	</KolTabs>
+);

package/src/components/tabs/routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '../../shares/types';
+
+import { TabsBasic } from './basic';
+import { TabsIconsOnly } from './icons-only';
+
+export const TABS_ROUTES: Routes = {
+	tabs: {
+		basic: TabsBasic,
+		'icons-only': TabsIconsOnly,
+	},
+};

package/src/components/textarea/adjust-height.tsx

@@ -13,10 +13,10 @@ sit amet.`;
 export const TextareaAdjustHeight: FC = () => (
 	<KolForm className="row">
 		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _id="text-vertical" _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
+			<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
 		</div>
 		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _id="text-none" _resize="none" _value={VALUE} _label="Texteingabe (none)" />
+			<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
 		</div>
 	</KolForm>
 );

package/src/components/textarea/basic.tsx

@@ -1,11 +1,5 @@
-import React from 'react';
-import { KolForm, KolTextarea } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { TextareaVariants } from './partials/variants';
 
-import { FC } from 'react';
-import { ERROR_MSG } from '../../shares/constants';
-
-export const TextareaBasic: FC = () => (
-	<KolForm>
-		<KolTextarea _id="text" _error={ERROR_MSG} _label="Texteingabe" />
-	</KolForm>
-);
+export const TextareaBasic: FC = () => <FormWrap RefComponent={TextareaVariants} />;

package/src/components/textarea/counter.tsx

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { KolTextarea } from '@public-ui/react';
+
+export const TextareaCounter: FC = () => (
+	<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
+);

package/src/components/textarea/disabled.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaDisabled: FC = () => (
 	<KolForm>
-		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _id="text" _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
 	</KolForm>
 );

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

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolTextarea {...props} ref={ref} _error={ERROR_MSG} _label="Text" _touched />
+			<KolTextarea {...props} ref={ref} _label="Text (3 rows)" _rows={3} />
+		</div>
+	);
+});

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

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

package/src/components/textarea/placeholder.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaPlaceholder: FC = () => (
 	<KolForm>
-		<KolTextarea _id="text" _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
+		<KolTextarea _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/textarea/readonly.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaReadOnly: FC = () => (
 	<KolForm>
-		<KolTextarea _error="Es ist ein Fehler aufgetreten." _id="text" _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		<KolTextarea _error="Es ist ein Fehler aufgetreten." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/textarea/resize.tsx

@@ -5,9 +5,9 @@ import { FC } from 'react';
 
 export const TextareaResize: FC = () => (
 	<KolForm className="grid gap-4">
-		<KolTextarea _id="text-both" _resize="both" _label="Texteingabe (both)" />
-		<KolTextarea _id="text-verical" _resize="vertical" _label="Texteingabe (vertical)" />
-		<KolTextarea _id="text-horizontal" _resize="horizontal" _label="Texteingabe (horizontal)" />
-		<KolTextarea _id="text-none" _resize="none" _label="Texteingabe (none)" />
+		<KolTextarea _resize="both" _label="Texteingabe (both)" />
+		<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
+		<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
+		<KolTextarea _resize="none" _label="Texteingabe (none)" />
 	</KolForm>
 );

package/src/components/textarea/routes.ts

@@ -13,6 +13,7 @@ import { TextareaReadOnly } from './readonly';
 import { TextareaResize } from './resize';
 
 import { TextareaRows } from './rows';
+import { TextareaCounter } from './counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {
@@ -23,5 +24,6 @@ export const TEXTAREA_ROUTES: Routes = {
 		readonly: TextareaReadOnly,
 		resize: TextareaResize,
 		rows: TextareaRows,
+		'with-counter': TextareaCounter,
 	},
 };

package/src/components/textarea/rows.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaRows: FC = () => (
 	<KolForm>
-		<KolTextarea _id="text" _rows={10} _label="Texteingabe" />
+		<KolTextarea _rows={10} _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/toast/basic.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { KolButton, KolToast } from '@public-ui/react';
 import { ToasterService } from '@public-ui/components';
+import { KolButton } from '@public-ui/react';
+import React from 'react';
 
 const toaster = ToasterService.getInstance(document);
 

package/src/components/types.tsx

@@ -0,0 +1,42 @@
+import { FormWrap } from './FormWrap';
+import { ButtonVariants } from './button/partials/variants';
+import { InputCheckboxVariants } from './input-checkbox/partials/variants';
+import { InputColorVariants } from './input-color/partials/variants';
+import { InputDateVariants } from './input-date/partials/variants';
+import { InputEmailVariants } from './input-email/partials/variants';
+import { InputFileVariants } from './input-file/partials/variants';
+import { InputNumberVariants } from './input-number/partials/variants';
+import { InputPasswordVariants } from './input-password/partials/variants';
+import { InputRadioVariants } from './input-radio/partials/variants';
+import { InputRangeVariants } from './input-range/partials/variants';
+import { InputTextVariants } from './input-text/partials/variants';
+import { SelectVariants } from './select/partials/variants';
+import { TextareaVariants } from './textarea/partials/variants';
+
+export type RefFormComponent =
+	| typeof InputCheckboxVariants
+	| typeof InputColorVariants
+	| typeof InputDateVariants
+	| typeof InputEmailVariants
+	| typeof InputFileVariants
+	| typeof InputNumberVariants
+	| typeof InputPasswordVariants
+	| typeof InputRadioVariants
+	| typeof InputRangeVariants
+	| typeof InputTextVariants
+	| typeof SelectVariants
+	| typeof TextareaVariants;
+
+export type RefComponent =
+	// | typeof AbbrVariants
+	// | typeof AccordionVariants
+	// | typeof AlertVariants
+	| typeof ButtonVariants
+	// | typeof ButtonLinkVariants
+	// | typeof CardVariants
+	// | typeof LinkVariants
+	// | typeof LinkButtonVariants
+	// | typeof PopoverVariants
+	// | typeof SplitButtonVariants
+	// | typeof TabsVariants
+	| RefFormComponent;

package/src/hooks/useMobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export function useMobile(): boolean {
+	const mediaQuery = matchMedia('(max-width: 1023px)');
+	const [matches, setMatches] = useState<boolean>(mediaQuery.matches);
+
+	const handleChange = () => {
+		setMatches(mediaQuery.matches);
+	};
+
+	useEffect(() => {
+		handleChange(); // handle initial value
+		mediaQuery.addEventListener('change', handleChange);
+
+		return () => {
+			mediaQuery.removeEventListener('change', handleChange);
+		};
+	}, [mediaQuery]);
+
+	return matches;
+}

package/src/shares/routes.ts

@@ -40,6 +40,12 @@ import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 import { Routes } from './types';
+import { IMAGE_ROUTES } from '../components/image/routes';
+import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
+import { LOGO_ROUTES } from '../components/logo/routes';
+import { MODAL_ROUTES } from '../components/modal/routes';
+import { QUOTE_ROUTES } from '../components/quote/routes';
+import { TABS_ROUTES } from '../components/tabs/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -49,14 +55,15 @@ export const ROUTES: Routes = {
 	...AVATAR_ROUTES,
 	...BADGE_ROUTES,
 	...BREADCRUMB_ROUTES,
-	...BUTTON_ROUTES,
-	...BUTTON_LINK_ROUTES,
 	...BUTTON_GROUP_ROUTES,
+	...BUTTON_LINK_ROUTES,
+	...BUTTON_ROUTES,
 	...CARD_ROUTES,
 	...DETAILS_ROUTES,
 	...FORM_ROUTES,
 	...HEADING_ROUTES,
 	...ICON_ROUTES,
+	...IMAGE_ROUTES,
 	...INDENTED_ROUTES,
 	...INPUT_CHECKBOX_ROUTES,
 	...INPUT_COLOR_ROUTES,
@@ -68,19 +75,24 @@ export const ROUTES: Routes = {
 	...INPUT_RADIO_ROUTES,
 	...INPUT_RANGE_ROUTES,
 	...INPUT_TEXT_ROUTES,
-	...LINK_ROUTES,
+	...KOLIBRI_ROUTES,
 	...LINK_BUTTON_ROUTES,
 	...LINK_GROUP_ROUTES,
+	...LINK_ROUTES,
+	...LOGO_ROUTES,
+	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
 	...POPOVER_ROUTES,
 	...PROGRESS_ROUTES,
+	...QUOTE_ROUTES,
 	...SELECT_ROUTES,
 	...SELECT_ROUTES,
 	...SKIP_NAV_ROUTES,
 	...SPIN_ROUTES,
 	...SPLIT_BUTTON_ROUTES,
 	...TABLE_ROUTES,
+	...TABS_ROUTES,
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
 	...VERSION_ROUTES,

package/src/style.scss

@@ -1,3 +1,11 @@
+* {
+	font-family: Verdana;
+}
+
+body {
+	margin: 0;
+}
+
 dl,
 hr {
 	margin: 0;
@@ -19,20 +27,22 @@ hr {
 	grid-template-columns: auto auto;
 }
 
-.app-container {
-	display: grid;
-	grid-template-columns: 360px auto;
-	height: 100%;
-}
+@media (min-width: 1024px) {
+	.app-container {
+		display: grid;
+		grid-template-columns: 360px auto;
+		height: 100%;
+	}
 
-.app-sidebar {
-	border-right: 1px solid gray;
-	font-family: sans-serif;
+	.app-sidebar {
+		border-right: 1px solid gray;
+	}
 }
 
 @media print {
+
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/tsconfig.json

@@ -9,7 +9,7 @@
 		"preserveSymlinks": true,
 		"moduleResolution": "node",
 		"lib": ["es2017", "dom"],
-		"types": ["@public-ui/components", "mocha", "node", "react", "react-dom"],
+		"types": ["node", "react", "react-dom"],
 		"typeRoots": ["node_modules/@types", "src/types"],
 		"noUnusedLocals": true,
 		"resolveJsonModule": true,
@@ -27,6 +27,5 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*", "tests/**/*", "node_modules/@leanup/**/*", "decs.d.ts"],
-	"exclude": ["node_modules/@leanup/**/template/**/*"]
+	"include": ["src/**/*"]
 }

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { KolAlert, KolButtonLink } from '@public-ui/react';
-
-import { FC } from 'react';
-
-export const ButtonLinkTarget: FC = () => (
-	<div className="grid gap-4">
-		<KolAlert _type="info">Bei einem semantischen Button der als Link dargestellt wird, gibt es kein Target!</KolAlert>
-		<KolButtonLink _href="#" _label="Ich bin ein Link ohne Target" />
-		<KolButtonLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolButtonLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-		<KolButtonLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />
-		<KolButtonLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolButtonLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-	</div>
-);