Merge branch 'dev' of github.com:ec-europa/ecl-ssg into eu-playground

Author: planctus

gatsby-browser.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from "react";
+import CustomTheme from "./src/components/Utils/theme";
+
+const ThemeInjector = ({ children }) => {
+  const theme = CustomTheme();
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-ecl-theme", theme);
+  }, [theme]);
+
+  return children;
+};
+
+export const wrapRootElement = ({ element }) => (
+  <ThemeInjector>{element}</ThemeInjector>
+);

src/components/Breadcrumb.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
 import { graphql, useStaticQuery } from 'gatsby';
-import CustomTheme from './Utils/theme';
 import Languages from './Languages';
 
 const Breadcrumb = () => {
@@ -33,7 +32,6 @@ const Breadcrumb = () => {
         <ecl-breadcrumb-item
           key={index}
           path={isLastItem ? null : path}
-          theme={theme}
           current-page={isLastItem ? 'true' : null}
         >
           {label}
@@ -42,8 +40,8 @@ const Breadcrumb = () => {
     });
 
   return (
-    <ecl-breadcrumb slot="breadcrumb" variant={theme === 'ec' ? 'breadcrumbVariant' : 'default'} theme={theme} ecl-script>
-      <ecl-breadcrumb-item path="/" theme={theme}>
+    <ecl-breadcrumb slot="breadcrumb" ecl-script>
+      <ecl-breadcrumb-item path="/">
         {title}
       </ecl-breadcrumb-item>
       {breadcrumbItems}

src/components/Head.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import CustomTheme from "./Utils/theme" 
+import CustomTheme from "./Utils/theme";
 
 export const Head: React.FC = () => {
   const theme = CustomTheme();

src/components/InPageNavigation.tsx

@@ -24,7 +24,6 @@ const InPageNavigation = forwardRef((props, ref) => {
       {...props}
       ref={ref}
       inpage-title={t('Page contents')}
-      theme={theme}
       ecl-script
       inpage-id={Math.random().toString(36).substring(2)}
     >

src/components/LanguageSwitcher.tsx

@@ -3,7 +3,6 @@ import { useStaticQuery, graphql } from 'gatsby';
 import { useLocation } from '@reach/router';
 import { useTranslation } from 'react-i18next';
 
-import CustomTheme from './Utils/theme';
 import getLang from './Utils/getLang';
 import Languages from './Languages';
 
@@ -15,7 +14,6 @@ const LanguageSwitcher = () => {
 	const { pathname } = useLocation();
   const languagePrefix = pathname.split('/')[1];
 	const path = languagePrefix ? pathname.replace(`/${languagePrefix}/`, '/') : 'home';
-	const theme = CustomTheme();
 
 	const handleLanguageChange = (language) => {
     i18n.changeLanguage(language);
@@ -25,7 +23,6 @@ const LanguageSwitcher = () => {
     <>
       {langCodes.map((language, index) => (
         <ecl-language-item
-        	theme={theme}
         	slot="eu-category"
         	path={`/${language}/${path}`}
         	lang-code={language}

src/components/Layout.tsx

@@ -3,7 +3,6 @@ import { useStaticQuery, graphql } from 'gatsby';
 import { I18nextProvider } from 'react-i18next';
 import i18n from '../i18n';
 
-import CustomTheme from './Utils/theme';
 import getLang from './Utils/getLang';
 
 import SiteHeader from './SiteHeader';
@@ -15,7 +14,6 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children, pageHeader }) => {
   const lang = getLang();
-  const theme = CustomTheme();
 
   return (
     <I18nextProvider i18n={i18n}>

src/components/Menu.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
-import CustomTheme from './Utils/theme';
 import ReactHtmlParser from 'react-html-parser';
 import stripPTag from './Utils/stripP';
 import getLang from './Utils/getLang';
@@ -9,7 +8,6 @@ import { useTranslation } from 'react-i18next';
 const Menu = () => {
   const { t } = useTranslation();
   const language = getLang();
-  const theme = CustomTheme();
   const data = useStaticQuery(graphql`
     query {
       menuItems: allMarkdownRemark(
@@ -70,7 +68,6 @@ const Menu = () => {
       ) : (
         <ecl-menu
           slot="menu"
-          theme={theme}
           close-label={t('Close')}
           back-label={t('Back')}
           menu-link="/example"
@@ -82,7 +79,6 @@ const Menu = () => {
               link={`/${language}/${
                 page.fields.customPath || page.fields.slug.replace(`/${language}/`, '').slice(0, -1)
               }/`}
-              theme={theme}
               key={`menu-item-${index}`}
             >
               {page.frontmatter.title}

src/components/SearchForm.tsx

@@ -22,7 +22,6 @@ const SearchForm: React.FC = () => {
     <EclSearchForm
       id="ecl-site-header-search-form"
       onSubmit={handleSearch}
-      theme={theme}
       input-id="ecl-search-form"
       width="m"
       placeholder={t('Placeholder text')}

src/components/SearchResults.tsx

@@ -22,14 +22,14 @@ const SearchResults: React.FC<SearchResultsProps> = ({ searchQuery, searchResult
   return (
     <>
       <ecl-spacing value="l" direction="t"></ecl-spacing>
-      <ecl-text level="1">Search Results</ecl-text>
+      <ecl-text tag="h1">Search Results</ecl-text>
       <ecl-spacing value="m" direction="b"></ecl-spacing>
       <ecl-text>Search Query: {searchQuery}</ecl-text>
       <ul>
         {searchResults.map((result) => (
           <li key={result.slug}>
             <Link to={result.slug}> 
-              <ecl-text level="3" bold> {highlightSearchQuery(result.title)}</ecl-text>
+              <ecl-text tag="h3" weight="bold"> {highlightSearchQuery(result.title)}</ecl-text>
             </Link>
             {highlightSearchQuery(result.content)}
           </li>

src/components/SiteHeader.tsx

@@ -46,7 +46,6 @@ const SiteHeader = () => {
 	    ) : (
       <ecl-site-header
         ecl-script
-        theme={theme}
         language-block
         search-block="false"
         language={languages[lang]}
@@ -64,9 +63,7 @@ const SiteHeader = () => {
         <LanguageSwitcher />
         <Menu />
       	<div slot="search" className={`ecl-site-header__search-container sc-ecl-search-form-${theme}`}>
-      		<Search
-      			theme={theme} 
-      	/>
+      		<Search />
       	</div>
       </ecl-site-header>
 	  )}