[Docs] Allow theme language to be set via (e.g.) `?themeLanguage=sass…

…` param (#5865)

* Add logic to load theme language based on url param

* Fix URLs that contain both sub hashes and query params

* Set the URL 'query parameter' on theme language change

src-docs/src/components/scroll_to_hash.tsx

@@ -4,7 +4,8 @@ import { useLocation } from 'react-router-dom';
 const ScrollToHash: FunctionComponent = () => {
   const location = useLocation();
   useEffect(() => {
-    const element = document.getElementById(location.hash.replace('#', ''));
+    const hash = location.hash.split('?')[0].replace('#', ''); // Remove any query params and the leading hash
+    const element = document.getElementById(hash);
     const headerOffset = 72;
     if (element) {
       window.scrollTo({

src-docs/src/components/with_theme/theme_context.tsx

@@ -3,7 +3,8 @@ import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
 
-export const STYLE_STORAGE_KEY = 'js_vs_sass_preference';
+const STYLE_STORAGE_KEY = 'js_vs_sass_preference';
+const URL_PARAM_KEY = 'themeLanguage';
 
 export type THEME_LANGUAGES = {
   id: 'language--js' | 'language--sass';
@@ -48,16 +49,12 @@ export class ThemeProvider extends React.Component<object, State> {
   constructor(props: object) {
     super(props);
 
-    let themeLanguage = localStorage.getItem(
-      STYLE_STORAGE_KEY
-    ) as THEME_LANGUAGES['id'];
-    if (!themeLanguage || !THEME_LANGS.includes(themeLanguage))
-      themeLanguage = defaultState.themeLanguage;
-
     let theme = localStorage.getItem('theme');
     if (!theme || !THEME_NAMES.includes(theme)) theme = defaultState.theme;
     applyTheme(theme);
 
+    const themeLanguage = this.getThemeLanguage();
+
     this.state = {
       theme,
       themeLanguage,
@@ -71,9 +68,41 @@ export class ThemeProvider extends React.Component<object, State> {
     });
   };
 
+  getThemeLanguage = () => {
+    // Allow theme language to be set by URL param, so we can link people
+    // to specific docs, e.g. ?themeLanguage=js, ?themeLanguage=sass
+    // Note that because of our hash router, this logic only works on page load/full reload
+    const urlParams = window?.location?.href?.split('?')[1]; // Note: we can't use location.search because of our hash router
+    const fromUrlParam = new URLSearchParams(urlParams).get(URL_PARAM_KEY);
+    // Otherwise, obtain it from localStorage
+    const fromLocalStorage = localStorage.getItem(STYLE_STORAGE_KEY);
+
+    let themeLanguage = (fromUrlParam
+      ? `language--${fromUrlParam}`
+      : fromLocalStorage) as THEME_LANGUAGES['id'];
+
+    // If not set by either param or storage, or an invalid value, use the default
+    if (!themeLanguage || !THEME_LANGS.includes(themeLanguage))
+      themeLanguage = defaultState.themeLanguage;
+
+    return themeLanguage;
+  };
+
+  setThemeLanguageParam = (languageKey: THEME_LANGUAGES['id']) => {
+    const languageValue = languageKey.replace('language--', ''); // Make our params more succinct
+    const hash = window?.location?.hash?.split('?'); // Note: we can't use location.search because of our hash router
+
+    const queryParams = hash[1];
+    const params = new URLSearchParams(queryParams);
+    params.set(URL_PARAM_KEY, languageValue);
+
+    window.location.hash = `${hash[0]}?${params.toString()}`;
+  };
+
   changeThemeLanguage = (language: THEME_LANGUAGES['id']) => {
     this.setState({ themeLanguage: language }, () => {
       localStorage.setItem(STYLE_STORAGE_KEY, language);
+      this.setThemeLanguageParam(language);
     });
   };