Implement SampleDescription component (#5428)

packages/samples/react/src/App.tsx

@@ -10,6 +10,7 @@ import PackageJson from '@public-ui/components/package.json';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
 import { useLocation } from 'react-router';
+import { HideMenusContext } from './shares/HideMenusContext';
 
 setStorage(localStorage);
 
@@ -116,24 +117,26 @@ export const App: FC = () => {
 	};
 
 	return (
-		<div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
-			{!hideMenus && (
-				<Sidebar
-					version={PackageJson.version}
-					theme={theme}
-					sample={routerLocation.pathname}
-					routes={ROUTES}
-					routeList={ROUTE_LIST}
-					onThemeChange={handleThemeChange}
-				/>
-			)}
+		<HideMenusContext.Provider value={hideMenus}>
+			<div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
+				{!hideMenus && (
+					<Sidebar
+						version={PackageJson.version}
+						theme={theme}
+						sample={routerLocation.pathname}
+						routes={ROUTES}
+						routeList={ROUTE_LIST}
+						onThemeChange={handleThemeChange}
+					/>
+				)}
 
-			<div className="p-4" id="route-container">
-				<Routes>
-					{ROUTE_TREE}
-					<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
-				</Routes>
+				<div className="p-4" id="route-container">
+					<Routes>
+						{ROUTE_TREE}
+						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
+					</Routes>
+				</div>
 			</div>
-		</div>
+		</HideMenusContext.Provider>
 	);
 };

packages/samples/react/src/components/SampleDescription.tsx

@@ -0,0 +1,20 @@
+import React, { FC, PropsWithChildren, useContext } from 'react';
+import { KolIndentedText, KolLink } from '@public-ui/react';
+import { HideMenusContext } from '../shares/HideMenusContext';
+
+export const SampleDescription: FC<PropsWithChildren> = (props) => {
+	const hideMenus = useContext(HideMenusContext);
+
+	return hideMenus ? null : (
+		<div className="flex">
+			<KolIndentedText>{props.children}</KolIndentedText>
+			<KolLink
+				_hideLabel
+				_href={`${location.href}?hideMenus`}
+				_label="Beispiel in neuem Tab öffnen"
+				_target="_blank"
+				className="mla flex-self-center"
+			></KolLink>
+		</div>
+	);
+};

packages/samples/react/src/components/input-radio/horizontal.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useState } from 'react';
 
 import { Orientation } from '@public-ui/components';
-import { KolButton, KolDetails, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
@@ -22,12 +23,12 @@ export const InputRadioHorizontal: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<KolDetails _label="Description" _open>
+			<SampleDescription>
 				<p>
 					This sample simulates the <code>horizontal</code> and <code>vertical</code> orientation of the <code>kol-input-radio</code>, if we rerender the
 					component.
 				</p>
-			</KolDetails>
+			</SampleDescription>
 			<div className="flex gap-4">
 				<KolButton _label="Click me a few times" _on={{ onClick: showClick }} />
 				<KolInputCheckbox _label="Switch orientation (horizontal/vertical)" _on={{ onChange: toggleOrientation }} _variant="switch" />

packages/samples/react/src/components/skip-nav/basic.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
-import { KolIndentedText, KolSkipNav } from '@public-ui/react';
-
-import { FC } from 'react';
+import React, { FC } from 'react';
+import { KolSkipNav } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const SkipNavBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolIndentedText>
+		<SampleDescription>
 			<p>
-				<b>Links sind unsichtbar geschalten</b>
+				<b>Links sind unsichtbar geschaltet</b>
 				<br />
 				Um die Links zu sehen, am besten einmal in diesen Bereich klicken und Tab-Taste drücken.
 			</p>
-		</KolIndentedText>
+		</SampleDescription>
 		<KolSkipNav
 			_label="Versteckte Navigation"
 			_links={[

packages/samples/react/src/shares/HideMenusContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const HideMenusContext = createContext<boolean | null>(null);