Upgrade Primer CSS to version 17, removing marketing styles (github#2…

…0965) * Package updates * Fix up things that look broken * Add to utils * Lead now just sets font size, just use f3 where needed * Update package-lock.json * Update index.tsx * Delete bump-link.scss * Update trigger-error.js * Update components/GenericError.tsx Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com> * Update ArticlePage.tsx * Update ActionBar.tsx * Changes from meeting * Found a few more monos * Fix from a merge conflict * Missed a few f3s * Update SubLandingHero.tsx * Bye gradients * Match up breadcrumbs * Update SubLandingHero.tsx * Update lists.scss Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>
01753529836 · Aug 31, 2021 · 9f7c20d · 9f7c20d
1 parent 30843e7
commit 9f7c20d
Show file tree

Hide file tree

Showing 44 changed files with 321 additions and 566 deletions.
diff --git a/assets/fonts/alliance/alliance-no-1-bold.woff b/assets/fonts/alliance/alliance-no-1-bold.woff
diff --git a/assets/fonts/alliance/alliance-no-1-extrabold.woff b/assets/fonts/alliance/alliance-no-1-extrabold.woff
diff --git a/assets/fonts/alliance/alliance-no-1-medium.woff b/assets/fonts/alliance/alliance-no-1-medium.woff
diff --git a/assets/fonts/alliance/alliance-no-1-regular.woff b/assets/fonts/alliance/alliance-no-1-regular.woff
diff --git a/assets/fonts/inter/Inter-Bold.woff b/assets/fonts/inter/Inter-Bold.woff
diff --git a/assets/fonts/inter/Inter-Medium.woff b/assets/fonts/inter/Inter-Medium.woff
diff --git a/assets/fonts/inter/Inter-Regular.woff b/assets/fonts/inter/Inter-Regular.woff
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
@@ -9,10 +9,7 @@ export type BreadcrumbT = {
   href?: string
 }
 
-type Props = {
-  variant?: 'default' | 'large'
-}
-export const Breadcrumbs = ({ variant = 'default' }: Props) => {
+export const Breadcrumbs = () => {
   const router = useRouter()
   const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
@@ -44,7 +41,6 @@ export const Breadcrumbs = ({ variant = 'default' }: Props) => {
               title={title}
               className={cx(
                 'd-inline-block px-2',
-                variant === 'large' && 'text-uppercase text-mono',
                 pathWithLocale === breadcrumb.href && 'color-text-tertiary'
               )}
             >

diff --git a/components/GenericError.tsx b/components/GenericError.tsx
@@ -20,8 +20,8 @@ export function GenericError() {
       <div className="container-xl p-responsive py-9 width-full flex-1">
         <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">
+          <p className="f2 color-text-secondary">It looks like something went wrong.</p>
+          <p className="f3">
             We track these errors automatically, but if the problem persists please feel free to
             contact us.
           </p>
@@ -65,7 +65,7 @@ export const SimpleHeader = () => {
 
           <Link href={`/${router.locale}`}>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a className="h4-mktg color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
+            <a className="h4 color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
           </Link>
         </div>
       </header>

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -189,7 +189,10 @@ export function Search({
                       dangerouslySetInnerHTML={{ __html: breadcrumbs }}
                     />
                     <div
-                      className={cx(styles.searchResultTitle, 'd-block h4-mktg color-text-primary')}
+                      className={cx(
+                        styles.searchResultTitle,
+                        'd-block f4 font-weight-semibold color-text-primary'
+                      )}
                       dangerouslySetInnerHTML={{
                         __html: heading ? `${title}: ${heading}` : title,
                       }}

diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
@@ -63,7 +63,11 @@ export const ArticlePage = () => {
                 </Callout>
               )}
 
-              {intro && <MarkdownContent className="lead-mktg mb-3">{intro}</MarkdownContent>}
+              {intro && (
+                <MarkdownContent className="f2 color-text-secondary mb-3" data-testid="lead">
+                  {intro}
+                </MarkdownContent>
+              )}
 
               {permissions && (
                 <div

diff --git a/components/article/ArticleVersionPicker.tsx b/components/article/ArticleVersionPicker.tsx
@@ -25,7 +25,7 @@ export const ArticleVersionPicker = () => {
       `}
       data-testid="article-version-picker"
     >
-      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2 outline-none">
+      <summary className="btn btn-outline p-2 outline-none">
         <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
         {allVersions[currentVersion].versionTitle}
         <Dropdown.Caret />

diff --git a/components/article/LearningTrackNav.tsx b/components/article/LearningTrackNav.tsx
@@ -10,7 +10,7 @@ export function LearningTrackNav({ track }: Props) {
   return (
     <div
       data-testid="learning-track-nav"
-      className="py-3 px-4 rounded color-bg-primary border-gradient--purple-pink d-flex flex-justify-between"
+      className="py-3 px-4 rounded color-bg-primary border d-flex flex-justify-between"
     >
       <span className="d-flex flex-column">
         {prevGuide && (

diff --git a/components/landing/ArticleList.tsx b/components/landing/ArticleList.tsx
@@ -28,8 +28,8 @@ export const ArticleList = ({
           <h3
             className={cx(
               titleVariant === 'large'
-                ? 'f4 text-normal text-mono text-uppercase'
-                : 'f5 text-normal text-mono underline-dashed color-text-secondary'
+                ? 'f4 font-weight-semibold'
+                : 'f5 text-normal underline-dashed color-text-secondary'
             )}
           >
             {title}

diff --git a/components/landing/CodeExamples.tsx b/components/landing/CodeExamples.tsx
@@ -65,7 +65,7 @@ export const CodeExamples = () => {
       {isSearching && searchResults.length === 0 && (
         <div
           data-testid="code-examples-no-results"
-          className="py-4 text-center color-text-secondary font-mktg"
+          className="py-4 text-center color-text-secondary"
         >
           <div className="mb-3">
             <SearchIcon size={24} />{' '}

diff --git a/components/landing/LandingHero.tsx b/components/landing/LandingHero.tsx
@@ -22,16 +22,12 @@ export const LandingHero = () => {
   return (
     <header className="d-lg-flex gutter-lg mb-6">
       <div className={cx(product_video && 'col-12 col-lg-6 mb-3 mb-lg-0')}>
-        <span className="text-mono color-text-secondary">Product</span>
-        <h1 className="mb-3 font-mktg">
+        <h1 className="mb-3">
           {shortTitle}{' '}
           {beta_product && <span className="Label Label--success v-align-middle">Beta</span>}
         </h1>
 
-        <div
-          className="lead-mktg color-text-secondary"
-          dangerouslySetInnerHTML={{ __html: intro }}
-        />
+        <div className="f2 color-text-secondary" dangerouslySetInnerHTML={{ __html: intro }} />
 
         {introLinks &&
           Object.entries(introLinks)
@@ -46,7 +42,7 @@ export const LandingHero = () => {
                 <FullLink
                   key={link}
                   href={link}
-                  className={cx('btn-mktg bt-large f4 mt-3 mr-3', i !== 0 && 'btn-outline-mktg')}
+                  className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary-matte')}
                 >
                   {t(key)}
                 </FullLink>

diff --git a/components/landing/LandingSection.tsx b/components/landing/LandingSection.tsx
@@ -11,7 +11,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
   return (
     <div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
       {title && (
-        <h2 className={cx('font-mktg h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
+        <h2 className={cx('h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
           {sectionLink ? (
             <a className="color-unset" href={`#${sectionLink}`}>
               {title}
@@ -23,7 +23,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
       )}
       {description && (
         <div
-          className="lead-mktg color-text-secondary f4"
+          className="color-text-secondary f4"
           dangerouslySetInnerHTML={{ __html: description }}
         />
       )}

diff --git a/components/landing/TocLanding.tsx b/components/landing/TocLanding.tsx
@@ -22,7 +22,7 @@ export const TocLanding = () => {
         <ArticleGridLayout className="mt-7">
           <ArticleTitle>{title}</ArticleTitle>
 
-          <div className="lead-mktg">
+          <div className="f2 color-text-secondary">
             <p>{introPlainText}</p>
           </div>
 

diff --git a/components/page-header/Header.tsx b/components/page-header/Header.tsx
@@ -65,7 +65,7 @@ export const Header = () => {
 
               <Link
                 href={`/${router.locale}`}
-                className="h4-mktg color-text-primary no-underline no-wrap pl-2"
+                className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2"
               >
                 {t('github_docs')}
               </Link>
@@ -92,9 +92,7 @@ export const Header = () => {
               )}
             >
               <div className="mt-3 mb-2">
-                <h4 className="text-mono f5 text-normal color-text-secondary">
-                  {t('explore_by_product')}
-                </h4>
+                <h4 className="f5 text-normal color-text-secondary">{t('explore_by_product')}</h4>
 
                 <ProductPicker />
               </div>

diff --git a/components/playground/editor/ActionBar.tsx b/components/playground/editor/ActionBar.tsx
@@ -1,4 +1,4 @@
-import { ClippyIcon, CheckIcon } from '@primer/octicons-react'
+import { CopyIcon, CheckIcon } from '@primer/octicons-react'
 import { Tooltip } from '@primer/components'
 
 import useClipboard from 'components/hooks/useClipboard'
@@ -32,7 +32,7 @@ export const ActionBar = ({ code }: Props) => {
           aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
         >
           <button className="btn-octicon" onClick={() => setCopied()}>
-            {isCopied ? <CheckIcon /> : <ClippyIcon />}
+            {isCopied ? <CheckIcon /> : <CopyIcon />}
           </button>
         </Tooltip>
       </div>

diff --git a/components/release-notes/GHAEReleaseNotes.tsx b/components/release-notes/GHAEReleaseNotes.tsx
@@ -84,7 +84,7 @@ const CollapsibleReleaseSection = ({
         <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
           {release.version}
           <div className="d-flex">
-            <span className="color-text-tertiary text-mono text-small text-normal mr-1">
+            <span className="color-text-tertiary text-small text-normal mr-1">
               {release.patches.length} releases
             </span>
             <ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />

diff --git a/components/release-notes/GHESReleaseNotes.tsx b/components/release-notes/GHESReleaseNotes.tsx
@@ -121,7 +121,7 @@ export function GHESReleaseNotes({ context }: Props) {
                       href={releaseLink}
                     >
                       {release.version}
-                      <span className="color-text-tertiary text-mono text-small text-normal mr-1">
+                      <span className="color-text-tertiary text-small text-normal mr-1">
                         {release.patches.length} releases
                       </span>
                     </Link>
@@ -163,7 +163,7 @@ const CollapsibleReleaseSection = ({
         <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
           {release.version}
           <div className="d-flex">
-            <span className="color-text-tertiary text-mono text-small text-normal mr-1">
+            <span className="color-text-tertiary text-small text-normal mr-1">
               {release.patches.length} releases
             </span>
             <ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />

diff --git a/components/release-notes/PatchNotes.tsx b/components/release-notes/PatchNotes.tsx
@@ -48,7 +48,7 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
             {withReleaseNoteLabel && (
               <div className="col-12 col-xl-3 mb-5">
                 <span
-                  className="px-3 py-2 text-small text-bold text-uppercase text-mono color-text-inverse"
+                  className="px-3 py-2 text-small text-bold text-uppercase color-text-inverse"
                   style={{ backgroundColor: primaryColor }}
                 >
                   {SectionToLabelMap[key] || 'INVALID SECTION'}

diff --git a/components/sidebar/SidebarNav.tsx b/components/sidebar/SidebarNav.tsx
@@ -33,7 +33,7 @@ export const SidebarNav = () => {
         </Link>
         <Link
           href={`/${router.locale}`}
-          className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto"
+          className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2 flex-auto"
         >
           {t('github_docs')}
         </Link>

diff --git a/components/sublanding/ArticleCard.tsx b/components/sublanding/ArticleCard.tsx
@@ -24,7 +24,7 @@ export const ArticleCard = ({ card, typeLabel }: Props) => {
                 <span
                   data-testid="article-card-topic"
                   key={topic}
-                  className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1"
+                  className="IssueLabel color-bg-info-inverse color-text-inverse mr-1"
                 >
                   {topic}
                 </span>

diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
@@ -19,17 +19,17 @@ export const LearningTrack = ({ track }: Props) => {
   return (
     <div data-testid="learning-track" className="my-3 px-4 col-12 col-md-6">
       <div className="Box d-flex flex-column">
-        <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
+        <div className="Box-header color-bg-secondary p-4 d-flex flex-1 flex-items-start flex-wrap">
           <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
             <div className="my-xl-0 mr-xl-3">
-              <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track?.title}</h5>
-              <TruncateLines as="p" maxLines={3} className="color-text-inverse">
+              <h5 className="mb-3 color-text f3 font-weight-semibold">{track?.title}</h5>
+              <TruncateLines as="p" maxLines={3} className="color-text">
                 {track?.description}
               </TruncateLines>
             </div>
           </div>
           <a
-            className="d-inline-flex border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
+            className="d-inline-flex btn no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
             role="button"
             href={`${track?.guides && track?.guides[0].href}?learn=${track?.trackName}`}
           >

diff --git a/components/sublanding/SubLandingHero.tsx b/components/sublanding/SubLandingHero.tsx
@@ -18,7 +18,7 @@ export const SubLandingHero = () => {
       >
         <div className="d-flex flex-justify-between flex-items-center">
           <div
-            className="color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex flex-items-center flex-justify-center circle"
+            className="color-bg-primary color-text-link border d-inline-flex flex-items-center flex-justify-center circle"
             style={{ width: 40, height: 40 }}
           >
             {featuredTrack.guides && (
@@ -31,8 +31,8 @@ export const SubLandingHero = () => {
             {t('guide_types')[guide.page?.type || '']}
           </div>
         </div>
-        <h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
-        <TruncateLines maxLines={8} className="lead-mktg color-text-secondary f5 my-4">
+        <h3 className="font-weight-semibold my-4 color-text-primary">{guide.title}</h3>
+        <TruncateLines maxLines={8} className="color-text-secondary f5 my-4">
           <span dangerouslySetInnerHTML={{ __html: guide.intro }} />
         </TruncateLines>
       </Link>
@@ -43,12 +43,9 @@ export const SubLandingHero = () => {
     <div>
       <header className="d-flex gutter mb-6">
         <div className="col-12">
-          <Breadcrumbs variant="large" />
-          <h1 className="my-3 font-mktg">{title} guides</h1>
-          <div
-            className="lead-mktg color-text-secondary f4"
-            dangerouslySetInnerHTML={{ __html: intro }}
-          />
+          <Breadcrumbs />
+          <h1 className="my-3">{title} guides</h1>
+          <div className="color-text-secondary f2" dangerouslySetInnerHTML={{ __html: intro }} />
         </div>
       </header>
       {featuredTrack && (
@@ -58,20 +55,18 @@ export const SubLandingHero = () => {
             className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2"
           >
             <li className="px-2 d-flex flex-shrink-0" style={{ width: cardWidth }}>
-              <div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
+              <div className="d-inline-block Box p-5 color-bg-secondary">
                 <div
-                  className="color-text-inverse d-inline-flex flex-items-center flex-justify-center circle"
+                  className="d-inline-flex flex-items-center flex-justify-center circle border"
                   style={{ width: 40, height: 40, border: '2px white solid' }}
                 >
                   <StarFillIcon size={24} />
                 </div>
-                <h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
-                <div className="lead-mktg color-text-inverse f5 my-4">
-                  {featuredTrack.description}
-                </div>
+                <h3 className="font-weight-semibold my-4">{featuredTrack.title}</h3>
+                <div className="f5 my-4">{featuredTrack.description}</div>
                 {featuredTrack.guides && (
                   <Link
-                    className="d-inline-flex flex-items-center flex-justify-center border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold"
+                    className="d-inline-flex flex-items-center flex-justify-center btn px-4 py-2 f5 no-underline text-bold"
                     role="button"
                     href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}
                   >

diff --git a/components/ui/MarkdownContent/stylesheets/headers.scss b/components/ui/MarkdownContent/stylesheets/headers.scss
@@ -23,9 +23,4 @@
   h5 {
     font-size: 0.85em;
   }
-
-  // needs specificity to override
-  [class~="lead-mktg"] p {
-    color: var(--color-auto-gray-9);
-  }
 }
diff --git a/components/ui/MarkdownContent/stylesheets/lists.scss b/components/ui/MarkdownContent/stylesheets/lists.scss
@@ -74,3 +74,8 @@
     margin-bottom: 15px;
   }
 }
+
+/* Override primer style */
+.markdownBody div > ol:not([type]) {
+  list-style-type: none;
+}
diff --git a/data/reusables/enterprise/ghec-cta-button.md b/data/reusables/enterprise/ghec-cta-button.md
@@ -1 +1 @@
-<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn-mktg bt-large f4 mt-3 mr-3">Try risk-free for 14 days</a>
+<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn btn-primary-matte btn-large f4 mt-3 mr-3">Try risk-free for 14 days</a>
diff --git a/lib/liquid-tags/octicon.js b/lib/liquid-tags/octicon.js
@@ -24,6 +24,10 @@ export default {
     // Breaking change in octicons 12
     // https://github.com/primer/octicons/releases/tag/v12.0.0
     if (this.icon === 'trashcan') this.icon = 'trash'
+    // https://github.com/primer/octicons/blob/main/CHANGELOG.md#1500
+    if (this.icon === 'duplicate') this.icon = 'copy'
+    if (this.icon === 'clippy') this.icon = 'paste'
+
     this.options = {}
 
     // Memoize any options passed

diff --git a/lib/render-content/plugins/code-header.js b/lib/render-content/plugins/code-header.js
@@ -93,7 +93,7 @@ export default function addCodeHeader(node) {
   // Display the language using the above map of `{ [shortCode]: language }`
   const language = LANGUAGE_MAP[node.lang] || node.lang || 'Code'
 
-  const btnIconHtml = octicons.clippy.toSVG()
+  const btnIconHtml = octicons.paste.toSVG()
   const btnIconAst = parse5.parse(String(btnIconHtml), { sourceCodeLocationInfo: true })
   const btnIcon = fromParse5(btnIconAst, { file: btnIconHtml })
 

diff --git a/middleware/trigger-error.js b/middleware/trigger-error.js
@@ -7,7 +7,7 @@ export default async function triggerError(req, res, next) {
   // pattern used on async middleware! This is an intentional omission!
 
   // prevent this from being used in production
-  if (process.env.NODE_ENV === 'production') return next()
+  if (process.env.NODE_ENV === 'production' && process.env.HEROKU_PRODUCTION_APP) return next()
 
   throw new Error('Intentional error')
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn-mktg bt-large f4 mt-3 mr-3">Try risk-free for 14 days</a>
		<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn btn-primary-matte btn-large f4 mt-3 mr-3">Try risk-free for 14 days</a>