IMPLEMENT new Logo component

ConductionNL · Oct 31, 2023 · 8a315b8 · 8a315b8
1 parent 916904d
commit 8a315b8
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 48 deletions.
diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
@@ -74,7 +74,7 @@
   margin-top: 38px;
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
 }
 
 @media only screen and (max-width: 992px) {

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -5,6 +5,7 @@ import { navigate } from "gatsby-link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCode, faHeart } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
+import { Logo } from "@conduction/components";
 
 type TDynamicContentItem = {
   title: string;
@@ -34,7 +35,15 @@ export const FooterTemplate: React.FC = () => {
         </div>
 
         <div className={styles.logoAndConduction}>
-          <Logo />
+          {process.env.GATSBY_FOOTER_LOGO_URL !== "false" && (
+            <Logo
+              size="lg"
+              onClick={() =>
+                process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF) : navigate("/")
+              }
+            />
+          )}
+
           <WithLoveByConduction />
         </div>
       </div>
@@ -86,26 +95,6 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content })
   );
 };
 
-const Logo: React.FC = () => {
-  if (process.env.GATSBY_FOOTER_LOGO_URL === "false") return <></>;
-  const { t } = useTranslation();
-
-  return (
-    <div className={styles.imageContainer}>
-      <img
-        className={styles.image}
-        onClick={() =>
-          process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF) : navigate("/")
-        }
-        src={process.env.GATSBY_FOOTER_LOGO_URL}
-        alt={t("Footer-logo")}
-        aria-label={`${t("Footer-logo")}, ${t("Can open a new window")}`}
-        tabIndex={0}
-      />
-    </div>
-  );
-};
-
 const WithLoveByConduction: React.FC = () => {
   const { t } = useTranslation();
 

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -16,19 +16,6 @@
   justify-content: space-between;
 }
 
-.imageContainer {
-  height: var(--utrecht-page-header-logo-max-height);
-  width: var(--utrecht-page-header-logo-max-width);
-}
-
-.image {
-  vertical-align: middle;
-  margin-inline-end: 10px;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
 .image:hover {
   cursor: pointer;
 }

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -2,9 +2,10 @@ import * as React from "react";
 import * as styles from "./HeaderTemplate.module.css";
 import clsx from "clsx";
 import { PageHeader, SkipLink } from "@utrecht/component-library-react/dist/css-module";
-import { navigate } from "gatsby";
 import { useTranslation } from "react-i18next";
 import { useGatsbyContext } from "../../../context/gatsby";
+import { navigate } from "gatsby";
+import { Logo } from "@conduction/components";
 
 interface HeaderTemplateProps {
   layoutClassName: string;
@@ -26,15 +27,8 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
           </SkipLink>
         </div>
         <div className={styles.navContainer}>
-          <div className={styles.imageContainer}>
-            <img
-              className={styles.image}
-              onClick={() => navigate("/")}
-              src={process.env.GATSBY_HEADER_LOGO_URL}
-              alt={t("Navbar-Logo")}
-              tabIndex={0}
-            />
-          </div>
+          <Logo onClick={() => navigate("/")} />
+
           <div className={styles.languageSelectContainer}>
             <span
               className={clsx(styles.languageSelect, i18n.language === "nl" && styles.languageSelectDisabled)}

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -9,14 +9,12 @@ GATSBY_NL_DESIGN_THEME_CLASSNAME=conduction-theme
 
 # Header
 GATSBY_FAVICON_URL="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
-GATSBY_HEADER_LOGO_URL=https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png
 
 #Jumbotron
 GATSBY_ORGANISATION_NAME=Conduction
 GATSBY_JUMBOTRON_IMAGE_URL=https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png
 
 # Footer
-GATSBY_FOOTER_LOGO_URL="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
 GATSBY_FOOTER_LOGO_HREF=https://conduction.nl/
 GATSBY_FOOTER_CONTENT=[{"title":"Contact","items":[{"label":"Phone number","value":"+31 (0)85 3036840","link":"tel:+31 (0)85 3036840"},{"label":"Email address","value":"[email protected]","link":"mailto:[email protected]"},{"label":"Address","value":"Lauriergracht 14h"}]}]
 

diff --git a/pwa/static/.env.production b/pwa/static/.env.production
@@ -1,3 +1,22 @@
+# Connected Repository
 GITHUB_REPOSITORY_NAME=
+
+# options: "true" | "false"
+USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX=
+
+GATSBY_API_BASE_URL=
 GATSBY_NL_DESIGN_THEME_CLASSNAME=
-GATSBY_FAVICON_URL=
+
+# Header
+GATSBY_FAVICON_URL=
+
+#Jumbotron
+GATSBY_ORGANISATION_NAME=
+GATSBY_JUMBOTRON_IMAGE_URL=
+
+# Footer
+GATSBY_FOOTER_LOGO_HREF=
+GATSBY_FOOTER_CONTENT=
+
+#OIDN
+GATSBY_OIDN_NUMBER=