Add documentation pages and tiles for "Drawer" and "SingleSelect" com…

…ponents (#246)

> [!WARNING]  
> PR darf nicht gemerged werden, bis
public-ui/kolibri#6956 _gepublished_ ist.


Das Readme für die Drawer ist fehlerhaft. Bitte siehe
[#6956](public-ui/kolibri#6956)

docs/30-components/drawer.mdx

@@ -0,0 +1,26 @@
+---
+title: Drawer
+description: Beschreibung, Spezifikation und Beispiele für die Drawer-Komponente.
+tags:
+  - Drawer
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../readmes/drawer/readme.md';
+import { Configurator } from '@site/src/components/Configurator';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+<Readme />
+
+<ExampleLink component="drawer" />
+
+## Live-Editor
+
+<LiveEditorCompact component="drawer" />
+
+## Beispiele
+
+<Configurator component="drawer" sample="basic" />

docs/30-components/single-select.mdx

@@ -0,0 +1,26 @@
+---
+title: SingleSelect
+description: Beschreibung, Spezifikation und Beispiele für die SingleSelect-Komponente.
+tags:
+  - SingleSelect
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../readmes/single-select/readme.md';
+import { Configurator } from '@site/src/components/Configurator';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+<Readme />
+
+<ExampleLink component="single-select" />
+
+## Live-Editor
+
+<LiveEditorCompact component="single-select" />
+
+## Beispiele
+
+<Configurator component="single-select" sample="basic" />

src/components/LiveEditorCompact/ComponentDisplay.tsx

@@ -12,6 +12,7 @@ import {
 	KolButtonLink,
 	KolCard,
 	KolDetails,
+	KolDrawer,
 	KolForm,
 	KolHeading,
 	KolIcon,
@@ -38,6 +39,7 @@ import {
 	KolProgress,
 	KolQuote,
 	KolSelect,
+	KolSingleSelect,
 	KolSkipNav,
 	KolSpin,
 	KolSplitButton,
@@ -74,6 +76,7 @@ export function ComponentDisplay(props: Props) {
 		'button-link': KolButtonLink,
 		card: KolCard,
 		details: KolDetails,
+		drawer: KolDrawer,
 		form: KolForm,
 		heading: KolHeading,
 		icon: KolIcon,
@@ -100,6 +103,7 @@ export function ComponentDisplay(props: Props) {
 		progress: KolProgress,
 		quote: KolQuote,
 		select: KolSelect,
+		'single-select': KolSingleSelect,
 		'skip-nav': KolSkipNav,
 		spin: KolSpin,
 		'split-button': KolSplitButton,

src/components/LiveEditorCompact/types.d.ts

@@ -146,6 +146,7 @@ export type TagName =
 	| 'button-link'
 	| 'card'
 	| 'details'
+	| 'drawer'
 	| 'form'
 	| 'heading'
 	| 'icon'
@@ -173,6 +174,7 @@ export type TagName =
 	| 'progress'
 	| 'quote'
 	| 'select'
+	| 'single-select'
 	| 'skip-nav'
 	| 'spin'
 	| 'split-button'

src/components/samplePreviews/Drawer.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolImage } from '@public-ui/react';
+
+const Drawer = () => <KolImage _src="/assets/samples/drawer.png" _alt="" _sizes="20vw" />;
+
+export default Drawer;

src/components/samplePreviews/SingleSelect.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { KolSingleSelect } from '@public-ui/react';
+import { Option, StencilUnknown } from '@public-ui/components';
+
+const COUNTRY_OPTIONS = [
+	{ label: 'Dänemark', value: 'dk' },
+	{ label: 'Deutschland', value: 'de' },
+	{ label: 'Dominica', value: 'dm' },
+];
+
+const SingleSelect = () => (
+	<KolSingleSelect
+		_touched
+		_label="Label"
+		_placeholder="Placeholder"
+		_required
+		_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+		_value={'Deutschland'}
+	/>
+);
+
+export default SingleSelect;

src/components/samplePreviews/version/2.0.tsx

@@ -49,6 +49,10 @@ export const COMPONENTS_20 = [
 		name: 'dialog',
 		loadComponent: () => lazy(() => import('../Dialog')),
 	},
+	{
+		name: 'drawer',
+		loadComponent: () => lazy(() => import('../Drawer')),
+	},
 	{
 		name: 'form',
 		loadComponent: () => lazy(() => import('../Form')),
@@ -149,6 +153,10 @@ export const COMPONENTS_20 = [
 		name: 'select',
 		loadComponent: () => lazy(() => import('../Select')),
 	},
+	{
+		name: 'single-select',
+		loadComponent: () => lazy(() => import('../SingleSelect')),
+	},
 	{
 		name: 'skip-nav',
 		loadComponent: () => lazy(() => import('../SkipNav')),

src/components/samplePreviews/version/2.1.tsx

@@ -45,6 +45,10 @@ export const COMPONENTS_21 = [
 		name: 'details',
 		loadComponent: () => lazy(() => import('../Details')),
 	},
+	{
+		name: 'drawer',
+		loadComponent: () => lazy(() => import('../Drawer')),
+	},
 	{
 		name: 'dialog',
 		loadComponent: () => lazy(() => import('../Dialog')),
@@ -149,6 +153,10 @@ export const COMPONENTS_21 = [
 		name: 'select',
 		loadComponent: () => lazy(() => import('../Select')),
 	},
+	{
+		name: 'single-select',
+		loadComponent: () => lazy(() => import('../SingleSelect')),
+	},
 	{
 		name: 'skip-nav',
 		loadComponent: () => lazy(() => import('../SkipNav')),

src/components/samplePreviews/version/current.tsx

@@ -53,6 +53,10 @@ export const COMPONENTS_CURRENT = [
 		name: 'dialog',
 		loadComponent: () => lazy(() => import('../Dialog')),
 	},
+	{
+		name: 'drawer',
+		loadComponent: () => lazy(() => import('../Drawer')),
+	},
 	{
 		name: 'form',
 		loadComponent: () => lazy(() => import('../Form')),
@@ -153,6 +157,10 @@ export const COMPONENTS_CURRENT = [
 		name: 'select',
 		loadComponent: () => lazy(() => import('../Select')),
 	},
+	{
+		name: 'single-select',
+		loadComponent: () => lazy(() => import('../SingleSelect')),
+	},
 	{
 		name: 'skip-nav',
 		loadComponent: () => lazy(() => import('../SkipNav')),

versioned_docs/version-2.0/30-components/drawer.mdx

@@ -0,0 +1,26 @@
+---
+title: Drawer
+description: Beschreibung, Spezifikation und Beispiele für die Drawer-Komponente.
+tags:
+  - Drawer
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../../readmes/drawer/readme.md';
+import { Configurator } from '@site/src/components/Configurator';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+<Readme />
+
+<ExampleLink component="drawer" />
+
+## Live-Editor
+
+<LiveEditorCompact component="drawer" />
+
+## Beispiele
+
+<Configurator component="drawer" sample="basic" />

versioned_docs/version-2.0/30-components/single-select.mdx

@@ -0,0 +1,26 @@
+---
+title: SingleSelect
+description: Beschreibung, Spezifikation und Beispiele für die SingleSelect-Komponente.
+tags:
+  - SingleSelect
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../../readmes/single-select/readme.md';
+import { Configurator } from '@site/src/components/Configurator';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+<Readme />
+
+<ExampleLink component="single-select" />
+
+## Live-Editor
+
+<LiveEditorCompact component="single-select" />
+
+## Beispiele
+
+<Configurator component="single-select" sample="basic" />

versioned_docs/version-2.1/30-components/drawer.mdx

@@ -0,0 +1,26 @@
+---
+title: Drawer
+description: Beschreibung, Spezifikation und Beispiele für die Drawer-Komponente.
+tags:
+  - Drawer
+  - Beschreibung
+  - Spezifikation
+  - Beispiele
+---
+
+import Readme from '../../../readmes/drawer/readme.md';
+import { Configurator } from '@site/src/components/Configurator';
+import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import { ExampleLink } from '@site/src/components/ExampleLink';
+
+<Readme />
+
+<ExampleLink component="drawer" />
+
+## Live-Editor
+
+<LiveEditorCompact component="drawer" />
+
+## Beispiele
+
+<Configurator component="drawer" sample="basic" />