Skip to content

Add documentation pages and tiles for "Drawer" and "SingleSelect" components #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions docs/30-components/drawer.mdx
Original file line number Diff line number Diff line change
@@ -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" />
26 changes: 26 additions & 0 deletions docs/30-components/single-select.mdx
Original file line number Diff line number Diff line change
@@ -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" />
4 changes: 4 additions & 0 deletions src/components/LiveEditorCompact/ComponentDisplay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
KolButtonLink,
KolCard,
KolDetails,
KolDrawer,
KolForm,
KolHeading,
KolIcon,
Expand All @@ -38,6 +39,7 @@ import {
KolProgress,
KolQuote,
KolSelect,
KolSingleSelect,
KolSkipNav,
KolSpin,
KolSplitButton,
Expand Down Expand Up @@ -74,6 +76,7 @@ export function ComponentDisplay(props: Props) {
'button-link': KolButtonLink,
card: KolCard,
details: KolDetails,
drawer: KolDrawer,
form: KolForm,
heading: KolHeading,
icon: KolIcon,
Expand All @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions src/components/LiveEditorCompact/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export type TagName =
| 'button-link'
| 'card'
| 'details'
| 'drawer'
| 'form'
| 'heading'
| 'icon'
Expand Down Expand Up @@ -173,6 +174,7 @@ export type TagName =
| 'progress'
| 'quote'
| 'select'
| 'single-select'
| 'skip-nav'
| 'spin'
| 'split-button'
Expand Down
6 changes: 6 additions & 0 deletions src/components/samplePreviews/Drawer.tsx
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 22 additions & 0 deletions src/components/samplePreviews/SingleSelect.tsx
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions src/components/samplePreviews/version/2.0.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')),
Expand Down Expand Up @@ -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')),
Expand Down
8 changes: 8 additions & 0 deletions src/components/samplePreviews/version/2.1.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')),
Expand Down Expand Up @@ -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')),
Expand Down
8 changes: 8 additions & 0 deletions src/components/samplePreviews/version/current.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')),
Expand Down Expand Up @@ -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')),
Expand Down
Binary file added static/assets/samples/drawer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions versioned_docs/version-2.0/30-components/drawer.mdx
Original file line number Diff line number Diff line change
@@ -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" />
26 changes: 26 additions & 0 deletions versioned_docs/version-2.0/30-components/single-select.mdx
Original file line number Diff line number Diff line change
@@ -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" />
26 changes: 26 additions & 0 deletions versioned_docs/version-2.1/30-components/drawer.mdx
Original file line number Diff line number Diff line change
@@ -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" />