Skip to content

Commit f23e64b

Browse files
deleoniodeleonio
authored
Add documentation pages and tiles for "Drawer" and "SingleSelect" components (#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)
2 parents 7b7f0bf + e477fe7 commit f23e64b

File tree

13 files changed

+188
-0
lines changed

13 files changed

+188
-0
lines changed

‎docs/30-components/drawer.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Drawer
3+
description: Beschreibung, Spezifikation und Beispiele für die Drawer-Komponente.
4+
tags:
5+
- Drawer
6+
- Beschreibung
7+
- Spezifikation
8+
- Beispiele
9+
---
10+
11+
import Readme from '../../readmes/drawer/readme.md';
12+
import { Configurator } from '@site/src/components/Configurator';
13+
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
14+
import { ExampleLink } from '@site/src/components/ExampleLink';
15+
16+
<Readme />
17+
18+
<ExampleLink component="drawer" />
19+
20+
## Live-Editor
21+
22+
<LiveEditorCompact component="drawer" />
23+
24+
## Beispiele
25+
26+
<Configurator component="drawer" sample="basic" />

‎docs/30-components/single-select.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: SingleSelect
3+
description: Beschreibung, Spezifikation und Beispiele für die SingleSelect-Komponente.
4+
tags:
5+
- SingleSelect
6+
- Beschreibung
7+
- Spezifikation
8+
- Beispiele
9+
---
10+
11+
import Readme from '../../readmes/single-select/readme.md';
12+
import { Configurator } from '@site/src/components/Configurator';
13+
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
14+
import { ExampleLink } from '@site/src/components/ExampleLink';
15+
16+
<Readme />
17+
18+
<ExampleLink component="single-select" />
19+
20+
## Live-Editor
21+
22+
<LiveEditorCompact component="single-select" />
23+
24+
## Beispiele
25+
26+
<Configurator component="single-select" sample="basic" />

‎src/components/LiveEditorCompact/ComponentDisplay.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
KolButtonLink,
1313
KolCard,
1414
KolDetails,
15+
KolDrawer,
1516
KolForm,
1617
KolHeading,
1718
KolIcon,
@@ -38,6 +39,7 @@ import {
3839
KolProgress,
3940
KolQuote,
4041
KolSelect,
42+
KolSingleSelect,
4143
KolSkipNav,
4244
KolSpin,
4345
KolSplitButton,
@@ -74,6 +76,7 @@ export function ComponentDisplay(props: Props) {
7476
'button-link': KolButtonLink,
7577
card: KolCard,
7678
details: KolDetails,
79+
drawer: KolDrawer,
7780
form: KolForm,
7881
heading: KolHeading,
7982
icon: KolIcon,
@@ -100,6 +103,7 @@ export function ComponentDisplay(props: Props) {
100103
progress: KolProgress,
101104
quote: KolQuote,
102105
select: KolSelect,
106+
'single-select': KolSingleSelect,
103107
'skip-nav': KolSkipNav,
104108
spin: KolSpin,
105109
'split-button': KolSplitButton,

‎src/components/LiveEditorCompact/types.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export type TagName =
146146
| 'button-link'
147147
| 'card'
148148
| 'details'
149+
| 'drawer'
149150
| 'form'
150151
| 'heading'
151152
| 'icon'
@@ -173,6 +174,7 @@ export type TagName =
173174
| 'progress'
174175
| 'quote'
175176
| 'select'
177+
| 'single-select'
176178
| 'skip-nav'
177179
| 'spin'
178180
| 'split-button'

‎src/components/samplePreviews/Drawer.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import { KolImage } from '@public-ui/react';
3+
4+
const Drawer = () => <KolImage _src="/assets/samples/drawer.png" _alt="" _sizes="20vw" />;
5+
6+
export default Drawer;

‎src/components/samplePreviews/SingleSelect.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { KolSingleSelect } from '@public-ui/react';
3+
import { Option, StencilUnknown } from '@public-ui/components';
4+
5+
const COUNTRY_OPTIONS = [
6+
{ label: 'Dänemark', value: 'dk' },
7+
{ label: 'Deutschland', value: 'de' },
8+
{ label: 'Dominica', value: 'dm' },
9+
];
10+
11+
const SingleSelect = () => (
12+
<KolSingleSelect
13+
_touched
14+
_label="Label"
15+
_placeholder="Placeholder"
16+
_required
17+
_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
18+
_value={'Deutschland'}
19+
/>
20+
);
21+
22+
export default SingleSelect;

‎src/components/samplePreviews/version/2.0.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ export const COMPONENTS_20 = [
4949
name: 'dialog',
5050
loadComponent: () => lazy(() => import('../Dialog')),
5151
},
52+
{
53+
name: 'drawer',
54+
loadComponent: () => lazy(() => import('../Drawer')),
55+
},
5256
{
5357
name: 'form',
5458
loadComponent: () => lazy(() => import('../Form')),
@@ -149,6 +153,10 @@ export const COMPONENTS_20 = [
149153
name: 'select',
150154
loadComponent: () => lazy(() => import('../Select')),
151155
},
156+
{
157+
name: 'single-select',
158+
loadComponent: () => lazy(() => import('../SingleSelect')),
159+
},
152160
{
153161
name: 'skip-nav',
154162
loadComponent: () => lazy(() => import('../SkipNav')),

‎src/components/samplePreviews/version/2.1.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ export const COMPONENTS_21 = [
4545
name: 'details',
4646
loadComponent: () => lazy(() => import('../Details')),
4747
},
48+
{
49+
name: 'drawer',
50+
loadComponent: () => lazy(() => import('../Drawer')),
51+
},
4852
{
4953
name: 'dialog',
5054
loadComponent: () => lazy(() => import('../Dialog')),
@@ -149,6 +153,10 @@ export const COMPONENTS_21 = [
149153
name: 'select',
150154
loadComponent: () => lazy(() => import('../Select')),
151155
},
156+
{
157+
name: 'single-select',
158+
loadComponent: () => lazy(() => import('../SingleSelect')),
159+
},
152160
{
153161
name: 'skip-nav',
154162
loadComponent: () => lazy(() => import('../SkipNav')),

‎src/components/samplePreviews/version/current.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ export const COMPONENTS_CURRENT = [
5353
name: 'dialog',
5454
loadComponent: () => lazy(() => import('../Dialog')),
5555
},
56+
{
57+
name: 'drawer',
58+
loadComponent: () => lazy(() => import('../Drawer')),
59+
},
5660
{
5761
name: 'form',
5862
loadComponent: () => lazy(() => import('../Form')),
@@ -153,6 +157,10 @@ export const COMPONENTS_CURRENT = [
153157
name: 'select',
154158
loadComponent: () => lazy(() => import('../Select')),
155159
},
160+
{
161+
name: 'single-select',
162+
loadComponent: () => lazy(() => import('../SingleSelect')),
163+
},
156164
{
157165
name: 'skip-nav',
158166
loadComponent: () => lazy(() => import('../SkipNav')),

‎static/assets/samples/drawer.png

4.67 KB
Loading

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Drawer
3+
description: Beschreibung, Spezifikation und Beispiele für die Drawer-Komponente.
4+
tags:
5+
- Drawer
6+
- Beschreibung
7+
- Spezifikation
8+
- Beispiele
9+
---
10+
11+
import Readme from '../../../readmes/drawer/readme.md';
12+
import { Configurator } from '@site/src/components/Configurator';
13+
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
14+
import { ExampleLink } from '@site/src/components/ExampleLink';
15+
16+
<Readme />
17+
18+
<ExampleLink component="drawer" />
19+
20+
## Live-Editor
21+
22+
<LiveEditorCompact component="drawer" />
23+
24+
## Beispiele
25+
26+
<Configurator component="drawer" sample="basic" />

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: SingleSelect
3+
description: Beschreibung, Spezifikation und Beispiele für die SingleSelect-Komponente.
4+
tags:
5+
- SingleSelect
6+
- Beschreibung
7+
- Spezifikation
8+
- Beispiele
9+
---
10+
11+
import Readme from '../../../readmes/single-select/readme.md';
12+
import { Configurator } from '@site/src/components/Configurator';
13+
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
14+
import { ExampleLink } from '@site/src/components/ExampleLink';
15+
16+
<Readme />
17+
18+
<ExampleLink component="single-select" />
19+
20+
## Live-Editor
21+
22+
<LiveEditorCompact component="single-select" />
23+
24+
## Beispiele
25+
26+
<Configurator component="single-select" sample="basic" />

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Drawer
3+
description: Beschreibung, Spezifikation und Beispiele für die Drawer-Komponente.
4+
tags:
5+
- Drawer
6+
- Beschreibung
7+
- Spezifikation
8+
- Beispiele
9+
---
10+
11+
import Readme from '../../../readmes/drawer/readme.md';
12+
import { Configurator } from '@site/src/components/Configurator';
13+
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
14+
import { ExampleLink } from '@site/src/components/ExampleLink';
15+
16+
<Readme />
17+
18+
<ExampleLink component="drawer" />
19+
20+
## Live-Editor
21+
22+
<LiveEditorCompact component="drawer" />
23+
24+
## Beispiele
25+
26+
<Configurator component="drawer" sample="basic" />

0 commit comments

Comments
 (0)