SCSS and Component cleanup (pt 1) (#20572)

* turn article.scss into a module + componentized

* Update Survey to use only component styles, add cancel button

* Update GenericError + 404 page to use only standard classes

* update LearningTrack to not use markdown-body

* remove / consolidate stylesheets

* cleanup Graphiql explorer page and scss

* Componentize Breadcrumb styles

* Componentize DeprecationBanner styles

* scope h2 a link style to markdown-body

* cleanup nav, organize page-header and page-footer components

* remove unused scroll-button.scss

* organize LanguagePicker and ProductPicker

* add declarations file

* remove featured-links.scss, update tests

* update list utility and toc test

* fix bad merge resolution

* update breadcrumbs test

stylesheets/article.scss

@@ -1,43 +0,0 @@
-/* Grid-based layout
-------------------------------------------------------------------------------*/
-
-.article-grid-container {
-  max-width: 720px;
-
-  @include breakpoint(xl) {
-    max-width: none;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: minmax(500px, 720px) minmax(220px, 1fr);
-    grid-template-areas:
-      "top right-sidebar"
-      "bottom right-sidebar";
-    column-gap: $spacer-6;
-  }
-
-  @include breakpoint(xl) {
-    column-gap: $spacer-9;
-  }
-}
-
-.article-grid-toc {
-  grid-area: right-sidebar;
-}
-
-.article-grid-toc-content {
-  @include breakpoint(xl) {
-    position: sticky;
-    top: $spacer-4;
-    max-height: calc(100vh - #{$spacer-4});
-    overflow-y: auto;
-    padding-bottom: $spacer-4;
-  }
-}
-
-.article-grid-head {
-  grid-area: top;
-}
-
-.article-grid-body {
-  grid-area: bottom;
-}

stylesheets/breadcrumbs.scss

@@ -1,17 +0,0 @@
-/* Breadcrumbs
-------------------------------------------------------------------------------*/
-
-.breadcrumbs-wrapper {
-  @include breakpoint(xl) {
-    height: 39px;
-  }
-}
-
-.breadcrumbs a:not(:last-child)::after,
-.breadcrumbs span:not(:last-child)::after {
-  content: "/";
-  color: var(--color-auto-gray-4);
-  padding-right: $spacer-2;
-  padding-left: $spacer-2;
-  display: inline-block;
-}

stylesheets/deprecation-banner.scss

@@ -1,24 +0,0 @@
-/* Deprecation banner
-------------------------------------------------------------------------------*/
-.deprecation-banner {
-  & + .alert {
-    margin-top: 5px;
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-
-  b,
-  strong {
-    font-weight: bold;
-  }
-
-  p {
-    margin: 0;
-  }
-}

stylesheets/dev-toc.scss

@@ -1,14 +0,0 @@
-/* Styles used for top-level TOC in development only
-------------------------------------------------------------------------------*/
-
-ul.versions-list {
-  list-style-type: none;
-}
-
-ul.versions-list > li {
-  margin: 3px 0 0 0;
-}
-
-details ul.products-list li {
-  margin: 3px 0 0 30px;
-}

stylesheets/explorer.scss

@@ -1,8 +0,0 @@
-//
-// GraphiQL wrapper
-//
-iframe#graphiql {
-  width: 100%;
-  height: 715px;
-  border: 1px solid var(--color-auto-gray-3);
-}

stylesheets/featured-links.scss

@@ -1,16 +0,0 @@
-/* Getting Started and Popular Articles sections in article layout */
-.markdown-body div.featured-links {
-  padding-bottom: 30px;
-}
-
-.markdown-body div.featured-links-heading {
-  padding-top: 24px;
-}
-
-.markdown-body div.featured-links p.link-with-intro-intro {
-  margin-bottom: 5px;
-}
-
-.markdown-body div.featured-links h4.link-with-intro-title {
-  margin-top: 0;
-}

stylesheets/headings.scss

@@ -6,16 +6,6 @@ h3 {
   }
 }
 
-// all h2 headers that are links should be blue-500
-h2 a {
-  color: var(--color-auto-blue-5);
-}
-
-// ... except those on each product's toc
-.product-landing h2 a {
-  color: var(--color-auto-gray-9);
-}
-
 .markdown-body {
   h1,
   h2,
@@ -29,6 +19,10 @@ h2 a {
   h2 {
     font-size: 1.25em;
   }
+  // all h2 headers that are links should be blue-500
+  h2 a {
+    color: var(--color-auto-blue-5);
+  }
   #article-contents h2:not(.link-with-intro-title) {
     padding-bottom: 0;
     border-bottom: none;

stylesheets/index.scss

@@ -10,32 +10,20 @@ $marketing-font-path: "/assets/fonts/inter/";
 @import "font-mktg.scss";
 
 @import "alerts.scss";
-@import "article.scss";
-@import "breadcrumbs.scss";
 @import "bump-link.scss";
 @import "code.scss";
-@import "deprecation-banner.scss";
-@import "dev-toc.scss";
-@import "explorer.scss";
 @import "extended-markdown.scss";
-@import "featured-links.scss";
 @import "font-mktg.scss";
 @import "gradient.scss";
 @import "headings.scss";
-@import "survey.scss";
 @import "images.scss";
 @import "lists.scss";
-@import "nav.scss";
-@import "opacity.scss";
-@import "print.scss";
 @import "product-sublanding.scss";
 @import "release-notes.scss";
-@import "scroll-button.scss";
 @import "search.scss";
 @import "shadows.scss";
 @import "sidebar.scss";
 @import "summary.scss";
 @import "syntax-highlighting.scss";
 @import "tables.scss";
-@import "underline-dashed.scss";
 @import "utilities.scss";

stylesheets/lists.scss

@@ -1,10 +1,6 @@
 /* Numbered procedures (step 1, step 2, ...)
 ------------------------------------------------------------------------------*/
 
-.list-style-inside {
-  list-style: inside;
-}
-
 .markdown-body ol {
   counter-reset: li;
   list-style: none;

stylesheets/nav.scss

@@ -1,98 +0,0 @@
-/* Navigation & Header
-.nav-mobile prefixed classes style nav elements only for mobile (< 768px)
-.nav-desktop prefixed classes style nav elements only for desktop
-------------------------------------------------------------------------------*/
-
-.header-notifications a {
-  color: var(--color-auto-blue-6);
-  text-decoration: underline;
-}
-
-header summary,
-.nav-contact {
-  @include breakpoint(md) {
-    font-size: $spacer-3;
-  }
-}
-
-.dropdown-withArrow[open] {
-  .arrow {
-    transform: rotate(180deg) scaleX(-1);
-  }
-}
-
-.nav-mobile-dropdown {
-  @media (max-width: $width-md - 1) {
-    display: none;
-    visibility: hidden;
-  }
-}
-
-.nav-mobile-dropdown.js-open {
-  @media (max-width: $width-md) {
-    display: block;
-    visibility: visible;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 2;
-    background-color: var(--color-auto-gray-0);
-    padding: $spacer-3;
-    padding-top: $spacer-8;
-    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.nav-mobile-burgerIcon {
-  background: url("/assets/images/octicons/hamburger.svg") no-repeat right;
-  width: 18px;
-  height: 23px;
-  position: relative;
-  z-index: 3;
-
-  &.js-open {
-    background: url("/assets/images/octicons/x.svg") no-repeat right;
-    width: 16px;
-    height: 21px;
-  }
-}
-
-.nav-desktop-productDropdown,
-.nav-desktop-langDropdown {
-  @include breakpoint(md) {
-    min-width: 200px;
-    background: var(--color-bg-primary);
-    border-radius: 3px;
-    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.nav-desktop-productDropdownButton {
-  @include breakpoint(md) {
-    font-family: $mono-font;
-  }
-}
-
-// Allows dropdown to be closed when clicking outside of it
-@include breakpoint(md) {
-  details.close-when-clicked-outside[open] > summary::before {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 5;
-    display: block;
-    cursor: default;
-    content: " ";
-    background: transparent;
-  }
-}
-
-.nav-dropdown {
-  @media (min-width: 1012px) and (max-width: 1279px) {
-    right: 0;
-  }
-}

stylesheets/opacity.scss

@@ -1,12 +0,0 @@
-.opacity-0 {
-  opacity: 0;
-}
-.opacity-60 {
-  opacity: 0.6;
-}
-.opacity-70 {
-  opacity: 0.7;
-}
-.opacity-100 {
-  opacity: 1;
-}

stylesheets/print.scss

@@ -1,8 +0,0 @@
-/* Styles used while printing
-------------------------------------------------------------------------------*/
-
-@media print {
-  .no-print {
-    display: none;
-  }
-}

stylesheets/scroll-button.scss

@@ -1,20 +0,0 @@
-button.arrow-for-scrolling-top {
-  opacity: 0;
-  transition: 0.2s;
-  background-color: var(--color-auto-blue-5);
-  color: var(--color-text-inverse);
-  position: fixed;
-  bottom: $spacer-2;
-  right: $spacer-2;
-  display: block;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: $spacer-1;
-
-  &.show {
-    opacity: 1;
-    border: none;
-    transition: 0.2s;
-  }
-}

stylesheets/survey.scss

@@ -1,8 +0,0 @@
-/* Survey override */
-:checked + .x-radio-label {
-  background: var(--color-auto-blue-5);
-
-  svg {
-    fill: var(--color-auto-inverse);
-  }
-}

stylesheets/underline-dashed.scss

@@ -1,13 +0,0 @@
-// Text styling
-.underline-dashed {
-  display: inline;
-  padding-bottom: $spacer-1;
-  background-image: linear-gradient(
-    to right,
-    var(--color-auto-gray-3) 50%,
-    transparent 0%
-  );
-  background-repeat: repeat-x;
-  background-position: bottom;
-  background-size: 10px 1px;
-}

stylesheets/utilities.scss

@@ -17,3 +17,50 @@
 .min-h-screen {
   min-height: 100vh;
 }
+
+/* Print utilities
+------------------------------------------------------------------------------*/
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+/* Opacity utilities
+------------------------------------------------------------------------------*/
+
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-60 {
+  opacity: 0.6;
+}
+.opacity-70 {
+  opacity: 0.7;
+}
+.opacity-100 {
+  opacity: 1;
+}
+
+/* Text utilities
+------------------------------------------------------------------------------*/
+
+.underline-dashed {
+  padding-bottom: $spacer-1;
+  background-image: linear-gradient(
+    to right,
+    var(--color-auto-gray-3) 50%,
+    transparent 0%
+  );
+  background-repeat: repeat-x;
+  background-position: bottom;
+  background-size: 10px 1px;
+}
+
+/* List utilities
+------------------------------------------------------------------------------*/
+
+.list-style-inside {
+  list-style: inside;
+}