docs: update theme switcher based on elastic#8036

packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx

@@ -1,79 +1,39 @@
 /* eslint-disable no-restricted-globals */
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 
-import {
-  EuiThemeProvider,
-  useEuiTheme,
-  useIsWithinBreakpoints,
-} from '../../../../src/services';
+import { EuiThemeProvider, useEuiTheme } from '../../../../src/services';
 import { EUI_THEME } from '../../../../src/themes';
-import { AVAILABLE_THEMES } from '../with_theme/theme_context';
 
 import { ThemeContext } from '../with_theme';
-// @ts-ignore Not TS
-import { GuideLocaleSelector } from '../guide_locale_selector';
 import {
   EuiPopover,
   EuiHorizontalRule,
   EuiButton,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiSwitch,
+  EuiSwitchEvent,
 } from '../../../../src/components';
+import { AVAILABLE_THEMES } from '../with_theme/theme_context';
 
 type GuideThemeSelectorProps = {
-  onToggleLocale: () => {};
+  onToggleLocale: Function;
   selectedLocale: string;
-  context?: any;
 };
 
 export const GuideThemeSelector: React.FunctionComponent<
   GuideThemeSelectorProps
-> = ({ ...rest }) => {
-  return (
-    <ThemeContext.Consumer>
-      {(context) => <GuideThemeSelectorComponent context={context} {...rest} />}
-    </ThemeContext.Consumer>
-  );
-};
-
-const GuideThemeSelectorComponent: React.FunctionComponent<
-  GuideThemeSelectorProps
-> = ({ context, onToggleLocale, selectedLocale }) => {
-  const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
-  const [isPopoverOpen, setPopover] = useState(false);
-
-  const onButtonClick = () => {
-    setPopover(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const systemColorMode = useEuiTheme().colorMode.toLowerCase();
+> = ({ onToggleLocale, selectedLocale }) => {
+  const context = useContext(ThemeContext);
+  const euiThemeContext = useEuiTheme();
+  const colorMode = context.colorMode ?? euiThemeContext.colorMode;
   const currentTheme: EUI_THEME =
-    AVAILABLE_THEMES.find(
-      (theme) => theme.value === (context.theme ?? systemColorMode)
-    ) || AVAILABLE_THEMES[0];
-
-  const getIconType = (value: EUI_THEME['value']) => {
-    return value === currentTheme.value ? 'check' : 'empty';
-  };
+    AVAILABLE_THEMES.find((theme) => theme.value === context.theme) ||
+    AVAILABLE_THEMES[0];
 
-  const items = AVAILABLE_THEMES.map((theme) => {
-    return (
-      <EuiContextMenuItem
-        key={theme.value}
-        icon={getIconType(theme.value)}
-        onClick={() => {
-          closePopover();
-          context.changeTheme(theme.value);
-        }}
-      >
-        {theme.text}
-      </EuiContextMenuItem>
-    );
-  });
+  const [isPopoverOpen, setPopover] = useState(false);
+  const onButtonClick = () => setPopover(!isPopoverOpen);
+  const closePopover = () => setPopover(false);
 
   const button = (
     <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
@@ -85,11 +45,28 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
         minWidth={0}
         onClick={onButtonClick}
       >
-        {isMobileSize ? 'Theme' : currentTheme.text}
+        Theme
       </EuiButton>
     </EuiThemeProvider>
   );
 
+  const toggles = [
+    {
+      label: 'Dark mode',
+      checked: colorMode.toLowerCase() === 'dark',
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({
+          colorMode: e.target.checked ? 'DARK' : 'LIGHT',
+        }),
+    },
+    location.host.includes('803') && {
+      label: 'i18n testing',
+      checked: selectedLocale === 'en-xa',
+      onChange: (e: EuiSwitchEvent) =>
+        onToggleLocale(e.target.checked ? 'en-xa' : 'en'),
+    },
+  ];
+
   return (
     <EuiPopover
       id="docsThemeSelector"
@@ -100,17 +77,34 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
       panelPaddingSize="none"
       anchorPosition="downRight"
     >
-      <EuiContextMenuPanel size="s" items={items} />
-      {location.host.includes('803') && (
-        <>
-          <EuiHorizontalRule margin="none" />
-          <div style={{ padding: 8 }}>
-            <GuideLocaleSelector
-              onToggleLocale={onToggleLocale}
-              selectedLocale={selectedLocale}
+      <EuiContextMenuPanel
+        size="s"
+        items={AVAILABLE_THEMES.map((theme) => {
+          return (
+            <EuiContextMenuItem
+              key={theme.value}
+              icon={currentTheme.value === theme.value ? 'check' : 'empty'}
+              onClick={() => {
+                context.setContext({ theme: theme.value });
+              }}
+            >
+              {theme.text}
+            </EuiContextMenuItem>
+          );
+        })}
+      />
+      <EuiHorizontalRule margin="none" />
+      {toggles.map((item) =>
+        item ? (
+          <div css={({ euiTheme }) => ({ padding: euiTheme.size.s })}>
+            <EuiSwitch
+              compressed
+              label={item.label}
+              checked={item.checked}
+              onChange={item.onChange}
             />
           </div>
-        </>
+        ) : null
       )}
     </EuiPopover>
   );

packages/eui/src-docs/src/components/with_theme/index.ts

@@ -1,2 +1,6 @@
-export { ThemeProvider, ThemeContext } from './theme_context';
+export {
+  ThemeProvider,
+  ThemeContext,
+  type ThemeContextType,
+} from './theme_context';
 export { LanguageSelector } from './language_selector';

packages/eui/src-docs/src/components/with_theme/language_selector.tsx

@@ -1,75 +1,35 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 
-import {
-  EuiButtonGroup,
-  EuiIcon,
-  EuiLink,
-  EuiText,
-  EuiTourStep,
-} from '../../../../src/components';
+import { EuiButtonGroup } from '../../../../src/components';
 
 import {
   ThemeContext,
   theme_languages,
   THEME_LANGUAGES,
 } from './theme_context';
 
-const NOTIF_STORAGE_KEY = 'js_vs_sass_notification';
-const NOTIF_STORAGE_VALUE = 'dismissed';
-
 export const LanguageSelector = ({
   onChange,
-  showTour = false,
 }: {
   onChange?: (id: string) => void;
-  showTour?: boolean;
 }) => {
   const themeContext = useContext(ThemeContext);
   const toggleIdSelected = themeContext.themeLanguage;
   const onLanguageChange = (optionId: string) => {
-    themeContext.changeThemeLanguage(optionId as THEME_LANGUAGES['id']);
+    themeContext.setContext({
+      themeLanguage: optionId as THEME_LANGUAGES['id'],
+    });
     onChange?.(optionId);
-    setTourIsOpen(false);
-    localStorage.setItem(NOTIF_STORAGE_KEY, NOTIF_STORAGE_VALUE);
-  };
-
-  const [isTourOpen, setTourIsOpen] = useState(
-    localStorage.getItem(NOTIF_STORAGE_KEY) === NOTIF_STORAGE_VALUE
-      ? false
-      : showTour
-  );
-
-  const onTourDismiss = () => {
-    setTourIsOpen(false);
-    localStorage.setItem(NOTIF_STORAGE_KEY, NOTIF_STORAGE_VALUE);
   };
 
   return (
-    <EuiTourStep
-      content={
-        <EuiText style={{ maxWidth: 320 }}>
-          <p>Select your preferred styling language with this toggle button.</p>
-        </EuiText>
-      }
-      isStepOpen={isTourOpen}
-      onFinish={onTourDismiss}
-      step={1}
-      stepsTotal={1}
-      title={
-        <>
-          <EuiIcon type="bell" size="s" /> &nbsp; Theming update
-        </>
-      }
-      footerAction={<EuiLink onClick={onTourDismiss}>Got it!</EuiLink>}
-    >
-      <EuiButtonGroup
-        buttonSize="m"
-        color="accent"
-        legend="Language selector"
-        options={theme_languages}
-        idSelected={toggleIdSelected}
-        onChange={(id) => onLanguageChange(id)}
-      />
-    </EuiTourStep>
+    <EuiButtonGroup
+      buttonSize="m"
+      color="accent"
+      legend="Language selector"
+      options={theme_languages}
+      idSelected={toggleIdSelected}
+      onChange={(id) => onLanguageChange(id)}
+    />
   );
 };