@public-ui/sample-react 2.1.7 → 2.1.8

package/src/components/button/width.tsx

@@ -4,35 +4,40 @@ import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-const ARGS = {
-	className: 'w-8rem',
-	_on: {
-		onClick: () => alert('Click!'),
-	},
-};
+export const ButtonWidth: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-export const ButtonWidth: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows KolButton with adjusted widths.</p>
-		</SampleDescription>
+	const ARGS = {
+		className: 'w-8rem',
+		_on: {
+			onClick: dummyClickEventHandler,
+		},
+	};
 
-		<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" {...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>
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolButton with adjusted widths.</p>
+			</SampleDescription>
+
+			<div className="grid gap-14">
+				<div className="flex flex-wrap gap-4">
+					<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-4">
+					<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>
-		</div>
-	</>
-);
+		</>
+	);
+};

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

@@ -4,22 +4,31 @@ import { KolBadge, KolButton, KolButtonGroup } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonGroupBasic: FC = () => (
-	<>
-		<SampleDescription>
-			<p>KolButtonGroup shows multiple KolButton-elements visually grouped together.</p>
+export const ButtonGroupBasic: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-			<p>
-				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
-			</p>
-		</SampleDescription>
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
 
-		<KolButtonGroup>
-			<KolButton _label="Active" _variant="primary"></KolButton>
-			<KolButton _label="Not active" _disabled></KolButton>
-			<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger"></KolButton>
-			<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
-		</KolButtonGroup>
-	</>
-);
+	return (
+		<>
+			<SampleDescription>
+				<p>KolButtonGroup shows multiple KolButton-elements visually grouped together.</p>
+
+				<p>
+					<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+				</p>
+			</SampleDescription>
+
+			<KolButtonGroup>
+				<KolButton _label="Active" _variant="primary" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Not active" _disabled></KolButton>
+				<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost" _on={dummyEventHandler}></KolButton>
+			</KolButtonGroup>
+		</>
+	);
+};

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

@@ -13,14 +13,14 @@ export const ButtonLinkBasic: FC = () => (
 				such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
 			</p>
 		</SampleDescription>
-		<div>
+		<section className="text-base">
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
 				<strong>inline element</strong>.
 			</p>
 			<p>
 				In this paragraph, a link is inserted that is rendered as an inline-block element.
-				<KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
+				<KolButtonLink className="m-4" style={{ display: 'inline-block', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
 				height, and other properties to it using CSS styles.
 				<br />
 				<br />
@@ -31,6 +31,6 @@ export const ButtonLinkBasic: FC = () => (
 			<p>
 				<KolButtonLink _label="Disabled ButtonLink" _disabled />
 			</p>
-		</div>
+		</section>
 	</>
 );

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

@@ -13,7 +13,6 @@ export const ButtonLinkImage: FC = () => (
 
 		<div className="grid gap-4">
 			<KolButtonLink _label="I am a link that is rendered as text" />
-			<br />
 			<KolButtonLink _label="">
 				<img alt="Presentation of the KoliBri theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			</KolButtonLink>

package/src/components/card/basic.tsx

@@ -11,7 +11,7 @@ export const CardBasic: FC = () => (
 			<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>
 		</SampleDescription>
 
-		<div className="grid grid-cols-2 gap-4">
+		<div className="w-full grid grid-cols-2 gap-4">
 			<KolCard _label="Card with title and content">
 				<div>Card contents.</div>
 			</KolCard>

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

@@ -5,7 +5,7 @@ import { ComboboxCases } from './cases';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<div className="w-full grid md:grid-cols-2 gap-4">
 			<fieldset>
 				<legend>Text</legend>
 				<ComboboxCases {...props} />

package/src/components/details/basic.tsx

@@ -14,7 +14,7 @@ export const DetailsBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<p className="grid gap-4">
+		<section className="grid gap-4">
 			<KolDetails _label="Closed initially">
 				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.
@@ -30,6 +30,6 @@ export const DetailsBasic: FC = () => (
 				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>
+		</section>
 	</>
 );

package/src/components/form/basic.tsx

@@ -9,7 +9,7 @@ export const FormBasic: FC = () => (
 			<p>KolForm renders a form around the input components provided in a slot. This sample shows a basic form with three input fields.</p>
 		</SampleDescription>
 
-		<KolForm>
+		<KolForm className="w-full">
 			<div className="grid gap-2">
 				<KolInputText id="input1" _label="Input 1" />
 				<KolInputText id="input2" _label="Input 2" />

package/src/components/form/error-list.tsx

@@ -10,6 +10,7 @@ export const FormErrorList: FC = () => (
 		</SampleDescription>
 
 		<KolForm
+			className="w-full"
 			_errorList={[
 				{
 					message: 'Error in Input 2',