@public-ui/sample-react 2.1.4 → 2.1.5-rc.2

package/src/components/link/target.tsx

@@ -8,15 +8,32 @@ import { SampleDescription } from '../SampleDescription';
 export const LinkTarget: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind sechs Links mit verschiedenen beschriebenen Weiterleitungen.</p>
+			<p>
+				This sample shows KolLink with different <code>_target</code>-properties.
+			</p>
 		</SampleDescription>
+
 		<div className="d-flex gap-4">
-			<KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
-			<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-			<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
-			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
-			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-			<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+			<ul>
+				<li>
+					<KolLink _href="#/back-page" _label="Link without target" />
+				</li>
+				<li>
+					<KolLink _href="#/back-page" _label="Link with target (_self)" _target="_self" />
+				</li>
+				<li>
+					<KolLink _href="#/back-page" _label="Link with target (_blank)" _target="_blank" />
+				</li>
+				<li>
+					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link without target" />
+				</li>
+				<li>
+					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_self)" _target="_self" />
+				</li>
+				<li>
+					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+				</li>
+			</ul>
 		</div>
 	</>
 );

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

@@ -12,8 +12,9 @@ const ARGS = {
 export const LinkButtonBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind fünf Buttons. Nach anklicken erscheint ein Popup mit &apos;Klick!&apos;</p>
+			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
 		</SampleDescription>
+
 		<div className="grid gap-14">
 			<div className="flex flex-wrap gap-14">
 				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLinkGroup } from '@public-ui/react';
+import { KolBadge, KolLinkGroup } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 const links = [
@@ -12,8 +12,12 @@ const links = [
 export const LinkGroupBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist eine LinkGroup bestehend aus drei Links die zu https://www.w3.org/ weiterleiten.</p>
+			<p>KolLinkGroup renders a list of the given links.</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
 		</SampleDescription>
+
 		<KolLinkGroup _links={links} _label="" />
 	</>
 );

package/src/components/link-group/horizontal.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLinkGroup } from '@public-ui/react';
+import { KolBadge, KolLinkGroup } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 const links = [
@@ -12,8 +12,12 @@ const links = [
 export const LinkGroupHorizontal: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist eine horizontale Linkgroup bestehend aus drei Links die zu https://www.w3.org/ weiterleiten.</p>
+			<p>KolLinkGroup renders a list of the given links. This sample shows the horizontal alignment.</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
 		</SampleDescription>
+
 		<KolLinkGroup _links={links} _orientation="horizontal" _label="" />
 	</>
 );

package/src/components/modal/basic.tsx

@@ -11,16 +11,17 @@ export const ModalBasic: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					Hier ist ein Beispiel für ein Modal. Es lässt sich öffnen. Dadurch erscheint ein Popup mit Text und &apos;Schließen&apos; Button. Durch anklicken des
-					&apos;Schließen&apos; Button, schließt sich das Modal wieder.
+					KolModal renders content in a popover, disabling interactivity with elements behind it. In the sample, the modal can be opened and closed using the
+					buttons &quot;Open modal&quot; and &quot;Close modal&quot;.
 				</p>
 			</SampleDescription>
+
 			<div>
 				<KolModal _label="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-					<KolCard _label="Ich bin ein Modal" style={{ width: '100%' }}>
+					<KolCard _label="I am a modal." style={{ width: '100%' }}>
 						<div>
 							<KolButton
-								_label="Schließen"
+								_label="Close modal"
 								_on={{
 									onClick: () => {
 										if (modalElement?.current) {
@@ -33,7 +34,7 @@ export const ModalBasic: FC = () => {
 					</KolCard>
 				</KolModal>
 				<KolButton
-					_label="Modal öffnen"
+					_label="Open modal"
 					_on={{
 						onClick: (event: Event) => {
 							if (modalElement?.current) {

package/src/components/nav/aria-current.tsx

@@ -9,8 +9,8 @@ export const NavAriaCurrent: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				Dieses Beispiel zeigt eine Navigation, bei welcher der zweite Link auf die aktuelle Seite verweist. Dadurch wird ihm automatisch das Attribut{' '}
-				<code>aria-current=&quot;page&quot;</code> zugewiesen.
+				This sample shows KolNav with a link to the current page. This makes the component automatically assign <code>aria-current=&quot;page&quot;</code>
+				to it.
 			</p>
 		</SampleDescription>
 
@@ -23,8 +23,8 @@ export const NavAriaCurrent: FC = () => (
 					_href: '#/back-page',
 				},
 				{
-					_label: 'Nav - aria-current (Aktuelle Seite)',
-					_href: '#/back-page',
+					_label: 'Nav - aria-current (Current page)',
+					_href: '#/nav/aria-current', // Please don't change this link. It's necessary to be the "current page" for the sample.
 					_active: true,
 				},
 			]}

package/src/components/nav/basic.tsx

@@ -12,10 +12,11 @@ export const NavBasic: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					Hier ist ein Beispiel für eine Navigation. Durch anklicken des rechten + Symbols kann die Navigation erweitert und Untermenüs geöffnet werden. Durch
-					das anklicken des {'<'} Symbols kann die Navigation minimiert werden.
+					KolNav renders a navigation. In this sample, icons for the navigation elements can be shown or hidden using a checkbox and the navigation can be
+					collapsed, showing only icons and no text labels.
 				</p>
 			</SampleDescription>
+
 			<KolInputCheckbox
 				_label="Show icons when expanded"
 				_checked={hasIconsWhenExpanded}

package/src/components/nav/horizontal.tsx

@@ -7,11 +7,9 @@ import type { FC } from 'react';
 export const NavHorizontal: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier ist ein Beispiel für eine horizontale Navigation. Durch anklicken des rechten + Symbols kann die Navigation erweitert und Untermenüs geöffnet
-				werden.
-			</p>
+			<p>This sample shows KolNav with horizontal alignment.</p>
 		</SampleDescription>
+
 		<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
 	</>
 );

package/src/components/pagination/basic.tsx

@@ -9,21 +9,23 @@ export const PaginationBasic: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				Hier sind fünf Beispiele für eine Paginierung oder Seitennummerierung. Unten Rechts kann zwischen zwei Optionen für die Seitengröße gewechselt werden.
+				KolPagination renders a pagination for datasets. The sample shows the different states and variations of a pagination and the option to change the page
+				size.
 			</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
-			<KolPagination _max={316514} _page={15475} _siblingCount={3} _label="Test Paginierung 1" _on={{}} />
-			<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
-			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
-			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
+			<KolPagination _max={316514} _page={15475} _siblingCount={3} _label="Test pagination 1" _on={{}} />
+			<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label="Test pagination 2" _on={{}} />
+			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test pagination 3" _on={{}} />
+			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test pagination 4" _on={{}} />
 			<KolPagination
 				_max={4}
 				_page={6}
 				_siblingCount={0}
 				_boundaryCount={2}
 				_hasButtons={false}
-				_label="Test Paginierung 4"
+				_label="Test pagination 4"
 				_on={{}}
 				_pageSizeOptions={[10, 100]}
 			/>

package/src/components/progress/basic.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const ProgressBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist ein Fortschrittsbalken und Fortschrittskreis. Der Fortschritt verändert sich nicht.</p>
+			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
 			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>

package/src/components/quote/basic.tsx

@@ -7,8 +7,9 @@ import { SampleDescription } from '../SampleDescription';
 export const QuoteBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist ein Beispiel für ein Zitat.</p>
+			<p>KolQuote renders a quote with optional citation. This sample shows a quote in the variant &quot;inline&quot; with a link for citation.</p>
 		</SampleDescription>
+
 		<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
 	</>
 );

package/src/components/quote/block.tsx

@@ -7,11 +7,9 @@ import { SampleDescription } from '../SampleDescription';
 export const QuoteBlock: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier ist ein Beispiel für ein Zitat. Es wird eine Quelle durch ein Label angegeben. Durch anklicken des Labels wird man auf die Quellenwebseite
-				weitergeleitet.
-			</p>
+			<p>This sample shows a quote in the &quot;block&quot; variant.</p>
 		</SampleDescription>
+
 		<KolQuote
 			_label="RFC 1149"
 			_href="https://datatracker.ietf.org/doc/html/rfc1149"

package/src/components/select/basic.tsx

@@ -8,11 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const SelectBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier sind Beispiele für verschiedene Auswahlfelder. Es gibt die Varianten Dropdownmenü und Liste mit Scrollbar. Es kann nur ein Element gleichzeitig
-				ausgewählt werden.
-			</p>
+			<p>KolSelect renders a select field. The sample shows KolSelect in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={SelectVariants} />
 	</>
 );

package/src/components/skip-nav/basic.tsx

@@ -8,26 +8,24 @@ import { SampleDescription } from '../SampleDescription';
 export const SkipNavBasic: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
-			<p>
-				<b>Links sind unsichtbar geschaltet</b>
-				<br />
-				Um die Links zu sehen, am besten einmal in diesen Bereich klicken und Tab-Taste drücken.
-			</p>
+			<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
+			<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
 		</SampleDescription>
+
 		<KolSkipNav
 			_label="Versteckte Navigation"
 			_links={[
 				{
 					_label: 'Zum Anfang',
-					_href: '#header',
+					_href: '#/back-page',
 				},
 				{
 					_label: 'Zum Formular',
-					_href: '#form',
+					_href: '#/back-page',
 				},
 				{
 					_label: 'Zum Ende',
-					_href: '#footer',
+					_href: '#/back-page',
 				},
 			]}
 		></KolSkipNav>

package/src/components/spin/basic.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const SpinBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist eine drehende Animation in Deutschlandfarben.</p>
+			<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot;.</p>
 		</SampleDescription>
+
 		<KolSpin _show />
 	</>
 );

package/src/components/spin/custom.tsx

@@ -11,10 +11,11 @@ export const SpinCustom: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				Hier ist ein Beispiel für eine custom Lade-Animation. Mittels des Expert-Slots ist es möglich, eigene Animationen einzufügen. Diese kann nach eigenen
-				Vorstellungen angepasst werden und ist nicht zwingend barrierefrei.
+				This sample shows a custom loading animation. Using the expert slot, it is possible to insert custom animations. Custom animations are not necessarily
+				barrier-free.
 			</p>
 		</SampleDescription>
+
 		<KolSpin _show _variant="none">
 			<span slot="expert" className="loader"></span>
 		</KolSpin>

package/src/components/spin/cycle.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const SpinCycle: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist eine drehende Animation in verschiedenen Farben.</p>
+			<p>This sample shows the KolSpin variant &quot;cycle&quot;.</p>
 		</SampleDescription>
+
 		<KolSpin _show _variant="cycle" />
 	</>
 );

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

@@ -20,10 +20,11 @@ export const SplitButtonBasic: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					Hier sind zwei Dropdownmenüs. Das obere Beispiel lässt sich nur durch drücken des Pfeils öffnen. Ansonsten erscheint eine Meldung. Beim unteren
-					Beispiel kann durch drücken auf das Icon und des Pfeils das Menü geöffnet und geschlossen werden.
+					SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon. The first sample shows the button with an
+					assigned action. In the second sample no action is assigned and clicking the button opens the context menu instead.
 				</p>
 			</SampleDescription>
+
 			<div className="flex gap-4">
 				<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
 					Dropdown-Inhalt

package/src/components/table/column-alignment.tsx

@@ -10,7 +10,9 @@ const genericNonSorter = <T,>(data: T): T => data;
 
 export const TableColumnAlignment: FC = () => (
 	<>
-		<SampleDescription>Table with columns headers and data in different text alignments.</SampleDescription>
+		<SampleDescription>
+			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
+		</SampleDescription>
 
 		<KolHeading _label="Simple table" _level={3}></KolHeading>
 		<KolTable

package/src/components/table/complex-headers.tsx

@@ -5,7 +5,9 @@ import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (
 	<>
-		<SampleDescription>Table using vertical and horizontal headers, applying colspan and rowspan.</SampleDescription>
+		<SampleDescription>
+			<p>This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.</p>
+		</SampleDescription>
 
 		<KolTable
 			_label="Business hours"

package/src/components/table/horizontal-scrollbar.tsx

@@ -23,8 +23,10 @@ export const TableHorizontalScrollbar: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				Table examples with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and to scroll it
-				using arrow keys.
+				<p>
+					This sample shows KolTable with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and
+					to scroll it using arrow keys.
+				</p>
 			</SampleDescription>
 
 			<KolHeading _label="Table with scrollbar" _level={2} />

package/src/components/table/pagination-position.tsx

@@ -22,7 +22,10 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 
 export const PaginationPosition: FC = () => (
 	<div className="grid gap-14">
-		<SampleDescription>Tables with different pagination positions.</SampleDescription>
+		<SampleDescription>
+			<p>This sample shows KolTable with different pagination positions.</p>
+		</SampleDescription>
+
 		<section>
 			<h2>Table with pagination at the bottom.</h2>
 			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>

package/src/components/table/render-cell.tsx

@@ -101,8 +101,9 @@ const HEADERS: KoliBriTableHeaders = {
 export const TableRenderCell: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample simulates the usage of React render functions for the table column contents.</p>
+			<p>This sample shows KolTable using React render functions for the cell contents.</p>
 		</SampleDescription>
+
 		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
 	</>
 );

package/src/components/table/routes.ts

@@ -1,6 +1,5 @@
 import { Routes } from '../../shares/types';
 import { PaginationPosition } from './pagination-position';
-import { TableBadgeSize } from './badge-size';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
 import { TableHorizontalScrollbar } from './horizontal-scrollbar';
@@ -14,7 +13,6 @@ import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
-		'badge-size': TableBadgeSize,
 		'column-alignment': TableColumnAlignment,
 		'complex-headers': TableComplexHeaders,
 		'horizontal-scrollbar': TableHorizontalScrollbar,

package/src/components/table/sort-data.tsx

@@ -56,10 +56,7 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 export const TableSortData: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier ist eine Tabelle, die durch anklicken des Knopfes sortiert werden kann. Entweder nach der Reihenfolge, nach dem ältesten Datum oder nach dem
-				jüngsten Datum.
-			</p>
+			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
 		</SampleDescription>
 
 		<h2>Vertical</h2>

package/src/components/table/stateful-with-selection.tsx

@@ -45,7 +45,9 @@ export const TableStatefulWithSelection: FC = () => {
 
 	return (
 		<>
-			<SampleDescription>KolTableStateful with selection</SampleDescription>
+			<SampleDescription>
+				<p>This sample shows KolTableStateful with checkboxes for selection enabled.</p>
+			</SampleDescription>
 
 			<KolTableStateful
 				_label="Table with selection checkboxes"

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

@@ -38,7 +38,9 @@ export const TableStatelessWithSelection: FC = () => {
 
 	return (
 		<>
-			<SampleDescription>KolTableStateless with selection</SampleDescription>
+			<SampleDescription>
+				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
+			</SampleDescription>
 
 			<KolTableStateless
 				_label="Table with selection checkboxes"

package/src/components/table/stateless.tsx

@@ -7,7 +7,9 @@ const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Ex
 
 export const TableStateless: FC = () => (
 	<>
-		<SampleDescription>Direct usage of KolTableStateless</SampleDescription>
+		<SampleDescription>
+			<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>
+		</SampleDescription>
 
 		<KolTableStateless
 			_label="Table for demonstration purposes"

package/src/components/table/with-footer.tsx

@@ -5,7 +5,9 @@ import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (
 	<>
-		<SampleDescription>Table with footer data</SampleDescription>
+		<SampleDescription>
+			<p>This sample shows KolTable with footer data.</p>
+		</SampleDescription>
 
 		<KolTable
 			_label="Business hours"

package/src/components/table/with-pagination.tsx

@@ -23,10 +23,7 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Durch das Navigieren der Seitenzahlen unten kann die Tabelle umgeblättert werden. Stattdessen kann auch die komplette Tabelle mit Änderung der Einträge
-				pro Seite angezeigt werden.
-			</p>
+			<p>This sample shows how KolTable can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div>
 			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>

package/src/components/tabs/basic.tsx

@@ -37,22 +37,21 @@ const tabsWithoutIcons = tabs.map((tab) => ({
 export const TabsBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind verschiedene Varianten von Tabs. Nur der Inhalt eines Tabs wird in jeder Zeile angezeigt.</p>
+			<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>
 		</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>
-			</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>
-			</KolTabs>
-		</>
+		<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>
+		</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>
+		</KolTabs>
 	</>
 );

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

@@ -30,7 +30,7 @@ const tabs = [
 export const TabsIconsOnly: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind verschiedene Varianten von Tabs mit Icons. Nur der Inhalt eines Tabs wird gleichzeitig angezeigt.</p>
+			<p>This sample shows KolTabs with hidden labels.</p>
 		</SampleDescription>
 
 		<KolTabs _label="Tabs with icons" _tabs={tabs}>

package/src/components/textarea/adjust-height.tsx

@@ -1,8 +1,7 @@
+import type { FC } from 'react';
 import React from 'react';
 
 import { KolForm, KolTextarea } from '@public-ui/react';
-
-import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
@@ -15,15 +14,13 @@ sit amet.`;
 export const TextareaAdjustHeight: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind zwei Freitextfelder. Im oberen kann die Größe des Textfelds angepasst werden, im unteren nicht.</p>
+			<p>
+				This sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.
+			</p>
 		</SampleDescription>
-		<KolForm className="row">
-			<div className="col-sm-6">
-				<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
-			</div>
-			<div className="col-sm-6">
-				<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
-			</div>
+
+		<KolForm>
+			<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
 		</KolForm>
 	</>
 );

package/src/components/textarea/basic.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const TextareaBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind Freitextfelder die mithilfe des Reglers unten Rechts im jeweiligen Feld in ihrer Größe angepasst werden können.</p>
+			<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={TextareaVariants} />
 	</>
 );