Merge pull request #142 from ConductionNL/feature/NDT-38/logo-component

Feature/ndt 38/logo component
ConductionNL · Nov 7, 2023 · 805e777 · 805e777
2 parents f3bcbbc + d78e984
commit 805e777
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 64 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -4,9 +4,7 @@
   "private": true,
   "description": "Product Website Template",
   "author": "Conduction",
-  "keywords": [
-    "gatsby"
-  ],
+  "keywords": ["gatsby"],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -24,8 +22,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.18",
-    "@conduction/theme": "1.0.52",
+    "@conduction/components": "2.2.23",
+    "@conduction/theme": "1.0.53",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",
@@ -57,7 +55,6 @@
     "@nl-design-system-unstable/westervoort-design-tokens": "^1.0.0-alpha.100",
     "@nl-design-system-unstable/zevenaar-design-tokens": "^1.0.0-alpha.100",
     "@nl-design-system-unstable/zwolle-design-tokens": "^1.0.0-alpha.100",
-    "@parcel/watcher": "^2.3.0",
     "@tabler/icons-react": "2.21.0",
     "@types/qs": "^6.9.9",
     "@types/react": "^18.0.28",
@@ -91,6 +88,7 @@
     "showdown": "^2.1.0"
   },
   "devDependencies": {
+    "@parcel/watcher": "^2.3.0",
     "@types/dateformat": "^5.0.0",
     "@types/dedent": "^0.7.0",
     "@types/node": "^17.0.23",

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
@@ -105,7 +105,7 @@
   margin-top: 38px;
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .iconLeft {

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -15,6 +15,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";
 import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 import { useFooterContent } from "../../../hooks/footerContent";
 
@@ -78,7 +79,15 @@ export const FooterTemplate: React.FC = () => {
         </div>
 
         <div className={styles.logoAndConduction}>
-          <Logo />
+          {process.env.GATSBY_FOOTER_LOGO_URL !== "false" && (
+            <Logo
+              variant="footer"
+              onClick={() =>
+                process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF) : navigate("/")
+              }
+            />
+          )}
+
           <WithLoveByConduction />
         </div>
       </div>
@@ -132,26 +141,6 @@ const DynamicSectionHeading: React.FC<{ content: TDynamicContentItem; heading?:
   }
 };
 
-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;
 }