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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.7-rc.1",
+  "version": "2.1.7",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -33,9 +33,12 @@
     "typescript": "5.5.4",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.7-rc.1",
-    "@public-ui/themes": "2.1.7-rc.1",
-    "@public-ui/react": "2.1.7-rc.1"
+    "@public-ui/components": "2.1.7",
+    "@public-ui/react": "2.1.7",
+    "@public-ui/themes": "2.1.7"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.45.3"
   },
   "files": [
     ".eslintignore",
@@ -55,11 +58,13 @@
     "build": "rimraf dist && cross-env NODE_ENV=production webpack",
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
-    "lint": "tsc --noemit && eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+    "lint": "tsc --noemit && eslint \"{src,tests,e2e}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
     "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
     "prepare:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
     "start": "npm run serve -- --open",
-    "unused": "ts-prune -e src"
+    "unused": "ts-prune -e src",
+    "e2e": "playwright test",
+    "postinstall": "pnpm exec playwright install"
   }
 }

package/src/components/Sidebar.tsx

@@ -24,7 +24,7 @@ const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMob
 			{children}
 		</KolAccordion>
 	) : (
-		<div className="mt">{children}</div>
+		<div className="mt scrollable-container">{children}</div>
 	);
 export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
 	/* KolSelect calls onChange initially by design - work around this with a state variable  */
@@ -56,52 +56,54 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 	return (
 		<aside className="app-sidebar p-4">
-			<div className="flex flex-justify-between flex-items-center">
-				<KolHeading _label="KoliBri React"></KolHeading>
-				<KolVersion _label={version}></KolVersion>
-			</div>
-			{(buildDate || commitHash) && (
-				<div className="text-sm font-mono color-gray-5 m-t-2">
-					{commitHash ? `Build: ${commitHash}` : ''}
-					<br />
-					{buildDate ? `at ${buildDate}` : ''}
+			<div className="scrollable-container-wrapper">
+				<div className="flex flex-justify-between flex-items-center">
+					<KolHeading _label="KoliBri React"></KolHeading>
+					<KolVersion _label={version}></KolVersion>
 				</div>
-			)}
+				{(buildDate || commitHash) && (
+					<div className="text-sm font-mono color-gray-5 m-t-2">
+						{commitHash ? `Build: ${commitHash}` : ''}
+						<br />
+						{buildDate ? `at ${buildDate}` : ''}
+					</div>
+				)}
 
-			<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
+				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
 
-			<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
-			<div className="flex flex-justify-between flex-items-center mt">
-				<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
-				<span className="text-center">
-					{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
-				</span>
-				<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
-			</div>
+				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
+				<div className="flex flex-justify-between flex-items-center mt">
+					<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
+					<span className="text-center">
+						{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+					</span>
+					<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
+				</div>
 
-			<ComponentNavContainer isMobile={isMobile}>
-				<nav>
-					<ul className="m0 p0 list-inside">
-						{Object.entries(routes).map(([parentName, children]) => (
-							<li key={parentName} className="mt-2">
-								{parentName}
-								<ul className="list-inside ml p0">
-									{Object.keys(children).map((childName) => (
-										<li key={`${parentName}/${childName}`}>
-											{/* Handle special case for nested routes in tree example - this might need a proper refactoring in the future  */}
-											{parentName === 'tree' && childName === 'basic/:subPage' ? (
-												<KolLink _label="basic" _href={`#/${parentName}/basic/home`} _on={{ onClick: handleLinkClick }} />
-											) : (
-												<KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
-											)}
-										</li>
-									))}
-								</ul>
-							</li>
-						))}
-					</ul>
-				</nav>
-			</ComponentNavContainer>
+				<ComponentNavContainer isMobile={isMobile}>
+					<nav>
+						<ul className="m0 p0 list-inside">
+							{Object.entries(routes).map(([parentName, children]) => (
+								<li key={parentName} className="mt-2">
+									{parentName}
+									<ul className="list-inside ml p0">
+										{Object.keys(children).map((childName) => (
+											<li key={`${parentName}/${childName}`}>
+												{/* Handle special case for nested routes in tree example - this might need a proper refactoring in the future  */}
+												{parentName === 'tree' && childName === 'basic/:subPage' ? (
+													<KolLink _label="basic" _href={`#/${parentName}/basic/home`} _on={{ onClick: handleLinkClick }} />
+												) : (
+													<KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
+												)}
+											</li>
+										))}
+									</ul>
+								</li>
+							))}
+						</ul>
+					</nav>
+				</ComponentNavContainer>
+			</div>
 		</aside>
 	);
 };

package/src/components/abbr/basic.tsx

@@ -11,35 +11,35 @@ export const AbbrBasic: FC = () => (
 		</SampleDescription>
 
 		<p>
-			Ich bin <KolAbbr _label="zum Beispiel">z.B.</KolAbbr> eine Abkürzung.
+			I am <KolAbbr _label="zum Beispiel">e.g.</KolAbbr> an abbreviation.
 		</p>
 		<p>
-			Ich bin{' '}
+			I am{' '}
 			<KolAbbr _label="zum Beispiel" _tooltipAlign="right">
-				z.B.
+				e.g.
 			</KolAbbr>{' '}
-			eine Abkürzung (rechts).
+			an abbreviation (right).
 		</p>
 		<p>
-			Ich bin{' '}
+			I am{' '}
 			<KolAbbr _label="zum Beispiel" _tooltipAlign="bottom">
-				z.B.
+				e.g.
 			</KolAbbr>{' '}
-			eine Abkürzung (unten).
+			an abbreviation (below).
 		</p>
 		<p>
-			Ich bin{' '}
+			I am{' '}
 			<KolAbbr _label="zum Beispiel" _tooltipAlign="left">
-				z.B.
+				e.g.
 			</KolAbbr>{' '}
-			eine Abkürzung (links).
+			an abbreviation (left).
 		</p>
 		<p>
-			Ich bin{' '}
+			I am{' '}
 			<KolAbbr _label="zum Beispiel" _tooltipAlign="top">
-				z.B.
+				e.g.
 			</KolAbbr>{' '}
-			eine Abkürzung (oben).
+			an abbreviation (top).
 		</p>
 	</>
 );

package/src/components/accordion/basic.tsx

@@ -15,11 +15,11 @@ export const AccordionBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolAccordion _label="Überschrift Accordion Tab 1">Inhalt Accordion Tab 1</KolAccordion>
-			<KolAccordion _label="Überschrift Accordion Tab 2">Inhalt Accordion Tab 2</KolAccordion>
-			<KolAccordion _label="Überschrift Accordion Tab 2 (deaktiviert)" _disabled></KolAccordion>
-			<KolAccordion _label="Überschrift Accordion Tab 2 (disabled and open)" _disabled _open>
-				Inhalt Accordion Tab 2
+			<KolAccordion _label="Heading Accordion Tab 1">Contents Accordion Tab 1</KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 2">Contents Accordion Tab 2</KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 2 (deactivated)" _disabled></KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 2 (disabled and open)" _disabled _open>
+				Contents Accordion Tab 2
 			</KolAccordion>
 		</div>
 	</>

package/src/components/accordion/headlines.tsx

@@ -11,23 +11,23 @@ export const AccordionHeadlines: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolAccordion _label="Überschrift Level 1" _level={1}>
-				Inhalt Accordion Tab 1
+			<KolAccordion _label="Heading Level 1" _level={1}>
+				Contents Accordion Tab 1
 			</KolAccordion>
-			<KolAccordion _label="Überschrift Level 2" _level={2}>
-				Inhalt Accordion Tab 2
+			<KolAccordion _label="Heading Level 2" _level={2}>
+				Contents Accordion Tab 2
 			</KolAccordion>
-			<KolAccordion _label="Überschrift Level 3" _level={3}>
-				Inhalt Accordion Tab 3
+			<KolAccordion _label="Heading Level 3" _level={3}>
+				Contents Accordion Tab 3
 			</KolAccordion>
-			<KolAccordion _label="Überschrift Level 4" _level={4}>
-				Inhalt Accordion Tab 4
+			<KolAccordion _label="Heading Level 4" _level={4}>
+				Contents Accordion Tab 4
 			</KolAccordion>
-			<KolAccordion _label="Überschrift Level 5" _level={5}>
-				Inhalt Accordion Tab 5
+			<KolAccordion _label="Heading Level 5" _level={5}>
+				Contents Accordion Tab 5
 			</KolAccordion>
-			<KolAccordion _label="Überschrift Level 6" _level={6}>
-				Inhalt Accordion Tab 6
+			<KolAccordion _label="Heading Level 6" _level={6}>
+				Contents Accordion Tab 6
 			</KolAccordion>
 		</div>
 	</>

package/src/components/alert/basic.tsx

@@ -15,17 +15,17 @@ type PropsBasic = {
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	<>
-		<KolAlert _label="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant}>
-			Das ist der Text des Alert.
+		<KolAlert _label="This is the headline of the alert." _level={level} _type={type} _variant={variant}>
+			This is the text of the alert.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant}>
-			In diesem Alert wird nur der Text ohne Überschrift verwendet.
+			In this alert, only the text without the heading is used.
 		</KolAlert>
-		<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 _label="This is the headline of the alert." _level={level} _type={type} _variant={variant} _hasCloser>
+			This is the text of the alert. With close button.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant} _hasCloser>
-			In diesem Alert wird nur der Text ohne Überschrift verwendet. Mit Schließen-Button.
+			In this alert, only the text without the heading is used. With close button.
 		</KolAlert>
 	</>
 );

package/src/components/alert/html.tsx

@@ -11,11 +11,11 @@ export const AlertHtml: FC = () => (
 		</SampleDescription>
 
 		<div>
-			<KolAlert _label="Ausgabe von HTML-Code im Alert" _type="info">
-				<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
+			<KolAlert _label="Output of HTML code in the alert" _type="info">
+				<h2 className="mt-2 mb-3">An H2 heading is output here</h2>
 				<div className="grid gap-4 sm:grid-cols-2">
 					<div>
-						<h3>Text in einer linken Spalte</h3>
+						<h3>Text in a left-hand column</h3>
 						<p>
 							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur
 							dicta accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?

package/src/components/breadcrumb/basic.tsx

@@ -15,43 +15,43 @@ export const BreadcrumbBasic: FC = () => (
 			<KolBreadcrumb
 				_label="Breadcrumb aus Text-Links"
 				_links={[
-					{ _label: 'Startseite', _href: '#/back-page' },
-					{ _label: 'Unterseite der Startseite', _href: '#/back-page' },
+					{ _label: 'Homepage', _href: '#/back-page' },
+					{ _label: 'Bottom of the homepage', _href: '#/back-page' },
 					{
-						_label: 'Unterseite der Unterseite',
+						_label: 'Underside of the underside',
 						_href: '#/back-page',
 					},
 				]}
 			></KolBreadcrumb>
 			<KolBreadcrumb
-				_label="Breadcrumb aus Icons- oder Text-Links"
+				_label="Breadcrumb from icons or text links"
 				_links={[
 					{
-						_label: 'Startseite',
+						_label: 'Homepage',
 						_icons: 'codicon codicon-home',
 						_hideLabel: true,
 						_href: '#/back-page',
 					},
 					{
-						_label: 'Unterseite der Startseite mit sehr langem Link-Test',
+						_label: 'Subpage of the start page with very long link test',
 						_href: '#/back-page',
 					},
 					{
-						_label: 'Unterseite der Unterseite',
+						_label: 'Underside of the underside',
 						_href: '#/back-page',
 					},
 				]}
 			></KolBreadcrumb>
 			<KolBreadcrumb
-				_label="Breadcrumb aus Icons- und Text-Links"
+				_label="Breadcrumb from icons and text links"
 				_links={[
-					{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
+					{ _label: 'Homepage', _icons: 'codicon codicon-home', _href: '#/back-page' },
 					{
-						_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
+						_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',
 						_href: '#/back-page',
 					},
 					{
-						_label: 'Unterseite der Unterseite',
+						_label: 'Underside of the underside',
 						_href: '#/back-page',
 					},
 				]}

package/src/components/button/access-key.tsx

@@ -14,12 +14,12 @@ export const ButtonAccessKey: FC = () => (
 		</SampleDescription>
 
 		<div className="flex flex-wrap gap-4">
-			<KolButton _label="Mit S access key" _accessKey="S"></KolButton>
-			<KolButton _label="Sehr kleines s" _accessKey="s"></KolButton>
-			<KolButton _label="Access key kommt nicht in label vor" _accessKey="x"></KolButton>
-			<KolButton _label="access key ohne label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard"></KolButton>
+			<KolButton _label="With S access key" _accessKey="S"></KolButton>
+			<KolButton _label="Very small s" _accessKey="s"></KolButton>
+			<KolButton _label="Access key does not appear in label" _accessKey="x"></KolButton>
+			<KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard"></KolButton>
 			<KolButton
-				_label="mit inline icons"
+				_label="with inline icons"
 				_icons={{
 					left: 'codicon codicon-dashboard',
 					right: 'codicon codicon-dashboard',

package/src/components/button/aria-description.tsx

@@ -0,0 +1,17 @@
+import { KolButton } from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonAriaDescription: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolButton with aria-description</p>
+		</SampleDescription>
+
+		<div className="flex flex-wrap gap-4">
+			<KolButton _label="Button Text without area description"></KolButton>
+			<KolButton _label="Button Text" _ariaDescription="Button Area Description"></KolButton>
+		</div>
+	</>
+);

package/src/components/button/routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '../../shares/types';
 import { ButtonAccessKey } from './access-key';
+import { ButtonAriaDescription } from './aria-description';
 import { ButtonBaselined } from './baselined';
 import { ButtonBasic } from './basic';
 import { ButtonIcons } from './icons';
@@ -11,6 +12,7 @@ export const BUTTON_ROUTES: Routes = {
 		icons: ButtonIcons,
 		width: ButtonWidth,
 		'access-key': ButtonAccessKey,
+		'aria-description': ButtonAriaDescription,
 		baselined: ButtonBaselined,
 	},
 };

package/src/components/button/width.tsx

@@ -8,7 +8,7 @@ import { SampleDescription } from '../SampleDescription';
 const ARGS = {
 	className: 'w-8rem',
 	_on: {
-		onClick: () => alert('Klick!'),
+		onClick: () => alert('Click!'),
 	},
 };
 

package/src/components/button-link/aria-description.tsx

@@ -0,0 +1,17 @@
+import { KolButtonLink } from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonLinkAriaDescription: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolButtonLink with aria-description</p>
+		</SampleDescription>
+
+		<div className="flex flex-wrap gap-4">
+			<KolButtonLink _label="Button Text without area description"></KolButtonLink>
+			<KolButtonLink _label="Button Text" _ariaDescription="Button Area Description"></KolButtonLink>
+		</div>
+	</>
+);

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

@@ -15,18 +15,18 @@ export const ButtonLinkBasic: FC = () => (
 		</SampleDescription>
 		<div>
 			<p>
-				In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _label="Simple Link" /> Er wird standardmäßig als{' '}
-				<strong>inline-Element</strong> ausgegeben.
+				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 diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-				<KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _label="Simple Link" />. Damit kann man mir per CSS-Styles eine
-				Breite, eine Höhe und andere Eigenschaften zuweisen.
+				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,
+				height, and other properties to it using CSS styles.
 				<br />
 				<br />
-				Danach folgt ein Link, der als block-Element ausgegeben wird.
+				After that, there is a link that is rendered as a block element.
 				<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
-				Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+				Therefore, I go over the entire width of the parent element to create a line break.
 			</p>
 			<p>
 				<KolButtonLink _label="Disabled ButtonLink" _disabled />

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

@@ -17,19 +17,19 @@ export const ButtonLinkIcons: FC = () => (
 				_icons={{
 					right: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit Icon rechts"
+				_label="I am a link with an icon on the right"
 			/>
 			<KolButtonLink
 				_icons={{
 					top: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit Icon oben"
+				_label="I am a link with an icon at the top"
 			/>
 			<KolButtonLink
 				_icons={{
 					bottom: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit Icon unten"
+				_label="I am a link with icon below"
 			/>
 			<KolButtonLink
 				_icons={{
@@ -38,7 +38,7 @@ export const ButtonLinkIcons: FC = () => (
 					bottom: 'codicon codicon-home',
 					left: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit allen Icons"
+				_label="I am a link with all icons"
 			/>
 		</div>
 	</>

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

@@ -12,10 +12,10 @@ export const ButtonLinkImage: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
+			<KolButtonLink _label="I am a link that is rendered as text" />
 			<br />
 			<KolButtonLink _label="">
-				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+				<img alt="Presentation of the KoliBri theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			</KolButtonLink>
 		</div>
 	</>

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

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { ButtonLinkBasic } from './basic';
 import { ButtonLinkIcons } from './icons';
 import { ButtonLinkImage } from './image';
+import { ButtonLinkAriaDescription } from './aria-description';
 
 export const BUTTON_LINK_ROUTES: Routes = {
 	'button-link': {
 		basic: ButtonLinkBasic,
 		icons: ButtonLinkIcons,
 		image: ButtonLinkImage,
+		'aria-description': ButtonLinkAriaDescription,
 	},
 };

package/src/components/drawer/basic.tsx

@@ -33,7 +33,7 @@ export const DrawerBasic: FC = () => {
 
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
-				<KolDrawer ref={drawerElement} _label="Ich bin ein Drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
+				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
 					<p>
 						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 						voluptua.
@@ -45,7 +45,7 @@ export const DrawerBasic: FC = () => {
 					ref={drawerModalElement}
 					_modal
 					_align={align}
-					_label="Ich bin ein Drawer Modal"
+					_label="I am a Drawer Modal"
 					_on={{ onClose: () => console.log('Drawer Modal onClose triggered!') }}
 				>
 					<p>