From 3787f9eda3ecaeba07c0515cfbbd8fc338116f75 Mon Sep 17 00:00:00 2001
From: Doug Gibson <email@dgibson.net>
Date: Thu, 5 Oct 2023 12:07:42 -0400
Subject: [PATCH] Bugfix/footer nav (#80)

* Added the button class to internal footer nav links to give them proper letter spacing and remove dupe CSS.

* Remove duplicate CSS and fix vertical padding

* Remove btn class on footer nav

* Add btn CSS props back to footer nav links, with letter spacing

* Remove a couple more cases of links turning bold on hover, causing jumpiness.
---
 .../src/sass/components/footer/_external.scss    |  2 --
 .../src/sass/components/footer/_internal.scss    | 16 +++++-----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/vanilla/src/sass/components/footer/_external.scss b/packages/vanilla/src/sass/components/footer/_external.scss
index c2c7df8c..6f2794f5 100644
--- a/packages/vanilla/src/sass/components/footer/_external.scss
+++ b/packages/vanilla/src/sass/components/footer/_external.scss
@@ -77,7 +77,6 @@
 
     &:hover {
       color: var(--cbp-color-interactive-primary-lighter);
-      font-weight: var(--cbp-font-weight-bold);
       text-decoration: underline;
     }
 
@@ -111,7 +110,6 @@
     &:hover {
       background-color: var(--cbp-color-interactive-secondary-darker);
       color: var(--cbp-color-interactive-secondary-lighter);
-      font-weight: var(--cbp-font-weight-bold);
     }
 
     // Remove !important color during Link component refactor
diff --git a/packages/vanilla/src/sass/components/footer/_internal.scss b/packages/vanilla/src/sass/components/footer/_internal.scss
index 3d923b0d..678ea881 100644
--- a/packages/vanilla/src/sass/components/footer/_internal.scss
+++ b/packages/vanilla/src/sass/components/footer/_internal.scss
@@ -32,6 +32,7 @@
   & a[href] {
     color: var(--cbp-color-interactive-secondary-lighter);
     display: inline-block;
+    border: 0;
 
     &:hover {
       background-color: var(--cbp-color-interactive-secondary-darker);
@@ -59,13 +60,8 @@
     padding: var(--cbp-font-size-button) 0 var(--cbp-font-size-button) var(--cbp-space-5x); // no spacing token for 0.875 height of button = 44px
     text-decoration: none;
     text-transform: uppercase;
+    letter-spacing: var(--cbp-letter-spacing-loose);
     width: 100%;
-
-    // TODO: fix bouncing
-    &:hover,
-    &:focus {
-      font-weight: var(--cbp-font-weight-bold);
-    }
   }
 }
 
@@ -150,6 +146,7 @@
   }
 }
 
+/* Medium breakpoint or larger */
 @media (min-width: $cbp-breakpoint-md) {
   .cbp-footer > nav > ul {
     display: flex;
@@ -161,11 +158,6 @@
     }
   }
 
-  .cbp-footer__info {
-    padding-top: var(--cbp-space-4x);
-    padding-bottom: var(--cbp-space-4x);
-  }
-
   .cbp-footer__support > ul {
     flex-direction: row;
     flex-wrap: wrap;
@@ -183,6 +175,7 @@
   }
 }
 
+/* Large breakpoint or larger */
 @media (min-width: $cbp-breakpoint-lg) {
   .cbp-footer__info {
     display: flex;
@@ -190,6 +183,7 @@
   }
 }
 
+/* XL breakpoint or larger */
 @media (min-width: $cbp-breakpoint-xl) {
   .cbp-footer > nav > ul {
     padding-left: var(--cbp-space-11x);