@public-ui/sample-react 1.7.2 → 2.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.2",
+  "version": "2.0.0-rc.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,9 +8,9 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "1.7.2",
-    "@public-ui/react": "1.7.2",
-    "@public-ui/themes": "1.7.2",
+    "@public-ui/components": "2.0.0-rc.0",
+    "@public-ui/react": "2.0.0-rc.0",
+    "@public-ui/themes": "2.0.0-rc.0",
     "@types/node": "20.8.0",
     "@types/react": "18.2.23",
     "@types/react-dom": "18.2.8",

package/src/components/Sidebar.tsx

@@ -58,10 +58,10 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 		<aside className="app-sidebar p-4">
 			<div className="flex flex-justify-between flex-items-center">
 				<KolHeading _label="KoliBri React"></KolHeading>
-				<KolVersion _version={version}></KolVersion>
+				<KolVersion _label={version}></KolVersion>
 			</div>
 
-			<KolSelect _label="Theme wählen" _list={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
+			<KolSelect _label="Theme wählen" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
 
 			<KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
 			<div className="flex flex-justify-between flex-items-center mt">

package/src/components/abbr/basic.html

@@ -1,6 +1,6 @@
-Ich bin <kol-abbr _title="Abkürzung">z.B.</kol-abbr> eine Abkürzung.<br />
-Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="right">z.B.</kol-abbr> eine Abkürzung (rechts).<br />
+Ich bin <kol-abbr _label="Abkürzung">z.B.</kol-abbr> eine Abkürzung.<br />
+Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="right">z.B.</kol-abbr> eine Abkürzung (rechts).<br />
 Ich bin
-<kol-abbr _title="Abkürzung" _tooltip-align="bottom">z.B.</kol-abbr> eine Abkürzung (unten).<br />
-Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="left">z.B.</kol-abbr> eine Abkürzung (links).<br />
-Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="top">z.B.</kol-abbr> eine Abkürzung (oben).
+<kol-abbr _label="Abkürzung" _tooltip-align="bottom">z.B.</kol-abbr> eine Abkürzung (unten).<br />
+Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="left">z.B.</kol-abbr> eine Abkürzung (links).<br />
+Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="top">z.B.</kol-abbr> eine Abkürzung (oben).

package/src/components/abbr/basic.tsx

@@ -5,32 +5,32 @@ import { KolAbbr } from '@public-ui/react';
 export const AbbrBasic: FC = () => (
 	<>
 		<p>
-			Ich bin <KolAbbr _title="Abkürzung">z.B.</KolAbbr> eine Abkürzung.
+			Ich bin <KolAbbr _label="Abkürzung">z.B.</KolAbbr> eine Abkürzung.
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _title="Abkürzung" _tooltipAlign="right">
+			<KolAbbr _label="Abkürzung" _tooltipAlign="right">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (rechts).
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _title="Abkürzung" _tooltipAlign="bottom">
+			<KolAbbr _label="Abkürzung" _tooltipAlign="bottom">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (unten).
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _title="Abkürzung" _tooltipAlign="left">
+			<KolAbbr _label="Abkürzung" _tooltipAlign="left">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (links).
 		</p>
 		<p>
 			Ich bin{' '}
-			<KolAbbr _title="Abkürzung" _tooltipAlign="top">
+			<KolAbbr _label="Abkürzung" _tooltipAlign="top">
 				z.B.
 			</KolAbbr>{' '}
 			eine Abkürzung (oben).

package/src/components/accordion/basic.tsx

@@ -5,14 +5,14 @@ import { FC } from 'react';
 
 export const AccordionBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolAccordion _heading="Überschrift Accordion Tab 1" _level={1}>
-			<div slot="content">Inhalt Accordion Tab 1</div>
+		<KolAccordion _label="Überschrift Accordion Tab 1" _level={1}>
+			<div slot="">Inhalt Accordion Tab 1</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Accordion Tab 2" _level={1} _open>
-			<div slot="content">Inhalt Accordion Tab 2</div>
+		<KolAccordion _label="Überschrift Accordion Tab 2" _level={1} _open>
+			<div slot="">Inhalt Accordion Tab 2</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Accordion Tab 3" _level={1}>
-			<div slot="content">Inhalt Accordion Tab 3</div>
+		<KolAccordion _label="Überschrift Accordion Tab 3" _level={1}>
+			<div slot="">Inhalt Accordion Tab 3</div>
 		</KolAccordion>
 	</div>
 );

package/src/components/accordion/headlines.tsx

@@ -5,23 +5,23 @@ 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 _label="Überschrift Level 1" _level={1}>
+			<div slot="">Inhalt Accordion Tab 1</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Level 2" _level={2}>
-			<div slot="content">Inhalt Accordion Tab 2</div>
+		<KolAccordion _label="Überschrift Level 2" _level={2}>
+			<div slot="">Inhalt Accordion Tab 2</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Level 3" _level={3}>
-			<div slot="content">Inhalt Accordion Tab 3</div>
+		<KolAccordion _label="Überschrift Level 3" _level={3}>
+			<div slot="">Inhalt Accordion Tab 3</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Level 4" _level={4}>
-			<div slot="content">Inhalt Accordion Tab 4</div>
+		<KolAccordion _label="Überschrift Level 4" _level={4}>
+			<div slot="">Inhalt Accordion Tab 4</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Level 5" _level={5}>
-			<div slot="content">Inhalt Accordion Tab 5</div>
+		<KolAccordion _label="Überschrift Level 5" _level={5}>
+			<div slot="">Inhalt Accordion Tab 5</div>
 		</KolAccordion>
-		<KolAccordion _heading="Überschrift Level 6" _level={6}>
-			<div slot="content">Inhalt Accordion Tab 6</div>
+		<KolAccordion _label="Überschrift Level 6" _level={6}>
+			<div slot="">Inhalt Accordion Tab 6</div>
 		</KolAccordion>
 	</div>
 );

package/src/components/accordion/list.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-import { KolAccordion, KolButton } from '@public-ui/react';
-
-import { FC } from 'react';
+import React, { FC } from 'react';
+import { KolAccordion } from '@public-ui/react';
 
 const LIST = [
 	{
@@ -21,11 +19,8 @@ const LIST = [
 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 _label={heading} _level={1} _open={index === 1} key={index}>
+				<p>{content}</p>
 			</KolAccordion>
 		))}
 	</div>

package/src/components/accordion/routes.ts

@@ -1,16 +1,12 @@
 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/components/alert/basic.tsx

@@ -17,13 +17,13 @@ type PropsBasic = {
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	<>
-		<KolAlert _heading="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant}>
+		<KolAlert _label="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>
-		<KolAlert _heading="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant} _hasCloser>
+		<KolAlert _label="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant} _hasCloser>
 			Das ist der Text des Alert. Mit Schließen-Button.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant} _hasCloser>

package/src/components/alert/html.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const AlertHtml: FC = () => (
 	<div>
-		<KolAlert _heading="Ausgabe von HTML-Code im Alert" _type="info">
+		<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' }}>

package/src/components/breadcrumb/basic.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react';
 export const BreadcrumbBasic: FC = () => (
 	<div className="grid gap-4">
 		<KolBreadcrumb
-			_ariaLabel="Breadcrumb aus Text-Links"
+			_label="Breadcrumb aus Text-Links"
 			_links={[
 				{ _label: 'Startseite', _href: '#/' },
 				{ _label: 'Unterseite der Startseite', _href: '#/unterseite' },
@@ -17,7 +17,7 @@ export const BreadcrumbBasic: FC = () => (
 			]}
 		></KolBreadcrumb>
 		<KolBreadcrumb
-			_ariaLabel="Breadcrumb aus Icons- oder Text-Links"
+			_label="Breadcrumb aus Icons- oder Text-Links"
 			_links={[
 				{
 					_label: 'Startseite',
@@ -36,7 +36,7 @@ export const BreadcrumbBasic: FC = () => (
 			]}
 		></KolBreadcrumb>
 		<KolBreadcrumb
-			_ariaLabel="Breadcrumb aus Icons- und Text-Links"
+			_label="Breadcrumb aus Icons- und Text-Links"
 			_links={[
 				{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/' },
 				{

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

@@ -7,7 +7,7 @@ const ARGS = {
 	_icons: 'codicon codicon-home',
 	_hideLabel: true,
 	_on: {
-		onClick: (_event, _value) => alert('Klick!'),
+		onClick: () => alert('Klick!'),
 	},
 };
 

package/src/components/card/basic.tsx

@@ -4,9 +4,7 @@ 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 _label="Titel">
+		<div slot="">Inhalt</div>
 	</KolCard>
 );

package/src/components/card/confirm.tsx

@@ -4,16 +4,18 @@ 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="flex gap-2 flex-justify-end">
-			<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
-			<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
+	<KolCard _has-footer _label="Überschrift">
+		<div>
+			<p className="p-2">
+				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 className="flex gap-2 flex-justify-end">
+				<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
+				<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
+			</div>
 		</div>
 	</KolCard>
 );

package/src/components/card/flex.tsx

@@ -5,40 +5,30 @@ 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 _label="Titel">
+			<div>Inhalt</div>
 		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">
+		<KolCard _label="Titel">
+			<div>
 				Inhalt
 				<br />
 				Inhalt
 			</div>
-			<div slot="footer">Fusszeile</div>
 		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">
+		<KolCard _label="Titel">
+			<div>
 				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 _label="Titel">
+			<div>Inhalt</div>
 		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">Inhalt</div>
-			<div slot="footer">Fusszeile</div>
+		<KolCard _label="Titel">
+			<div>Inhalt</div>
 		</KolCard>
 	</div>
 );

package/src/components/card/selection.tsx

@@ -12,57 +12,63 @@ const STYLE = {
 
 export const CardSelection: FC = () => (
 	<div className="flex gap-2">
-		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
-			<div slot="header">
-				TeCorp Endplatte
-				<br />
-				VZTA
-			</div>
-			<div slot="content">
+		<KolCard _label="DEBTI-25437/17-1">
+			<div>
 				<div>
-					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					TeCorp Endplatte
+					<br />
+					VZTA
 				</div>
-			</div>
-			<div slot="footer">
-				<div style={STYLE}>
-					<KolInputCheckbox>Auswählen</KolInputCheckbox>
-					<KolButton _variant="primary" _label="Öffnen"></KolButton>
+				<div>
+					<div>
+						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					</div>
+				</div>
+				<div>
+					<div style={STYLE}>
+						<KolInputCheckbox _label={`Auswählen`} />
+						<KolButton _variant="primary" _label="Öffnen"></KolButton>
+					</div>
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
-			<div slot="header">
-				TeCorp Endplatte
-				<br />
-				VZTA
-			</div>
-			<div slot="content">
+		<KolCard _label="DEBTI-25437/17-1">
+			<div>
 				<div>
-					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					TeCorp Endplatte
+					<br />
+					VZTA
 				</div>
-			</div>
-			<div slot="footer">
-				<div style={STYLE}>
-					<KolInputCheckbox>Auswählen</KolInputCheckbox>
-					<KolButton _variant="primary" _label="Öffnen"></KolButton>
+				<div>
+					<div>
+						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					</div>
+				</div>
+				<div>
+					<div style={STYLE}>
+						<KolInputCheckbox _label={`Auswählen`} />
+						<KolButton _variant="primary" _label="Öffnen"></KolButton>
+					</div>
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
-			<div slot="header">
-				TeCorp Endplatte
-				<br />
-				VZTA
-			</div>
-			<div slot="content">
+		<KolCard _label="DEBTI-25437/17-1">
+			<div>
 				<div>
-					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					TeCorp Endplatte
+					<br />
+					VZTA
 				</div>
-			</div>
-			<div slot="footer">
-				<div style={STYLE}>
-					<KolInputCheckbox>Auswählen</KolInputCheckbox>
-					<KolButton _variant="primary" _label="Öffnen"></KolButton>
+				<div>
+					<div>
+						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					</div>
+				</div>
+				<div>
+					<div style={STYLE}>
+						<KolInputCheckbox _label={`Auswählen`} />
+						<KolButton _variant="primary" _label="Öffnen"></KolButton>
+					</div>
 				</div>
 			</div>
 		</KolCard>

package/src/components/details/basic.tsx

@@ -5,12 +5,12 @@ import { FC } from 'react';
 
 export const DetailsBasic: FC = () => (
 	<p className="grid gap-4">
-		<KolDetails _summary="Nach Laden der Seite geschlossen">
+		<KolDetails _label="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>
+		<KolDetails _label="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.