Skip to content

Commit c00a284

Browse files
Copilotlaske185
Copilot
and
laske185
committed
feat(preview): Add VersionPreview component
Agent-Logs-Url: https://github.com/public-ui/public-ui.github.io/sessions/54d03c96-5740-45f4-889c-bc73edbd90b8 Co-authored-by: laske185 <37439758+laske185@users.noreply.github.com>
1 parent 0c77600 commit c00a284

5 files changed

Lines changed: 65 additions & 47 deletions

File tree

‎docs/30-components/version.mdx‎

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,35 @@
11
---
22
title: Version
33
description: Beschreibung, Spezifikation und Beispiele für die Version-Komponente.
4-
tags:
5-
- Version
6-
- Beschreibung
7-
- Spezifikation
8-
- Beispiele
94
---
105

116
import Readme from '../../readmes/version/readme.md';
12-
import { Configurator } from '@site/src/components/Configurator';
13-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
147
import { ExampleLink } from '@site/src/components/ExampleLink';
8+
import VersionPreview from '@site/src/components/previews/components/Version';
159

1610
# Version
1711

1812
Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite.
1913

2014
## Konstruktion
2115

22-
### Code
23-
24-
```html
25-
<div>
26-
<kol-version _label="1.44.0"></kol-version>
27-
</div>
28-
```
29-
30-
### Beispiel
31-
32-
<kol-version _label="1.44.0"></kol-version>
16+
<VersionPreview
17+
visibleProperties={['_label']}
18+
codeCollapsable
19+
codeCollapsed
20+
/>
3321

3422
## Verwendung
3523

3624
Für die Konfiguration steht das Attribut **`_label`** zur Verfügung und nimmt einen beliebigen Text auf, dem in der Komponente ein `v` vorgestellt wird.
3725

3826
Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
3927

40-
<Readme />
41-
42-
<ExampleLink component="version" />
43-
44-
## Live-Editor
28+
# API
4529

46-
<LiveEditorCompact component="version" />
30+
<Readme />
4731

4832
## Beispiele
4933

50-
<Configurator component="version" sample="basic" />
51-
<Configurator component="version" sample="context" />
34+
<ExampleLink component="version" />
35+

‎i18n/de/code.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,9 @@
519519
"preview.component.image.label": {
520520
"message": "Beispielbild"
521521
},
522+
"preview.component.version.label": {
523+
"message": "1.44.0"
524+
},
522525
"preview.property.remove": {
523526
"message": "Entfernen"
524527
},

‎i18n/en/code.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,9 @@
519519
"preview.component.image.label": {
520520
"message": "Sample image"
521521
},
522+
"preview.component.version.label": {
523+
"message": "1.44.0"
524+
},
522525
"preview.property.remove": {
523526
"message": "Remove"
524527
},

‎i18n/en/docusaurus-plugin-content-docs/current/30-components/version.mdx‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,32 @@ description: Description, specification and examples for the Version component.
44
---
55

66
import Readme from '/readmes/version/readme.md';
7-
import { Configurator } from '@site/src/components/Configurator';
8-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
97
import { ExampleLink } from '@site/src/components/ExampleLink';
8+
import VersionPreview from '@site/src/components/previews/components/Version';
109

1110
# Version
1211

1312
The **Version** component displays short content on a colored background. The **Version** component is closely related to the **Tag** component, but only provides one attribute for configuration. It is optimized for specifying versions of a page, for example.
1413

1514
## Construction
1615

17-
### Code
18-
19-
```html
20-
<div>
21-
<kol-version _label="1.44.0"></kol-version>
22-
</div>
23-
```
24-
25-
### Example
26-
27-
<kol-version _label="1.44.0"></kol-version>
16+
<VersionPreview
17+
visibleProperties={['_label']}
18+
codeCollapsable
19+
codeCollapsed
20+
/>
2821

2922
## Usage
3023

3124
The attribute **`_label`** is available for configuration and accepts any text preceded by a `v` in the component.
3225

3326
The **version** is output as an **_inline element_** by default.
3427

35-
<Readme />
36-
37-
<ExampleLink component="version" />
38-
39-
## Live editor
28+
# API
4029

41-
<LiveEditorCompact component="version" />
30+
<Readme />
4231

4332
## Examples
4433

45-
<Configurator component="version" sample="basic" />
46-
<Configurator component="version" sample="context" />
34+
<ExampleLink component="version" />
35+

‎src/components/previews/components/Version.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import Preview, { PreviewLayout } from '../Preview';
3+
import type { JSX } from '@public-ui/components';
4+
import { KolInputText, KolVersion } from '@public-ui/react-v19';
5+
import { translate } from '@docusaurus/Translate';
6+
7+
interface VersionPreviewProps {
8+
initialProps?: JSX.KolVersion;
9+
visibleProperties?: (keyof JSX.KolVersion)[];
10+
codeCollapsable?: boolean;
11+
codeCollapsed?: boolean;
12+
}
13+
14+
const VersionPreview: React.FC<VersionPreviewProps> = (props) => {
15+
const defaultProps = React.useMemo<JSX.KolVersion>(
16+
() => ({
17+
_label: translate({ id: 'preview.component.version.label' }),
18+
}),
19+
[],
20+
);
21+
22+
return (
23+
<Preview<JSX.KolVersion>
24+
propertyComponents={{
25+
_label: <KolInputText _label="Label" />,
26+
}}
27+
initialProps={{ ...defaultProps, ...props.initialProps }}
28+
componentName="KolVersion"
29+
visibleProperties={props.visibleProperties}
30+
codeCollapsable={props.codeCollapsable}
31+
codeCollapsed={props.codeCollapsed}
32+
layout={PreviewLayout.CENTERED}
33+
>
34+
{(componentProps) => <KolVersion {...componentProps} />}
35+
</Preview>
36+
);
37+
};
38+
39+
export default VersionPreview;

0 commit comments

Comments
 (0)