mirror of
https://github.com/primer/css.git
synced 2025-01-06 05:33:07 +03:00
Shawn Allen
GitHub
commit
3cf5c67bed
16
CHANGELOG.md
16
CHANGELOG.md
@ -1,3 +1,19 @@
|
||||
# 10.10.5
|
||||
|
||||
#### :bug: Bug Fix
|
||||
* [#650](https://github.com/primer/primer/pull/650) Fix border radius edge utility specificity. ([@shawnbot](https://github.com/shawnbot))
|
||||
|
||||
#### :memo: Documentation
|
||||
* [#649](https://github.com/primer/primer/pull/649) Sandboxed code examples. ([@shawnbot](https://github.com/shawnbot))
|
||||
|
||||
#### :house: Internal
|
||||
- Only check links on Travis if `[check-links]` is included in the commit message
|
||||
- a5658d3 Run `now alias` without the branch name on merge to `master`
|
||||
|
||||
#### Committers: 1
|
||||
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
|
||||
|
||||
|
||||
# 10.10.4
|
||||
|
||||
#### :memo: Documentation
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
/* eslint-disable no-console */
|
||||
const sync = require('./sync')
|
||||
const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
|
||||
const {CI, NODE_ENV, NOW_URL} = process.env
|
||||
|
||||
const PRIMER_SCSS = 'primer/index.scss$'
|
||||
const PRIMER_STATIC_CSS = require.resolve('primer/build/build.css')
|
||||
|
||||
module.exports = (nextConfig = {}) => {
|
||||
const {assetPrefix = NOW_URL || ''} = nextConfig
|
||||
|
||||
@ -26,13 +24,29 @@ module.exports = (nextConfig = {}) => {
|
||||
)
|
||||
}
|
||||
|
||||
const {dev} = options
|
||||
const {dev, isServer} = options
|
||||
|
||||
// only attempt to sync locally and in CI
|
||||
if (dev && !configured) {
|
||||
sync({watch: !CI})
|
||||
}
|
||||
|
||||
// in production, we don't need to compile Primer from SCSS; just inline
|
||||
// the CSS build!
|
||||
if (!dev) {
|
||||
config.resolve.alias['primer/index.scss$'] = require.resolve('primer/build/build.css')
|
||||
|
||||
const cssLoader = cssLoaderConfig(config, {
|
||||
dev,
|
||||
isServer
|
||||
})
|
||||
options.defaultLoaders.css = cssLoader
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
loader: cssLoader
|
||||
})
|
||||
}
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
use: '@svgr/webpack'
|
||||
@ -46,18 +60,6 @@ module.exports = (nextConfig = {}) => {
|
||||
]
|
||||
})
|
||||
|
||||
/**
|
||||
* in production we don't have access to ../modules, so we need to
|
||||
* rewrite the 'primer/index.scss' import to the static CSS build
|
||||
*/
|
||||
if (!dev) {
|
||||
config.resolve.alias[PRIMER_SCSS] = PRIMER_STATIC_CSS
|
||||
// only log the aliasing once
|
||||
if (!configured) {
|
||||
console.warn(`*** rewriting ${PRIMER_SCSS} to ${PRIMER_STATIC_CSS}`)
|
||||
}
|
||||
}
|
||||
|
||||
configured = true
|
||||
if (typeof nextConfig.webpack === 'function') {
|
||||
return nextConfig.webpack(config, options)
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
const {join, resolve} = require('path')
|
||||
const css = require('@zeit/next-css')
|
||||
const sass = require('@zeit/next-sass')
|
||||
const withSass = require('@zeit/next-sass')
|
||||
const configure = require('./lib/config')
|
||||
|
||||
module.exports = configure(
|
||||
css(
|
||||
sass({
|
||||
sassLoaderOptions: {
|
||||
includePaths: [
|
||||
resolve(__dirname, '../modules')
|
||||
]
|
||||
}
|
||||
})
|
||||
)
|
||||
withSass({
|
||||
sassLoaderOptions: {
|
||||
includePaths: [
|
||||
resolve(__dirname, '../modules'),
|
||||
resolve(__dirname, 'node_modules')
|
||||
]
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
1092
docs/package-lock.json
generated
1092
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,7 +9,6 @@
|
||||
"sync": "script/sync",
|
||||
"watch": "script/sync --watch",
|
||||
"dev": "next",
|
||||
"prebuild": "cp node_modules/primer/build/build.css static/primer.css",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
@ -17,7 +16,7 @@
|
||||
"@githubprimer/octicons-react": "^8.1.3",
|
||||
"@mdx-js/mdx": "^0.16.6",
|
||||
"@mdx-js/tag": "0.15.0",
|
||||
"@primer/components": "^7.0.0-beta",
|
||||
"@primer/components": "^8.2.0-beta",
|
||||
"@svgr/webpack": "2.4.1",
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-sass": "^1.0.1",
|
||||
@ -28,8 +27,6 @@
|
||||
"clipboard-copy-element": "^0.5.0",
|
||||
"colorette": "^1.0.7",
|
||||
"details-dialog-element": "^1.4.0",
|
||||
"emotion": "9.2.8",
|
||||
"emotion-server": "9.2.8",
|
||||
"eslint": "4.19.1",
|
||||
"eslint-plugin-github": "1.0.0",
|
||||
"eslint-plugin-prettier": "^3.0.0",
|
||||
@ -51,20 +48,20 @@
|
||||
"next-compose-plugins": "2.1.1",
|
||||
"node-sass": "^4.10.0",
|
||||
"now": "^12.1.8",
|
||||
"primer": "10.10.4",
|
||||
"primer": "10.10.5",
|
||||
"primer-colors": "^1.0.1",
|
||||
"prism-github": "^1.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "16.6.1",
|
||||
"react-dom": "16.6.1",
|
||||
"react-emotion": "9.2.8",
|
||||
"react-measure": "^2.2.2",
|
||||
"refractor": "^2.6.2",
|
||||
"remark-emoji": "^2.0.2",
|
||||
"remark-images": "^0.16.1",
|
||||
"remark-parse": "^6.0.3",
|
||||
"remark-textr": "^3.0.3",
|
||||
"remark-toc": "^5.1.1",
|
||||
"styled-components": "3.3.3",
|
||||
"styled-components": "^4.1.2",
|
||||
"title-case": "^2.1.1",
|
||||
"tree-model": "^1.0.7",
|
||||
"typographic-base": "^1.0.4",
|
||||
|
||||
@ -3,34 +3,12 @@ import App, {Container} from 'next/app'
|
||||
import {MDXProvider} from '@mdx-js/tag'
|
||||
import Head from 'next/head'
|
||||
import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
|
||||
import {injectGlobal} from 'emotion'
|
||||
import {Header, PackageHeader, SideNav} from '../src/components'
|
||||
import getComponents from '../src/markdown'
|
||||
import {config, requirePage, rootPage} from '../src/utils'
|
||||
import {CONTENT_MAX_WIDTH} from '../src/constants'
|
||||
|
||||
import 'primer/index.scss'
|
||||
import 'prism-github'
|
||||
|
||||
// XXX undo .markdown-body .rule (:facepalm:)
|
||||
injectGlobal`
|
||||
.markdown-body .rule.token {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.markdown-body .rule.token::before,
|
||||
.markdown-body .rule.token::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.language-html .token {
|
||||
color: ${theme.colors.gray[8]} !important;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export default class MyApp extends App {
|
||||
static async getInitialProps({Component, ctx}) {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react'
|
||||
import Document, {Main, NextScript} from 'next/document'
|
||||
import Document, {Head, Main, NextScript} from 'next/document'
|
||||
import {ServerStyleSheet} from 'styled-components'
|
||||
import {extractCritical} from 'emotion-server'
|
||||
import {config, getAssetPath} from '../src/utils'
|
||||
import {getAssetPath, CommonStyles, CommonScripts} from '../src/utils'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static getInitialProps({renderPage}) {
|
||||
@ -10,26 +9,18 @@ export default class MyDocument extends Document {
|
||||
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
|
||||
return {
|
||||
...page,
|
||||
styleTags: (
|
||||
<>
|
||||
<style id="emotion-static">{extractCritical(page.html).css}</style>
|
||||
{sheet.getStyleElement()}
|
||||
</>
|
||||
)
|
||||
renderedStyles: sheet.getStyleElement()
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {styleTags} = this.props
|
||||
const {files, renderedStyles} = this.props
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Primer CSS</title>
|
||||
{/* TODO: update this with a new id
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126681523-1" />
|
||||
<Head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126681523-2" />
|
||||
<script async href={getAssetPath('analytics.js')} />
|
||||
*/}
|
||||
<meta charSet="utf8" />
|
||||
<link rel="icon" href={getAssetPath('favicon.png')} />
|
||||
<link rel="apple-touch-icon" href={getAssetPath('apple-touch-icon.png')} />
|
||||
@ -46,17 +37,13 @@ export default class MyDocument extends Document {
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:site" content="@githubprimer" />
|
||||
<link rel="stylesheet" href={getAssetPath('github/styleguide.css')} />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href={config.production ? getAssetPath('primer.css') : '/_next/static/css/styles.chunk.css'}
|
||||
/>
|
||||
{styleTags}
|
||||
</head>
|
||||
<body>
|
||||
<CommonStyles />
|
||||
{renderedStyles}
|
||||
</Head>
|
||||
<body data-files={JSON.stringify(files)}>
|
||||
<Main />
|
||||
<NextScript />
|
||||
<script src={getAssetPath('github/styleguide.js')} />
|
||||
<CommonScripts />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@ -17,10 +17,10 @@ export const Hero = () => (
|
||||
<Heading color="blue.4" fontSize={7} pb={3} m={0}>
|
||||
Primer CSS
|
||||
</Heading>
|
||||
<Text is="div" color="blue.2" fontSize={2} mb={4}>
|
||||
<Text as="div" color="blue.2" fontSize={2} mb={4}>
|
||||
v{version}
|
||||
</Text>
|
||||
<Box is={HeaderImage} mb={6} />
|
||||
<Box as={HeaderImage} mb={6} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -15,8 +15,8 @@ title: HTML
|
||||
* Avoid trailing slashes in self-closing elements. For example, `<br>`, `<hr>`, `<img>`, and `<input>`.
|
||||
* Don't set `tabindex` manually—rely on the browser to set the order.
|
||||
|
||||
```html
|
||||
<p class="line-note" data-attribute="106">
|
||||
```html dead={true}
|
||||
<p class="line-note m-0" data-attribute="106">
|
||||
This is my paragraph of special text.
|
||||
</p>
|
||||
```
|
||||
@ -25,7 +25,7 @@ title: HTML
|
||||
|
||||
Many attributes don't require a value to be set, like `disabled` or `checked`, so don't set them.
|
||||
|
||||
```html
|
||||
```html dead={true}
|
||||
<input type="text" disabled>
|
||||
|
||||
<input type="checkbox" value="1" checked>
|
||||
@ -41,7 +41,7 @@ For more information, [read the WhatWG section](http://www.whatwg.org/specs/web-
|
||||
|
||||
Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example:
|
||||
|
||||
```html
|
||||
```html dead={true}
|
||||
<!-- Not so great -->
|
||||
<span class="avatar">
|
||||
<img src="https://github.com/github.png">
|
||||
@ -62,7 +62,7 @@ Whenever possible, avoid superfluous parent elements when writing HTML. Many tim
|
||||
|
||||
Make use of `<thead>`, `<tfoot>`, `<tbody>`, and `<th>` tags (and `scope` attribute) when appropriate. (Note: `<tfoot>` goes above `<tbody>` for speed reasons. You want the browser to load the footer before a table full of data.)
|
||||
|
||||
```html
|
||||
```html dead={true}
|
||||
<table summary="This is a chart of invoices for 2011.">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -16,7 +16,7 @@ title: SCSS
|
||||
|
||||
## Formatting
|
||||
|
||||
* Use hex color codes `#000` unless using `rgba()` in raw CSS (SCSS' `rgba()` function is overloaded to accept hex colors as a param, e.g., `rgba(#000, .5)`).
|
||||
* Use hex color codes `#000` unless using `rgba()` in raw CSS (the SCSS `rgba()` function is overloaded to accept hex colors, as in `rgba(#000, .5)`).
|
||||
* Use `//` for comment blocks (instead of `/* */`).
|
||||
* Avoid specifying units for zero values, e.g., `margin: 0;` instead of `margin: 0px;`.
|
||||
* Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values.
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
import {redirect} from '../src/utils'
|
||||
import redirect from '../src/redirect'
|
||||
export default redirect('/css')
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {Box} from '@primer/components'
|
||||
import styled from 'react-emotion'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const BoxShadow = styled(Box)`
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import React from 'react'
|
||||
import HTMLtoJSX from 'html-2-jsx'
|
||||
import {Absolute, BorderBox, Box, StyledOcticon as Octicon, Relative, Text} from '@primer/components'
|
||||
import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live'
|
||||
import {getIconByName} from '@githubprimer/octicons-react'
|
||||
import {Absolute, BorderBox, Box, StyledOcticon as Octicon, Relative, Text, theme} from '@primer/components'
|
||||
import ClipboardCopy from './ClipboardCopy'
|
||||
import HTMLtoJSX from 'html-2-jsx'
|
||||
import Frame from './Frame'
|
||||
|
||||
import 'prism-github/prism-github.scss'
|
||||
|
||||
const LANG_PATTERN = /\blanguage-\.?(jsx?|html)\b/
|
||||
|
||||
@ -15,7 +18,6 @@ const converter = new HTMLtoJSX({
|
||||
const defaultTransform = code => `<React.Fragment>${code}</React.Fragment>`
|
||||
|
||||
const languageTransforms = {
|
||||
erb: erb => sanitizeERB(languageTransforms.html(erb)),
|
||||
html: html => defaultTransform(converter.convert(html)),
|
||||
jsx: defaultTransform
|
||||
}
|
||||
@ -24,45 +26,51 @@ export default function CodeExample(props) {
|
||||
const {children, dangerouslySetInnerHTML, dead, source, ...rest} = props
|
||||
const lang = getLanguage(props.className)
|
||||
if (lang && !dead) {
|
||||
rest.code = source
|
||||
rest.scope = {Octicon, getIconByName}
|
||||
rest.transformCode = getTransformForLanguage(lang)
|
||||
const liveProps = {
|
||||
code: source,
|
||||
scope: {Octicon, getIconByName},
|
||||
transformCode: getTransformForLanguage(lang),
|
||||
mountStylesheet: false
|
||||
}
|
||||
return (
|
||||
<LiveProvider mountStylesheet={false} {...rest}>
|
||||
<BorderBox bg="gray.1" my={4}>
|
||||
<Box bg="white" p={3} className="clearfix">
|
||||
<LivePreview />
|
||||
</Box>
|
||||
<Relative p={3}>
|
||||
<Text
|
||||
is={LiveEditor}
|
||||
fontFamily="mono"
|
||||
lineHeight="normal"
|
||||
bg="transparent"
|
||||
p="0 !important"
|
||||
m="0 !important"
|
||||
/>
|
||||
<Absolute right={theme.space[3]} top={theme.space[3]}>
|
||||
<LiveProvider {...liveProps}>
|
||||
<BorderBox {...rest}>
|
||||
<BorderBox bg="white" p={3} border={0} borderBottom={1} borderRadius={0}>
|
||||
<Frame>
|
||||
<LivePreview />
|
||||
</Frame>
|
||||
</BorderBox>
|
||||
<Box is={Relative} bg="gray.1" p={3}>
|
||||
<LiveEditor style={{margin: 0, padding: 0}} />
|
||||
<Absolute right={0} top={0} m={3}>
|
||||
<ClipboardCopy value={source} />
|
||||
</Absolute>
|
||||
</Relative>
|
||||
<Text
|
||||
is={LiveError}
|
||||
fontFamily="mono"
|
||||
css={{
|
||||
overflow: 'auto',
|
||||
whiteSpace: 'pre'
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
as={LiveError}
|
||||
fontFamily="mono"
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
whiteSpace: 'pre'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</BorderBox>
|
||||
</LiveProvider>
|
||||
)
|
||||
} else {
|
||||
Object.assign(rest, {children, dangerouslySetInnerHTML})
|
||||
return <pre data-source={source} {...rest} />
|
||||
const rest = {
|
||||
children,
|
||||
dangerouslySetInnerHTML
|
||||
}
|
||||
// eslint-disable-next-line react/no-danger-with-children
|
||||
return <BorderBox data-source={source} is="pre" {...rest} />
|
||||
}
|
||||
}
|
||||
|
||||
CodeExample.defaultProps = {
|
||||
my: 4
|
||||
}
|
||||
|
||||
function getLanguage(className) {
|
||||
const match = className && className.match(LANG_PATTERN)
|
||||
return match ? match[1] : undefined
|
||||
@ -71,33 +79,3 @@ function getLanguage(className) {
|
||||
function getTransformForLanguage(lang) {
|
||||
return lang in languageTransforms ? languageTransforms[lang] : null
|
||||
}
|
||||
|
||||
function sanitizeERB(html) {
|
||||
return html
|
||||
.replace(/<%= octicon\("([-\w]+)"([^%]+)\)\s*%>/g, erbOcticon)
|
||||
.replace(/<%([^%]+)%gt;/g, '{/* ERB: `$1` */}')
|
||||
}
|
||||
|
||||
const RUBY_ARG_PATTERNS = [/^:(\w+) ?=> ?(.+)$/, /^(\w+): ?(.+)$/]
|
||||
|
||||
function erbOcticon(substr, name, argString) {
|
||||
let args = ''
|
||||
if (argString) {
|
||||
args = argString
|
||||
.split(/,\s*/)
|
||||
.slice(1)
|
||||
.map(arg => {
|
||||
for (const pattern of RUBY_ARG_PATTERNS) {
|
||||
const match = arg.match(pattern)
|
||||
if (match) {
|
||||
const attr = match[1]
|
||||
const value = match[2].charAt(0) === '"' ? match[2] : `{${match[2]}}`
|
||||
return `${attr}=${value}`
|
||||
}
|
||||
}
|
||||
return ''
|
||||
})
|
||||
.join(' ')
|
||||
}
|
||||
return `<Octicon icon={getIconByName("${name}")} ${args} />`
|
||||
}
|
||||
|
||||
65
docs/src/Frame.js
Normal file
65
docs/src/Frame.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Measure from 'react-measure'
|
||||
import {BorderBox} from '@primer/components'
|
||||
import {assetPrefix} from './utils'
|
||||
|
||||
const DEFAULT_IFRAME_HEIGHT = 150
|
||||
|
||||
export default class Frame extends React.Component {
|
||||
static defaultProps = {
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
minHeight: 0,
|
||||
width: '100%'
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {files: [], height: props.height}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.doc = this.iframe.contentDocument
|
||||
const files = JSON.parse(document.body.dataset.files || '[]')
|
||||
// eslint-disable-next-line react/no-did-mount-set-state
|
||||
this.setState({loaded: false, files})
|
||||
this.iframe.addEventListener('load', () => {
|
||||
this.setState({loaded: true})
|
||||
})
|
||||
}
|
||||
|
||||
getHead() {
|
||||
const {files} = this.state
|
||||
return files
|
||||
? files
|
||||
.filter(file => file.endsWith('.css'))
|
||||
.map(file => <link rel="stylesheet" href={`${assetPrefix}/_next/${file}`} key={file} />)
|
||||
: null
|
||||
}
|
||||
|
||||
getBody(children) {
|
||||
return (
|
||||
<Measure bounds onResize={rect => this.setHeight(rect.bounds.height)}>
|
||||
{({measureRef}) => <div ref={measureRef}>{children}</div>}
|
||||
</Measure>
|
||||
)
|
||||
}
|
||||
|
||||
setHeight(height) {
|
||||
// console.warn('height:', height)
|
||||
this.setState({height})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {children, ...rest} = this.props
|
||||
const {height = 'auto'} = this.state
|
||||
return (
|
||||
<BorderBox as="iframe" style={{height}} {...rest} ref={node => (this.iframe = node)}>
|
||||
{this.doc
|
||||
? [ReactDOM.createPortal(this.getHead(), this.doc.head), ReactDOM.createPortal(this.getBody(children), this.doc.body)]
|
||||
: null}
|
||||
</BorderBox>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,6 @@ import {Text, Flex, Sticky, BorderBox, Box} from '@primer/components'
|
||||
import BoxShadow from './BoxShadow'
|
||||
import Link from './Link'
|
||||
import NodeLink from './NodeLink'
|
||||
import {repository} from 'primer/package.json'
|
||||
|
||||
const NavLink = withRouter(({is: Tag = NodeLink, href, router, ...rest}) => (
|
||||
<Tag href={href} color="white" px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
|
||||
@ -29,7 +28,9 @@ const Header = props => (
|
||||
<NavLink href="/css/getting-started" />
|
||||
<NavLink href="/css/principles" />
|
||||
<NavLink href="/css/tools" />
|
||||
<NavLink is={Link} href="https://github.com/primer/primer/releases">Releases</NavLink>
|
||||
<NavLink as={Link} href="https://github.com/primer/primer/releases">
|
||||
Releases
|
||||
</NavLink>
|
||||
</HeaderText>
|
||||
</Box>
|
||||
<Box display={['block', 'block', 'none']}>
|
||||
|
||||
@ -4,7 +4,7 @@ import {Box} from '@primer/components'
|
||||
export default function Outline({outline, ...rest}) {
|
||||
if (outline && outline.length) {
|
||||
return (
|
||||
<Box is="details" mb={4}>
|
||||
<Box as="details" mb={4}>
|
||||
<summary>Table of contents</summary>
|
||||
<OutlineList items={outline} {...rest} />
|
||||
</Box>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {Comment, Info, FileCode, Alert, PrimitiveDot} from '@githubprimer/octicons-react'
|
||||
import {BorderBox, Box, Flex, Link, StyledOcticon as Octicon, Text} from '@primer/components'
|
||||
import {Comment, Info, FileCode, Alert} from '@githubprimer/octicons-react'
|
||||
import {Box, Flex, Link, StyledOcticon as Octicon, Text} from '@primer/components'
|
||||
import StatusLabel from './StatusLabel'
|
||||
|
||||
export default function PackageHeader(props) {
|
||||
@ -38,8 +38,8 @@ export default function PackageHeader(props) {
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" mb={4} {...rest}>
|
||||
<Text is="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} is="a" href="/css/status-key" mr={2} /> : null}
|
||||
<Text as="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} as="a" href="/css/status-key" mr={2} /> : null}
|
||||
{info}
|
||||
</Text>
|
||||
<Box>
|
||||
|
||||
@ -7,7 +7,7 @@ import {rootPage} from './utils'
|
||||
|
||||
export default function SideNav(props) {
|
||||
return (
|
||||
<Relative is="nav">
|
||||
<Relative as="nav">
|
||||
<Box id="sidenav" {...props}>
|
||||
<Flex flexDirection="column" alignItems="start">
|
||||
<Router>
|
||||
@ -75,12 +75,7 @@ function NavList({path}) {
|
||||
*/
|
||||
const SectionLink = withRouter(({href, router, ...rest}) => (
|
||||
<Box {...rest}>
|
||||
<NodeLink
|
||||
href={href}
|
||||
color="gray.9"
|
||||
fontSize={2}
|
||||
fontWeight={router.pathname.startsWith(href) ? 'bold' : null}
|
||||
/>
|
||||
<NodeLink href={href} color="gray.9" fontSize={2} fontWeight={router.pathname.startsWith(href) ? 'bold' : null} />
|
||||
</Box>
|
||||
))
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import {BorderBox, StyledOcticon as Octicon, Text} from '@primer/components'
|
||||
import {PrimitiveDot} from '@githubprimer/octicons-react'
|
||||
@ -19,7 +20,9 @@ export default function StatusLabel({status, children, ...rest}) {
|
||||
return (
|
||||
<StyledLabel px={2} py={1} {...rest}>
|
||||
<Octicon icon={PrimitiveDot} color={getStatusColor(status)} mr={2} />
|
||||
<Text color='black' fontSize={1}>{children || status}</Text>
|
||||
<Text color="black" fontSize={1}>
|
||||
{children || status}
|
||||
</Text>
|
||||
</StyledLabel>
|
||||
)
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ export function ColorVariables(props) {
|
||||
<Flex flexWrap="wrap" {...props}>
|
||||
<FadeVariables id="black" hue="black" bg="black" color="white">
|
||||
<BorderBox border={0} borderRadius={0} borderTop={1} borderColor="gray.5" mt={1}>
|
||||
<Text is="div" fontSize={2} pt={3} mb={0}>
|
||||
<Text as="div" fontSize={2} pt={3} mb={0}>
|
||||
Black fades apply alpha transparency to the <Var>$black</Var> variable. The black color value has a slight
|
||||
blue hue to match our grays.
|
||||
</Text>
|
||||
@ -50,7 +50,7 @@ export function ColorVariables(props) {
|
||||
</FadeVariables>
|
||||
<FadeVariables id="white" hue="white" over={BLACK}>
|
||||
<BorderBox border={0} borderRadius={0} borderTop={1} mt={1}>
|
||||
<Text is="div" fontSize={2} pt={3} mb={0}>
|
||||
<Text as="div" fontSize={2} pt={3} mb={0}>
|
||||
White fades apply alpha transparency to the <Var>$white</Var> variable, below these are shown overlaid on
|
||||
a dark gray background.
|
||||
</Text>
|
||||
@ -64,14 +64,14 @@ export function ColorVariables(props) {
|
||||
export function ColorVariable({hue, ...rest}) {
|
||||
const values = colors[hue]
|
||||
return (
|
||||
<Flex.Item is={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
|
||||
{/* <Heading is="div">{titleCase(hue)}</Heading> */}
|
||||
<Flex.Item as={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
|
||||
{/* <Heading as="div">{titleCase(hue)}</Heading> */}
|
||||
<Box bg={`${hue}.5`} my={2} p={3} color="white">
|
||||
<Heading is="div" pb={3} fontSize={56} fontWeight="light">
|
||||
<Heading as="div" pb={3} fontSize={56} fontWeight="light">
|
||||
{titleCase(hue)}
|
||||
</Heading>
|
||||
<Flex justifyContent="space-between">
|
||||
<Flex.Item flex="1 1 auto" is={Var}>
|
||||
<Flex.Item flex="1 1 auto" as={Var}>
|
||||
${hue}-500
|
||||
</Flex.Item>
|
||||
<Text fontFamily="mono">{values[5]}</Text>
|
||||
@ -103,14 +103,14 @@ export function FadeVariables({hue, color, bg, over, children, ...rest}) {
|
||||
})
|
||||
const boxProps = {color, bg}
|
||||
return (
|
||||
<Flex.Item is={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
|
||||
{/* <Heading is="div">{titleCase(hue)}</Heading> */}
|
||||
<Flex.Item as={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
|
||||
{/* <Heading as="div">{titleCase(hue)}</Heading> */}
|
||||
<Box my={2} p={3} {...boxProps}>
|
||||
<Heading is="div" pb={3} fontSize={56} fontWeight="light">
|
||||
<Heading as="div" pb={3} fontSize={56} fontWeight="light">
|
||||
{titleCase(hue)}
|
||||
</Heading>
|
||||
<Flex justifyContent="space-between">
|
||||
<Flex.Item flex="1 1 auto" is={Var}>
|
||||
<Flex.Item flex="1 1 auto" as={Var}>
|
||||
${hue}
|
||||
</Flex.Item>
|
||||
<Text fontFamily="mono">
|
||||
@ -140,15 +140,13 @@ FadeVariables.propTypes = {
|
||||
function Swatch(props) {
|
||||
const {name, value, textColor = overlayColor(value), ...rest} = props
|
||||
return (
|
||||
<Box bg={value} {...rest}>
|
||||
<Text is={Flex} fontSize={1} justifyContent="space-between">
|
||||
<Box bg={value} color={textColor} {...rest}>
|
||||
<Text as={Flex} fontSize={1} justifyContent="space-between">
|
||||
<Box p={3}>
|
||||
<Var color={textColor}>${name}</Var>
|
||||
<Var>${name}</Var>
|
||||
</Box>
|
||||
<Box p={3}>
|
||||
<Text color={textColor} fontFamily="mono">
|
||||
{value}
|
||||
</Text>
|
||||
<Text fontFamily="mono">{value}</Text>
|
||||
</Box>
|
||||
</Text>
|
||||
</Box>
|
||||
@ -163,7 +161,7 @@ Swatch.propTypes = {
|
||||
|
||||
function Var(props) {
|
||||
// FIXME: fontStyle should be a prop, right?
|
||||
return <Text is="var" fontWeight="bold" fontFamily="mono" css={{fontStyle: 'normal'}} {...props} />
|
||||
return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
|
||||
}
|
||||
|
||||
function overlayColor(bg) {
|
||||
|
||||
@ -10,7 +10,7 @@ import ColorImage from './ColorImage.svg'
|
||||
|
||||
export {default as HeaderImage} from './HeaderImage.svg'
|
||||
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" as="div" {...props} />
|
||||
const OverviewText = props => <Text fontSize={1} {...props} />
|
||||
|
||||
export function StylesOverview(props) {
|
||||
@ -34,7 +34,7 @@ export function StylesOverview(props) {
|
||||
return (
|
||||
<Flex {...props}>
|
||||
{styleTypes.map(({name, desc, image}) => (
|
||||
<Flex.Item is={Text} textAlign="center" mx={4} key={name}>
|
||||
<Flex.Item as={Text} textAlign="center" mx={4} key={name}>
|
||||
<Image src={image} height={90} mb={2} />
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
@ -103,9 +103,9 @@ function Image(props) {
|
||||
const {src, ...rest} = props
|
||||
switch (typeof src) {
|
||||
case 'string':
|
||||
return <Box is="img" width="100%" alt="" {...props} />
|
||||
return <Box as="img" width="100%" alt="" {...props} />
|
||||
case 'function':
|
||||
return <Box is={src} {...rest} />
|
||||
return <Box as={src} {...rest} />
|
||||
default:
|
||||
throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
|
||||
}
|
||||
@ -127,7 +127,7 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
|
||||
</Link>
|
||||
</Flex>
|
||||
{count ? (
|
||||
<Text is="div" textAlign="center">
|
||||
<Text as="div" textAlign="center">
|
||||
This package includes all {count} Primer modules.
|
||||
</Text>
|
||||
) : null}
|
||||
@ -139,16 +139,18 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
|
||||
export function MetaPackageBox({children, data = {}, title, ...rest}) {
|
||||
const deps = data.dependencies || []
|
||||
return (
|
||||
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<Heading fontSize={2} is={BorderBox} bg="gray.1" border={0} borderBottom={1} px={3} py={2}>
|
||||
<Link href={packageSourceURL(data.name)} color="inherit">
|
||||
{title}
|
||||
</Link>{' '}
|
||||
<Link href={packageURL(data.name)}>{data.version}</Link>
|
||||
</Heading>
|
||||
<Flex.Item as={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
|
||||
<Heading as="div" fontSize={2}>
|
||||
<Link href={packageSourceURL(data.name)} color="inherit">
|
||||
{title}
|
||||
</Link>{' '}
|
||||
<Link href={packageURL(data.name)}>{data.version}</Link>
|
||||
</Heading>
|
||||
</BorderBox>
|
||||
<Text is="div" fontSize={1} p={3}>
|
||||
{children}
|
||||
<Text fontWeight="bold" is="div" mt={4} mb={2}>
|
||||
<Text is="div" fontWeight="bold" mt={4} mb={2}>
|
||||
{deps.length} packages:
|
||||
</Text>
|
||||
<ul className="list-style-none pl-0">
|
||||
|
||||
@ -12,6 +12,8 @@ export default function getComponents(page = {}) {
|
||||
h1: H1,
|
||||
// render links with our component
|
||||
a: Link,
|
||||
// render code blocks with our wrapper around mdx-live
|
||||
code: CodeExample,
|
||||
// render the outline for <p> tags with exactly the text "{:toc}"
|
||||
p: ({children, ...rest}) => {
|
||||
if (children === '{:toc}') {
|
||||
@ -20,8 +22,7 @@ export default function getComponents(page = {}) {
|
||||
return <p {...rest}>{children}</p>
|
||||
}
|
||||
},
|
||||
// render code blocks with our wrapper around mdx-live
|
||||
code: CodeExample,
|
||||
// "unwrap" <pre> elements around <code> blocks
|
||||
pre: props => props.children
|
||||
}
|
||||
}
|
||||
|
||||
30
docs/src/redirect.js
Normal file
30
docs/src/redirect.js
Normal file
@ -0,0 +1,30 @@
|
||||
import Router from 'next/router'
|
||||
|
||||
/**
|
||||
* Export this as your default from a page, and it'll redirect both server-
|
||||
* and client-side:
|
||||
*
|
||||
* ```js
|
||||
* import {redirect} from '../src/utils'
|
||||
* export default redirect('/some/path')
|
||||
* ```
|
||||
*/
|
||||
export default function redirect(uri, status = 303) {
|
||||
// XXX this doesn't need to extend React.Component because
|
||||
// it doesn't "do" anything React-y
|
||||
return class {
|
||||
static getInitialProps({res}) {
|
||||
// the "context" object passed to getInitialProps() will
|
||||
// have a "res" (response) object if we're server-side
|
||||
if (res) {
|
||||
res.writeHead(status, {Location: uri})
|
||||
res.end()
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
Router.replace(uri)
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,14 @@
|
||||
import Router from 'next/router'
|
||||
import React from 'react'
|
||||
import getConfig from 'next/config'
|
||||
import TreeModel from 'tree-model'
|
||||
|
||||
export const CommonStyles = () => {
|
||||
const sheets = [getAssetPath('github/styleguide.css')]
|
||||
return sheets.map(href => <link href={href} rel="stylesheet" key={href} />)
|
||||
}
|
||||
|
||||
export const CommonScripts = () => <script src={getAssetPath('github/styleguide.js')} />
|
||||
|
||||
const INDEX_PATTERN = /\/index(\.[a-z]+)?$/
|
||||
|
||||
export const config = getConfig().publicRuntimeConfig || {}
|
||||
@ -36,35 +43,6 @@ rootPage.walk(node => {
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Export this as your default from a page, and it'll redirect both server-
|
||||
* and client-side:
|
||||
*
|
||||
* ```js
|
||||
* import {redirect} from '../src/utils'
|
||||
* export default redirect('/some/path')
|
||||
* ```
|
||||
*/
|
||||
export function redirect(uri, status = 303) {
|
||||
// XXX this doesn't need to extend React.Component because
|
||||
// it doesn't "do" anything React-y
|
||||
return class {
|
||||
static getInitialProps({res}) {
|
||||
// the "context" object passed to getInitialProps() will
|
||||
// have a "res" (response) object if we're server-side
|
||||
if (res) {
|
||||
res.writeHead(status, {Location: uri})
|
||||
res.end()
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
Router.replace(uri)
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function nest(map) {
|
||||
const nodeMap = {}
|
||||
const nodes = Object.keys(map)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "6.10.8",
|
||||
"version": "6.10.9",
|
||||
"name": "primer-core",
|
||||
"description": "Primer's core modules",
|
||||
"homepage": "http://primer.github.io/",
|
||||
@ -41,6 +41,6 @@
|
||||
"primer-table-object": "1.4.13",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.3"
|
||||
"primer-utilities": "4.14.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,19 +77,19 @@ $edges: (
|
||||
@each $edge, $corners in $edges {
|
||||
.rounded#{$variant}-#{$edge}-0 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: 0;
|
||||
border-#{$corner}-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-1 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius;
|
||||
border-#{$corner}-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-2 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius * 2;
|
||||
border-#{$corner}-radius: $border-radius * 2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "4.14.3",
|
||||
"version": "4.14.4",
|
||||
"name": "primer-utilities",
|
||||
"description": "Immutable, atomic CSS classes to rapidly build product",
|
||||
"homepage": "http://primer.github.io/",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "10.10.4",
|
||||
"version": "10.10.5",
|
||||
"name": "primer",
|
||||
"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": "http://primer.github.io/",
|
||||
@ -38,7 +38,7 @@
|
||||
"primer-branch-name": "1.0.11",
|
||||
"primer-breadcrumb": "1.5.9",
|
||||
"primer-buttons": "2.6.4",
|
||||
"primer-core": "6.10.8",
|
||||
"primer-core": "6.10.9",
|
||||
"primer-forms": "2.1.8",
|
||||
"primer-labels": "1.5.13",
|
||||
"primer-layout": "1.6.2",
|
||||
@ -61,7 +61,7 @@
|
||||
"primer-tables": "1.5.3",
|
||||
"primer-tooltips": "1.5.11",
|
||||
"primer-truncate": "1.4.13",
|
||||
"primer-utilities": "4.14.3"
|
||||
"primer-utilities": "4.14.4"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
1124
package-lock.json
generated
1124
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -27,7 +27,7 @@ else
|
||||
npx commit-status pending docs "deploying v$version docs..."
|
||||
|
||||
echo "deploying..."
|
||||
now $now_args | tee now-url.txt
|
||||
now "$now_args" | tee now-url.txt
|
||||
url=$(cat now-url.txt)
|
||||
npx commit-status success docs "v$version docs: $url" "$url"
|
||||
|
||||
@ -37,23 +37,31 @@ else
|
||||
branch=$TRAVIS_BRANCH
|
||||
fi
|
||||
|
||||
alias="primer-css-${branch//\./-}.now.sh"
|
||||
if [[ "$branch" = "master" ]]; then
|
||||
alias=$(jq -r .alias now.json)
|
||||
else
|
||||
alias="primer-css-${branch//\./-}.now.sh"
|
||||
fi
|
||||
echo "aliasing to '$alias'..."
|
||||
now $now_args alias $url $alias
|
||||
now "$now_args" alias "$url" "$alias"
|
||||
npx commit-status success docs "v$version docs: $alias" "https://$alias"
|
||||
|
||||
echo
|
||||
echo "Running script/check-links in $(pwd)..."
|
||||
echo
|
||||
script/check-links -v -m=5 "https://$alias/css" || {
|
||||
if [[ "$CHECK_LINKS" = "1" ]]; then
|
||||
echo
|
||||
echo "⚠️ Link check failed! ⚠️"
|
||||
echo "Running script/check-links in $(pwd)..."
|
||||
echo
|
||||
echo "Check the report above for more info, and/or run:"
|
||||
echo
|
||||
echo " script/check-links http://localhost:3000 -v"
|
||||
echo
|
||||
echo "locally for more info."
|
||||
exit 1
|
||||
}
|
||||
script/check-links -v -m=5 "https://$alias/css" || {
|
||||
echo
|
||||
echo "⚠️ Link check failed! ⚠️"
|
||||
echo
|
||||
echo "Check the report above for more info, and/or run:"
|
||||
echo
|
||||
echo " script/check-links http://localhost:3000 -v"
|
||||
echo
|
||||
echo "locally for more info."
|
||||
exit 1
|
||||
}
|
||||
else
|
||||
echo "Set CHECK_LINKS=1 to check links on Travis"
|
||||
fi
|
||||
fi
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.10",
|
||||
"version": "1.0.11",
|
||||
"name": "primer-module-build",
|
||||
"description": "Scripts to build primer SCSS modules into CSS and stats",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -46,7 +46,7 @@
|
||||
"postcss": "^5.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"primer-utilities": "4.14.3",
|
||||
"primer-utilities": "4.14.4",
|
||||
"tempy": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility",
|
||||
"dependencies": {
|
||||
"primer-utilities": "4.14.3",
|
||||
"primer-utilities": "4.14.4",
|
||||
"stylelint": "^7.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user