SCSS and Component cleanup (pt 1) (github#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
skalnik · Jul 29, 2021 · a511c95 · a511c95
1 parent 4d87ccf
commit a511c95
Show file tree

Hide file tree

Showing 52 changed files with 441 additions and 601 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -47,6 +47,7 @@ COPY content/index.md ./content/index.md
 
 COPY next.config.js ./next.config.js
 COPY tsconfig.json ./tsconfig.json
+COPY next-env.d.ts ./next-env.d.ts
 
 RUN npx tsc --noEmit
 

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
@@ -18,31 +18,35 @@ export const Breadcrumbs = ({ variant = 'default' }: Props) => {
   const { breadcrumbs } = useMainContext()
 
   return (
-    <nav className="breadcrumbs f5" aria-label="Breadcrumb">
-      {Object.values(breadcrumbs).map((breadcrumb) => {
+    <nav data-testid="breadcrumbs" className="f5" aria-label="Breadcrumb">
+      {Object.values(breadcrumbs).map((breadcrumb, i, arr) => {
         if (!breadcrumb) {
           return null
         }
 
         const title = `${breadcrumb.documentType}: ${breadcrumb.title}`
-        return !breadcrumb.href ? (
-          <span key={title} title={title}>
-            {breadcrumb.title}
-          </span>
-        ) : (
-          <Link
-            key={title}
-            href={breadcrumb.href}
-            title={title}
-            className={cx(
-              'd-inline-block',
-              variant === 'large' && 'text-uppercase text-mono',
-              pathWithLocale === breadcrumb.href && 'color-text-tertiary'
-            )}
-          >
-            {breadcrumb.title}
-          </Link>
-        )
+        return [
+          !breadcrumb.href ? (
+            <span data-testid="breadcrumb-title" key={title} title={title} className="px-2">
+              {breadcrumb.title}
+            </span>
+          ) : (
+            <Link
+              key={title}
+              data-testid="breadcrumb-link"
+              href={breadcrumb.href}
+              title={title}
+              className={cx(
+                'd-inline-block px-2',
+                variant === 'large' && 'text-uppercase text-mono',
+                pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+              )}
+            >
+              {breadcrumb.title}
+            </Link>
+          ),
+          i !== arr.length - 1 ? <span className="color-text-tertiary">/</span> : null,
+        ]
       })}
     </nav>
   )

diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
@@ -1,11 +1,11 @@
 import Head from 'next/head'
 
 import { SidebarNav } from 'components/SidebarNav'
-import { Header } from 'components/Header'
-import { SmallFooter } from 'components/SmallFooter'
+import { Header } from 'components/page-header/Header'
+import { SmallFooter } from 'components/page-footer/SmallFooter'
 import { ScrollButton } from 'components/ScrollButton'
-import { SupportSection } from 'components/SupportSection'
-import { DeprecationBanner } from 'components/DeprecationBanner'
+import { SupportSection } from 'components/page-footer/SupportSection'
+import { DeprecationBanner } from 'components/page-header/DeprecationBanner'
 import { useMainContext } from 'components/context/MainContext'
 import { useTranslation } from './hooks/useTranslation'
 

diff --git a/components/DeprecationBanner.tsx b/components/DeprecationBanner.tsx
diff --git a/components/GenericError.tsx b/components/GenericError.tsx
@@ -17,8 +17,8 @@ export function GenericError() {
       <SimpleHeader />
 
       <div className="container-xl p-responsive py-9 width-full flex-1">
-        <article className="markdown-body col-md-10 col-lg-7 mx-auto">
-          <h1>Ooops!</h1>
+        <article className="col-md-10 col-lg-7 mx-auto">
+          <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
           <p className="lead-mktg">It looks like something went wrong.</p>
           <p className="lead-mktg">
             We track these errors automatically, but if the problem persists please feel free to

diff --git a/components/article/ArticleContent.tsx b/components/article/ArticleContent.tsx
@@ -0,0 +1,12 @@
+type Props = {
+  children: string
+}
+export const ArticleContent = ({ children }: Props) => {
+  return (
+    <div
+      id="article-contents"
+      className="markdown-body"
+      dangerouslySetInnerHTML={{ __html: children }}
+    />
+  )
+}
diff --git a/stylesheets/article.scss → ...nts/article/ArticleGridLayout.module.scss b/stylesheets/article.scss → ...nts/article/ArticleGridLayout.module.scss
@@ -1,7 +1,8 @@
-/* Grid-based layout
-------------------------------------------------------------------------------*/
+@import "@primer/css/layout/index.scss";
+@import "@primer/css/support/variables/layout.scss";
+@import "@primer/css/marketing/support/variables.scss";
 
-.article-grid-container {
+.container {
   max-width: 720px;
 
   @include breakpoint(xl) {
@@ -20,11 +21,11 @@
   }
 }
 
-.article-grid-toc {
+.sidebar {
   grid-area: right-sidebar;
 }
 
-.article-grid-toc-content {
+.sidebarContent {
   @include breakpoint(xl) {
     position: sticky;
     top: $spacer-4;
@@ -34,10 +35,10 @@
   }
 }
 
-.article-grid-head {
+.head {
   grid-area: top;
 }
 
-.article-grid-body {
+.content {
   grid-area: bottom;
 }
diff --git a/components/article/ArticleGridLayout.tsx b/components/article/ArticleGridLayout.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './ArticleGridLayout.module.scss'
+
+type Props = {
+  head?: React.ReactNode
+  toc?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+}
+export const ArticleGridLayout = ({ head, toc, children, className }: Props) => {
+  return (
+    <div className={cx(styles.container, className)}>
+      {/* head */}
+      {head && <div className={styles.head}>{head}</div>}
+
+      {/* toc */}
+      {toc && (
+        <div className={cx(styles.sidebar, 'border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}>
+          <div className={styles.sidebarContent}>{toc}</div>
+        </div>
+      )}
+
+      {/* content */}
+      <div className={styles.content}>{children}</div>
+    </div>
+  )
+}
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
@@ -1,13 +1,14 @@
 import cx from 'classnames'
 
 import { DefaultLayout } from 'components/DefaultLayout'
-import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
-import { Breadcrumbs } from 'components/Breadcrumbs'
+import { ArticleTopper } from 'components/article/ArticleTopper'
 import { ArticleTitle } from 'components/article/ArticleTitle'
 import { useArticleContext } from 'components/context/ArticleContext'
 import { InfoIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { LearningTrackNav } from './LearningTrackNav'
+import { ArticleContent } from './ArticleContent'
+import { ArticleGridLayout } from './ArticleGridLayout'
 
 export const ArticlePage = () => {
   const {
@@ -26,21 +27,12 @@ export const ArticlePage = () => {
   return (
     <DefaultLayout>
       <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
-        <article className="markdown-body">
-          <div className="d-lg-flex flex-justify-between">
-            <div className="d-block d-lg-none">
-              <ArticleVersionPicker />
-            </div>
-            <div className="d-flex flex-items-center">
-              <Breadcrumbs />
-            </div>
-            <div className="d-none d-lg-block">
-              <ArticleVersionPicker />
-            </div>
-          </div>
+        <ArticleTopper />
 
-          <div className="article-grid-container mt-2">
-            <div className="article-grid-head">
+        <ArticleGridLayout
+          className="mt-7"
+          head={
+            <>
               <ArticleTitle>{title}</ArticleTitle>
 
               {contributor && (
@@ -99,52 +91,43 @@ export const ArticlePage = () => {
                   dangerouslySetInnerHTML={{ __html: product }}
                 />
               )}
-            </div>
-
-            <div className="article-grid-toc border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0">
-              <div className="article-grid-toc-content">
-                {miniTocItems.length > 1 && (
-                  <>
-                    <h2 id="in-this-article" className="f5 mb-2">
-                      <a className="Link--primary" href="#in-this-article">
-                        {t('miniToc')}
-                      </a>
-                    </h2>
-                    <ul className="list-style-none pl-0 f5 mb-0">
-                      {miniTocItems.map((item) => {
-                        return (
-                          <li
-                            key={item.contents}
-                            className={cx(
-                              `ml-${item.indentationLevel * 3}`,
-                              item.platform,
-                              'mb-2 lh-condensed'
-                            )}
-                            dangerouslySetInnerHTML={{ __html: item.contents }}
-                          />
-                        )
-                      })}
-                    </ul>
-                  </>
-                )}
-              </div>
-            </div>
+            </>
+          }
+          toc={
+            miniTocItems.length > 1 && (
+              <>
+                <h2 id="in-this-article" className="f5 mb-2">
+                  <a className="Link--primary" href="#in-this-article">
+                    {t('miniToc')}
+                  </a>
+                </h2>
+                <ul className="list-style-none pl-0 f5 mb-0">
+                  {miniTocItems.map((item) => {
+                    return (
+                      <li
+                        key={item.contents}
+                        className={cx(
+                          `ml-${item.indentationLevel * 3}`,
+                          item.platform,
+                          'mb-2 lh-condensed'
+                        )}
+                        dangerouslySetInnerHTML={{ __html: item.contents }}
+                      />
+                    )
+                  })}
+                </ul>
+              </>
+            )
+          }
+        >
+          <ArticleContent>{renderedPage}</ArticleContent>
+        </ArticleGridLayout>
 
-            <div className="markdown-body">
-              <div
-                id="article-contents"
-                className="article-grid-body"
-                dangerouslySetInnerHTML={{ __html: renderedPage }}
-              />
-            </div>
+        {currentLearningTrack?.trackName ? (
+          <div className="mt-4">
+            <LearningTrackNav track={currentLearningTrack} />
           </div>
-
-          {currentLearningTrack?.trackName ? (
-            <div className="d-block mt-4 markdown-body">
-              <LearningTrackNav track={currentLearningTrack} />
-            </div>
-          ) : null}
-        </article>
+        ) : null}
       </div>
     </DefaultLayout>
   )

diff --git a/components/article/ArticleTopper.tsx b/components/article/ArticleTopper.tsx
@@ -0,0 +1,18 @@
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+
+export const ArticleTopper = () => {
+  return (
+    <div className="d-lg-flex flex-justify-between">
+      <div className="d-block d-lg-none mb-2">
+        <ArticleVersionPicker />
+      </div>
+      <div className="d-flex flex-items-center">
+        <Breadcrumbs />
+      </div>
+      <div className="d-none d-lg-block">
+        <ArticleVersionPicker />
+      </div>
+    </div>
+  )
+}
diff --git a/components/article/LearningTrackNav.tsx b/components/article/LearningTrackNav.tsx
@@ -29,7 +29,7 @@ export function LearningTrackNav({ track }: Props) {
             <span className="f6 color-text-secondary">{t('nextGuide')}</span>
             <a
               href={`${nextGuide.href}?learn=${trackName}`}
-              className="text-bold color-text-secondary text-right"
+              className="text-bold color-text-secondary text-right f4"
             >
               {nextGuide.title}
             </a>

diff --git a/components/context/LanguagesContext.tsx b/components/context/LanguagesContext.tsx
@@ -1,5 +1,4 @@
 import { createContext, useContext } from 'react'
-import languages from 'lib/languages.js'
 
 type LanguageItem = {
   name: string
@@ -15,13 +14,6 @@ export type LanguagesContextT = {
 
 export const LanguagesContext = createContext<LanguagesContextT | null>(null)
 
-type Props = {
-  children?: React.ReactNode
-}
-export const LanguagesProvider = ({ children }: Props) => {
-  return <LanguagesContext.Provider value={{ languages }}>{children}</LanguagesContext.Provider>
-}
-
 export const useLanguages = (): LanguagesContextT => {
   const context = useContext(LanguagesContext)