Feature/ndt 38/logo component

README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.23: Added Logo component.
   - 2.2.22: Updated Jumbotron component to be more customizable.
   - 2.2.21: 
     - Removed warning from HorizontalOverflowWrapper.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.22",
+  "version": "2.2.23",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

src/components/logo/Logo.module.css

@@ -1,15 +1,31 @@
-.logoContainer {
-  height: 100%;
+:root {
+  --conduction-logo-header-inline-size: 220px;
+  --conduction-logo-header-block-size: 40px;
+  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+
+  --conduction-logo-footer-inline-size: 330px;
+  --conduction-logo-footer-block-size: 60px;
+  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+}
+
+.container {
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-.logo {
-  background-size: 100% 100%;
+.container.header {
+  inline-size: var(--conduction-logo-header-inline-size);
+  block-size: var(--conduction-logo-header-block-size);
+  background-image: var(--conduction-logo-header-background-image);
 }
 
-.authenticatedLogo {
-  background-image: var(--conduction-authenticated-logo-background);
+.container.footer {
+  inline-size: var(--conduction-logo-footer-inline-size);
+  block-size: var(--conduction-logo-footer-block-size);
+  background-image: var(--conduction-logo-footer-background-image);
 }
 
-.unauthenticatedLogo {
-  background-image: var(--conduction-unauthenticated-logo-background);
+.container.clickable:hover {
+  cursor: pointer;
 }

src/components/logo/Logo.tsx

@@ -1,25 +1,21 @@
-import clsx from "clsx";
-import { Link } from "gatsby";
 import * as React from "react";
 import * as styles from "./Logo.module.css";
+import clsx from "clsx";
 
 interface LogoProps {
-  layoutClassName: string;
-  href?: string;
+  variant?: "header" | "footer";
+  onClick?: () => any;
+  layoutClassName?: string;
 }
 
-export const AuthenticatedLogo = ({ layoutClassName, href }: LogoProps): JSX.Element => {
-  return (
-    <Link className={styles.logoContainer} to={href ?? "#"}>
-      <div className={clsx(styles.authenticatedLogo, styles.logo, layoutClassName)} />
-    </Link>
-  );
-};
-
-export const UnauthenticatedLogo = ({ layoutClassName, href }: LogoProps): JSX.Element => {
+export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header" }) => {
   return (
-    <Link className={styles.logoContainer} to={href ?? "#"}>
-      <div className={clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName)} />
-    </Link>
+    <div
+      className={clsx(styles.container, styles[variant], [
+        onClick && styles.clickable,
+        layoutClassName && layoutClassName,
+      ])}
+      {...{ onClick }}
+    />
   );
 };

src/index.ts

@@ -24,7 +24,7 @@ import {
   SelectSingle,
 } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
-import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
+import { Logo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
@@ -62,8 +62,7 @@ export {
   SelectMultiple,
   SelectSingle,
   ImageDivider,
-  AuthenticatedLogo,
-  UnauthenticatedLogo,
+  Logo,
   MetaIcon,
   PrivateRoute,
   PrimaryTopNav,