@public-ui/sample-react 2.1.7-rc.1 → 2.1.7

package/src/components/table/stateless-with-single-selection.tsx

@@ -0,0 +1,68 @@
+import type { FC } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { KolTableStateless } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+];
+type Data = (typeof DATA)[0];
+
+export const TableStatelessWithSingleSelection: FC = () => {
+	const [selectedKeys, setSelectedKeys] = useState(['1002']);
+
+	const selection: KoliBriTableSelection = {
+		label: (row) => `Selection for ${(row as Data).name}`,
+		multiple: false,
+		selectedKeys,
+		keyPropertyName: 'internalIdentifier',
+	};
+
+	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
+
+	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
+		console.log('Selection change via callback', selection);
+		setSelectedKeys(typeof selection === 'string' ? [selection] : selection);
+	};
+
+	useEffect(() => {
+		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
+		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+
+		return () => {
+			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
+			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+		};
+	}, [kolTableStatelessRef]);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
+			</SampleDescription>
+
+			<KolTableStateless
+				_label="Table with selection checkboxes"
+				_headerCells={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_data={DATA}
+				_selection={selection}
+				_on={{ onSelectionChange: handleSelectionChangeCallback }}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				ref={kolTableStatelessRef}
+			/>
+		</>
+	);
+};

package/src/components/tabs/basic.tsx

@@ -7,25 +7,25 @@ import { SampleDescription } from '../SampleDescription';
 const tabs = [
 	{
 		_icons: 'codicon codicon-pie-chart',
-		_label: 'Erster Tab',
+		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
-				console.log('Erster Tab ausgewählt', event);
+				console.log('First tab selected', event);
 			},
 		},
 	},
 	{
 		_icons: 'codicon codicon-calendar',
-		_label: 'Zweiter Tab',
+		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
 		_icons: 'codicon codicon-briefcase',
-		_label: 'Deaktivierter Tab',
+		_label: 'Disabled Tab',
 	},
 	{
 		_icons: 'codicon codicon-telescope',
-		_label: 'Letzter Tab',
+		_label: 'Last tab',
 	},
 ];
 
@@ -41,17 +41,17 @@ export const TabsBasic: FC = () => (
 		</SampleDescription>
 
 		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
-			<div slot="tab-0">Inhalte von Tab 1</div>
-			<div slot="tab-1">Inhalte von Tab 2</div>
-			<div slot="tab-2">Inhalte von Tab 3</div>
-			<div slot="tab-3">Inhalte von Tab 4</div>
+			<div slot="tab-0">Contents of Tab 1</div>
+			<div slot="tab-1">Contents of Tab 2</div>
+			<div slot="tab-2">Contents of Tab 3</div>
+			<div slot="tab-3">Contents of Tab 4</div>
 		</KolTabs>
 
 		<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
-			<div slot="tab-0">Inhalte von Tab 1</div>
-			<div slot="tab-1">Inhalte von Tab 2</div>
-			<div slot="tab-2">Inhalte von Tab 3</div>
-			<div slot="tab-3">Inhalte von Tab 4</div>
+			<div slot="tab-0">Contents of Tab 1</div>
+			<div slot="tab-1">Contents of Tab 2</div>
+			<div slot="tab-2">Contents of Tab 3</div>
+			<div slot="tab-3">Contents of Tab 4</div>
 		</KolTabs>
 	</>
 );

package/src/components/tabs/icons-only.tsx

@@ -7,23 +7,23 @@ import { SampleDescription } from '../SampleDescription';
 const tabs = [
 	{
 		_icons: 'codicon codicon-pie-chart',
-		_label: 'Erster Tab',
+		_label: 'First Tab',
 		_hideLabel: true,
 	},
 	{
 		_icons: 'codicon codicon-calendar',
-		_label: 'Zweites Tab',
+		_label: 'Second Tab',
 		_hideLabel: true,
 	},
 	{
 		_disabled: true,
 		_icons: 'codicon codicon-briefcase',
-		_label: 'Deaktiviertes Tab',
+		_label: 'Disabled Tab',
 		_hideLabel: true,
 	},
 	{
 		_icons: 'codicon codicon-telescope',
-		_label: 'Letzter Tab',
+		_label: 'Last Tab',
 		_hideLabel: true,
 	},
 ];
@@ -34,10 +34,10 @@ export const TabsIconsOnly: FC = () => (
 		</SampleDescription>
 
 		<KolTabs _label="Tabs with icons" _tabs={tabs}>
-			<div slot="tab-0">Inhalte von Tab 1</div>
-			<div slot="tab-1">Inhalte von Tab 2</div>
-			<div slot="tab-2">Inhalte von Tab 3</div>
-			<div slot="tab-3">Inhalte von Tab 4</div>
+			<div slot="tab-0">Contents of Tab 1</div>
+			<div slot="tab-1">Contents of Tab 2</div>
+			<div slot="tab-2">Contents of Tab 3</div>
+			<div slot="tab-3">Contents of Tab 4</div>
 		</KolTabs>
 	</>
 );

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -46,22 +46,22 @@ const initialValues: FormValues = {
 };
 
 const districtSchema = {
-	district: Yup.string().required('Bitte Stadtteil wählen.'),
+	district: Yup.string().required('Please select district.'),
 };
 const personalInformationSchema = {
-	salutation: Yup.string().required('Bitte Anrede auswählen.'),
-	name: Yup.string().required('Bitte Vor- und Zuname eingeben.'),
+	salutation: Yup.string().required('Please select salutation.'),
+	name: Yup.string().required('Please enter your first and last name.'),
 	company: Yup.string().when('salutation', {
-		is: (salutation: string) => salutation === 'Firma',
-		then: (schema) => schema.required('Bitte Firma angeben.'),
+		is: (salutation: string) => salutation === 'Company',
+		then: (schema) => schema.required('Please specify company.'),
 	}),
-	email: Yup.string().required('Bitte E-Mail eingeben.'),
+	email: Yup.string().required('Please enter your e-mail address.'),
 };
 const availableAppointmentsSchema = {
-	date: Yup.string().required('Bitte Datum eingeben.'),
+	date: Yup.string().required('Please enter date.'),
 	time: Yup.string().when('date', {
 		is: (date: string) => Boolean(date), // only validate time when date is already set
-		then: (schema) => schema.test('checkTimeAvailability', 'Termin leider nicht mehr verfügbar.', checkAppointmentAvailability),
+		then: (schema) => schema.test('checkTimeAvailability', 'Date unfortunately no longer available.', checkAppointmentAvailability),
 	}),
 };
 
@@ -103,22 +103,22 @@ export function AppointmentForm() {
 				<KolTabs
 					_tabs={[
 						{
-							_label: '1. Einwohnermeldeamt wählen',
+							_label: '1. Choose registration office',
 						},
 						{
-							_label: '2. Freie Termine',
+							_label: '2. Available dates',
 							_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
 						},
 						{
-							_label: '3. Persönliche Daten',
+							_label: '3. Personal data',
 							_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
 						},
 						{
-							_label: 'Zusammenfassung',
+							_label: 'Summary',
 							_disabled: activeFormSection < FormSection.SUMMARY,
 						},
 					]}
-					_label="Formular-Navigation"
+					_label="Form navigation"
 					_selected={selectedTab}
 					_on={{
 						onSelect: (_event, selectedTab) => {

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -66,7 +66,7 @@ export function AvailableAppointmentsForm() {
 	);
 	return (
 		<div className="p-2">
-			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
+			<KolHeading _level={2} _label="Select an appointment"></KolHeading>
 			<KolForm
 				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
@@ -81,7 +81,7 @@ export function AvailableAppointmentsForm() {
 				{renderField('date', (field) => (
 					<KolInputDate
 						id="field-date"
-						_label="Datum"
+						_label="Date"
 						_value={field.value}
 						_msg={{
 							_type: 'error',
@@ -100,7 +100,7 @@ export function AvailableAppointmentsForm() {
 								{renderField('time', (field) => (
 									<KolInputRadio
 										id="field-time"
-										_label="Zeit"
+										_label="Time"
 										_orientation="horizontal"
 										_options={availableTimes}
 										_value={field.value}
@@ -114,17 +114,17 @@ export function AvailableAppointmentsForm() {
 									/>
 								))}
 								<p>
-									<em>Aus Testzwecken sind nur die Termine zu jeder halben Stunde verfügbar.</em>
+									<em>For test purposes, only the dates for every half hour are available.</em>
 								</p>
 							</>
 						) : (
-							<KolSpin _show className="block" aria-label="Termine werden geladen." _variant="cycle" />
+							<KolSpin _show className="block" aria-label="Dates are loaded." _variant="cycle" />
 						)}
 					</div>
 				)}
 
 				<KolButton _label="Weiter" _type="submit" className="mt-2" />
-				{form.values.date && form.isValidating ? <KolSpin _show aria-label="Termin wird geprüft." /> : ''}
+				{form.values.date && form.isValidating ? <KolSpin _show aria-label="Date being checked." /> : ''}
 			</KolForm>
 		</div>
 	);

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -21,12 +21,12 @@ const LOCATION_OPTIONS = [
 		label: 'Dorstfeld',
 	},
 	{
-		value: 'Innenstadt Ost',
-		label: 'Innenstadt Ost',
+		value: 'Downtown East',
+		label: 'downtown East',
 	},
 	{
-		value: 'Innenstadt West',
-		label: 'Innenstadt West',
+		value: 'Downtown West',
+		label: 'downtown West',
 	},
 ];
 
@@ -37,7 +37,7 @@ export function DistrictForm() {
 	const formikRef = useRef<HTMLKolFormElement>(null);
 	return (
 		<div className="p-2">
-			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
+			<KolHeading _level={2} _label="Select a district"></KolHeading>
 			<KolForm
 				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
@@ -60,8 +60,8 @@ export function DistrictForm() {
 					{({ field }: FieldProps<FormValues['district']>) => (
 						<KolSelect
 							id="field-district"
-							_label="Stadtteil"
-							_options={[{ label: 'Bitte wählen…', value: '' }, ...LOCATION_OPTIONS]}
+							_label="District"
+							_options={[{ label: 'Please select…', value: '' }, ...LOCATION_OPTIONS]}
 							_value={[field.value]}
 							_msg={{
 								_type: 'error',
@@ -86,7 +86,7 @@ export function DistrictForm() {
 					)}
 				</Field>
 
-				<KolButton _label="Weiter" _type="submit" className="mt-2" />
+				<KolButton _label="Next" _type="submit" className="mt-2" />
 			</KolForm>
 		</div>
 	);

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -9,20 +9,20 @@ import { createErrorList, focusErrorList } from './formUtils';
 
 const SALUTATION_OPTIONS = [
 	{
-		value: 'Firma',
-		label: 'Firma',
+		value: 'Company',
+		label: 'Company',
 	},
 	{
-		value: 'Frau',
-		label: 'Frau',
+		value: 'Mrs.',
+		label: 'Mrs.',
 	},
 	{
-		value: 'Herr',
-		label: 'Herr',
+		value: 'Mr.',
+		label: 'Mr.',
 	},
 	{
-		value: 'Hallo',
-		label: 'Hallo',
+		value: 'Hello',
+		label: 'Hello',
 	},
 ];
 
@@ -37,7 +37,7 @@ export function PersonalInformationForm() {
 	}, [sectionSubmitted]);
 	return (
 		<div className="p-2">
-			<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
+			<KolHeading _level={2} _label="Enter your contact details"></KolHeading>
 			<KolForm
 				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
@@ -56,14 +56,14 @@ export function PersonalInformationForm() {
 								void form.setFieldTouched('salutation', true);
 							}}
 							id="field-salutation"
-							_label="Anrede"
+							_label="Salutation"
 							_value={[field.value]}
 							_msg={{
 								_type: 'error',
 								_description: form.errors.salutation || '',
 							}}
 							_touched={form.touched.salutation}
-							_options={[{ label: 'Bitte wählen…', value: '' }, ...SALUTATION_OPTIONS]}
+							_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
 							_required
 							_on={{
 								onChange: (event, values: unknown) => {
@@ -77,7 +77,7 @@ export function PersonalInformationForm() {
 					)}
 				</Field>
 
-				{form.values.salutation === 'Firma' && (
+				{form.values.salutation === 'Company' && (
 					<Field name="company">
 						{({ field }: FieldProps<FormValues['company']>) => (
 							<div className="block mt-2">
@@ -86,7 +86,7 @@ export function PersonalInformationForm() {
 										void form.setFieldTouched('company', true);
 									}}
 									id="field-company"
-									_label="Firma"
+									_label="Company"
 									_value={field.value}
 									_msg={{
 										_type: 'error',
@@ -115,7 +115,7 @@ export function PersonalInformationForm() {
 									void form.setFieldTouched('name', true);
 								}}
 								id="field-name"
-								_label="Vor- und Zuname"
+								_label="First name and surname"
 								_value={field.value}
 								_msg={{
 									_type: 'error',
@@ -166,7 +166,7 @@ export function PersonalInformationForm() {
 							<KolInputText
 								id="field-phone"
 								_type="tel"
-								_label="Telefonnumer"
+								_label="Telephone number"
 								_value={field.value}
 								_msg={{
 									_type: 'error',
@@ -186,7 +186,7 @@ export function PersonalInformationForm() {
 					)}
 				</Field>
 
-				<KolButton _label="Weiter" _type="submit" className="mt-2" />
+				<KolButton _label="Next" _type="submit" className="mt-2" />
 			</KolForm>
 		</div>
 	);

package/src/scenarios/appointment-form/Summary.tsx

@@ -16,23 +16,23 @@ export function Summary() {
 			<KolHeading _level={2} _label="Zusammenfassung"></KolHeading>
 
 			<dl>
-				<dt>Stadtteil</dt>
+				<dt>District</dt>
 				<dd>
 					<ValueWithFallback value={values.district} />
 				</dd>
-				<dt>Termin</dt>
+				<dt>Appointment</dt>
 				<dd>{values.date && values.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
 
-				{values.salutation === 'Firma' ? (
+				{values.salutation === 'Company' ? (
 					<>
-						<dt>Firma</dt>
+						<dt>Company</dt>
 						<dd>
 							<ValueWithFallback value={values.company} />
 						</dd>
 					</>
 				) : (
 					<>
-						<dt>Anrede</dt>
+						<dt>Salutation</dt>
 						<dd>
 							<ValueWithFallback value={values.salutation} />
 						</dd>
@@ -47,7 +47,7 @@ export function Summary() {
 				<dd>
 					<ValueWithFallback value={values.email} />
 				</dd>
-				<dt>Telefon</dt>
+				<dt>Phone number</dt>
 				<dd>
 					<ValueWithFallback value={values.phone} />
 				</dd>

package/src/scenarios/focus-elements.tsx

@@ -18,6 +18,7 @@ import {
 	KolLink,
 	KolLinkButton,
 	KolSelect,
+	KolSingleSelect,
 	KolTextarea,
 } from '@public-ui/react';
 import type { FC, ForwardRefRenderFunction } from 'react';
@@ -75,6 +76,17 @@ const getFocusElements = () => {
 			ref={ref}
 		/>
 	));
+	focusElements.set('singleSelect', (_, ref) => (
+		<KolSingleSelect
+			_name="singleSelect"
+			_label="Single Select"
+			_options={[
+				{ label: 'Option A', value: 'A' },
+				{ label: 'Option B', value: 'B' },
+			]}
+			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('button', (_, ref) => <KolButton _label="Button here" ref={ref}></KolButton>);

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { KolTable, KolTabs, KolNav } from '@public-ui/react';
+import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
+import { SampleDescription } from '../../components/SampleDescription';
+import { LINKS } from '../../components/nav/links';
+import DATA from './databasedata.json';
+
+import './layout.css';
+
+const TABS: TabButtonProps[] = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'Erster Tab',
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Zweiter Tab',
+		_disabled: true,
+	},
+	{
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Deaktivierter Tab',
+		_disabled: true,
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Letzter Tab',
+		_disabled: true,
+	},
+];
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ key: 'name', label: 'Name', textAlign: 'left', width: '400px' },
+			{ key: 'species', label: 'Species', textAlign: 'left', width: '400px' },
+			{ key: 'habitat', label: 'Habitat', textAlign: 'left', width: '400px' },
+			{ key: 'diet', label: 'Diet', textAlign: 'left', width: '400px' },
+			{ key: 'lifespan', label: 'lifespan', textAlign: 'right', width: '400px' },
+		],
+	],
+};
+
+function TableHorizontalScrollbarAdvanced() {
+	const [tableWith] = React.useState(() => {
+		const columnDefinitions = HEADERS.horizontal![0];
+		let width = 0;
+
+		for (const def of columnDefinitions as { width: string }[]) {
+			width += Number(def.width?.replace('px', '') || 0);
+		}
+		return `${width}px`;
+	});
+
+	return (
+		<>
+			<SampleDescription></SampleDescription>
+			<div className="mainlayout">
+				<aside className="nav-area">
+					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />
+				</aside>
+				<div className="content">
+					<KolTabs _tabs={TABS} _label="Demo Tabs"></KolTabs>
+					<div style={{ overflow: 'hidden' }}>
+						<KolTable
+							_label="Table for demonstration purposes with horizontal scrollbar"
+							_minWidth={tableWith}
+							_headers={HEADERS}
+							_data={DATA}
+							_pagination={{ _page: 1 }}
+							className="block"
+						/>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default TableHorizontalScrollbarAdvanced;