(#231) Resolved bugs in playground and theming pages

chrisalat · chrisalat · commit c4153da87ae0 · 2024-08-06T16:51:45.000+02:00
diff --git a/docs/20-concepts/05-styling/34-theming.mdx b/docs/20-concepts/05-styling/34-theming.mdx
@@ -17,31 +17,26 @@ import { Mermaid } from '@site/src/components/Mermaid';
 
 # Theming
 
-<kol-alert _type="info">
-	<img
-		width="100%"
-		src="/assets/theme-switch.png"
-		alt="Zeigt, wo der Schalter zum Umschalten des Themes in der Toolbar ist."
-	/>
-	<p>
-		<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>Über den Schalter in der Toolbar oben können Sie das Theme
-		von unserer Seite (KoliBri) umschalten.
-	</p>
-</kol-alert>
-
+<KolAlert _type="info" _variant="card">
+	<p>Über den Schalter in der Toolbar oben können Sie das Theme von unserer Seite (KoliBri) umschalten.</p>
+</KolAlert>
+<br />
+<img
+	width="100%"
+	src="/assets/theme-switch.png"
+	alt="Zeigt, wo der Schalter zum Umschalten des Themes in der Toolbar ist."
+/>
 <br />
 
 <p>
-	Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf{' '}
-	<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der
-	assistiven Unterstützung sind. Alle Komponenten werden dabei als{' '}
-	<KolLink
+	Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf
+	<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der assistiven
+	Unterstützung sind. Alle Komponenten werden dabei als <KolLink
 		_href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de"
 		_target="mozilla"
 		_label={`Web Components`}
-	/>{' '}
-	umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese
-	Komponenten durch die grau-gestrichelten Formen in der Mitte dargestellt.
+	/> umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese Komponenten
+	durch die grau-gestrichelten Formen in der Mitte dargestellt.
 </p>
 <p>
 	<KolIndentedText>
@@ -78,7 +73,7 @@ import { Mermaid } from '@site/src/components/Mermaid';
 <p>
 	<KolIndentedText>
 		<strong>
-			2. Wir haben das ganze CSS vollständig von den Components entkoppelt (like{' '}
+			2. Wir haben das ganze CSS vollständig von den Components entkoppelt (wie{' '}
 			<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`} />
 			).
 		</strong>
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/20-concepts/02-properties.mdx b/i18n/en/docusaurus-plugin-content-docs/current/20-concepts/02-properties.mdx
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
 
 The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
 
-<PropertiesDeprecated />
+<PropertiesDeprecated lang="en" />
 
 ## Obsolete components
 
 The components listed in the following table will be superseded or removed.
 
-<ComponentsDeprecated />
+<ComponentsDeprecated lang="en" />
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/20-concepts/05-styling/34-theming.mdx b/i18n/en/docusaurus-plugin-content-docs/current/20-concepts/05-styling/34-theming.mdx
@@ -17,29 +17,22 @@ import { Mermaid } from '@site/src/components/Mermaid';
 
 # Theming
 
-<kol-alert _type="info">
-	<img
-		width="100%"
-		src="/assets/theme-switch.png"
-		alt="Shows where the switch for switching the theme is in the toolbar."
-	/>
+<KolAlert _type="info" _variant="card">
 	<p>
-		<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>You can switch the theme from our site (KoliBri) using the
-		switch in the toolbar above.
+		You can switch the theme from our site (KoliBri) using the switch in the toolbar above.
 	</p>
-</kol-alert>
-
+</KolAlert>
+<br />
+<img
+	width="100%"
+	src="/assets/theme-switch.png"
+	alt="Shows where the switch for switching the theme is in the toolbar."
+/>
 <br />
 
 <p>
-	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>{' '}
-	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.
+	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>
+	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.
 </p>
 <p>
 	<KolIndentedText>
@@ -54,34 +47,14 @@ import { Mermaid } from '@site/src/components/Mermaid';
 
 <p>
 	In the first release (v1.0) <KoliBri /> had directly implemented the individualization of the standard design using
-	so-called{' '}
-	<strong>
-		<KolLink _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" _target="mozilla">
-			CSS-Properties
-		</KolLink>
-	</strong>{' '}
-	(
-	<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
-	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.
+	so-called <strong><KolLink _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" _target="mozilla">CSS-Properties</KolLink></strong>
+	(<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
+	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.
 </p>
 <p>
 	<KolIndentedText>
 		<strong>
-			2. We have completely decoupled the whole CSS from the components (like{' '}
-			<KolLink _href="https://styled-components.com" _target="styled-components">
-				Styled-Components
-			</KolLink>
-			).
+			2. We have completely decoupled the whole CSS from the components (like <KolLink _href="https://styled-components.com" _target="styled-components">Styled-Components</KolLink>).
 		</strong>
 	</KolIndentedText>
 </p>
@@ -147,14 +120,14 @@ stateDiagram-v2
 	can be shared across projects, the theme is packaged in an NPM package and can be made available via any registry.
 </p>
 <p>
-	<KolDetails _summary="Design-Tokens">
+	<KolDetails _label="Design-Tokens">
 		Optionally, design schemes can be exported from Figma, for example, using design tokens. These can then be
 		transferred into separate CSS files that contain the respective values for the CSS properties. Later, one of these
 		CSS files is used to apply the concrete design in combination with the Web Components and the theme on the website.
 	</KolDetails>
 </p>
 <p>
-	<KolDetails _summary="Dark-Mode">
+	<KolDetails _label="Dark-Mode">
 		Optionally, a “dark mode” theme can also be implemented. For this, the required CSS can be stored in the globals of
 		the KoliBri theme.
 	</KolDetails>
@@ -164,10 +137,6 @@ stateDiagram-v2
 	<p>
 		Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
 		variety, can be built in own component libraries and maintained independently. For this purpose, we offer the
-		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>
-		).
+		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>).
 	</p>
 </KolAlert>
diff --git a/i18n/en/docusaurus-plugin-content-docs/version-1.5/20-concepts/02-properties.mdx b/i18n/en/docusaurus-plugin-content-docs/version-1.5/20-concepts/02-properties.mdx
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
 
 The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
 
-<PropertiesDeprecated />
+<PropertiesDeprecated lang="en" />
 
 ## Obsolete components
 
 The components listed in the following table will be superseded or removed.
 
-<ComponentsDeprecated />
+<ComponentsDeprecated lang="en" />
diff --git a/i18n/en/docusaurus-plugin-content-docs/version-1.6/20-concepts/02-properties.mdx b/i18n/en/docusaurus-plugin-content-docs/version-1.6/20-concepts/02-properties.mdx
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
 
 The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
 
-<PropertiesDeprecated />
+<PropertiesDeprecated lang="en" />
 
 ## Obsolete components
 
 The components listed in the following table will be superseded or removed.
 
-<ComponentsDeprecated />
+<ComponentsDeprecated lang="en" />
diff --git a/i18n/en/docusaurus-plugin-content-docs/version-1.7/20-concepts/02-properties.mdx b/i18n/en/docusaurus-plugin-content-docs/version-1.7/20-concepts/02-properties.mdx
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
 
 The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
 
-<PropertiesDeprecated />
+<PropertiesDeprecated lang="en" />
 
 ## Obsolete components
 
 The components listed in the following table will be superseded or removed.
 
-<ComponentsDeprecated />
+<ComponentsDeprecated lang="en" />
diff --git a/i18n/en/docusaurus-plugin-content-docs/version-2.0/20-concepts/02-properties.mdx b/i18n/en/docusaurus-plugin-content-docs/version-2.0/20-concepts/02-properties.mdx
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
 
 The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
 
-<PropertiesDeprecated />
+<PropertiesDeprecated lang="en" />
 
 ## Obsolete components
 
 The components listed in the following table will be superseded or removed.
 
-<ComponentsDeprecated />
+<ComponentsDeprecated lang="en" />
diff --git a/i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/02-properties.mdx b/i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/02-properties.mdx
@@ -27,10 +27,10 @@ The aim is to use uniform properties across all components to make it easier to
 
 The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).
 
-<PropertiesDeprecated />
+<PropertiesDeprecated lang="en" />
 
 ## Obsolete components
 
 The components listed in the following table will be superseded or removed.
 
-<ComponentsDeprecated />
+<ComponentsDeprecated lang="en" />
diff --git a/src/components/ComponentsDeprecated.tsx b/src/components/ComponentsDeprecated.tsx
@@ -1,6 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { Locale } from '../shares/language';
+import { MESSAGES } from '../shares/language';
+
 const DEPRECATED = new Map<string, Set<string>>();
 DEPRECATED.set('avatar', new Set());
 DEPRECATED.set('toolbar', new Set());
@@ -11,7 +14,11 @@ DEPRECATED.set(
 	new Set(['button-group', 'icon-font-awesome', 'icon-icofont', 'input-radio-group', 'link-group', 'symbol'])
 );
 
-export const ComponentsDeprecated: FC = () => {
+export type ProComponentsDeprecatedProps = {
+	lang?: Locale;
+};
+
+export const ComponentsDeprecated: FC<ProComponentsDeprecatedProps> = ({ lang = 'de' }) => {
 	return (
 		<>
 			<table>
@@ -39,7 +46,7 @@ export const ComponentsDeprecated: FC = () => {
 			</table>
 			<p>
 				<small>
-					<sup>*</sup> Betrifft nur Typen, die eigentlich Varianten meinen.
+					<sup>*</sup> {MESSAGES[lang].components.propertiesTable.meta}
 				</small>
 			</p>
 		</>
diff --git a/src/components/PlaygroundCards.tsx b/src/components/PlaygroundCards.tsx
@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import Heading from '@theme/Heading';
 
 import type { Locale } from '../shares/language';
+import { MESSAGES } from '../shares/language';
 import type { Playground } from '../shares/playground';
 import { PLAYGROUNDS_V1, PLAYGROUNDS_V2 } from '../shares/playground';
 
@@ -18,7 +19,7 @@ const PlaygroundCard: FC<
 		<div className="text-center">
 			<KolLinkButton
 				_href={url}
-				_label={lang === 'de' ? 'Jetzt ausprobieren!' : 'Try it out now!'}
+				_label={MESSAGES[lang].components.playgroundCards.button}
 				_target="${image}"
 			></KolLinkButton>
 		</div>
diff --git a/src/components/PropertiesDeprecated.tsx b/src/components/PropertiesDeprecated.tsx
@@ -1,6 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { Locale } from '../shares/language';
+import { MESSAGES } from '../shares/language';
+
 const DEPRECATED = new Map<string, Set<string>>();
 DEPRECATED.set('_align', new Set(['_tabs-align']));
 DEPRECATED.set('_dataFoot', new Set(['']));
@@ -31,7 +34,11 @@ DEPRECATED.set(
 	])
 );
 
-export const PropertiesDeprecated: FC = () => {
+export type PropertiesDeprecatedProps = {
+	lang?: Locale;
+};
+
+export const PropertiesDeprecated: FC<PropertiesDeprecatedProps> = ({ lang = 'de' }) => {
 	return (
 		<>
 			<table>
@@ -59,7 +66,7 @@ export const PropertiesDeprecated: FC = () => {
 			</table>
 			<p>
 				<small>
-					<sup>*</sup> Betrifft nur Typen, die eigentlich Varianten meinen.
+					<sup>*</sup> {MESSAGES[lang].components.propertiesTable.meta}
 				</small>
 			</p>
 		</>
diff --git a/src/shares/language.ts b/src/shares/language.ts
@@ -7,12 +7,24 @@ export type Language = {
 export const MESSAGES = {
 	en: {
 		components: {
+			playgroundCards: {
+				button: 'Try it out now!',
+			},
+			propertiesTable: {
+				meta: 'Only applies to types who actually mean variants.',
+			},
 			noPreview:
 				'No preview available. For detailed information about this component, please visit the detail page of the component.',
 		},
 	},
 	de: {
 		components: {
+			playgroundCards: {
+				button: 'Jetzt ausprobieren!',
+			},
+			propertiesTable: {
+				meta: 'Betrifft nur Typen, die eigentlich Varianten meinen.',
+			},
 			noPreview:
 				'Keine Preview verfügbar. Um detaillierte Informationen zu dieser Komponenten zu erhalten, besuchen Sie bitte die Detailseite der Komponenten.',
 		},
diff --git a/versioned_docs/version-1.5/20-concepts/05-styling/34-theming.mdx b/versioned_docs/version-1.5/20-concepts/05-styling/34-theming.mdx
diff --git a/versioned_docs/version-1.6/20-concepts/05-styling/34-theming.mdx b/versioned_docs/version-1.6/20-concepts/05-styling/34-theming.mdx
diff --git a/versioned_docs/version-1.7/20-concepts/05-styling/34-theming.mdx b/versioned_docs/version-1.7/20-concepts/05-styling/34-theming.mdx
diff --git a/versioned_docs/version-2.0/20-concepts/05-styling/34-theming.mdx b/versioned_docs/version-2.0/20-concepts/05-styling/34-theming.mdx
diff --git a/versioned_docs/version-2.1/20-concepts/05-styling/34-theming.mdx b/versioned_docs/version-2.1/20-concepts/05-styling/34-theming.mdx
