@public-ui/sample-react 1.7.0-rc.10

package/src/components/breadcrumb/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { BreadcrumbBasic } from './basic';
+
+export const BREADCRUMB_ROUTES: Routes = {
+	breadcrumb: {
+		basic: BreadcrumbBasic,
+	},
+};

package/src/components/button/basic.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { KolButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const ARGS = {
+	_on: {
+		onClick: (_event, _value) => alert('Klick!'),
+	},
+};
+
+export const ButtonBasic: FC = () => (
+	<div className="grid 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-wrap gap-14">
+			<KolButton _disabled _label="Primary" _variant="primary"></KolButton>
+			<KolButton _disabled _label="Secondary" _variant="secondary"></KolButton>
+			<KolButton _disabled _label="Normal" _variant="normal"></KolButton>
+			<KolButton _disabled _label="Danger" _variant="danger"></KolButton>
+			<KolButton _disabled _label="Ghost" _variant="ghost"></KolButton>
+		</div>
+	</div>
+);

package/src/components/button/hide-label.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { KolButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const ARGS = {
+	_icon: 'codicon codicon-home',
+	_hideLabel: true,
+	_on: {
+		onClick: (_event, _value) => alert('Klick!'),
+	},
+};
+
+export const ButtonIconOnly: FC = () => (
+	<div className="grid gap-14">
+		<div className="flex flex-wrap gap-14">
+			<KolButton _label="Primary" _variant="primary" _tooltipAlign="top" {...ARGS}></KolButton>
+			<KolButton _label="Secondary" _variant="secondary" _tooltipAlign="right" {...ARGS}></KolButton>
+			<KolButton _label="Normal" _variant="normal" _tooltipAlign="bottom" {...ARGS}></KolButton>
+			<KolButton _label="Danger" _variant="danger" _tooltipAlign="left" {...ARGS}></KolButton>
+			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+		</div>
+		<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>
+			<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
+			<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+		</div>
+	</div>
+);

package/src/components/button/icons.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { KolButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const ButtonIcons: FC = () => (
+	<KolButton
+		_icon={{
+			bottom: 'codicon codicon-arrow-down',
+			left: {
+				icon: 'codicon codicon-arrow-left',
+			},
+			top: {
+				style: {
+					'font-size': '200%',
+					transform: 'rotate(45deg)',
+				},
+				icon: 'codicon codicon-arrow-up',
+			},
+			right: 'codicon codicon-arrow-right',
+		}}
+		_label="Label"
+		_on={{
+			onClick: (_event, _value) => alert('Klick!'),
+		}}
+	/>
+);

package/src/components/button/routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '../../shares/types';
+
+import { ButtonBasic } from './basic';
+
+import { ButtonIconOnly } from './hide-label';
+
+import { ButtonIcons } from './icons';
+
+import { ButtonWidth } from './width';
+
+export const BUTTON_ROUTES: Routes = {
+	button: {
+		basic: ButtonBasic,
+		'hide-label': ButtonIconOnly,
+		icons: ButtonIcons,
+		width: ButtonWidth,
+	},
+};

package/src/components/button/width.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { KolButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const ARGS = {
+	className: 'w-8rem',
+	_on: {
+		onClick: (_event, _value) => alert('Klick!'),
+	},
+};
+
+export const ButtonWidth: FC = () => (
+	<div className="grid gap-14">
+		<div className="flex flex-warp 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">
+			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
+			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
+			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
+			<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
+			<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+		</div>
+	</div>
+);

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { KolButton, KolButtonGroup } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const ButtonGroupBasic: FC = () => (
+	<KolButtonGroup>
+		<KolButton _label="Active" _variant="primary"></KolButton>
+		<KolButton _label="Not active" _disabled></KolButton>
+		<KolButton _label="Active" _icon="codicon codicon-home" _variant="danger"></KolButton>
+		<KolButton _label="Active" _icon="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
+	</KolButtonGroup>
+);

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

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { ButtonGroupBasic } from './basic';
+
+export const BUTTON_GROUP_ROUTES: Routes = {
+	'button-group': {
+		basic: ButtonGroupBasic,
+	},
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { KolButtonLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const ButtonLinkBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolButtonLink _href="#" _label="Simple Link" />
+		<p>
+			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _href="#" _label="Simple Link" /> Er wird standardmäßig als{' '}
+			<strong>inline-Element</strong> ausgegeben.
+		</p>
+		<p>
+			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
+			<KolButtonLink class="d-inline-block" _href="#" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere Eigenschaften
+			zuweisen.
+			<br />
+			<br />
+			Danach folgt ein Link, der als block-Element ausgegeben wird.
+			<KolButtonLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+		</p>
+	</div>
+);

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { KolButtonLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const ButtonLinkIcons: FC = () => (
+	<div className="grid gap-4">
+		<KolButtonLink _icon="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+		<KolButtonLink
+			_icon={{
+				right: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit Icon rechts"
+		/>
+		<KolButtonLink
+			_icon={{
+				top: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit Icon oben"
+		/>
+		<KolButtonLink
+			_icon={{
+				bottom: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit Icon unten"
+		/>
+		<KolButtonLink
+			_icon={{
+				top: 'codicon codicon-home',
+				right: 'codicon codicon-home',
+				bottom: 'codicon codicon-home',
+				left: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit allen Icons"
+		/>
+	</div>
+);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { KolButtonLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const ButtonLinkImage: FC = () => (
+	<div className="grid gap-4">
+		<KolButtonLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
+		<br />
+		<KolButtonLink _href="#" _label="">
+			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+		</KolButtonLink>
+	</div>
+);

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

@@ -0,0 +1,18 @@
+import { Routes } from '../../shares/types';
+
+import { ButtonLinkBasic } from './basic';
+
+import { ButtonLinkIcons } from './icons';
+
+import { ButtonLinkImage } from './image';
+
+import { ButtonLinkTarget } from './target';
+
+export const BUTTON_LINK_ROUTES: Routes = {
+	'button-link': {
+		basic: ButtonLinkBasic,
+		icons: ButtonLinkIcons,
+		image: ButtonLinkImage,
+		target: ButtonLinkTarget,
+	},
+};

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

@@ -0,0 +1,16 @@
+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>
+);

package/src/components/card/basic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { KolCard } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const CardBasic: FC = () => (
+	<KolCard _heading="Titel" _hasFooter>
+		<div slot="header">Zusätzlicher Header</div>
+		<div slot="content">Inhalt</div>
+		<div slot="footer">Fusszeile</div>
+	</KolCard>
+);

package/src/components/card/confirm.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { KolButton, KolCard } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const CardConfirm: FC = () => (
+	<KolCard _has-footer _heading="Überschrift">
+		<p className="p-2" slot="content">
+			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut
+			doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
+			perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas
+			reiciendis.
+		</p>
+		<div slot="footer" className="d-flex gap-2 float-end">
+			<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
+			<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
+		</div>
+	</KolCard>
+);

package/src/components/card/flex.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { KolCard } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const CardFlex: FC = () => (
+	<div className="grid grid-cols-2 gap-4">
+		<KolCard _heading="Titel" _hasFooter>
+			<div slot="header">Zusätzlicher Header</div>
+			<div slot="content">Inhalt</div>
+			<div slot="footer">Fusszeile</div>
+		</KolCard>
+		<KolCard _heading="Titel" _hasFooter>
+			<div slot="header">Zusätzlicher Header</div>
+			<div slot="content">
+				Inhalt
+				<br />
+				Inhalt
+			</div>
+			<div slot="footer">Fusszeile</div>
+		</KolCard>
+		<KolCard _heading="Titel" _hasFooter>
+			<div slot="header">Zusätzlicher Header</div>
+			<div slot="content">
+				Inhalt
+				<br />
+				Inhalt
+				<br />
+				Inhalt
+			</div>
+			<div slot="footer">Fusszeile</div>
+		</KolCard>
+		<KolCard _heading="Titel" _hasFooter>
+			<div slot="header">Zusätzlicher Header</div>
+			<div slot="content">Inhalt</div>
+			<div slot="footer">Fusszeile</div>
+		</KolCard>
+		<KolCard _heading="Titel" _hasFooter>
+			<div slot="header">Zusätzlicher Header</div>
+			<div slot="content">Inhalt</div>
+			<div slot="footer">Fusszeile</div>
+		</KolCard>
+	</div>
+);

package/src/components/card/routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '../../shares/types';
+
+import { CardBasic } from './basic';
+
+import { CardConfirm } from './confirm';
+
+import { CardFlex } from './flex';
+
+import { CardSelection } from './selection';
+
+export const CARD_ROUTES: Routes = {
+	card: {
+		basic: CardBasic,
+		confirm: CardConfirm,
+		flex: CardFlex,
+		selection: CardSelection,
+	},
+};

package/src/components/card/selection.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { KolButton, KolCard, KolInputCheckbox } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const STYLE = {
+	display: 'flex',
+	justifyContent: 'space-between',
+	alignItems: 'center',
+	gap: '.5rem',
+};
+
+export const CardSelection: FC = () => (
+	<div className="d-flex gap-2">
+		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
+			<div slot="header">
+				TeCorp Endplatte
+				<br />
+				VZTA
+			</div>
+			<div slot="content">
+				<div>
+					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+				</div>
+			</div>
+			<div slot="footer">
+				<div style={STYLE}>
+					<KolInputCheckbox _id="article-0">Auswählen</KolInputCheckbox>
+					<KolButton _variant="primary" _label="Öffnen"></KolButton>
+				</div>
+			</div>
+		</KolCard>
+		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
+			<div slot="header">
+				TeCorp Endplatte
+				<br />
+				VZTA
+			</div>
+			<div slot="content">
+				<div>
+					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+				</div>
+			</div>
+			<div slot="footer">
+				<div style={STYLE}>
+					<KolInputCheckbox _id="article-1">Auswählen</KolInputCheckbox>
+					<KolButton _variant="primary" _label="Öffnen"></KolButton>
+				</div>
+			</div>
+		</KolCard>
+		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
+			<div slot="header">
+				TeCorp Endplatte
+				<br />
+				VZTA
+			</div>
+			<div slot="content">
+				<div>
+					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+				</div>
+			</div>
+			<div slot="footer">
+				<div style={STYLE}>
+					<KolInputCheckbox _id="article-2">Auswählen</KolInputCheckbox>
+					<KolButton _variant="primary" _label="Öffnen"></KolButton>
+				</div>
+			</div>
+		</KolCard>
+	</div>
+);

package/src/components/details/basic.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { KolDetails } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const DetailsBasic: FC = () => (
+	<p className="grid gap-4">
+		<KolDetails _summary="Nach Laden der Seite geschlossen">
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+		</KolDetails>
+		<KolDetails _summary="Nach Laden der Seite geöffnet" _open>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+		</KolDetails>
+	</p>
+);

package/src/components/details/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { DetailsBasic } from './basic';
+
+export const DETAILS_ROUTES: Routes = {
+	details: {
+		basic: DetailsBasic,
+	},
+};

package/src/components/form/routes.ts

@@ -0,0 +1,5 @@
+import { Routes } from '../../shares/types';
+
+export const FORM_ROUTES: Routes = {
+	form: {},
+};