Skip to content

Commit 83dbf80

Browse files
authored
Upgrade Documentation to KoliBri 3 (#296)
2 parents c40939d + 60af4fd commit 83dbf80

File tree

27 files changed

+215
-167
lines changed

27 files changed

+215
-167
lines changed

blog/2023-02-02.mdx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ authors: deleonio
44
tags: ['theme', 'style', 'styleguide', 'corporate design', 'design system']
55
---
66

7-
import { KolLink, KolTable } from '@public-ui/react';
7+
import { KolLink, KolTableStateful } from '@public-ui/react';
88

99
# Eigene Themes unabhängig umsetzen
1010

@@ -17,7 +17,7 @@ sind, können eigene Themes unabhängig erstellt werden.
1717
KoliBri wurde als internes Projekt des ITZBund realisiert und hat sich natürlich dabei anfangs vor allem auf die Bedürfnisse interner
1818
Projekte fokussiert. Hierbei sind in erster Linie zahlreiche Themes umgesetzt worden, die nur intern Anwendung finden.
1919

20-
<KolTable
20+
<KolTableStateful
2121
_label="Liste ausgewählter internen Themes"
2222
_headers={{
2323
horizontal: [
@@ -58,7 +58,7 @@ Projekte fokussiert. Hierbei sind in erster Linie zahlreiche Themes umgesetzt wo
5858

5959
Darüber hinaus wurden auch einige Themes zum Zwecke der Verbesserung umgesetzt, die als Proof-of-Concepts (PoC) dienten.
6060

61-
<KolTable
61+
<KolTableStateful
6262
_label="Liste ausgewählter PoC-Themes"
6363
_headers={{
6464
horizontal: [
@@ -112,9 +112,10 @@ im Projekt-Verzeichnis erweitert und die neue Abhängigkeit in die <code>package
112112

113113
**`.npmrc`** (kann mit im Projekt-Verzeichnis liegen oder im Home-Verzeichnis des Benutzers)
114114

115-
```bash
116-
@itzbund:registry=https://<URL-zur-internen-registry>
117-
```
115+
[//]: # (Not using Markdown syntax here because the angle brackets lead to escape issues in MDX)
116+
<pre><code>
117+
@itzbund:registry=https://&lt;URL-zur-internen-registry&gt;
118+
</code></pre>
118119

119120
**`package.json`** (im Projekt-Verzeichnis)
120121

docs/00-welcome.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ tags:
88
---
99

1010

11-
import {KolAlert, KolKolibri, KolLink, KolLogo,} from '@public-ui/react';
11+
import {KolAlert, KolKolibri, KolLink,} from '@public-ui/react';
12+
import {ITZLogo} from '@site/src/components/ITZLogo';
1213
import {KoliBri} from '@site/src/components/KoliBri';
1314
import {KoliBriAbbr} from '@site/src/components/KoliBriAbbr';
1415
import {WelcomeQualityTable, WelcomeSupportTable} from '@site/src/components/docs/Welcome';
1516

1617
<div className="flex gap-4">
17-
<KolLogo
18-
_org="ITZBund"
18+
<ITZLogo
1919
style={{
2020
display: 'block',
2121
width: '175px',

docs/10-get-started/5-frameworks.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { KolAlert, KolLink, KolTable } from '@public-ui/react';
1+
import { KolAlert, KolLink, KolTableStateful } from '@public-ui/react';
22

33
# Frameworks
44

@@ -10,7 +10,7 @@ import { KolAlert, KolLink, KolTable } from '@public-ui/react';
1010

1111
Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <KolLink _label="NPM-Registry" _href="https://www.npmjs.com/search?q=%40public-ui" _target="_blank" /> versioniert bereitgestellt.
1212

13-
<KolTable
13+
<KolTableStateful
1414
_label="Übersicht der Pakete"
1515
_headers={{
1616
horizontal: [
@@ -100,7 +100,7 @@ Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <KolLink _label="N
100100
desc: 'Dieses Paket ist veraltet, weil Angular versionsspezifische Adapter benötigt.',
101101
},
102102
]}
103-
></KolTable>
103+
></KolTableStateful>
104104

105105
## Integrationsvarianten
106106

docs/20-concepts/05-styling/34-theming.mdx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { KolAlert, KolDetails, KolIndentedText, KolLink, } from '@public-ui/react';
2-
import { KoliBri } from '@site/src/components/KoliBri';
3-
import { Mermaid } from '@site/src/components/Mermaid';
1+
import {KolAlert, KolDetails, KolLink,} from '@public-ui/react';
2+
import {KoliBri} from '@site/src/components/KoliBri';
3+
import {Mermaid} from '@site/src/components/Mermaid';
4+
import {IndentedText} from '@site/src/components/IndentedText';
45

56
# Theming
67

@@ -18,14 +19,13 @@ import { Mermaid } from '@site/src/components/Mermaid';
1819
/> umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese Komponenten
1920
durch die grau-gestrichelten Formen in der Mitte dargestellt.
2021
</p>
21-
<p>
22-
<KolIndentedText>
23-
<strong>
24-
1. KoliBri-Komponenten könnten als Basis für alle Design Systeme oder Komponenten-Bibliotheken wiederverwendet
25-
werden.
26-
</strong>
27-
</KolIndentedText>
28-
</p>
22+
23+
<IndentedText>
24+
<strong>
25+
1. KoliBri-Komponenten könnten als Basis für alle Design Systeme oder Komponenten-Bibliotheken wiederverwendet
26+
werden.
27+
</strong>
28+
</IndentedText>
2929

3030
<img
3131
src="/assets/abgrenzung.jpg"
@@ -63,15 +63,15 @@ import { Mermaid } from '@site/src/components/Mermaid';
6363
erkennbar, wie die CSS-Properties (Design Token) immer mehr werden.
6464
</p>
6565
<p>
66-
<KolIndentedText>
66+
<IndentedText>
6767
<strong>
6868
2. Wir haben das ganze CSS vollständig von den Components entkoppelt (wie <KolLink
6969
_label="Styled-Components"
7070
_href="https://styled-components.com"
7171
_target="_blank"
7272
/>).
7373
</strong>
74-
</KolIndentedText>
74+
</IndentedText>
7575
</p>
7676
<p>
7777
Mithilfe des Designers kann ein „Mandant“ die Komponenten einzeln und vollständig unabhängig voneinander mit der
@@ -80,13 +80,13 @@ import { Mermaid } from '@site/src/components/Mermaid';
8080
und pflegbaren Scope.
8181
</p>
8282
<p>
83-
<KolIndentedText>
83+
<IndentedText>
8484
<strong>
8585
3. KoliBri ermöglicht die Wiederverwendung getesteter, barrierefreier und robuster Komponenten(-konstruktionen)
8686
bei nahezu individuellem Design und stellt damit einen im Rahmen der Barrierefreiheit frei gestaltbaren
8787
HTML-Standard dar.
8888
</strong>
89-
</KolIndentedText>
89+
</IndentedText>
9090
</p>
9191
<p>
9292
Im folgenden Diagramm wird ein beispielhafter Design-Prozess mit KoliBri dargestellt, der vollkommen unabhängig vom

docs/99-impressum.mdx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@ tags:
55
- Rechtliches
66
---
77

8-
import {KolKolibri, KolLink, KolLogo} from '@public-ui/react';
9-
import { KoliBri } from '@site/src/components/KoliBri';
10-
import { translate } from '@docusaurus/Translate';
8+
import {ITZLogo} from '@site/src/components/ITZLogo';
9+
import {KoliBri} from '@site/src/components/KoliBri';
10+
import {KolKolibri, KolLink} from '@public-ui/react';
1111

1212
<div className="flex gap-4">
13-
<KolLogo
14-
_org="ITZBund"
13+
<ITZLogo
1514
style={{
1615
display: 'block',
1716
width: '175px',

i18n/en/docusaurus-plugin-content-docs/current/00-welcome.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ tags:
88
---
99

1010

11-
import {KolAlert, KolKolibri, KolLink, KolLogo,} from '@public-ui/react';
11+
import {KolAlert, KolKolibri, KolLink,} from '@public-ui/react';
12+
import {ITZLogo} from '@site/src/components/ITZLogo';
1213
import {KoliBri} from '@site/src/components/KoliBri';
1314
import {KoliBriAbbr} from '@site/src/components/KoliBriAbbr';
1415
import {WelcomeQualityTable, WelcomeSupportTable} from '@site/src/components/docs/Welcome';
1516

1617
<div className="flex gap-4">
17-
<KolLogo
18-
_org="ITZBund"
18+
<ITZLogo
1919
style={{
2020
display: 'block',
2121
width: '175px',

i18n/en/docusaurus-plugin-content-docs/current/10-get-started/5-frameworks.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { KolAlert, KolLink, KolTable } from '@public-ui/react';
1+
import { KolAlert, KolLink, KolTableStateful } from '@public-ui/react';
22

33
# Frameworks
44

@@ -10,7 +10,7 @@ import { KolAlert, KolLink, KolTable } from '@public-ui/react';
1010

1111
All packages/artifacts of KoliBri are provided versioned in the public <KolLink _label="NPM-Registry" _href="https://www.npmjs.com/search?q=%40public-ui" _target="_blank" />.
1212

13-
<KolTable
13+
<KolTableStateful
1414
_caption="Packages overview"
1515
_headers={{
1616
horizontal: [
@@ -100,7 +100,7 @@ All packages/artifacts of KoliBri are provided versioned in the public <KolLink
100100
desc: 'This package is deprecated because Angular requires version-specific adapters.',
101101
},
102102
]}
103-
></KolTable>
103+
></KolTableStateful>
104104

105105
## Integration variants
106106

i18n/en/docusaurus-plugin-content-docs/current/20-concepts/05-styling/34-theming.mdx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import {KolAlert, KolDetails, KolIndentedText, KolLink,} from '@public-ui/react';
1+
import {KolAlert, KolDetails, KolLink,} from '@public-ui/react';
22
import {KoliBri} from '@site/src/components/KoliBri';
33
import {Mermaid} from '@site/src/components/Mermaid';
4+
import {IndentedText} from '@site/src/components/IndentedText';
45

56
# Theming
67

@@ -13,9 +14,9 @@ import {Mermaid} from '@site/src/components/Mermaid';
1314
and are therefore reusable in all web-based projects. In the following figure, these components are represented by the gray-dashed shapes in the center.
1415
</p>
1516
<p>
16-
<KolIndentedText>
17+
<IndentedText>
1718
<strong>1. KoliBri components could be reused as a basis for all design systems or component libraries.</strong>
18-
</KolIndentedText>
19+
</IndentedText>
1920
</p>
2021

2122
<img
@@ -30,24 +31,24 @@ import {Mermaid} from '@site/src/components/Mermaid';
3031
case of doubt, a separate property would have to be provided for each customizability. The example of the <KolLink _label="MUI-Button CSS" _href="https://mui.com/material-ui/api/button/#css" _target="_blank" /> shows well how the CSS properties (design tokens) become more and more.
3132
</p>
3233
<p>
33-
<KolIndentedText>
34+
<IndentedText>
3435
<strong>
3536
2. We have completely decoupled the whole CSS from the components (like <KolLink _label="Styled-Components" _href="https://styled-components.com" _target="_blank" />).
3637
</strong>
37-
</KolIndentedText>
38+
</IndentedText>
3839
</p>
3940
<p>
4041
Using the designer, a “client” can design the components individually and completely independently with all the CSS
4142
freedom. Within a “client” theme, custom CSS properties can be introduced. The use of CSS properties (design tokens)
4243
is thus preserved at the theme level, but with a much smaller and maintainable scope.
4344
</p>
4445
<p>
45-
<KolIndentedText>
46+
<IndentedText>
4647
<strong>
4748
3. KoliBri allows the reuse of tested, accessible and robust components (constructions) with almost individual
4849
design and thus represents a freely customizable HTML standard in the context of accessibility.
4950
</strong>
50-
</KolIndentedText>
51+
</IndentedText>
5152
</p>
5253
<p>
5354
The following diagram shows an exemplary design process with KoliBri, which can be applied completely independent of

i18n/en/docusaurus-plugin-content-docs/current/99-impressum.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ tags:
66
---
77

88

9-
import {KolKolibri, KolLink, KolLogo} from '@public-ui/react';
9+
import {ITZLogo} from '@site/src/components/ITZLogo';
1010
import {KoliBri} from '@site/src/components/KoliBri';
11+
import {KolKolibri, KolLink} from '@public-ui/react';
1112

1213
<div className="flex gap-4">
13-
<KolLogo
14-
_org="ITZBund"
14+
<ITZLogo
1515
style={{
1616
display: 'block',
1717
width: '175px',

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@
4141
"@leanup/form": "1.3.54",
4242
"@mdx-js/react": "3.1.0",
4343
"@monaco-editor/react": "4.7.0",
44-
"@public-ui/components": "2.2.7",
45-
"@public-ui/react": "2.2.7",
46-
"@public-ui/theme-default": "2.2.7",
44+
"@public-ui/components": "3.0.0-rc.6",
45+
"@public-ui/react": "3.0.0-rc.6",
46+
"@public-ui/theme-default": "3.0.0-rc.6",
4747
"classnames": "2.5.1",
4848
"docusaurus-lunr-search": "3.6.1",
4949
"mermaid": "11.4.1",

0 commit comments

Comments
 (0)