@public-ui/sample-react 2.1.7 → 2.1.8

package/src/scenarios/disabled-interactive-elements.tsx

@@ -22,6 +22,7 @@ import {
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
 
 const OPTIONS = [
 	{
@@ -34,87 +35,113 @@ const OPTIONS = [
 	},
 ];
 
-export const DisabledInteractiveElements: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This example shows how deactivated interactive elements are displayed.</p>
-			<ul>
-				<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>
-				<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>
-				<li>Deactivated interactive elements should be labelled clearly and legibly.</li>
-				<li>
-					Deactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by
-					an interpretable graphic.
-				</li>
-			</ul>
-			<p>This implementation ensures standardized use for all users.</p>
-		</SampleDescription>
+export const DisabledInteractiveElements: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<div className="grid gap-4">
-			<KolCard _label="Button" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolButton _label="Label" />
-					<KolButton _disabled _label="Label" />
-					<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" />
-					<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="ButtonLink" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolButtonLink _label="Label" />
-					<KolButtonLink _disabled _label="Label" />
-					<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
-					<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="Link" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolLink _href="#" _label="Label" />
-					<KolLink _disabled _href="#" _label="Label" />
-					<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-					<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="LinkButton" _level={0}>
-				<div className="flex flex-wrap gap-4">
-					<KolLinkButton _href="#" _label="Label" />
-					<KolLinkButton _disabled _href="#" _label="Label" />
-					<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-					<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-				</div>
-			</KolCard>
-			<KolCard _label="Accordion" _level={0}>
-				<div className="grid gap-4">
-					<KolAccordion _label="Label">Content</KolAccordion>
-					<KolAccordion _disabled _label="Label">
-						Content
-					</KolAccordion>
-					<KolAccordion _label="Label (open)" _open>
-						Content
-					</KolAccordion>
-					<KolAccordion _disabled _label="Label (open)" _open>
-						Content
-					</KolAccordion>
-				</div>
-			</KolCard>
-			<KolCard _label="Details" _level={0}>
-				<div className="grid gap-4">
-					<KolDetails _label="Label">Content</KolDetails>
-					<KolDetails _disabled _label="Label">
-						Content
-					</KolDetails>
-					<KolDetails _label="Label (open)" _open>
-						Content
-					</KolDetails>
-					<KolDetails _disabled _label="Label (open)" _open>
-						Content
-					</KolDetails>
-				</div>
-			</KolCard>
-			{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(
-				(Input) => {
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This example shows how deactivated interactive elements are displayed.</p>
+				<ul>
+					<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>
+					<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>
+					<li>Deactivated interactive elements should be labelled clearly and legibly.</li>
+					<li>
+						Deactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by
+						an interpretable graphic.
+					</li>
+				</ul>
+				<p>This implementation ensures standardized use for all users.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				<KolCard _label="Button" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Label" _on={dummyEventHandler} />
+						<KolButton _disabled _label="Label" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
+					</div>
+				</KolCard>
+				<KolCard _label="ButtonLink" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButtonLink _label="Label" />
+						<KolButtonLink _disabled _label="Label" />
+						<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
+						<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
+					</div>
+				</KolCard>
+				<KolCard _label="Link" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLink _href="#" _label="Label" />
+						<KolLink _disabled _href="#" _label="Label" />
+						<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+					</div>
+				</KolCard>
+				<KolCard _label="LinkButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLinkButton _href="#" _label="Label" />
+						<KolLinkButton _disabled _href="#" _label="Label" />
+						<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+					</div>
+				</KolCard>
+				<KolCard _label="Accordion" _level={0}>
+					<div className="grid gap-4">
+						<KolAccordion _label="Label">Content</KolAccordion>
+						<KolAccordion _disabled _label="Label">
+							Content
+						</KolAccordion>
+						<KolAccordion _label="Label (open)" _open>
+							Content
+						</KolAccordion>
+						<KolAccordion _disabled _label="Label (open)" _open>
+							Content
+						</KolAccordion>
+					</div>
+				</KolCard>
+				<KolCard _label="Details" _level={0}>
+					<div className="grid gap-4">
+						<KolDetails _label="Label">Content</KolDetails>
+						<KolDetails _disabled _label="Label">
+							Content
+						</KolDetails>
+						<KolDetails _label="Label (open)" _open>
+							Content
+						</KolDetails>
+						<KolDetails _disabled _label="Label (open)" _open>
+							Content
+						</KolDetails>
+					</div>
+				</KolCard>
+				{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(
+					(Input) => {
+						const render = (
+							Input as typeof KolInputCheckbox & {
+								render: { displayName: string };
+							}
+						).render;
+						const name = render.displayName;
+						return (
+							<KolCard key={name} _label={name} _level={0}>
+								<div className="grid gap-4">
+									<Input _label="Label" />
+									<Input _disabled _label="Label" />
+									<Input _hideLabel _label="Label" />
+									<Input _disabled _hideLabel _label="Label" />
+								</div>
+							</KolCard>
+						);
+					},
+				)}
+				{[KolInputRadio, KolSelect].map((Input) => {
 					const render = (
-						Input as typeof KolInputCheckbox & {
+						Input as typeof KolInputRadio & {
 							render: { displayName: string };
 						}
 					).render;
@@ -122,41 +149,23 @@ export const DisabledInteractiveElements: FC = () => (
 					return (
 						<KolCard key={name} _label={name} _level={0}>
 							<div className="grid gap-4">
-								<Input _label="Label" />
-								<Input _disabled _label="Label" />
-								<Input _hideLabel _label="Label" />
-								<Input _disabled _hideLabel _label="Label" />
+								<Input _label="Label" _options={OPTIONS} />
+								<Input _disabled _label="Label" _options={OPTIONS} />
+								<Input _hideLabel _label="Label" _options={OPTIONS} />
+								<Input _disabled _hideLabel _label="Label" _options={OPTIONS} />
 							</div>
 						</KolCard>
 					);
-				},
-			)}
-			{[KolInputRadio, KolSelect].map((Input) => {
-				const render = (
-					Input as typeof KolInputRadio & {
-						render: { displayName: string };
-					}
-				).render;
-				const name = render.displayName;
-				return (
-					<KolCard key={name} _label={name} _level={0}>
-						<div className="grid gap-4">
-							<Input _label="Label" _options={OPTIONS} />
-							<Input _disabled _label="Label" _options={OPTIONS} />
-							<Input _hideLabel _label="Label" _options={OPTIONS} />
-							<Input _disabled _hideLabel _label="Label" _options={OPTIONS} />
-						</div>
-					</KolCard>
-				);
-			})}
-			<KolCard _label="KolTextarea" _level={0}>
-				<div className="grid gap-4">
-					<KolTextarea _label="Label" _rows={3} />
-					<KolTextarea _disabled _label="Label" _rows={3} />
-					<KolTextarea _hideLabel _label="Label" _rows={3} />
-					<KolTextarea _disabled _hideLabel _label="Label" _rows={3} />
-				</div>
-			</KolCard>
-		</div>
-	</>
-);
+				})}
+				<KolCard _label="KolTextarea" _level={0}>
+					<div className="grid gap-4">
+						<KolTextarea _label="Label" _rows={3} />
+						<KolTextarea _disabled _label="Label" _rows={3} />
+						<KolTextarea _hideLabel _label="Label" _rows={3} />
+						<KolTextarea _disabled _hideLabel _label="Label" _rows={3} />
+					</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/scenarios/focus-elements.tsx

@@ -5,6 +5,7 @@ import {
 	KolButtonLink,
 	KolCombobox,
 	KolDetails,
+	KolHeading,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -30,16 +31,17 @@ import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();
-	focusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox _name="checkbox" _label="Checkbox" ref={ref} />);
-	focusElements.set('inputColor', (_, ref) => <KolInputColor _name="color" _label="Color" ref={ref} />);
-	focusElements.set('inputDate', (_, ref) => <KolInputDate _name="date" _label="Date" ref={ref} />);
-	focusElements.set('inputEmail', (_, ref) => <KolInputEmail _name="email" _label="Email" ref={ref} />);
-	focusElements.set('inputFile', (_, ref) => <KolInputFile _name="file" _label="File" ref={ref} />);
-	focusElements.set('inputFileMultiple', (_, ref) => <KolInputFile _name="file" _label="Files (multiple)" _multiple ref={ref} />);
-	focusElements.set('inputNumber', (_, ref) => <KolInputNumber _name="number" _label="Number" ref={ref} />);
-	focusElements.set('inputPassword', (_, ref) => <KolInputPassword _name="password" _label="Password" ref={ref} />);
+	focusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className="w-full" _name="checkbox" _label="Checkbox" ref={ref} />);
+	focusElements.set('inputColor', (_, ref) => <KolInputColor className="w-full" _name="color" _label="Color" ref={ref} />);
+	focusElements.set('inputDate', (_, ref) => <KolInputDate className="w-full" _name="date" _label="Date" ref={ref} />);
+	focusElements.set('inputEmail', (_, ref) => <KolInputEmail className="w-full" _name="email" _label="Email" ref={ref} />);
+	focusElements.set('inputFile', (_, ref) => <KolInputFile className="w-full" _name="file" _label="File" ref={ref} />);
+	focusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className="w-full" _name="file" _label="Files (multiple)" _multiple ref={ref} />);
+	focusElements.set('inputNumber', (_, ref) => <KolInputNumber className="w-full" _name="number" _label="Number" ref={ref} />);
+	focusElements.set('inputPassword', (_, ref) => <KolInputPassword className="w-full" _name="password" _label="Password" ref={ref} />);
 	focusElements.set('inputRadio', (_, ref) => (
 		<KolInputRadio
+			className="w-full"
 			_name="radio"
 			_label="Radio"
 			_options={[
@@ -50,10 +52,11 @@ const getFocusElements = () => {
 			ref={ref}
 		/>
 	));
-	focusElements.set('inputRange', (_, ref) => <KolInputRange _name="range" _label="Range" ref={ref} />);
-	focusElements.set('inputText', (_, ref) => <KolInputText _name="text" _label="Text" ref={ref} />);
+	focusElements.set('inputRange', (_, ref) => <KolInputRange className="w-full" _name="range" _label="Range" ref={ref} />);
+	focusElements.set('inputText', (_, ref) => <KolInputText className="w-full" _name="text" _label="Text" ref={ref} />);
 	focusElements.set('select', (_, ref) => (
 		<KolSelect
+			className="w-full"
 			_name="select"
 			_label="Select"
 			_options={[
@@ -65,6 +68,7 @@ const getFocusElements = () => {
 	));
 	focusElements.set('selectMultiple', (_, ref) => (
 		<KolSelect
+			className="w-full"
 			_name="select"
 			_label="Select (multiple)"
 			_multiple
@@ -78,6 +82,7 @@ const getFocusElements = () => {
 	));
 	focusElements.set('singleSelect', (_, ref) => (
 		<KolSingleSelect
+			className="w-full"
 			_name="singleSelect"
 			_label="Single Select"
 			_options={[
@@ -87,17 +92,17 @@ const getFocusElements = () => {
 			ref={ref}
 		/>
 	));
-	focusElements.set('textarea', (_, ref) => <KolTextarea _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
-	focusElements.set('accordion', (_, ref) => <KolAccordion _label="Accordion here" ref={ref} />);
+	focusElements.set('textarea', (_, ref) => <KolTextarea className="w-full" _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
+	focusElements.set('accordion', (_, ref) => <KolAccordion className="w-full" _label="Accordion here" ref={ref} />);
 	focusElements.set('button', (_, ref) => <KolButton _label="Button here" ref={ref}></KolButton>);
 	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref}></KolButtonLink>);
-	focusElements.set('combobox', (_, ref) => <KolCombobox _label="KolCombobox here" _suggestions={[]} ref={ref}></KolCombobox>);
+	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref}></KolCombobox>);
 	focusElements.set('details', (_, ref) => (
-		<KolDetails _label="Details here" ref={ref}>
+		<KolDetails className="w-full" _label="Details here" ref={ref}>
 			detailed details
 		</KolDetails>
 	));
-	focusElements.set('link', (_, ref) => <KolLink _label="Link here" _href="#" ref={ref}></KolLink>);
+	focusElements.set('link', (_, ref) => <KolLink className="w-full" _label="Link here" _href="#" ref={ref}></KolLink>);
 	focusElements.set('linkButton', (_, ref) => <KolLinkButton _label="LinkButton here" _href="#" ref={ref}></KolLinkButton>);
 
 	return focusElements;
@@ -125,7 +130,7 @@ const Fallback = (props: FallbackProps) => {
 				</KolAlert>
 			)}
 
-			<h4>Focus Test Cases</h4>
+			<KolHeading _level={2} _label="Focus Test Cases" />
 			<ul>
 				{componentNames.map((componentName) => (
 					<li key={componentName}>

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -5,7 +5,7 @@ import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
 import DATA from './databasedata.json';
 
-import './layout.css';
+import './layout.scss';
 
 const TABS: TabButtonProps[] = [
 	{

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -0,0 +1,19 @@
+@import '../../@shared/mixins';
+
+.mainlayout {
+	min-height: calc(100vh - rem(32));
+	width: 100%;
+	display: grid;
+	column-gap: rem(16);
+	grid-template-columns: rem(400) calc(100% - rem(460));
+	grid-template-rows: 1fr;
+	grid-template-areas: 'nav content';
+
+	& > .nav-area {
+		grid-area: nav;
+	}
+
+	& > .content {
+		grid-area: content;
+	}
+}

package/src/scenarios/input-group-with-error.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { FC } from 'react';
+import { KolAlert, KolInputCheckbox, KolInputText } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const InputGroupWithError: FC = () => {
+	const phoneError = true;
+	const phoneErrorMessage = 'Unrecognized phone number.';
+	const pizzaError = true;
+	const pizzaErrorMessage = 'Choose at least two and up to five toppings.';
+	const pizzaToppings = ['Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Spinach', 'Tomatoes', 'Artichokes', 'Zucchini', 'Jalapeños', 'Basil'];
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how input components can be grouped together with just one error message, without repeating the message for every field.</p>
+				<p>The sample only demonstrates how the errors can be displayed, an actual validation logic is not part of the example.</p>
+			</SampleDescription>
+
+			<fieldset>
+				<legend>Phone number</legend>
+				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
+
+				<div className="grid grid-cols-3 gap-4 max-w-2xl">
+					<KolInputText _label="Country code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+				</div>
+			</fieldset>
+
+			<fieldset className="mt">
+				<legend>Pizza toppings</legend>
+				{pizzaError && <KolAlert _alert _type="error" _label={pizzaErrorMessage} />}
+
+				{pizzaToppings.map((topping) => (
+					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+				))}
+			</fieldset>
+		</>
+	);
+};