Merge pull request #810 from primer/release-12.4.1

Release 12.4.1

.github/CONTRIBUTING.md

@@ -50,7 +50,7 @@ Good pull requests—patches, improvements, new features—are a fantastic help.
 
 **Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
 
-### Updating Primer CSS modules
+### Updating Primer CSS
 
 Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
 

.github/main.workflow

@@ -1,11 +1,6 @@
-workflow "lint, test, deploy, publish" {
+workflow "lint, test, publish" {
   on = "push"
-  resolves = [
-    "lint",
-    "test",
-    "publish",
-    "deploy",
-  ]
+  resolves = ["lint", "test", "publish"]
 }
 
 action "install" {
@@ -31,12 +26,3 @@ action "publish" {
   args = ["--", "--unsafe-perm"]
   secrets = ["GITHUB_TOKEN", "NPM_AUTH_TOKEN"]
 }
-
-action "deploy" {
-  needs = "install"
-  uses = "primer/deploy@v3.0.0"
-  secrets = [
-    "GITHUB_TOKEN",
-    "NOW_TOKEN",
-  ]
-}

CHANGELOG.md

@@ -1,3 +1,25 @@
+# 12.4.1
+
+### :bug: Bug fixes
+- Fix [#822](https://github.com/primer/css/issues/822) (`.border-dashed` issues) via [#824](https://github.com/primer/css/issues/824)
+
+### :memo: Documentation
+- Typos fixed in [#802](https://github.com/primer/css/issues/802) (thank you, [@The-Compiler](https://github.com/The-Compiler)!)
+- Nav updates [#803](https://github.com/primer/css/issues/803)
+- Fix tables of contents [#762](https://github.com/primer/css/issues/762)
+- Add deprecation warning for `.btn-purple`, due to disappear in 13.0.0 via [#736](https://github.com/primer/css/issues/736)
+- Lots more documentation updates in [#814](https://github.com/primer/css/issues/814)
+
+### :house: Internal
+- Decommission `primer/deploy` [#809](https://github.com/primer/css/issues/809)
+
+### Committers
+- [@emplums](https://github.com/emplums)
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+- [@The-Compiler](https://github.com/The-Compiler)
+
+
 # 12.4.0
 
 ### :rocket: Enhancement

DEVELOP.md

@@ -46,26 +46,8 @@ Then visit http://localhost:3000/css to view the site.
 
 :rotating_light: **Warning:** Next.js has a [long-running issue](https://github.com/zeit/next.js/issues/1189) with trailing slashes in URLs. Avoid visiting `http://localhost:3000/` if possible, as this may cause your development server to fail in less-than-graceful ways.
 
-
-### Syncing the docs
-Both before and while the Next dev server runs, all of the Markdown files within the `src/` directory are synced to Next's `pages/` directory and rewritten to include useful metadata.
-
-If, for whatever reason, the dev server isn't syncing files from `src/` to `pages/`, you have two choices:
-
-1. Stop the server (`ctrl-C`) and restart it (`npm start`), which will re-sync the files and clear Next's cache.
-2. Run [script/sync](./script/sync) manually:
-
-    ```sh
-    # in the docs directory
-    script/sync
-    ```
-
-    **If you find yourself needing to do this often, please [file an issue](/primer/css/issues/new) and tag `@shawnbot`**. :bow:
-
 ### The pages directory
-The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
-
-The sync task maintains a list of files copied from `src/` in `pages/css/.gitignore`, which ensures that none of these generated files are checked into git.
+The [pages directory](./pages/) contains all of the documentation files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
 
 
 ### URL tests
@@ -101,7 +83,6 @@ Our [`package.json`](package.json) houses a collection of [run-scripts] that we
 * `lint` lints all of our SCSS source files.
 * `lint-js` lints the docs site and supporting scripts.
 * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
-* `sync` copies Markdown docs from `src/` to `pages/css/` and preps them for inclusion in the docs site.
 * `test-urls` compares a (pre-generated) list of paths from the [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
 * `test-migrate` tests the [`primer-migrate`](MIGRATING.md#primer-migrate) command line utility.
 * `watch` runs the sync script in watch mode, copying files as they're changed from `src/` to `pages/css/`.

docs-test/urls.js

@@ -31,6 +31,7 @@ const exceptions = {
   '/packages/primer-product': removed,
   '/principles/HTML': moved('/principles/html'),
   '/principles/SCSS': moved('/principles/scss'),
+  '/tools/sketch-templates': removed,
   '/whats_new': redirect('https://github.com/primer/primer/releases'),
   '/whats_new/changelog': removed,
   '/whats_new/changelog/archived_changelog': removed,

docs/markdown.js

@@ -2,36 +2,25 @@ import React from 'react'
 import {Link} from '@primer/components'
 import {MarkdownHeading} from '@primer/blueprints'
 import {CodeExample} from '@primer/blueprints/next-components'
-import Outline from './Outline'
 
 export const H1 = props => <MarkdownHeading {...props} />
 export const H2 = props => <MarkdownHeading as="h2" {...props} />
 export const H3 = props => <MarkdownHeading as="h3" {...props} />
 export const H4 = props => <MarkdownHeading as="h4" {...props} />
 export const H5 = props => <MarkdownHeading as="h5" {...props} />
 
-export default function getComponents(page = {}) {
-  const {outline: getOutline = () => []} = page
-
-  return {
-    h1: H1,
-    h2: H2,
-    h3: H3,
-    h4: H4,
-    h5: H5,
-    // render links with our component
-    a: Link,
-    // render code blocks with our wrapper around react-live
-    code: CodeExample,
-    // render the outline for <p> tags with exactly the text "{:toc}"
-    p: ({children, ...rest}) => {
-      if (children === '{:toc}') {
-        return <Outline outline={getOutline()} {...rest} />
-      } else {
-        return <p {...rest}>{children}</p>
-      }
-    },
-    // "unwrap" <pre> elements around <code> blocks
-    pre: props => props.children
-  }
+const components = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  // render links with our component
+  a: Link,
+  // render code blocks with our wrapper around react-live
+  code: CodeExample,
+  // "unwrap" <pre> elements around <code> blocks
+  pre: props => props.children
 }
+
+export default components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -46,7 +46,7 @@
     "@githubprimer/octicons-react": "^8.1.3",
     "@mdx-js/mdx": "^0.16.6",
     "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "4.0.1",
+    "@primer/blueprints": "4.0.2",
     "@primer/components": "12.0.1",
     "@primer/next-pages": "0.0.3",
     "@storybook/addon-viewport": "5.0.11",

pages/_app.js

@@ -7,7 +7,7 @@ import {BaseStyles, Link, Text, BorderBox, Box, Flex, theme} from '@primer/compo
 import {PackageHeader} from '../docs/components'
 import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
 import {NavList} from '@primer/blueprints/next-components'
-import getComponents from '../docs/markdown'
+import components from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
 import {CONTENT_MAX_WIDTH} from '../docs/constants'
@@ -36,8 +36,6 @@ export default class MyApp extends App {
     const node = rootPage.first(node => node.path === pathname) || {}
     const {file, meta = {}} = node || {}
     const isIndex = file.includes('index')
-    const components = getComponents(node)
-
     const Hero = file ? requirePage(file).Hero : null
 
     return (
@@ -101,12 +99,12 @@ export default class MyApp extends App {
             >
               <SideNav>
                 <NavList currentPath={pathname} path="/css/getting-started" />
-                <NavList currentPath={pathname} path="/css/tools" />
-                <NavList currentPath={pathname} path="/css/principles" />
                 <NavList currentPath={pathname} path="/css/support" />
                 <NavList currentPath={pathname} path="/css/utilities" />
                 <NavList currentPath={pathname} path="/css/objects" />
                 <NavList currentPath={pathname} path="/css/components" />
+                <NavList currentPath={pathname} path="/css/tools" />
+                <NavList currentPath={pathname} path="/css/principles" />
               </SideNav>
             </BorderBox>
           </Flex>

pages/css/components/avatars.md

@@ -9,7 +9,7 @@ bundle: avatars
 
 Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
 
-{:toc}
+## Table of Contents
 
 ## Basic example
 
@@ -154,4 +154,3 @@ For specific cases where two badges or more need to be shown as related or conne
   </ul>
 </div>
 ```
-

pages/css/components/box.md

@@ -10,7 +10,7 @@ bundle: box
 
 The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
 
-{:toc}
+## Table of Contents
 
 ## Box
 

pages/css/components/buttons.md

@@ -9,7 +9,7 @@ bundle: buttons
 
 Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
 
-{:toc}
+## Table of Contents
 
 ## Default button
 

pages/css/components/dropdown.md

@@ -8,7 +8,7 @@ symbols: [active, anim-scale-in, btn-link, dropdown, dropdown-caret, dropdown-di
 
 Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
 
-{:toc}
+## Table of Contents
 
 ## Basic examples
 

pages/css/components/forms.md

@@ -9,7 +9,7 @@ bundle: forms
 
 Style individual form controls and utilize common layouts.
 
-{:toc}
+## Table of Contents
 
 Overview:
 - We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.

pages/css/components/labels.md

@@ -11,7 +11,7 @@ bundle: labels
 Labels add metatdata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
 
 
-{:toc}
+## Table of Contents
 
 ## Labels
 

pages/css/components/navigation.md

@@ -9,7 +9,7 @@ bundle: navigation
 
 Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
 
-{:toc}
+## Table of Contents
 
 ## Menu
 

pages/css/components/pagehead.md

@@ -9,7 +9,7 @@ symbols: [account-switcher, active, admin, avatar, dropdown-menu-content, experi
 
 Give a page a clear, separated title and optional top nav by adding a `.pagehead`.
 
-{:toc}
+## Table of Contents
 
 ## Basic pagehead
 

pages/css/components/pagination.md

@@ -9,7 +9,7 @@ bundle: pagination
 
 Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
 
-{:toc}
+## Table of Contents
 
 ## Previous/next pagination
 

pages/css/components/popover.md

@@ -9,7 +9,7 @@ bundle: popover
 
 Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
 
-{:toc}
+## Table of Contents
 
 A popover consist of:
 

pages/css/components/select-menu.md

@@ -8,7 +8,7 @@ symbols: [active, close-button, css-truncate-target, description, description-in
 
 The select menu provides advanced support for navigation, filtering, and more. Any popover within a select menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
 
-{:toc}
+## Table of Contents
 
 ## Basic example
 

pages/css/components/tooltips.md

@@ -9,7 +9,7 @@ bundle: tooltips
 
 Add tooltips built entirely in CSS to nearly any element.
 
-{:toc}
+## Table of Contents
 
 ## Implementation and accessibility
 
@@ -81,15 +81,15 @@ Align tooltips to the left or right of an element, combined with a directional c
   <span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
     .tooltipped-sw .tooltipped-align-right-1
   </span>
-  <span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
+  <span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
     .tooltipped-se .tooltipped-align-left-1
   </span>
 </div>
 <div class="d-flex flex-justify-center pb-4">
   <span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
     .tooltipped-sw .tooltipped-align-right-2
   </span>
-  <span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
+  <span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
     .tooltipped-se .tooltipped-align-left-2
   </span>
 </div>