(#6140) Sample screenshots for component overview, changed component overview and styles

Author: chrisalat

dev/src/components/docs/ComponentList.tsx

@@ -48,8 +48,10 @@ const LazyLoadComponent: FC<Component & Language> = ({ name, lang, loadComponent
                         onKeyDown={handleRedirect}
                         onClick={handleRedirect}
                     >
-                        <KolCard _level={2} _label={formattedComponentName}>
-                            <SampleComponent lang={lang} />
+                        <KolCard aria-label={formattedComponentName} role="img" _level={2} _label={formattedComponentName}>
+                            <div aria-hidden="true">
+                                <SampleComponent lang={lang} />
+                            </div>
                         </KolCard>
                     </a>
                 </Suspense>

dev/src/components/samplePreviews/Dialog.tsx

@@ -1,10 +1,6 @@
-import type { FC } from 'react';
 import React from 'react';
-import type { Language } from '../../shares/language';
-import { MESSAGES } from '../../shares/language';
+import { KolImage } from '@public-ui/react';
 
-type Props = Language;
-
-const Dialog: FC<Props> = ({ lang }) => <p>{MESSAGES?.[lang]?.components?.noPreview}</p>;
+const Dialog = () => <KolImage _src="/assets/samples/modal.png" _alt="Sample Image - Dialog" _sizes="20vw"/>;
 
 export default Dialog;

dev/src/components/samplePreviews/Modal.tsx

@@ -1,10 +1,6 @@
-import type { FC } from 'react';
 import React from 'react';
-import type { Language } from '../../shares/language';
-import { MESSAGES } from '../../shares/language';
+import { KolImage } from '@public-ui/react';
 
-type Props = Language;
-
-const Modal: FC<Props> = ({ lang }) => <p>{MESSAGES?.[lang]?.components?.noPreview}</p>;
+const Modal = () => <KolImage _src="/assets/samples/modal.png" _alt="Sample Image - Modal" _sizes="20vw"/>;
 
 export default Modal;

dev/src/components/samplePreviews/Popover.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolImage } from '@public-ui/react';
+
+const Popover = () => <KolImage _src="/assets/samples/tooltip.png" _alt="Sample Image - Popover" _sizes="20vw"/>;
+
+export default Popover;

dev/src/components/samplePreviews/SkipNav.tsx

@@ -1,10 +1,6 @@
-import type { FC } from 'react';
 import React from 'react';
-import type { Language } from '../../shares/language';
-import { MESSAGES } from '../../shares/language';
+import { KolImage } from '@public-ui/react';
 
-type Props = Language;
-
-const SkipNav: FC<Props> = ({ lang }) => <p>{MESSAGES?.[lang]?.components?.noPreview}</p>;
+const SkipNav = () => <KolImage _src="/assets/samples/skip-nav.png" _alt="Sample Image - Skip-Nav" _sizes="20vw"/>;
 
 export default SkipNav;

dev/src/components/samplePreviews/SplitButton.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
-import { KolSplitButton } from '@public-ui/react';
+import { KolImage } from '@public-ui/react';
 
-const SplitButton = () => (
-	<KolSplitButton _label="Label" _hideLabel _icons="codicon codicon-git-pull-request">
-		Dropdown-Inhalt
-	</KolSplitButton>
-);
+const SplitButton = () => <KolImage _src="/assets/samples/split-button.png" _alt="Sample Image - Split-Button" _sizes="20vw"/>;
 
 export default SplitButton;

dev/src/components/samplePreviews/Toaster.tsx

@@ -1,10 +1,10 @@
-import type { FC } from 'react';
 import React from 'react';
-import type { Language } from '../../shares/language';
-import { MESSAGES } from '../../shares/language';
+import { KolAlert } from '@public-ui/react';
 
-type Props = Language;
-
-const Toaster: FC<Props> = ({ lang }) => <p>{MESSAGES?.[lang]?.components?.noPreview}</p>;
+const Toaster = () => (
+    <KolAlert _label="Title" _level={5} _type="error" _variant="card">
+		Content
+	</KolAlert>
+);
 
 export default Toaster;

dev/src/components/samplePreviews/Tooltip.tsx

@@ -1,10 +1,6 @@
-import type { FC } from 'react';
 import React from 'react';
-import type { Language } from '../../shares/language';
-import { MESSAGES } from '../../shares/language';
+import { KolImage } from '@public-ui/react';
 
-type Props = Language;
-
-const Tooltip: FC<Props> = ({ lang }) => <p>{MESSAGES?.[lang]?.components?.noPreview}</p>;
+const Tooltip = () => <KolImage _src="/assets/samples/tooltip.png" _alt="Sample Image - Tooltip" _sizes="20vw"/>;
 
 export default Tooltip;

dev/src/components/samplePreviews/index.tsx

@@ -133,6 +133,10 @@ export const components = [
 		name: 'pagination',
 		loadComponent: () => lazy(() => import('./Pagination')),
 	},
+	{
+		name: 'popover',
+		loadComponent: () => lazy(() => import('./Popover')),
+	},
 	{
 		name: 'progress',
 		loadComponent: () => lazy(() => import('./Progress')),

dev/src/css/custom.css

@@ -159,7 +159,3 @@ kol-link-button {
 	height: 300px;
 	cursor: pointer;
 }
-
-.components-overview-item kol-card {
-	pointer-events: none;
-}