fix(custom buttons): more null checking; fix display name; add alt

src/components/Button/Button.js

@@ -5,7 +5,7 @@ import { runtimeConfig } from '../../config';
 import { trackUmamiEvent } from '../../analytics/umami';
 
 function Button(props) {
-  const { name, href, displayName, logo, styles } = props;
+  const { name, href, displayName, logo, styles, alt } = props;
 
   const handleClick = () => {
     const eventName = `${name}-button`;
@@ -27,6 +27,7 @@ function Button(props) {
         rel="noopener noreferrer"
         onClick={handleClick}
         style={styles ? styles : undefined}
+        title={alt || displayName}
       >
         {logo && (
           <img className="icon" src={logo} alt={`${displayName} logo`} />

src/components/Home/Home.js

@@ -61,19 +61,38 @@ function Home(props) {
     const buttonColors = runtimeConfig.CUSTOM_BUTTON_COLOR?.split(',');
     const textColors = runtimeConfig.CUSTOM_BUTTON_TEXT_COLOR?.split(',');
     // have to clean up some of the strings to standardize for analytics
-    return texts.map((t, i) => (
-      <Button
-        key={i}
-        name={names[i].trim().toLowerCase()}
-        href={urls[i].trim()}
-        displayName={altTexts[i].trim()}
-        styles={{
-          backgroundColor: buttonColors[i].trim(),
-          color: textColors[i].trim(),
-        }}
-        order={buttonOrder(names[i].trim())}
-      />
-    ));
+
+    return texts.map((t, i) => {
+      // do not try to render button unless it has all of the required props
+      return (
+        <React.Fragment key={i}>
+          {names &&
+            names[i] &&
+            urls &&
+            urls[i] &&
+            texts &&
+            texts[i] &&
+            buttonColors &&
+            buttonColors[i] &&
+            textColors &&
+            textColors[i] &&
+            altTexts &&
+            altTexts[i] && (
+              <Button
+                name={names[i]?.trim().toLowerCase()}
+                href={urls[i]?.trim()}
+                displayName={texts[i]?.trim()}
+                styles={{
+                  backgroundColor: buttonColors[i]?.trim(),
+                  color: textColors[i].trim(),
+                }}
+                order={buttonOrder(names[i]?.trim())}
+                alt={altTexts[i]?.trim()}
+              />
+            )}
+        </React.Fragment>
+      );
+    });
   };
 
   return (

src/components/Sort/__test__/__snapshots__/Sort.test.js.snap

@@ -8,6 +8,7 @@ Array [
     onClick={[Function]}
     rel="noopener noreferrer"
     target="_blank"
+    title="LinkedIn"
   >
     <img
       alt="LinkedIn logo"
@@ -22,6 +23,7 @@ Array [
     onClick={[Function]}
     rel="noopener noreferrer"
     target="_blank"
+    title="GitHub"
   >
     <img
       alt="GitHub logo"
@@ -36,6 +38,7 @@ Array [
     onClick={[Function]}
     rel="noopener noreferrer"
     target="_blank"
+    title="Twitch"
   >
     <img
       alt="Twitch logo"
@@ -50,6 +53,7 @@ Array [
     onClick={[Function]}
     rel="noopener noreferrer"
     target="_blank"
+    title="YouTube"
   >
     <img
       alt="YouTube logo"

yarn.lock

@@ -3232,9 +3232,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.896:
-  version "1.3.907"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.907.tgz#c8e155a17cb642a1023481c601aa3ad9ee61f402"
-  integrity sha512-xoUPSkjimw51d9ryeH38XUwmR3HmCA+eky4hk0YEgsWeBWGyhb35OCvT3lWAdmvIkcGYCRNOB8LvtO00dJQpOA==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.0.tgz#7456192519838f881e35e4038bf4ad2c36353e63"
+  integrity sha512-+oXCt6SaIu8EmFTPx8wNGSB0tHQ5biDscnlf6Uxuz17e9CjzMRtGk9B8705aMPnj0iWr3iC74WuIkngCsLElmA==
 
 emittery@^0.7.1:
   version "0.7.2"
@@ -5977,9 +5977,9 @@ media-typer@0.3.0:
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
 memfs@^3.2.2:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.3.0.tgz#4da2d1fc40a04b170a56622c7164c6be2c4cbef2"
-  integrity sha512-BEE62uMfKOavX3iG7GYX43QJ+hAeeWnwIAuJ/R6q96jaMtiLzhsxHJC8B1L7fK7Pt/vXDRwb3SG/yBpNGDPqzg==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.0.tgz#8bc12062b973be6b295d4340595736a656f0a257"
+  integrity sha512-o/RfP0J1d03YwsAxyHxAYs2kyJp55AFkMazlFAZFR2I2IXkxiUTXRabJ6RmNNCQ83LAD2jy52Khj0m3OffpNdA==
   dependencies:
     fs-monkey "1.0.3"
 
@@ -7236,13 +7236,13 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
     source-map "^0.6.1"
 
 postcss@^8.2.15, postcss@^8.2.4, postcss@^8.3.11:
-  version "8.3.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
-  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.0.tgz#cd4c33af00a00ba93ccf6ae1219f57c5e5ab5234"
+  integrity sha512-BRMNx3Wy7UI89jN8H4ZVS5lQMPM2OSMkOkvDCSjwXa7PWTs24k7Lm55NXLbMbs070LvraXaxN5l1npSOS6wMVw==
   dependencies:
     nanoid "^3.1.30"
     picocolors "^1.0.0"
-    source-map-js "^0.6.2"
+    source-map-js "^1.0.1"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -8274,10 +8274,10 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+source-map-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
+  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
 
 source-map-resolve@^0.5.0:
   version "0.5.3"
@@ -9240,9 +9240,9 @@ walker@^1.0.7, walker@~1.0.5:
     makeerror "1.0.12"
 
 watchpack@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce"
-  integrity sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.0.tgz#a41bca3da6afaff31e92a433f4c856a0c25ea0c4"
+  integrity sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -9336,9 +9336,9 @@ webpack-sources@^3.2.2:
   integrity sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==
 
 webpack@^5.61.0:
-  version "5.64.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.64.2.tgz#152e28d4712a6223b06c06cba0d3e622a61611a0"
-  integrity sha512-4KGc0+Ozi0aS3EaLNRvEppfZUer+CaORKqL6OBjDLZOPf9YfN8leagFzwe6/PoBdHFxc/utKArl8LMC0Ivtmdg==
+  version "5.64.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.64.3.tgz#f4792cc3f8528db2c18375fa2cd269f69e0bf69f"
+  integrity sha512-XF6/IL9Bw2PPQioiR1UYA8Bs4tX3QXJtSelezKECdLFeSFzWoe44zqTzPW5N+xI3fACaRl2/G3sNA4WYHD7Iww==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.50"