feat(docs-framework): add high contrast theme switcher (#4749)

* feat(docs-framework): add high contrast theme switcher

* feat(theme): refactor useTheme hook

* fix(theme): add missing browser check

* feat(theme): componentize theme selector

* chore(theme): Rename hasDarkThemeSwitcher to hasThemeSwitcher

* fix(theme): a11y improvements

* chore(screenshots): update screenshots

Author: wise-king-sullyman

packages/documentation-framework/components/example/example.js

@@ -1,21 +1,16 @@
-import React, { useContext, useEffect, useState, useCallback } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useLocation } from '@reach/router';
 import {
   Button,
   CodeBlock,
   Flex,
   CodeBlockCode,
   debounce,
-  Icon,
   Label,
   Switch,
-  Select,
-  SelectOption,
-  SelectList,
-  MenuToggle,
   Tooltip,
   Stack,
-  StackItem
+  StackItem,
 } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
@@ -24,9 +19,6 @@ import * as reactTableModule from '@patternfly/react-table';
 import * as reactTableDeprecatedModule from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 import { getParameters } from 'codesandbox/lib/api/define';
-const SunIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9-4.037 9-9 9Zm0-16c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7Zm0-4a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707Z"></path></svg>;
-const MoonIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M16.457 30C8.485 30 2 23.515 2 15.543c0-5.93 3.715-11.345 9.243-13.476a.999.999 0 0 1 1.289 1.3 12.185 12.185 0 0 0-.843 4.487c0 6.869 5.588 12.457 12.457 12.457 1.56 0 3.07-.284 4.487-.844a.998.998 0 0 1 1.3 1.29C27.802 26.285 22.387 30 16.456 30ZM9.992 4.904C6.338 7.134 4 11.177 4 15.544 4 22.412 9.588 28 16.457 28c4.367 0 8.41-2.338 10.639-5.992a14.39 14.39 0 0 1-2.95.302c-7.971 0-14.457-6.485-14.457-14.456 0-1.003.102-1.989.303-2.95Z"></path></svg>;
-const DesktopIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="pf-v6-svg" fill="var(--pf-t--global--icon--color--regular)"><path d="M23.94 16a1 1 0 0 1-.992-.876 6.957 6.957 0 0 0-6.069-6.062 1 1 0 1 1 .242-1.985 8.953 8.953 0 0 1 7.812 7.8A.999.999 0 0 1 23.94 16ZM16 5a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Zm0 27a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1ZM4 17H1a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm27 0h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2ZM5.394 27.606a1 1 0 0 1-.707-1.707l2.12-2.12a1 1 0 1 1 1.415 1.413L6.1 27.313a.997.997 0 0 1-.707.293ZM24.485 8.515a1 1 0 0 1-.707-1.707L25.9 4.686a1 1 0 1 1 1.415 1.415l-2.122 2.12a.997.997 0 0 1-.707.294Zm-16.97 0a.997.997 0 0 1-.707-.293L4.686 6.1a1 1 0 1 1 1.415-1.415l2.12 2.122a1 1 0 0 1-.706 1.707Zm19.091 19.091a.997.997 0 0 1-.707-.293l-2.12-2.12a1 1 0 1 1 1.413-1.415l2.122 2.121a1 1 0 0 1-.707 1.707ZM16 24.875c-4.894 0-8.875-3.981-8.875-8.875a8.879 8.879 0 0 1 5.227-8.088.876.876 0 0 1 1.153 1.163 6.945 6.945 0 0 0-.63 2.925A7.133 7.133 0 0 0 20 19.125a6.948 6.948 0 0 0 2.925-.63.876.876 0 0 1 1.163 1.154A8.88 8.88 0 0 1 16 24.875Zm-4.785-14.153A7.135 7.135 0 0 0 8.875 16 7.133 7.133 0 0 0 16 23.125a7.13 7.13 0 0 0 5.278-2.34c-.419.06-.845.09-1.278.09-4.894 0-8.875-3.981-8.875-8.875 0-.433.03-.86.09-1.278Z"></path></svg>;
 import { ExampleToolbar } from './exampleToolbar.jsx';
 import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
 import {
@@ -35,92 +27,15 @@ import {
   getReactParams,
   getExampleClassName,
   getExampleId,
-  liveCodeTypes,
+  liveCodeTypes
 } from '../../helpers';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
-import { useTheme } from '../../hooks/useTheme';
+import { ThemeSelector } from '../themeSelector/themeSelector';
 
 const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
-// Full-screen theme selector component using shared theme hook
-const FullScreenThemeSelector = () => {
-  const { themeMode, setThemeMode, THEME_MODES } = useTheme();
-  const [isThemeSelectOpen, setIsThemeSelectOpen] = useState(false);
-
-  const handleThemeChange = (_event, selectedMode) => {
-    setThemeMode(selectedMode);
-    setIsThemeSelectOpen(false);
-  };
-
-  const getThemeDisplayText = (mode) => {
-    switch (mode) {
-      case THEME_MODES.LIGHT:
-        return 'Light';
-      case THEME_MODES.DARK:
-        return 'Dark';
-      default:
-        return 'System';
-    }
-  };
-
-  const getThemeIcon = (mode) => {
-    switch (mode) {
-      case THEME_MODES.LIGHT:
-        return SunIcon;
-      case THEME_MODES.DARK:
-        return MoonIcon;
-      default:
-        return DesktopIcon;
-    }
-  };
-
-  return (
-    <Select
-      id="ws-example-theme-select"
-      isOpen={isThemeSelectOpen}
-      selected={themeMode}
-      onSelect={handleThemeChange}
-      onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
-      toggle={(toggleRef) => (
-        <MenuToggle
-          ref={toggleRef}
-          onClick={() => setIsThemeSelectOpen(!isThemeSelectOpen)}
-          isExpanded={isThemeSelectOpen}
-          icon={<Icon size="lg">{getThemeIcon(themeMode)}</Icon>}
-          aria-label={`Theme selection, current: ${getThemeDisplayText(themeMode)}`}
-        />
-      )}
-      shouldFocusToggleOnSelect
-    >
-      <SelectList>
-        <SelectOption 
-          value={THEME_MODES.SYSTEM}
-          icon={DesktopIcon}
-          description="Follow system preference"
-        >
-          System
-        </SelectOption>
-        <SelectOption 
-          value={THEME_MODES.LIGHT}
-          icon={SunIcon}
-          description="Always use light mode"
-        >
-          Light
-        </SelectOption>
-        <SelectOption 
-          value={THEME_MODES.DARK}
-          icon={MoonIcon}
-          description="Always use dark mode"
-        >
-          Dark
-        </SelectOption>
-      </SelectList>
-    </Select>
-  );
-};
-
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -131,7 +46,7 @@ class ErrorBoundary extends React.Component {
     errorInfo._suppressLogging = true;
     this.setState({
       error: error,
-      errorInfo: errorInfo,
+      errorInfo: errorInfo
     });
   }
 
@@ -183,15 +98,15 @@ export const Example = ({
   // Content that appears between h3 and code block to explain example
   children,
   // Show dark theme switcher on full page examples
-  hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher,
+  hasThemeSwitcher = process.env.hasThemeSwitcher,
   // Show dark theme switcher on full page examples
   hasRTLSwitcher = process.env.hasRTLSwitcher,
   // Map of relative imports matched to their npm package import path (passed to Codesandbox)
   relativeImports,
   // md file location in node_modules, used to resolve relative import paths in examples
   relPath = '',
   // absolute url to hosted file
-  sourceLink = '',
+  sourceLink = ''
 }) => {
   if (isFullscreenPreview) {
     isFullscreen = false;
@@ -202,9 +117,7 @@ export const Example = ({
   useEffect(() => {
     if (!isFullscreenPreview) return;
 
-    document.readyState === 'complete'
-      ? addPageLoadedClass()
-      : window.addEventListener('load', addPageLoadedClass);
+    document.readyState === 'complete' ? addPageLoadedClass() : window.addEventListener('load', addPageLoadedClass);
 
     return () => window.removeEventListener('load', addPageLoadedClass);
   }, []);
@@ -230,9 +143,7 @@ export const Example = ({
     ...reactCoreModule,
     ...reactTableModule,
     ...(source === 'react-next' ? reactCoreNextModule : {}),
-    ...(source === 'react-deprecated'
-      ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule }
-      : {}),
+    ...(source === 'react-deprecated' ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule } : {})
   };
 
   let livePreview = null;
@@ -248,8 +159,7 @@ export const Example = ({
     );
   } else {
     try {
-      const { code: transformedCode, hasTS } =
-        convertToReactComponent(editorCode);
+      const { code: transformedCode, hasTS } = convertToReactComponent(editorCode);
       if (hasTS) {
         lang = 'ts';
       } else {
@@ -259,11 +169,7 @@ export const Example = ({
       const componentNames = Object.keys(scope);
       const componentValues = Object.values(scope);
 
-      const getPreviewComponent = new Function(
-        'React',
-        ...componentNames,
-        transformedCode
-      );
+      const getPreviewComponent = new Function('React', ...componentNames, transformedCode);
       const PreviewComponent = getPreviewComponent(React, ...componentValues);
 
       livePreview = (
@@ -282,13 +188,13 @@ export const Example = ({
     return (
       <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
-        {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
+        {(hasThemeSwitcher || hasRTLSwitcher) && (
           <Flex
             direction={{ default: 'column' }}
             gap={{ default: 'gapMd' }}
             className="ws-full-page-utils pf-v6-m-dir-ltr"
           >
-            {hasDarkThemeSwitcher && <FullScreenThemeSelector />}
+            {hasThemeSwitcher && <ThemeSelector id="ws-example-theme-select" />}
             {hasRTLSwitcher && (
               <Switch
                 id="ws-example-rtl-switch"
@@ -310,61 +216,49 @@ export const Example = ({
   const codeBoxParams = getParameters(
     lang === 'html'
       ? getStaticParams(title, editorCode)
-      : getReactParams(
-          title,
-          editorCode,
-          scope,
-          lang,
-          relativeImports,
-          relPath,
-          sourceLink
-        )
+      : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink)
   );
   const fullscreenLink =
-    loc.pathname.replace(/\/$/, '') +
-    (loc.pathname.endsWith(source) ? '' : `/${source}`) +
-    '/' +
-    slugger(title);
+    loc.pathname.replace(/\/$/, '') + (loc.pathname.endsWith(source) ? '' : `/${source}`) + '/' + slugger(title);
 
   const hasMetaText = isBeta || isDemo || isDeprecated || false;
-  const tooltips = (<React.Fragment>
-    {isBeta && (
-      <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-        <Button variant="plain" hasNoPadding>
-          <Label isCompact color="blue">
-            Beta
-          </Label>
-        </Button>
-      </Tooltip>
-    )}
-    {isDemo && (
-      <Tooltip content="Demos show how multiple components can be used in a single design.">
-        <Button variant="plain" hasNoPadding>
-          <Label isCompact color="purple">
-            Demo
-          </Label>
-        </Button>
-      </Tooltip>
-    )}
-    {isDeprecated && (
-      <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-        <Button variant="plain" hasNoPadding>
-          <Label isCompact color="grey">
-            Deprecated
-          </Label>
-        </Button>
-      </Tooltip>
-    )}
-  </React.Fragment>);
-  const metaText = hasMetaText && tooltips
+  const tooltips = (
+    <React.Fragment>
+      {isBeta && (
+        <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+          <Button variant="plain" hasNoPadding>
+            <Label isCompact color="blue">
+              Beta
+            </Label>
+          </Button>
+        </Tooltip>
+      )}
+      {isDemo && (
+        <Tooltip content="Demos show how multiple components can be used in a single design.">
+          <Button variant="plain" hasNoPadding>
+            <Label isCompact color="purple">
+              Demo
+            </Label>
+          </Button>
+        </Tooltip>
+      )}
+      {isDeprecated && (
+        <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+          <Button variant="plain" hasNoPadding>
+            <Label isCompact color="grey">
+              Deprecated
+            </Label>
+          </Button>
+        </Tooltip>
+      )}
+    </React.Fragment>
+  );
+  const metaText = hasMetaText && tooltips;
 
   return (
     <Stack hasGutter>
       <StackItem>
-        <AutoLinkHeader
-          metaText={metaText}
-          headingLevel="h3"
-        >
+        <AutoLinkHeader metaText={metaText} headingLevel="h3">
           {title}
         </AutoLinkHeader>
         {children}
@@ -378,22 +272,11 @@ export const Example = ({
               target="_blank"
               aria-label={`Open fullscreen ${title} example`}
             >
-              <img
-                src={thumbnail.src}
-                width={thumbnail.width}
-                height={thumbnail.height}
-                alt={`${title} screenshot`}
-              />
+              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
             </a>
           </div>
         ) : (
-          <div
-            id={previewId}
-            className={css(
-              className,
-              isRTL && 'pf-v6-m-dir-rtl'
-            )}
-          >
+          <div id={previewId} className={css(className, isRTL && 'pf-v6-m-dir-rtl')}>
             {livePreview}
           </div>
         )}

packages/documentation-framework/components/index.js

@@ -10,3 +10,4 @@ export * from './topNav/topNav';
 export * from './link/link';
 export * from './tableOfContents/tableOfContents';
 export * from './inlineAlert/inlineAlert';
+export * from './themeSelector/themeSelector';