Add Gem logo

src/components/Footer.js

@@ -5,13 +5,25 @@ import Text from "./Text";
 import Link from "./Link";
 import useTheme from "../hooks/useTheme";
 import LatitudeLogo from "../logos/latitude";
+import GemLogo from "../logos/gem";
 import tokens from "../themes/tokens";
 
-function HeaderLogo() {
-  return <LatitudeLogo />;
+const LOGO_NAMES = ["latitude", "gem"];
+
+function HeaderLogo({ name = "latitude" }) {
+  switch (name) {
+    case "gem":
+      return <GemLogo />;
+
+    case "latitude":
+    default:
+      return <LatitudeLogo />;
+  }
 }
 
-HeaderLogo.propTypes = {};
+HeaderLogo.propTypes = {
+  name: PropTypes.oneOf(LOGO_NAMES),
+};
 
 function Header({ children }) {
   return (

src/logos/gem.js

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import useContainer from "../hooks/useContainer";
+import tokens from "../themes/tokens";
+import useTheme from "../hooks/useTheme";
+
+const COLORS = ["black", "white"];
+
+const DEFAULT_PROPS = {
+  color: "black",
+  height: "7"
+};
+
+function GemLogo(_props) {
+  const props = { ...DEFAULT_PROPS, ..._props };
+  const { height } = props;
+  const theme = useTheme();
+  const { bg } = useContainer();
+  const color =
+    !COLORS.includes(_props.color) && bg
+      ? bg === "primary.blue.t100"
+        ? "white"
+        : "black"
+      : props.color;
+  const heightInt = parseInt(tokens.sizes[height], 10);
+
+  return (
+    <svg
+      height={heightInt}
+      viewBox="0 0 548.23 233.65"
+      css={{ display: "flex" }}
+      role="img"
+      aria-label="Gem by Latitude logo"
+    >
+      <path
+        d="M139.08 21.05C122.68 7.17 104 .14 83.31.14c-22.88 0-42.68 8.2-58.87 24.36S0 60.47 0 83.45s8.22 42.71 24.43 58.92 36 24.4 58.88 24.4c19.82 0 37.35-6.13 52.22-18.25a62.79 62.79 0 01-13.3 19.15C111 178.9 97.88 184.36 82.1 184.36S53 178.9 41.8 167.68c-1.39-1.4-7-7.88-7-7.88L9 169s9.3 12.92 14 17.53c16.3 16.11 36.16 24.33 59.12 24.33s42.65-8.19 58.82-24.34c15.17-15.2 23.87-37.36 23.87-60.8V12.47h-25.73zM83.33 140.69a57.1 57.1 0 1157.1-57.1 57.09 57.09 0 01-57.1 57.1zm433-104.32a18.42 18.42 0 016.18 13.8v112.66h25.71V51.94c0-12.76-3.86-23.27-13.16-33.11S511.69 4.26 498.5 4.26c-12.49 0-29.36 4.28-38.85 13.8 0 0-.44.42-1.1 1.12-.34-.36-.67-.71-1-1.05-8.57-8.69-22-13.87-35.9-13.87-11.29 0-26.16 3.5-36 11.24-6.37-8.52-13.8-9-18.21-9a24.59 24.59 0 00-17.2 6.63c-10.33 9.82-17.65 18.75-24.93 52l-.07.37c-5.54 33.53-25.74 56.61-27.08 58.11-11.89 11.13-25.06 16.54-40.26 16.54-13.16 0-24.13-3.34-32.66-9.94l98.5-98.48-6.74-7.38C298.67 6 277.51 0 257.92 0 235 0 215.19 8.22 199 24.43s-24.43 36-24.43 58.89 8.22 42.83 24.43 59.05 36 24.4 58.9 24.4c24.08 0 44-8.27 59.17-24.57 24.68-26.45 32.29-67.1 33.54-74.87v-.18c2.37-12.52 8.58-29.88 14.17-29.88 1.08 0 4.45.16 4.06 9.35v116.21h25.55V52.31a21.39 21.39 0 016.41-16c3.88-3.81 13.89-6.37 20.8-6.37 5.71 0 13.43 2 17.85 6.38 3.9 3.81 6.18 8.12 6.18 13.22v113.29h25.7V51.51a21.25 21.25 0 016.36-15.16c3.88-3.81 13.89-6.35 20.81-6.35 11.35 0 17.84 6.37 17.84 6.37zM201.08 83.32c0-15.87 5.46-29 16.68-40.22a55.17 55.17 0 0140.16-16.61c11.28 0 20.67 2.29 28 6.81l-78 78c-4.55-7.3-6.84-16.72-6.84-27.98zm46.35 144.59l-.5 1.13a8 8 0 01-2.21 3.27 6.14 6.14 0 01-3.78 1.34 7.34 7.34 0 01-4.4-1.35l1.3-3a4.17 4.17 0 003 1.17 2.88 2.88 0 001.84-.62 5 5 0 001.3-2l.26-.6-7.47-17.25h3.46l5.77 13.23 5.76-13.23h3.45zm-26-12.75a6.32 6.32 0 00-4.75-10.5H205v22.15h13a6.32 6.32 0 003.4-11.65zm-13.23-7.33h8.48a3.17 3.17 0 010 6.33h-8.48zm9.8 15.82h-9.83v-6.33H218a3.17 3.17 0 010 6.33zm69.28-22.72h-3.7v25.88h18.79v-3.69H287.3zm260.93 3.7v-3.7h-18.76v25.88h18.78v-3.69h-15.08v-7.4h13V212h-13v-7.4zm-157.14 22.18h3.7v-25.88h-3.7zm20.36-22.18h8.85v22.18H424v-22.18h8.85v-3.7h-21.4zm-58.43 0h8.86v22.18h3.69v-22.18h8.86v-3.7H353zm-22-3.7l11.76 25.88h-3.88l-3.24-7.39h-13l-3.24 7.39h-3.8l11.71-25.88zm3 14.79l-4.87-11.09-4.86 11.09zm179.23-1.85c0 8.31-6.1 12.94-13.63 12.94H489v-25.88h10.65c7.5 0 13.6 4.63 13.6 12.94zm-3.75 0c0-5.93-4.49-9.24-10.14-9.24h-6.69v18.49h6.69c5.66 0 10.16-3.31 10.16-9.25zm-41.94 1.23c0 4.66-1.86 8.34-7.25 8.34s-7.24-3.68-7.24-8.34v-14.17h-3.7v14.72c0 5 2 11.46 10.94 11.46s10.95-6.48 10.95-11.46v-14.72h-3.7z"
+        fill={theme.getColor(color)}
+      />
+    </svg>
+  );
+}
+
+GemLogo.propTypes = {
+  color: PropTypes.oneOf(COLORS),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export default GemLogo;

src/logos/latitude.js

@@ -25,13 +25,17 @@ function LatitudeLogo(_props) {
   const heightInt = parseInt(tokens.sizes[height], 10);
 
   return (
-    <svg height={heightInt} viewBox="0 0 197 32" css={{ display: "flex" }}>
+    <svg
+      height={heightInt}
+      viewBox="0 0 197 32"
+      css={{ display: "flex" }}
+      role="img"
+      aria-label="Latitude logo"
+    >
       <path
         d="M152.194 16.562c0 2.522-1.007 4.516-3.922 4.516-2.916 0-3.923-1.994-3.923-4.516V8.895h-2.001v7.965c0 2.695 1.076 6.205 5.924 6.205 4.847 0 5.923-3.51 5.923-6.205V8.895h-2.001v7.667zm22.705-.662c0-3.215-2.43-5.005-5.489-5.005h-3.623v10.01h3.623c3.06 0 5.489-1.791 5.49-5.005zm2.029 0c0 4.498-3.304 7.005-7.378 7.005h-5.764V8.895h5.764c4.074 0 7.378 2.506 7.378 7.005zm-97.028 1l-2.632-6.005-2.631 6.005H79.9zm-1.63-8.005l6.363 14.01h-2.1L80.776 18.9H73.76l-1.755 4.005h-2.06l6.343-14.01h1.981zm11.908 2h4.793v12.01h2.001v-12.01h4.794v-2H90.178v2zm31.628 0h4.793v12.01h2.002v-12.01h4.793v-2h-11.588v2zm-11.021 12.01h2.001V8.895h-2.001v14.01zm85.082-12.01v-2H185.7v14.01h10.167v-2h-8.165V16.9h7.025v-2h-7.025v-4.005h8.165zm-141.257-2h-2v14.01h10.167v-2H54.61V8.894zM6.061 0h-5.6v32h32v-5.6h-26.4V0zm14.8 5.6a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6zm8.8 12a2.8 2.8 0 100 5.6 2.8 2.8 0 000-5.6zm-17.6-12a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6zm17.6 3.2a2.8 2.8 0 100 5.6 2.8 2.8 0 000-5.6zm2.8-6a2.8 2.8 0 11-5.599 0 2.8 2.8 0 015.6 0z"
         fillRule="evenodd"
         fill={theme.getColor(color)}
-        role="img"
-        aria-label="Latitude logo"
       />
     </svg>
   );