@public-ui/sample-react 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/components/input-text/message-types.tsx

@@ -0,0 +1,19 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextMessageTypes: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates all available message types for KolInputText: info, error, warning, and success.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} />
+			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
+			<KolInputText _label="Warning message" _value="Potentially problematic value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} />
+			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} />
+		</div>
+	</>
+);

package/src/components/input-text/placeholder.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextPlaceholder: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the placeholder feature of KolInputText.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="First name" _placeholder="Enter your first name" />
+			<KolInputText _label="Email address" _placeholder="user@example.com" />
+			<KolInputText _label="Phone number" _placeholder="+49 123 456789" _type="tel" />
+			<KolInputText _label="Website" _placeholder="https://example.com" _type="url" />
+			<KolInputText _label="Search" _placeholder="Search..." _type="search" />
+		</div>
+	</>
+);

package/src/components/input-text/readonly.tsx

@@ -0,0 +1,24 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextReadonly: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Readonly with placeholder" _placeholder="Placeholder text" _readOnly />
+			<KolInputText _label="Readonly with value" _value="This field is readonly" _readOnly />
+			<KolInputText
+				_label="Readonly with info message"
+				_value="Read-only value"
+				_msg={{ _type: 'info', _description: 'This field cannot be edited' }}
+				_readOnly
+			/>
+			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
+		</div>
+	</>
+);

package/src/components/input-text/routes.ts

@@ -1,7 +1,14 @@
 import { Routes } from '../../shares/types';
+import { InputTextAccessShortKey } from './access-short-key';
+import { InputTextBackground } from './background-test';
 import { InputTextBasic } from './basic';
+import { InputTextDisabled } from './disabled';
 import { InputTextExpertSlot } from './expert-slot';
+import { InputTextHideLabel } from './hide-label';
 import { InputTextHideMsg } from './hide-msg';
+import { InputTextMessageTypes } from './message-types';
+import { InputTextPlaceholder } from './placeholder';
+import { InputTextReadonly } from './readonly';
 import { InputTextSelectRange } from './select-range';
 import { InputTextSmartButton } from './smart-button';
 import { InputTextFormatterDemo } from './text-formatter';
@@ -9,10 +16,17 @@ import { InputTextFormatterDemo } from './text-formatter';
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
+		'message-types': InputTextMessageTypes,
+		placeholder: InputTextPlaceholder,
+		disabled: InputTextDisabled,
+		readonly: InputTextReadonly,
+		'access-short-key': InputTextAccessShortKey,
+		'hide-label': InputTextHideLabel,
 		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
 		'select-range': InputTextSelectRange,
+		background: InputTextBackground,
 	},
 };

package/src/components/input-text/smart-button.tsx

@@ -10,10 +10,10 @@ const smartButtonProps = {
 
 const icons = {
 	left: {
-		icon: 'codicon codicon-arrow-left',
+		icon: 'codicon codicon-search',
 	},
 	right: {
-		icon: 'codicon codicon-arrow-right',
+		icon: 'codicon codicon-check',
 	},
 };
 
@@ -48,13 +48,14 @@ export const InputTextSmartButton = () => {
 					_icons={icons}
 				></KolInputText>
 				<KolInputText
-					_label="Disabled input with button and without icons"
+					_label="Disabled input with button and icons"
 					_disabled
 					_type="text"
 					_smartButton={{
 						...smartButtonProps,
 						_label: 'Disabled Button',
 					}}
+					_icons={icons}
 				></KolInputText>
 			</div>
 		</>

package/src/components/link/basic.tsx

@@ -8,15 +8,16 @@ export const LinkBasic: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				KolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.
+				KolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}
+				<code>display</code>-properties.
 			</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _href="#/back-page" _label="Simple Link" _variant="standalone" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (disabled)" _variant="standalone" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" _variant="standalone" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (disabled)" _variant="standalone" />
+			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
+			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.

package/src/components/link/link-react-router.tsx

@@ -24,7 +24,7 @@ export const LinkReactRouter: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-4">
-				<KolLink _href="/back-page" _label="Go to overview" _variant="standalone" _on={on} />
+				<KolLink _href="/back-page" _inline={false} _label="Go to overview" _on={on} />
 			</div>
 		</>
 	);

package/src/components/popover-button/inline.tsx

@@ -0,0 +1,36 @@
+import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const PopoverButtonInline: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					A PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in
+					<a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller
+					than 44px by 44px.
+				</p>
+			</SampleDescription>
+			<div className="flex flex-col gap-4">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					<KolPopoverButton _inline={true} _label="Help" _icons="codicon codicon-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+						<div className="w-sm p-2 border border-solid border-gray">
+							<KolHeading _label="Help Information" _level={0}></KolHeading>
+							<p>
+								<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+								Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+							</p>
+						</div>
+					</KolPopoverButton>
+					<br />
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+				</p>
+			</div>
+		</>
+	);
+};

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

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { PopoverButtonBasic } from './basic';
+import { PopoverButtonInline } from './inline';
 
 export const POPOVER_BUTTON_ROUTES: Routes = {
 	'popover-button': {
 		basic: PopoverButtonBasic,
+		inline: PopoverButtonInline,
 	},
 };

package/src/components/table/sticky-header.tsx

@@ -10,14 +10,12 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
 			{ label: 'ID', key: 'id', textAlign: 'right' },
-			{ label: 'Common Name', key: 'common_name', textAlign: 'left' },
-			{ label: 'Scientific Name', key: 'scientific_name', textAlign: 'left' },
-			{ label: 'EMail', key: 'email', textAlign: 'left' },
-			{ label: 'IP Address', key: 'ip_address', textAlign: 'center' },
-			{ label: 'User Name', key: 'user_name', textAlign: 'left' },
-			{ label: 'Bitcoin Address', key: 'bitcoin_address', textAlign: 'center' },
-			{ label: 'Street Address', key: 'street_address', textAlign: 'center' },
-			{ label: 'IBAN', key: 'iban', textAlign: 'left' },
+			{ label: 'Common name', key: 'common_name', textAlign: 'left' },
+			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left' },
+			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left' },
+			{ label: 'Habitat', key: 'habitat', textAlign: 'left' },
+			{ label: 'Diet', key: 'diet', textAlign: 'left' },
+			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left' },
 		],
 	],
 };
@@ -27,11 +25,11 @@ export const TableStickyHeader: FC = () => (
 		<SampleDescription>
 			<p>
 				This sample shows KolTableStateful with horizontal and vertical scrollbars. It should be focusable and scrollable with the keyboard. The table headline
-				should be sticky at the top of the table.
+				should be sticky at the top of the table. The data now lists animal species with conservation-focused details.
 			</p>
 		</SampleDescription>
 
 		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful _label="Sort a date column" _minWidth="1800px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<KolTableStateful _label="Animal species overview" _minWidth="1200px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 	</>
 );