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

package/src/samples/accordion/headlines.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { KolAccordion } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const AccordionHeadlines: FC = () => (
+	<div className="grid gap-4">
+		<KolAccordion _heading="Überschrift Level 1" _level={1}>
+			<div slot="content">Inhalt Accordion Tab 1</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Level 2" _level={2}>
+			<div slot="content">Inhalt Accordion Tab 2</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Level 3" _level={3}>
+			<div slot="content">Inhalt Accordion Tab 3</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Level 4" _level={4}>
+			<div slot="content">Inhalt Accordion Tab 4</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Level 5" _level={5}>
+			<div slot="content">Inhalt Accordion Tab 5</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Level 6" _level={6}>
+			<div slot="content">Inhalt Accordion Tab 6</div>
+		</KolAccordion>
+	</div>
+);

package/src/samples/accordion/list.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { KolAccordion, KolButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const LIST = [
+	{
+		heading: 'Überschrift Accordion Tab 1',
+		content: 'Inhalt Accordion Tab 1',
+	},
+	{
+		heading: 'Überschrift Accordion Tab 2',
+		content: 'Inhalt Accordion Tab 2',
+	},
+	{
+		heading: 'Überschrift Accordion Tab 3',
+		content: 'Inhalt Accordion Tab 3',
+	},
+];
+
+export const AccordionList: FC = () => (
+	<div className="grid gap-4">
+		{LIST.map(({ heading, content }, index) => (
+			<KolAccordion _heading={heading} _level={1} _open={index === 1} key={index}>
+				<p slot="header">
+					<KolButton _label={'Bearbeiten'} />
+				</p>
+				<p slot="content">{content}</p>
+			</KolAccordion>
+		))}
+	</div>
+);

package/src/samples/accordion/routes.ts

@@ -0,0 +1,17 @@
+import { Routes } from '../../shares/types';
+
+import { AccordionBasic } from './basic';
+
+import { AccordionHeader } from './header';
+
+import { AccordionHeadlines } from './headlines';
+import { AccordionList } from './list';
+
+export const ACCORDION_ROUTES: Routes = {
+	accordion: {
+		basic: AccordionBasic,
+		header: AccordionHeader,
+		headlines: AccordionHeadlines,
+		list: AccordionList,
+	},
+};

package/src/samples/alert/basic.tsx

@@ -0,0 +1,37 @@
+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';
+
+type PropsByType = {
+	level: HeadingLevel;
+	type: AlertType;
+	variant: AlertVariant;
+};
+type PropsBasic = {
+	variant: AlertVariant;
+};
+
+const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
+	<>
+		<KolAlert _heading="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant}>
+			Das ist der Text des Alert.
+		</KolAlert>
+		<KolAlert _type={type} _variant={variant}>
+			In diesem Alert wird nur der Text ohne Überschrift verwendet.
+		</KolAlert>
+	</>
+);
+
+export const AlertBasic: FC<PropsBasic> = ({ variant }) => (
+	<div className="grid gap-4">
+		<AlertByType level={1} type="default" variant={variant} />
+		<AlertByType level={2} type="error" variant={variant} />
+		<AlertByType level={3} type="info" variant={variant} />
+		<AlertByType level={4} type="success" variant={variant} />
+		<AlertByType level={5} type="warning" variant={variant} />
+	</div>
+);

package/src/samples/alert/card-msg.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FC } from 'react';
+
+import { AlertBasic } from './basic';
+
+export const AlertCardMsg: FC = () => (
+	<div className="grid">
+		<AlertBasic variant="card" />
+		<AlertBasic variant="msg" />
+	</div>
+);

package/src/samples/alert/html.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { KolAlert } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const AlertHtml: FC = () => (
+	<div>
+		<KolAlert _heading="Ausgabe von HTML-Code im Alert" _type="info">
+			{' '}
+			<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
+			<div className="row">
+				<div className="col-12 col-sm-6">
+					<h4>Text in einer linken Spalte</h4>
+					<p>
+						Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur dicta
+						accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
+					</p>
+				</div>
+				<div className="col-12 col-sm-6">
+					<h4>Text in einer rechten Spalte</h4>
+					<p>
+						Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo. Possimus,
+						molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!
+					</p>
+				</div>
+			</div>
+		</KolAlert>
+	</div>
+);

package/src/samples/alert/routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '../../shares/types';
+
+import { AlertBasic } from './basic';
+
+import { AlertCardMsg } from './card-msg';
+
+import { AlertHtml } from './html';
+
+export const ALERT_ROUTES: Routes = {
+	alert: {
+		basic: AlertBasic,
+		'card-msg': AlertCardMsg,
+		html: AlertHtml,
+	},
+};

package/src/samples/avatar/basic.tsx

@@ -0,0 +1,10 @@
+import { KolAvatar } from '@public-ui/react';
+import React, { FC } from 'react';
+
+export const AvatarBasic: FC = () => (
+	<div className="flex flex-wrap gap-4">
+		<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
+		<KolAvatar _label="Elke Mustermann" />
+		<KolAvatar _label="Marianne" />
+	</div>
+);

package/src/samples/avatar/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { AvatarBasic } from './basic';
+
+export const AVATAR_ROUTES: Routes = {
+	avatar: {
+		basic: AvatarBasic,
+	},
+};

package/src/samples/badge/basic.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { KolBadge } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const PROPS = {
+	_label: 'Label',
+};
+
+export const BadgeBasic: FC = () => (
+	<div className="d-flex gap-2">
+		<KolBadge {...PROPS}></KolBadge>
+		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
+		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
+		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
+		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
+	</div>
+);

package/src/samples/badge/button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { KolBadge } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const PROPS = {
+	_label: 'Label',
+	_smartButton: {
+		_icon: 'codicon codicon-close',
+		_label: 'Entfernen',
+		_on: {
+			onClick: () => alert('clicked'),
+		},
+	},
+};
+
+export const BadgeButton: FC = () => (
+	<div className="d-flex gap-2">
+		<KolBadge {...PROPS}></KolBadge>
+		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
+		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
+		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
+		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
+	</div>
+);

package/src/samples/badge/routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '../../shares/types';
+
+import { BadgeBasic } from './basic';
+
+import { BadgeButton } from './button';
+
+export const BADGE_ROUTES: Routes = {
+	badge: {
+		basic: BadgeBasic,
+		button: BadgeButton,
+	},
+};

package/src/samples/breadcrumb/basic.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { KolBreadcrumb } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const BreadcrumbBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolBreadcrumb
+			_ariaLabel="Breadcrumb aus Text-Links"
+			_links={[
+				{ _label: 'Startseite', _href: '#/' },
+				{ _label: 'Unterseite der Startseite', _href: '#/unterseite' },
+				{
+					_label: 'Unterseite der Unterseite',
+					_href: '#/unterseite/unterseite',
+				},
+			]}
+		></KolBreadcrumb>
+		<KolBreadcrumb
+			_ariaLabel="Breadcrumb aus Icons- oder Text-Links"
+			_links={[
+				{
+					_label: 'Startseite',
+					_icon: 'codicon codicon-home',
+					_hideLabel: true,
+					_href: '#/',
+				},
+				{
+					_label: 'Unterseite der Startseite mit sehr langem Link-Test',
+					_href: '#/unterseite',
+				},
+				{
+					_label: 'Unterseite der Unterseite',
+					_href: '#/unterseite/unterseite',
+				},
+			]}
+		></KolBreadcrumb>
+		<KolBreadcrumb
+			_ariaLabel="Breadcrumb aus Icons- und Text-Links"
+			_links={[
+				{ _label: 'Startseite', _icon: 'codicon codicon-home', _href: '#/' },
+				{
+					_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
+					_href: '#/unterseite',
+				},
+				{
+					_label: 'Unterseite der Unterseite',
+					_href: '#/unterseite/unterseite',
+				},
+			]}
+		></KolBreadcrumb>
+	</div>
+);

package/src/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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/samples/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>
+);