Skip to content

Commit c4153da

Browse files
committed
(#231) Resolved bugs in playground and theming pages
1 parent 8e9824d commit c4153da

File tree

17 files changed

+182
-256
lines changed

17 files changed

+182
-256
lines changed

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

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,26 @@ import { Mermaid } from '@site/src/components/Mermaid';
1717

1818
# Theming
1919

20-
<kol-alert _type="info">
21-
<img
22-
width="100%"
23-
src="/assets/theme-switch.png"
24-
alt="Zeigt, wo der Schalter zum Umschalten des Themes in der Toolbar ist."
25-
/>
26-
<p>
27-
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>Über den Schalter in der Toolbar oben können Sie das Theme
28-
von unserer Seite (KoliBri) umschalten.
29-
</p>
30-
</kol-alert>
31-
20+
<KolAlert _type="info" _variant="card">
21+
<p>Über den Schalter in der Toolbar oben können Sie das Theme von unserer Seite (KoliBri) umschalten.</p>
22+
</KolAlert>
23+
<br />
24+
<img
25+
width="100%"
26+
src="/assets/theme-switch.png"
27+
alt="Zeigt, wo der Schalter zum Umschalten des Themes in der Toolbar ist."
28+
/>
3229
<br />
3330

3431
<p>
35-
Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf{' '}
36-
<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der
37-
assistiven Unterstützung sind. Alle Komponenten werden dabei als{' '}
38-
<KolLink
32+
Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf
33+
<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der assistiven
34+
Unterstützung sind. Alle Komponenten werden dabei als <KolLink
3935
_href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de"
4036
_target="mozilla"
4137
_label={`Web Components`}
42-
/>{' '}
43-
umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese
44-
Komponenten durch die grau-gestrichelten Formen in der Mitte dargestellt.
38+
/> umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese Komponenten
39+
durch die grau-gestrichelten Formen in der Mitte dargestellt.
4540
</p>
4641
<p>
4742
<KolIndentedText>
@@ -78,7 +73,7 @@ import { Mermaid } from '@site/src/components/Mermaid';
7873
<p>
7974
<KolIndentedText>
8075
<strong>
81-
2. Wir haben das ganze CSS vollständig von den Components entkoppelt (like{' '}
76+
2. Wir haben das ganze CSS vollständig von den Components entkoppelt (wie{' '}
8277
<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`} />
8378
).
8479
</strong>

i18n/en/docusaurus-plugin-content-docs/current/20-concepts/02-properties.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
2727

2828
The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
2929

30-
<PropertiesDeprecated />
30+
<PropertiesDeprecated lang="en" />
3131

3232
## Obsolete components
3333

3434
The components listed in the following table will be superseded or removed.
3535

36-
<ComponentsDeprecated />
36+
<ComponentsDeprecated lang="en" />

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

Lines changed: 18 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,22 @@ import { Mermaid } from '@site/src/components/Mermaid';
1717

1818
# Theming
1919

20-
<kol-alert _type="info">
21-
<img
22-
width="100%"
23-
src="/assets/theme-switch.png"
24-
alt="Shows where the switch for switching the theme is in the toolbar."
25-
/>
20+
<KolAlert _type="info" _variant="card">
2621
<p>
27-
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>You can switch the theme from our site (KoliBri) using the
28-
switch in the toolbar above.
22+
You can switch the theme from our site (KoliBri) using the switch in the toolbar above.
2923
</p>
30-
</kol-alert>
31-
24+
</KolAlert>
25+
<br />
26+
<img
27+
width="100%"
28+
src="/assets/theme-switch.png"
29+
alt="Shows where the switch for switching the theme is in the toolbar."
30+
/>
3231
<br />
3332

3433
<p>
35-
The unique feature of <KoliBri /> is the <strong>reference implementation</strong> of components that are{' '}
36-
<strong>semantically W3C- and WCAG-compliant</strong> from the ground up and thus{' '}
37-
<strong>completely accessible</strong> regarding assistive support. All components are implemented as{' '}
38-
<KolLink _href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de" _target="mozilla">
39-
Web Components
40-
</KolLink>{' '}
41-
and are therefore reusable in all web-based projects. In the following figure, these components are represented by the
42-
gray-dashed shapes in the center.
34+
The unique feature of <KoliBri /> is the <strong>reference implementation</strong> of components that are <strong>semantically W3C- and WCAG-compliant</strong> from the ground up and thus <strong>completely accessible</strong> regarding assistive support. All components are implemented as <KolLink _href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de" _target="mozilla">Web Components</KolLink>
35+
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.
4336
</p>
4437
<p>
4538
<KolIndentedText>
@@ -54,34 +47,14 @@ import { Mermaid } from '@site/src/components/Mermaid';
5447

5548
<p>
5649
In the first release (v1.0) <KoliBri /> had directly implemented the individualization of the standard design using
57-
so-called{' '}
58-
<strong>
59-
<KolLink _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" _target="mozilla">
60-
CSS-Properties
61-
</KolLink>
62-
</strong>{' '}
63-
(
64-
<KolLink _href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71" _target="uxdesign">
65-
Design-Tokens
66-
</KolLink>
67-
, <KolLink _href="https://tailwindcss.com" _target="tailwindcss">
68-
Tailwind CSS
69-
</KolLink>). With the implementation of further themes, however, we have found that we would have to introduce more and
70-
more CSS-Properties to be able to implement the flexibility for the desired design/UX (Corporate Design/Style guide). In
71-
case of doubt, a separate property would have to be provided for each customizability. The example of the
72-
<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui">
73-
MUI-Button CSS
74-
</KolLink>{' '}
75-
shows well how the CSS properties (design tokens) become more and more.
50+
so-called <strong><KolLink _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" _target="mozilla">CSS-Properties</KolLink></strong>
51+
(<KolLink _href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71" _target="uxdesign">Design-Tokens</KolLink>, <KolLink _href="https://tailwindcss.com" _target="tailwindcss">Tailwind CSS</KolLink>). With the implementation of further themes, however, we have found that we would have to introduce more and more CSS-Properties to be able to implement the flexibility for the desired design/UX (Corporate Design/Style guide). In
52+
case of doubt, a separate property would have to be provided for each customizability. The example of the <KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui">MUI-Button CSS</KolLink> shows well how the CSS properties (design tokens) become more and more.
7653
</p>
7754
<p>
7855
<KolIndentedText>
7956
<strong>
80-
2. We have completely decoupled the whole CSS from the components (like{' '}
81-
<KolLink _href="https://styled-components.com" _target="styled-components">
82-
Styled-Components
83-
</KolLink>
84-
).
57+
2. We have completely decoupled the whole CSS from the components (like <KolLink _href="https://styled-components.com" _target="styled-components">Styled-Components</KolLink>).
8558
</strong>
8659
</KolIndentedText>
8760
</p>
@@ -147,14 +120,14 @@ stateDiagram-v2
147120
can be shared across projects, the theme is packaged in an NPM package and can be made available via any registry.
148121
</p>
149122
<p>
150-
<KolDetails _summary="Design-Tokens">
123+
<KolDetails _label="Design-Tokens">
151124
Optionally, design schemes can be exported from Figma, for example, using design tokens. These can then be
152125
transferred into separate CSS files that contain the respective values for the CSS properties. Later, one of these
153126
CSS files is used to apply the concrete design in combination with the Web Components and the theme on the website.
154127
</KolDetails>
155128
</p>
156129
<p>
157-
<KolDetails _summary="Dark-Mode">
130+
<KolDetails _label="Dark-Mode">
158131
Optionally, a “dark mode” theme can also be implemented. For this, the required CSS can be stored in the globals of
159132
the KoliBri theme.
160133
</KolDetails>
@@ -164,10 +137,6 @@ stateDiagram-v2
164137
<p>
165138
Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
166139
variety, can be built in own component libraries and maintained independently. For this purpose, we offer the
167-
so-called <strong>KoliBri-Factory</strong> (Stack) (see{' '}
168-
<KolLink _href="https://github.com/public-ui/kolibri/blob/main/docs/ARCHITECTURE.md#erweitert" _target="github">
169-
Modularization
170-
</KolLink>
171-
).
140+
so-called <strong>KoliBri-Factory</strong> (Stack) (see <KolLink _href="https://github.com/public-ui/kolibri/blob/main/docs/ARCHITECTURE.md#erweitert" _target="github">Modularization</KolLink>).
172141
</p>
173142
</KolAlert>

i18n/en/docusaurus-plugin-content-docs/version-1.5/20-concepts/02-properties.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
2727

2828
The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
2929

30-
<PropertiesDeprecated />
30+
<PropertiesDeprecated lang="en" />
3131

3232
## Obsolete components
3333

3434
The components listed in the following table will be superseded or removed.
3535

36-
<ComponentsDeprecated />
36+
<ComponentsDeprecated lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-1.6/20-concepts/02-properties.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
2727

2828
The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
2929

30-
<PropertiesDeprecated />
30+
<PropertiesDeprecated lang="en" />
3131

3232
## Obsolete components
3333

3434
The components listed in the following table will be superseded or removed.
3535

36-
<ComponentsDeprecated />
36+
<ComponentsDeprecated lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-1.7/20-concepts/02-properties.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
2727

2828
The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
2929

30-
<PropertiesDeprecated />
30+
<PropertiesDeprecated lang="en" />
3131

3232
## Obsolete components
3333

3434
The components listed in the following table will be superseded or removed.
3535

36-
<ComponentsDeprecated />
36+
<ComponentsDeprecated lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-2.0/20-concepts/02-properties.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
2727

2828
The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
2929

30-
<PropertiesDeprecated />
30+
<PropertiesDeprecated lang="en" />
3131

3232
## Obsolete components
3333

3434
The components listed in the following table will be superseded or removed.
3535

36-
<ComponentsDeprecated />
36+
<ComponentsDeprecated lang="en" />

i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/02-properties.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
2727

2828
The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
2929

30-
<PropertiesDeprecated />
30+
<PropertiesDeprecated lang="en" />
3131

3232
## Obsolete components
3333

3434
The components listed in the following table will be superseded or removed.
3535

36-
<ComponentsDeprecated />
36+
<ComponentsDeprecated lang="en" />

src/components/ComponentsDeprecated.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type { FC } from 'react';
22
import React from 'react';
33

4+
import type { Locale } from '../shares/language';
5+
import { MESSAGES } from '../shares/language';
6+
47
const DEPRECATED = new Map<string, Set<string>>();
58
DEPRECATED.set('avatar', new Set());
69
DEPRECATED.set('toolbar', new Set());
@@ -11,7 +14,11 @@ DEPRECATED.set(
1114
new Set(['button-group', 'icon-font-awesome', 'icon-icofont', 'input-radio-group', 'link-group', 'symbol'])
1215
);
1316

14-
export const ComponentsDeprecated: FC = () => {
17+
export type ProComponentsDeprecatedProps = {
18+
lang?: Locale;
19+
};
20+
21+
export const ComponentsDeprecated: FC<ProComponentsDeprecatedProps> = ({ lang = 'de' }) => {
1522
return (
1623
<>
1724
<table>
@@ -39,7 +46,7 @@ export const ComponentsDeprecated: FC = () => {
3946
</table>
4047
<p>
4148
<small>
42-
<sup>*</sup> Betrifft nur Typen, die eigentlich Varianten meinen.
49+
<sup>*</sup> {MESSAGES[lang].components.propertiesTable.meta}
4350
</small>
4451
</p>
4552
</>

src/components/PlaygroundCards.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { FC } from 'react';
44
import Heading from '@theme/Heading';
55

66
import type { Locale } from '../shares/language';
7+
import { MESSAGES } from '../shares/language';
78
import type { Playground } from '../shares/playground';
89
import { PLAYGROUNDS_V1, PLAYGROUNDS_V2 } from '../shares/playground';
910

@@ -18,7 +19,7 @@ const PlaygroundCard: FC<
1819
<div className="text-center">
1920
<KolLinkButton
2021
_href={url}
21-
_label={lang === 'de' ? 'Jetzt ausprobieren!' : 'Try it out now!'}
22+
_label={MESSAGES[lang].components.playgroundCards.button}
2223
_target="${image}"
2324
></KolLinkButton>
2425
</div>

0 commit comments

Comments
 (0)