Merge pull request #1501 from ASU/UDS-1979

UDS-1979: fix(unity-bootstrap-theme): added hover white to footer's social icon

Author: davidornelas11

packages/component-header-footer/src/footer/components/Social/index.js

@@ -69,6 +69,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="Facebook Social Media Icon"
                       icon={faFacebookSquare}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -87,6 +88,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="Twitter Social Media Icon"
                       icon={faSquareXTwitter}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -105,6 +107,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="Instagram Social Media Icon"
                       icon={faInstagramSquare}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -123,6 +126,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="YouTube Social Media Icon"
                       icon={faYoutubeSquare}
+                      className="social-icon"
                     />
                   </a>
                 )}
@@ -141,6 +145,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
                     <FontAwesomeIcon
                       title="LinkedIn Social Media Icon"
                       icon={faLinkedin}
+                      className="social-icon"
                     />
                   </a>
                 )}

packages/component-header-footer/src/footer/index.styles.js

@@ -28,6 +28,11 @@ const StyledFooter = styled.footer`
     font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans,
       sans-serif;
     line-height: 1.5rem;
+
+    a:focus, button:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--color-base-white), 0 0 0 4px var(--color-base-grey-7) !important;
+    }
   }
 
   .btn,
@@ -132,6 +137,12 @@ const StyledFooter = styled.footer`
       .nav {
         padding-bottom: 1.5rem;
 
+        .nav-link .social-icon {
+          &:hover {
+            color: var(--color-base-white);
+          }
+        }
+
         @media (min-width: 768px) {
           padding: 2.5rem 0;
           justify-content: flex-end;
@@ -271,8 +282,7 @@ const StyledFooter = styled.footer`
           text-decoration: none;
           display: block;
 
-          &:hover,
-          &:focus {
+          &:hover {
             color: var(--color-base-gold);
             text-decoration: underline;
           }
@@ -282,6 +292,7 @@ const StyledFooter = styled.footer`
           padding: 0;
           display: block;
           min-height: fit-content;
+          overflow: visible;
         }
       }
     }

packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss

@@ -141,6 +141,10 @@ footer {
       color: $uds-color-base-gray-4;
       line-height: 1;
       padding-top: 7px; // Magic number. Reducing the padding by 1px to make the height = 48px.
+
+      :hover {
+        color: $uds-color-base-white;
+      }
     }
   }
 }