mirror of
https://github.com/primer/css.git
synced 2024-11-30 01:04:04 +03:00
Merge remote-tracking branch 'origin/release-13.0.0' into dropdown-menu-content
This commit is contained in:
Shawn Allen
commit
3a575bd5b8
@ -1,5 +1,5 @@
|
||||
name: "lint, test, publish"
|
||||
on: [push]
|
||||
name: CI
|
||||
on: push
|
||||
jobs:
|
||||
all:
|
||||
runs-on: ubuntu-latest
|
||||
@ -16,6 +16,9 @@ jobs:
|
||||
run: npm --unsafe-perm test
|
||||
- name: prepublish
|
||||
run: script/prepublish
|
||||
- name: test deprecations
|
||||
if: startsWith(github.ref, 'refs/heads/release-')
|
||||
run: script/test-deprecations.js
|
||||
- uses: primer/publish@v1.1.0
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
@ -6,7 +6,19 @@
|
||||
const versionDeprecations = {
|
||||
'13.0.0': [
|
||||
{
|
||||
selectors: ['.btn-purple'],
|
||||
selectors: [
|
||||
'.btn-purple',
|
||||
'.btn-purple:focus',
|
||||
'.btn-purple.focus',
|
||||
'.btn-purple:hover',
|
||||
'.btn-purple.hover',
|
||||
'.btn-purple:active',
|
||||
'.btn-purple.selected',
|
||||
'[open]>.btn-purple',
|
||||
'.btn-purple:disabled',
|
||||
'.btn-purple.disabled',
|
||||
'.btn-purple .Counter'
|
||||
],
|
||||
message: `Please don't make purple buttons.`
|
||||
},
|
||||
{
|
||||
@ -19,7 +31,12 @@ const versionDeprecations = {
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.container',
|
||||
'.container::before',
|
||||
'.container::after',
|
||||
'.columns',
|
||||
'.columns::before',
|
||||
'.columns::after',
|
||||
'.column',
|
||||
'.one-third',
|
||||
'.two-thirds',
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
const {yellow, green, red} = require('colorette')
|
||||
|
||||
/**
|
||||
* Each exception type may resolve to either:
|
||||
*
|
||||
* 1. A string, which will be treated as a message listed alongside the
|
||||
* "excepted" path; or
|
||||
*
|
||||
* 2. A function in the form: `f(paths) : {pass:Boolean, message:String}`
|
||||
*
|
||||
* In the case of `moved(path)`, it returns a _function_ that checks for
|
||||
* whether the provided path exists in `paths` and returns the appropriate
|
||||
* status object with `pass` and `message` props.
|
||||
*/
|
||||
module.exports = {
|
||||
removed: red('removed'),
|
||||
deprecated: yellow('deprecated'),
|
||||
redirect: url => `${green('redirect')} → ${url}`,
|
||||
moved: path => paths => {
|
||||
if (paths.includes(path)) {
|
||||
return {pass: true, message: `→ ${green(path)}`}
|
||||
} else {
|
||||
return {pass: false, message: `→ ${red(path)} is missing`}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
|
||||
/components
|
||||
/components/alerts
|
||||
/components/avatars
|
||||
/components/blankslate
|
||||
/components/box
|
||||
/components/box-overlay
|
||||
/components/boxed-groups
|
||||
/components/branch-name
|
||||
/components/breadcrumb
|
||||
/components/buttons
|
||||
/components/dropdown
|
||||
/components/flash-banner
|
||||
/components/forms
|
||||
/components/labels
|
||||
/components/markdown
|
||||
/components/marketing-buttons
|
||||
/components/navigation
|
||||
/components/octicons
|
||||
/components/page-headers
|
||||
/components/page-sections
|
||||
/components/pagehead
|
||||
/components/pagination
|
||||
/components/popover
|
||||
/components/progress
|
||||
/components/select-menu
|
||||
/components/subhead
|
||||
/components/tables
|
||||
/components/tooltips
|
||||
/components/truncate
|
||||
/getting_started
|
||||
/getting_started/contributing
|
||||
/objects
|
||||
/objects/grid
|
||||
/objects/layout
|
||||
/objects/table-object
|
||||
/packages
|
||||
/packages/primer
|
||||
/packages/primer-core
|
||||
/packages/primer-marketing
|
||||
/packages/primer-product
|
||||
/principles
|
||||
/principles/HTML
|
||||
/principles/SCSS
|
||||
/principles/accessibility
|
||||
/support
|
||||
/support/breakpoints
|
||||
/support/color-system
|
||||
/support/marketing-variables
|
||||
/support/spacing
|
||||
/support/typography
|
||||
/tools
|
||||
/tools/atom-packages
|
||||
/tools/docset
|
||||
/tools/linting
|
||||
/tools/local-primer
|
||||
/tools/prototyping
|
||||
/tools/sketch-templates
|
||||
/tools/testing
|
||||
/utilities
|
||||
/utilities/animations
|
||||
/utilities/borders
|
||||
/utilities/box-shadow
|
||||
/utilities/colors
|
||||
/utilities/details
|
||||
/utilities/flexbox
|
||||
/utilities/layout
|
||||
/utilities/margin
|
||||
/utilities/marketing-borders
|
||||
/utilities/marketing-filters
|
||||
/utilities/marketing-layout
|
||||
/utilities/marketing-margin
|
||||
/utilities/marketing-padding
|
||||
/utilities/marketing-type
|
||||
/utilities/padding
|
||||
/utilities/typography
|
||||
/whats_new
|
||||
/whats_new/changelog
|
||||
/whats_new/changelog/archived_changelog
|
||||
/whats_new/status-key
|
||||
@ -59,7 +59,7 @@ Use `.btn-large` to increase the padding and border radius of a button. This is
|
||||
|
||||
```html live
|
||||
<p>
|
||||
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-large" type="button">Large button button</button>
|
||||
</p>
|
||||
```
|
||||
@ -68,7 +68,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
|
||||
|
||||
```html live
|
||||
<p class="f3">
|
||||
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
path: objects/layout
|
||||
status: Deprecated
|
||||
status_issue: 'https://github.com/github/design-systems/issues/59'
|
||||
source: 'https://github.com/primer/css/tree/master/src/layout'
|
||||
bundle: layout
|
||||
---
|
||||
|
||||
Primer CSS's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it's just containers, rows, and columns.
|
||||
|
||||
You can find all the below styles in `_layout.scss`.
|
||||
|
||||
#### Container
|
||||
|
||||
Center your page's contents with a `.container`.
|
||||
|
||||
```html live title="Container"
|
||||
<div class="container border">
|
||||
Container
|
||||
</div>
|
||||
```
|
||||
|
||||
The container applies `width: 980px;` and uses horizontal `margin`s to center it.
|
||||
|
||||
#### Grid
|
||||
|
||||
##### How it works
|
||||
|
||||
The grid is pretty standard—you create rows with `.columns` and individual columns with a column class and fraction class. Here's how it works:
|
||||
|
||||
- Add a `.container` to encapsulate everything and provide ample horizontal gutter space.
|
||||
- Create your outer row to clear the floated columns with `<div class="columns">`.
|
||||
- Add your columns with individual `<div class="column">`s.
|
||||
- Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`).
|
||||
|
||||
##### Demo
|
||||
|
||||
In practice, your columns will look like the example below.
|
||||
|
||||
```html live title="Grid columns"
|
||||
<div class="container">
|
||||
<div class="columns mb-1">
|
||||
<div class="one-fifth column block-blue p-3 border">
|
||||
.one-fifth
|
||||
</div>
|
||||
<div class="four-fifths column block-blue p-3 border">
|
||||
.four-fifths
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns mb-1">
|
||||
<div class="one-fourth column block-blue p-3 border">
|
||||
.one-fourth
|
||||
</div>
|
||||
<div class="three-fourths column block-blue p-3 border">
|
||||
.three-fourths
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns mb-1">
|
||||
<div class="one-third column block-blue p-3 border">
|
||||
.one-third
|
||||
</div>
|
||||
<div class="two-thirds column block-blue p-3 border">
|
||||
.two-thirds
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="one-half column block-blue p-3 border">
|
||||
.one-half
|
||||
</div>
|
||||
<div class="one-half column block-blue p-3 border">
|
||||
.one-half
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Centered
|
||||
|
||||
Columns can be centered by adding `.centered` to the `.column` class.
|
||||
|
||||
```html live title="Grid centered"
|
||||
<div class="columns">
|
||||
<div class="one-half column centered block-blue border p-3">
|
||||
.one-half
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,91 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
const visit = require('unist-util-visit')
|
||||
const cache = new Map()
|
||||
const ERB_BLOCK_PATTERN = /<%=[^%]+%>/g
|
||||
|
||||
module.exports = options => {
|
||||
const convert = converter(options)
|
||||
return tree => {
|
||||
visit(tree, 'code', node => {
|
||||
const match = node.lang ? node.lang.match(/^[a-z]+/) : null
|
||||
const lang = match ? match[0] : null
|
||||
if (lang === 'erb' || lang === 'html') {
|
||||
const erb = node.value
|
||||
const html = convert(erb)
|
||||
const remaining = html ? html.match(ERB_BLOCK_PATTERN) : null
|
||||
if (html && !remaining) {
|
||||
node.value = html
|
||||
node.lang = node.lang.replace(/^erb/, 'html')
|
||||
} else if (remaining) {
|
||||
// console.warn(`Unable to convert ${remaining.length} ERB blocks:\n ${remaining.join(' \n')}`)
|
||||
} else {
|
||||
// console.warn(`No conversions made in: ${erb}`)
|
||||
}
|
||||
} else {
|
||||
// console.warn(`Unknown code block lang: ${node.lang}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function converter({methods = {}}) {
|
||||
return erb => {
|
||||
const blocks = erb.match(ERB_BLOCK_PATTERN)
|
||||
if (blocks && blocks.length) {
|
||||
let html = erb
|
||||
// console.warn(`Replacing ${blocks.length} ERB block(s)...`)
|
||||
for (const block of blocks) {
|
||||
const output = convert(block)
|
||||
if (output !== block) {
|
||||
// const count = html.split(block).length - 1
|
||||
// console.warn(` found ${count} instances of "${block}"`)
|
||||
html = replaceAll(html, block, output)
|
||||
// console.warn(html)
|
||||
}
|
||||
}
|
||||
return html
|
||||
}
|
||||
}
|
||||
|
||||
function convert(block) {
|
||||
if (cache.has(block)) {
|
||||
return cache.get(block)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, method, argString] = block.match(/<%= *(\w+)[ (]([^)]+)\)? *%>/)
|
||||
const parts = argString.split(/, */)
|
||||
const args = []
|
||||
const kwargs = {}
|
||||
let match
|
||||
for (const part of parts) {
|
||||
if ((match = part.match(/^:(.+) => (.+)$/))) {
|
||||
kwargs[unquote(match[1])] = unquote(match[2])
|
||||
} else if ((match = part.match(/^(.+): (.+)$/))) {
|
||||
kwargs[unquote(match[1])] = unquote(match[2])
|
||||
} else {
|
||||
args.push(unquote(part))
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof methods[method] === 'function') {
|
||||
let output = methods[method](args, kwargs)
|
||||
console.warn(`converted: ${block} -> ${output}`)
|
||||
const escaped = block.replace('<', '').replace('>', '')
|
||||
output = `<!--${escaped}-->\n${output}`
|
||||
cache.set(block, output)
|
||||
return output
|
||||
} else {
|
||||
console.warn(`No such ERB method implemented: "${method}"`)
|
||||
return block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function replaceAll(str, input, output) {
|
||||
return str.split(input).join(output)
|
||||
}
|
||||
|
||||
function unquote(str) {
|
||||
return str.replace(/^\s*"([^"]+)"\s*$/, (_, value) => value)
|
||||
}
|
||||
946
package-lock.json
generated
946
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "12.7.0",
|
||||
"version": "13.0.0",
|
||||
"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.",
|
||||
@ -23,14 +23,10 @@
|
||||
},
|
||||
"scripts": {
|
||||
"fresh": "rm -rf node_modules; npm install",
|
||||
"dist": "script/dist",
|
||||
"check-links": "script/check-links http://localhost:3000/css -v",
|
||||
"dist": "script/dist.js",
|
||||
"lint": "npm-run-all -s lint-css lint-js",
|
||||
"lint-css": "stylelint --quiet --syntax scss src/**/*.scss",
|
||||
"lint-js": "eslint script lib docs deprecations.js .storybook",
|
||||
"now-build": "npm run dist && next build",
|
||||
"now-start": "next start",
|
||||
"now-test": "npm-run-all -s now-build now-start",
|
||||
"lint-js": "eslint script docs deprecations.js lib .storybook",
|
||||
"postpublish": "script/postpublish",
|
||||
"prepublishOnly": "script/prepublish",
|
||||
"publish-storybook": "script/publish-storybook",
|
||||
@ -39,7 +35,7 @@
|
||||
"start-storybook": "start-storybook -p 8001",
|
||||
"build-storybook": "build-storybook -o .storybuild",
|
||||
"test": "npm-run-all -s test-urls test-migrate",
|
||||
"test-urls": "node docs-test/urls.js",
|
||||
"test-urls": "script/test-doc-urls.js",
|
||||
"test-migrate": "script/test-migrate"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -48,7 +44,6 @@
|
||||
"devDependencies": {
|
||||
"@storybook/addon-viewport": "5.0.11",
|
||||
"@storybook/react": "5.0.11",
|
||||
"action-status": "0.1.1",
|
||||
"autoprefixer": "9.4.7",
|
||||
"code-blocks": "^1.1.0",
|
||||
"colorette": "^1.0.7",
|
||||
@ -57,19 +52,13 @@
|
||||
"details-dialog-element": "^1.4.0",
|
||||
"eslint": "4.19.1",
|
||||
"eslint-plugin-github": "1.0.0",
|
||||
"execa": "^0.10.0",
|
||||
"filesize": "4.1.2",
|
||||
"fs-extra": "^4.0.2",
|
||||
"fx": "11.0.1",
|
||||
"gh-pages": "^1.0.0",
|
||||
"globby": "^6.1.0",
|
||||
"hast-util-to-html": "^5.0.0",
|
||||
"hast-util-to-string": "^1.0.1",
|
||||
"klaw": "3.0.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"minimist": "1.2.0",
|
||||
"node-fetch": "2.4.0",
|
||||
"now": "^12.1.8",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss": "7.0.14",
|
||||
"postcss-load-config": "2.0.0",
|
||||
@ -77,21 +66,16 @@
|
||||
"postcss-node-sass": "2.1.8",
|
||||
"postcss-scss": "2.0.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "0.5.1",
|
||||
"refractor": "^2.6.2",
|
||||
"semver": "5.7.1",
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "9.10.1",
|
||||
"stylelint-config-primer": "7.0.1",
|
||||
"table": "5.2.3",
|
||||
"tar": "4.4.8",
|
||||
"tree-model": "^1.0.7",
|
||||
"typographic-base": "^1.0.4",
|
||||
"unified": "^7.1.0",
|
||||
"unist-util-select": "^2.0.0",
|
||||
"unist-util-stringify-position": "^2.0.0",
|
||||
"unist-util-visit": "^1.4.0",
|
||||
"webpack": "4.20.2"
|
||||
"unist-util-visit": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
5
script/.eslintrc.json
Normal file
5
script/.eslintrc.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"rules": {
|
||||
"no-console": 0
|
||||
}
|
||||
}
|
||||
@ -35,9 +35,7 @@ if (ONLY_BUNDLES) {
|
||||
const only = new Set(ONLY_BUNDLES.trim().split(/\s*,\s*/))
|
||||
bundles = bundles.filter(bundle => only.has(bundle.name))
|
||||
} else if (!ALL_BUNDLES) {
|
||||
bundles = META_BUNDLES
|
||||
? bundles.filter(isMetaBundle)
|
||||
: bundles.filter(bundle => !isMetaBundle(bundle))
|
||||
bundles = META_BUNDLES ? bundles.filter(isMetaBundle) : bundles.filter(bundle => !isMetaBundle(bundle))
|
||||
}
|
||||
|
||||
Promise.all(
|
||||
@ -50,7 +48,7 @@ Promise.all(
|
||||
}
|
||||
return fetch(unpkgBaseURL + bundle.stats)
|
||||
.then(res => res.json())
|
||||
.catch(error => {
|
||||
.catch(() => {
|
||||
console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`)
|
||||
return cssstats('')
|
||||
})
|
||||
@ -4,7 +4,7 @@ const remark = require('remark-parse')
|
||||
const stringify = require('remark-stringify')
|
||||
const stringifyPosition = require('unist-util-stringify-position')
|
||||
const unified = require('unified')
|
||||
const {green, yellow, red} = require('colorette')
|
||||
const {green, yellow} = require('colorette')
|
||||
const {join} = require('path')
|
||||
const {readFile} = require('fs-extra')
|
||||
const {selectAll} = require('unist-util-select')
|
||||
@ -7,12 +7,6 @@ npm run --silent dist
|
||||
# run the bundle size and selector diff reports
|
||||
script/run-reports
|
||||
|
||||
# TODO: remove this in v13
|
||||
mkdir -p build
|
||||
cp dist/primer.css build/build.css
|
||||
cp dist/stats/primer.json build/build.json
|
||||
echo "module.exports = {cssstats: require('./build.json')}" > build/index.js
|
||||
|
||||
files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
|
||||
echo $files > publish-files.log
|
||||
cd src
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
set -e
|
||||
|
||||
echo "Reporting bundle sizes..."
|
||||
script/bundle-size-report --all
|
||||
script/bundle-size-report.js --all
|
||||
|
||||
echo "Reporting selector diffs..."
|
||||
script/selector-diff-report
|
||||
|
||||
95
script/test-deprecations.js
Executable file
95
script/test-deprecations.js
Executable file
@ -0,0 +1,95 @@
|
||||
#!/usr/bin/env node
|
||||
const fetch = require('node-fetch')
|
||||
const minimist = require('minimist')
|
||||
const {basename} = require('path')
|
||||
const {green, red, yellow} = require('colorette')
|
||||
|
||||
const {versionDeprecations} = require('../deprecations')
|
||||
const X = red('𐄂')
|
||||
const I = yellow('i')
|
||||
const V = green('✓')
|
||||
|
||||
const args = minimist(process.argv.slice(2))
|
||||
if (args.help) {
|
||||
console.log(`
|
||||
script/${basename(__filename)} [options]
|
||||
|
||||
--version <version> The published version of @primer/css from which to
|
||||
fetch CSS selector stats; default: "latest".
|
||||
--bundle <bundle> The CSS bundle to compare; default: "primer".
|
||||
|
||||
Fetches the CSS selectors for the published package and checks that:
|
||||
|
||||
1. All selectors listed in deprecations.js for the current local version (in
|
||||
package.json) have been deleted.
|
||||
2. All selectors deleted in the current local version have been listed in
|
||||
deprecations.js.
|
||||
|
||||
If either check fails, the process exits with an error status (1).
|
||||
`)
|
||||
process.exit(0)
|
||||
}
|
||||
|
||||
checkDeprecations(args)
|
||||
|
||||
async function checkDeprecations(options = {}) {
|
||||
const {bundle = 'primer', version = 'latest'} = options
|
||||
|
||||
const currentVersion = require('../package.json').version
|
||||
const statsPath = `dist/stats/${bundle}.json`
|
||||
|
||||
const local = require(`../${statsPath}`)
|
||||
const remote = await fetch(`https://unpkg.com/@primer/css@${version}/${statsPath}`).then(res => res.json())
|
||||
|
||||
const {changed, added, removed} = diffLists(remote.selectors.values, local.selectors.values)
|
||||
if (changed === 0) {
|
||||
console.log(`no selectors added or removed in bundle "${bundle}"`)
|
||||
return
|
||||
}
|
||||
|
||||
const deprecations = versionDeprecations[currentVersion] || []
|
||||
const deprecatedSelectors = deprecations.reduce((list, deprecation) => list.concat(deprecation.selectors), [])
|
||||
console.log(`${I} ${removed.length} selectors removed locally (compared with ${version})`)
|
||||
console.log(`${I} ${deprecatedSelectors.length} selectors deprecated in v${currentVersion}`)
|
||||
if (added.length) {
|
||||
console.log(`${I} ${added.length} selectors added`)
|
||||
}
|
||||
|
||||
const errors = []
|
||||
for (const deprecation of deprecations) {
|
||||
for (const selector of deprecation.selectors) {
|
||||
if (!removed.includes(selector)) {
|
||||
const error = `"${selector}" deprecated, but not removed`
|
||||
errors.push(error)
|
||||
console.log(`${X} ${error}`)
|
||||
} else {
|
||||
console.log(`${V} "${selector}" is officially deprecated`)
|
||||
}
|
||||
deprecatedSelectors.push(selector)
|
||||
}
|
||||
}
|
||||
|
||||
for (const removedSelector of removed) {
|
||||
if (!deprecatedSelectors.includes(removedSelector)) {
|
||||
const error = `"${removedSelector}" has been removed, but was not listed in versionDeprecations['${currentVersion}']`
|
||||
errors.push(error)
|
||||
console.log(`${X} ${error}`)
|
||||
} else {
|
||||
// console.log(`${V} "${removedSelector}" removed and deprecated!`)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length) {
|
||||
process.exitCode = 1
|
||||
}
|
||||
}
|
||||
|
||||
function diffLists(before, after) {
|
||||
const added = after.filter(value => !before.includes(value))
|
||||
const removed = before.filter(value => !after.includes(value))
|
||||
return {
|
||||
changed: added.length + removed.length,
|
||||
added,
|
||||
removed
|
||||
}
|
||||
}
|
||||
158
docs-test/urls.js → script/test-doc-urls.js
Normal file → Executable file
158
docs-test/urls.js → script/test-doc-urls.js
Normal file → Executable file
@ -1,10 +1,18 @@
|
||||
const execa = require('execa')
|
||||
#!/usr/bin/env node
|
||||
const klaw = require('klaw')
|
||||
const {basename, dirname, join, resolve} = require('path')
|
||||
const {promisify} = require('util')
|
||||
const {readFile, writeFile} = require('fs-extra')
|
||||
const {join} = require('path')
|
||||
const {bold, yellow, green, red} = require('colorette')
|
||||
const {deprecated, moved, redirect, removed} = require('./exceptions')
|
||||
|
||||
const deprecated = yellow('deprecated')
|
||||
const moved = path => paths => {
|
||||
if (paths.includes(path)) {
|
||||
return {pass: true, message: `→ ${green(path)}`}
|
||||
} else {
|
||||
return {pass: false, message: `→ ${red(path)} is missing`}
|
||||
}
|
||||
}
|
||||
const redirect = url => `${green('redirect')} → ${url}`
|
||||
const removed = red('removed')
|
||||
|
||||
/**
|
||||
* This is where we track "exceptions" to paths that don't have 1:1 matches
|
||||
@ -24,6 +32,7 @@ const exceptions = {
|
||||
'/components/tables': deprecated,
|
||||
'/getting_started': moved('/getting-started/contributing'),
|
||||
'/getting_started/contributing': moved('/getting-started/contributing'),
|
||||
'/objects/layout': removed,
|
||||
'/packages': removed,
|
||||
'/packages/primer': removed,
|
||||
'/packages/primer-core': removed,
|
||||
@ -35,16 +44,11 @@ const exceptions = {
|
||||
'/whats_new': redirect('https://github.com/primer/primer/releases'),
|
||||
'/whats_new/changelog': removed,
|
||||
'/whats_new/changelog/archived_changelog': removed,
|
||||
'/whats_new/status-key': moved('/status-key')
|
||||
'/whats_new/status-key': redirect('https://primer.style/doctocat/usage/front-matter#status')
|
||||
}
|
||||
|
||||
const log = console.warn
|
||||
|
||||
const STYLEGUIDE_ROOT = join(__dirname, '../../../../github/styleguide')
|
||||
const CACHE_FILE = join(__dirname, 'fixtures/path-cache.txt')
|
||||
const {CI} = process.env
|
||||
const CLEAN = process.argv.slice(2).includes('--clean')
|
||||
|
||||
Promise.all([getStyleguidePaths(), getLocalPaths()])
|
||||
.then(([before, after]) => {
|
||||
log(`Found ${before.length} paths in github/styleguide, ${after.length} here.\n`)
|
||||
@ -93,51 +97,99 @@ Promise.all([getStyleguidePaths(), getLocalPaths()])
|
||||
})
|
||||
|
||||
function getStyleguidePaths() {
|
||||
if (CI) {
|
||||
return readLines(CACHE_FILE)
|
||||
}
|
||||
return buildStyleguide()
|
||||
.then(getPathsFromStyleguide)
|
||||
.then(writeLines(CACHE_FILE))
|
||||
.catch(error => {
|
||||
/*
|
||||
* If _anything_ goes wrong (on CI, no styleguide repo), just get the list
|
||||
* of paths from the committed file.
|
||||
*/
|
||||
log(`${yellow('!!!')} Unable to get styleguide paths:\n\n ${error}\n`)
|
||||
log(`Using the paths in ${CACHE_FILE} instead...\n`)
|
||||
return readLines(CACHE_FILE)
|
||||
})
|
||||
}
|
||||
|
||||
function buildStyleguide() {
|
||||
if (CLEAN) {
|
||||
const cwd = STYLEGUIDE_ROOT
|
||||
return pathExists(cwd).then(exists => {
|
||||
if (exists) {
|
||||
return execa('script/bootstrap', {cwd}).then(() => execa('npm', ['run', 'build-site'], {cwd}))
|
||||
} else {
|
||||
throw new Error(`The styleguide root (${cwd}) doesn't exist`)
|
||||
}
|
||||
})
|
||||
}
|
||||
return Promise.resolve(true)
|
||||
}
|
||||
|
||||
function getPathsFromStyleguide() {
|
||||
return getPaths(join(STYLEGUIDE_ROOT, '_site/primer'))
|
||||
.then(paths => paths.filter(path => !path.includes('code_example.html')))
|
||||
.then(normalizePaths)
|
||||
return `
|
||||
/components
|
||||
/components/alerts
|
||||
/components/avatars
|
||||
/components/blankslate
|
||||
/components/box
|
||||
/components/box-overlay
|
||||
/components/boxed-groups
|
||||
/components/branch-name
|
||||
/components/breadcrumb
|
||||
/components/buttons
|
||||
/components/dropdown
|
||||
/components/flash-banner
|
||||
/components/forms
|
||||
/components/labels
|
||||
/components/markdown
|
||||
/components/marketing-buttons
|
||||
/components/navigation
|
||||
/components/octicons
|
||||
/components/page-headers
|
||||
/components/page-sections
|
||||
/components/pagehead
|
||||
/components/pagination
|
||||
/components/popover
|
||||
/components/progress
|
||||
/components/select-menu
|
||||
/components/subhead
|
||||
/components/tables
|
||||
/components/tooltips
|
||||
/components/truncate
|
||||
/getting_started
|
||||
/getting_started/contributing
|
||||
/objects
|
||||
/objects/grid
|
||||
/objects/layout
|
||||
/objects/table-object
|
||||
/packages
|
||||
/packages/primer
|
||||
/packages/primer-core
|
||||
/packages/primer-marketing
|
||||
/packages/primer-product
|
||||
/principles
|
||||
/principles/HTML
|
||||
/principles/SCSS
|
||||
/principles/accessibility
|
||||
/support
|
||||
/support/breakpoints
|
||||
/support/color-system
|
||||
/support/marketing-variables
|
||||
/support/spacing
|
||||
/support/typography
|
||||
/tools
|
||||
/tools/atom-packages
|
||||
/tools/docset
|
||||
/tools/linting
|
||||
/tools/local-primer
|
||||
/tools/prototyping
|
||||
/tools/sketch-templates
|
||||
/tools/testing
|
||||
/utilities
|
||||
/utilities/animations
|
||||
/utilities/borders
|
||||
/utilities/box-shadow
|
||||
/utilities/colors
|
||||
/utilities/details
|
||||
/utilities/flexbox
|
||||
/utilities/layout
|
||||
/utilities/margin
|
||||
/utilities/marketing-borders
|
||||
/utilities/marketing-filters
|
||||
/utilities/marketing-layout
|
||||
/utilities/marketing-margin
|
||||
/utilities/marketing-padding
|
||||
/utilities/marketing-type
|
||||
/utilities/padding
|
||||
/utilities/typography
|
||||
/whats_new
|
||||
/whats_new/changelog
|
||||
/whats_new/changelog/archived_changelog
|
||||
/whats_new/status-key
|
||||
`
|
||||
.trim()
|
||||
.split('\n')
|
||||
}
|
||||
|
||||
function getLocalPaths() {
|
||||
return getPaths(join(__dirname, '../pages/css')).then(normalizePaths)
|
||||
return getPaths(join(__dirname, '../docs/content')).then(normalizePaths)
|
||||
}
|
||||
|
||||
function getPaths(dir, options) {
|
||||
function getPaths(dir) {
|
||||
const paths = []
|
||||
return new Promise((resolve, reject) => {
|
||||
klaw(dir, options)
|
||||
klaw(dir)
|
||||
.on('data', item => paths.push(item.path.substr(dir.length)))
|
||||
.on('error', reject)
|
||||
.on('end', () => {
|
||||
@ -147,14 +199,6 @@ function getPaths(dir, options) {
|
||||
})
|
||||
}
|
||||
|
||||
function readLines(filename) {
|
||||
return readFile(filename, 'utf8').then(str => str.trim().split(/[\r\n]+/))
|
||||
}
|
||||
|
||||
function writeLines(filename) {
|
||||
return lines => writeFile(filename, lines.join('\n'), 'utf8').then(() => lines)
|
||||
}
|
||||
|
||||
function normalizePaths(paths) {
|
||||
const normal = paths.map(path => path.replace(/(\/index)?\.([a-z]+)$/, ''))
|
||||
return unique(normal).sort()
|
||||
@ -60,8 +60,6 @@
|
||||
|
||||
.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
|
||||
.btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
|
||||
@warn ".btn-purple will be removed in 13.0.0. Please don't make buttons purple.";
|
||||
.btn-purple { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
|
||||
.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
|
||||
.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
|
||||
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
// Fixed-width, centered column for site content.
|
||||
// This will be deprecated and replaced with container-lg in future
|
||||
.container {
|
||||
width: $container-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Handy container styles that match our breakpoints
|
||||
|
||||
// 544px
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./container.scss";
|
||||
@import "./columns.scss";
|
||||
@import "./grid.scss";
|
||||
@import "./grid-offset.scss";
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
|
||||
|
||||
@warn ".text-pending and .bg-pending will be deprecated in 13.0.0. Use .text-yellow and .bg-yellow-dark instead";
|
||||
|
||||
// background colors
|
||||
/* Set the background to $bg-white */
|
||||
.bg-white { background-color: $bg-white !important; }
|
||||
@ -80,12 +78,6 @@
|
||||
/* Set the text color to inherit */
|
||||
.text-inherit { color: inherit !important; }
|
||||
|
||||
// Pending states
|
||||
// This will be deprecated in the future, use .text-yellow instead
|
||||
.text-pending { color: $yellow-800 !important; }
|
||||
// This will be deprecated in the future, use .bg-yellow-dark instead
|
||||
.bg-pending { color: $yellow-700 !important; }
|
||||
|
||||
// Link colors
|
||||
// Sets the links color to $text-gray and $text-blue on hover
|
||||
.link-gray {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user