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

package/src/samples/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/samples/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/samples/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/samples/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/samples/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/samples/form/routes.ts

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