mirror of
https://github.com/primer/css.git
synced 2024-11-10 07:58:36 +03:00
Merge branch 'underline-nav' of https://github.com/primer/primer-css into underline-nav
This commit is contained in:
Amanda Pinsker
commit
84efc606d8
6
.github/pull_request_template.md
vendored
6
.github/pull_request_template.md
vendored
@ -1,6 +1,8 @@
|
||||
↖ First, change the base branch from "master" to "dev".
|
||||
- [ ] First, change the base branch from "master" to "dev".
|
||||
|
||||
↑ Next, briefly describe your proposal in the title.
|
||||
- [ ] Next, briefly describe your proposal in the title.
|
||||
|
||||
- [ ] Fixes: # (type an issue number after the # if applicable)
|
||||
|
||||
Finally, tell us more about the change here, in the description.
|
||||
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,7 @@
|
||||
.DS_Store
|
||||
.sass-cache
|
||||
node_modules
|
||||
**/package-lock.json
|
||||
*.log
|
||||
build
|
||||
_site
|
||||
|
||||
7
.storybook/.babelrc
Normal file
7
.storybook/.babelrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"presets": [
|
||||
"env",
|
||||
"react",
|
||||
"minify"
|
||||
]
|
||||
}
|
||||
@ -1,24 +1,27 @@
|
||||
import React from 'react'
|
||||
import {storiesOf} from '@storybook/react'
|
||||
import octicons from 'octicons'
|
||||
import SVGInline from 'react-svg-inline'
|
||||
|
||||
const Octicon = (props) => {
|
||||
export const Octicon = (props) => {
|
||||
const {name} = props
|
||||
if (name in octicons) {
|
||||
return <SVGInline svg={octicons[name].toSVG(props)} />
|
||||
const svg = octicons[name].toSVG(props)
|
||||
return <span dangerouslySetInnerHTML={ {__html: svg } } />
|
||||
} else {
|
||||
throw new Error(`No such octicon: "${name}"!`)
|
||||
}
|
||||
}
|
||||
|
||||
const story = storiesOf('Octicons', module)
|
||||
const sizes = [64, 32, 16]
|
||||
|
||||
Object.keys(octicons).forEach(name => {
|
||||
story.add(name, () => (
|
||||
<div>{sizes.map((size, i) => (
|
||||
<Octicon name={name} width={size} height={size} key={i} />
|
||||
))}</div>
|
||||
))
|
||||
story.add(name, () => {
|
||||
return (
|
||||
<div>
|
||||
<Octicon name={name} height="64" />
|
||||
<Octicon name={name} height="32" />
|
||||
<Octicon name={name} height="16" />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@ -4,11 +4,27 @@ import select from 'unist-util-select'
|
||||
import findBefore from 'unist-util-find-before'
|
||||
import htmlToReact from 'html-to-react'
|
||||
import parsePairs from 'parse-pairs'
|
||||
import React from 'react'
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
import {Octicon} from '../Octicon'
|
||||
|
||||
const htmlParser = new htmlToReact.Parser()
|
||||
|
||||
const railsOcticonToReact = (html) => {
|
||||
// <%= octicon "tools" %> to <Octicon name="tools" />
|
||||
const octre = /<%= octicon ["']([a-z\-]+)["'] %>/gi
|
||||
html = html.replace(octre, (match, name) => {
|
||||
return ReactDOMServer.renderToStaticMarkup(<Octicon name={name} />)
|
||||
})
|
||||
return html
|
||||
}
|
||||
|
||||
const isValidNode = () => {
|
||||
return true;
|
||||
}
|
||||
|
||||
const nodeToStory = (node, file) => {
|
||||
const html = node.value
|
||||
let html = railsOcticonToReact(node.value)
|
||||
const element = htmlParser.parse(html)
|
||||
const pairs = node.lang.replace(/^html\s*/, '')
|
||||
const attrs = pairs.length ? parsePairs(pairs) : {}
|
||||
|
||||
@ -1,8 +1,2 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">
|
||||
<script src="https://github.com/site/assets/styleguide.js" async></script>
|
||||
<style>
|
||||
.octicon {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,37 +2,43 @@ const path = require("path");
|
||||
|
||||
const modulesPath = path.resolve(__dirname, "../modules")
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: "raw-loader",
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loaders: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
config: {
|
||||
path: require.resolve("./postcss.config.js"),
|
||||
},
|
||||
module.exports = (config, env) => {
|
||||
|
||||
if (env === 'PRODUCTION') {
|
||||
config.plugins = config.plugins
|
||||
.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
|
||||
}
|
||||
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: "raw-loader",
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loaders: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
config: {
|
||||
path: require.resolve("./postcss.config.js"),
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
modulesPath,
|
||||
],
|
||||
}
|
||||
},
|
||||
],
|
||||
include: modulesPath,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
modulesPath,
|
||||
],
|
||||
}
|
||||
},
|
||||
],
|
||||
include: modulesPath,
|
||||
}
|
||||
)
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
44
CHANGELOG.md
44
CHANGELOG.md
@ -1,3 +1,47 @@
|
||||
# 10.0.0
|
||||
|
||||
### Added
|
||||
- New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
|
||||
- Importing `.input-group` into `primer-forms` module.
|
||||
- New module `primer-branch-name` "A nice, consistent way to display branch names."
|
||||
- New module `primer-dropdown` "A lightweight context menu for navigation and actions."
|
||||
|
||||
### Removed
|
||||
- Removing `primer-cards` module.
|
||||
- Removing `.form-cards` styles.
|
||||
|
||||
### Changes
|
||||
- Moving `primer-breadcrumb` from `primer-marketing` to `primer-core`
|
||||
|
||||
# 9.6.0
|
||||
|
||||
### Added
|
||||
- Storybook. We've added a storybook prototyping environment for testing components in seclusion. To start the server run `npm start`
|
||||
- Adding yeoman generator for creating a primer module. `generator-primer-module`
|
||||
- Importing `stylelint-config-primer` from https://github.com/primer/stylelint-config-primer/ into monorepo.
|
||||
- Importing `stylelint-selector-no-utility` from https://github.com/primer/stylelint-selector-no-utility into monorepo.
|
||||
|
||||
### Changes
|
||||
- Deployment and publishing scripts refinements.
|
||||
|
||||
# 9.5.0
|
||||
|
||||
### Added
|
||||
- It's now possible to style `<summary>` elements as buttons and have them appear in the active/selected state when the enclosing [`<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) is open. #346
|
||||
|
||||
### Changes
|
||||
- Updates our release candidate versioning logic so that prerelease increments are done on a per-module basis, fixing #350.
|
||||
|
||||
# 9.4.0
|
||||
|
||||
### Added
|
||||
- Add `v-align-baseline` class to `primer-utilities` #324
|
||||
- Add deprecation warnings for `primer-cards` and `primer-forms/lib/form-validation.scss` #347 (these will be removed in v10.0.0)
|
||||
|
||||
### Changes
|
||||
- Update npm metadata for `primer-css`, `primer-core`, `primer-product`, and `primer-marketing` #328
|
||||
- Remove `HEAD` heading from the changelog #327
|
||||
|
||||
# 9.3.0
|
||||
|
||||
## Added
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 GitHub Inc.
|
||||
Copyright (c) 2017 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"lerna": "2.0.0-rc.5",
|
||||
"lerna": "2.4.0",
|
||||
"packages": [
|
||||
"modules/*"
|
||||
"modules/*",
|
||||
"tools/*"
|
||||
],
|
||||
"version": "independent"
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.4.0",
|
||||
"version": "1.5.1",
|
||||
"name": "primer-alerts",
|
||||
"description": "Flash messages, or alerts, inform users of successful or pending actions.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"alerts",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-avatars",
|
||||
"description": "Basic styles for user profile avatars.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"avatars",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.4.0",
|
||||
"version": "1.5.1",
|
||||
"name": "primer-base",
|
||||
"description": "CSS to reset the browsers default styles",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-blankslate",
|
||||
"description": "Blankslates are for when there is a lack of content within a page or section.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -47,7 +47,7 @@ The `.Box` component can be used for something as simple as a rounded corner box
|
||||
|
||||
## Box
|
||||
|
||||
A `.Box` is a container with a a white background ,a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
A `.Box` is a container with a a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "2.4.0",
|
||||
"version": "2.5.1",
|
||||
"name": "primer-box",
|
||||
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
69
modules/primer-branch-name/README.md
Normal file
69
modules/primer-branch-name/README.md
Normal file
@ -0,0 +1,69 @@
|
||||
# Primer CSS / Branch Name
|
||||
|
||||
[](https://www.npmjs.org/package/primer-branch-name)
|
||||
[](https://travis-ci.org/primer/primer-css)
|
||||
|
||||
> A nice, consistent way to display branch names.
|
||||
|
||||
This repository is a module of the full [primer-css][primer-css] repository.
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-branch-name` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-branch-name
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-branch-name/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Branch name
|
||||
status: Stable
|
||||
-->
|
||||
|
||||
Branch names can be a link name or not:
|
||||
|
||||
```html
|
||||
<span class="branch-name">a_new_feature_branch</span>
|
||||
<a href="#url" class="branch-name">a_new_feature_branch</a>
|
||||
```
|
||||
|
||||
You may also include an octicon before the branch name text:
|
||||
|
||||
```html
|
||||
<span class="branch-name">
|
||||
<%= octicon("git-branch") width:16 height:16 %>
|
||||
a_new_feature_branch
|
||||
</span>
|
||||
```
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer-css]: https://github.com/primer/primer
|
||||
[docs]: http://primercss.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
3
modules/primer-branch-name/index.scss
Normal file
3
modules/primer-branch-name/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/branch-name.scss";
|
||||
20
modules/primer-branch-name/lib/branch-name.scss
Normal file
20
modules/primer-branch-name/lib/branch-name.scss
Normal file
@ -0,0 +1,20 @@
|
||||
// A nice way to display branch names inside the UI. Can be a link or not.
|
||||
// stylelint-disable selector-max-type
|
||||
.branch-name {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
font: 12px $mono-font;
|
||||
color: rgba($black, 0.6);
|
||||
background-color: lighten($blue-100, 3%);
|
||||
border-radius: 3px;
|
||||
|
||||
.octicon {
|
||||
margin: 1px -2px 0 0;
|
||||
color: desaturate($blue-300, 70%);
|
||||
}
|
||||
}
|
||||
|
||||
// When a branch name is a link
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
a.branch-name { color: $text-blue; }
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
@ -1,41 +1,32 @@
|
||||
{
|
||||
"version": "0.4.1",
|
||||
"name": "primer-cards",
|
||||
"description": "Card-like containers to group semantically related content together on marketing websites at GitHub.",
|
||||
"version": "0.0.1",
|
||||
"name": "primer-branch-name",
|
||||
"description": "A nice, consistent way to display branch names.",
|
||||
"homepage": "http://primercss.io/",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "build/build.css",
|
||||
"main": "build/index.js",
|
||||
"primer": {
|
||||
"category": "marketing",
|
||||
"category": "product",
|
||||
"module_type": "components"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-cards",
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-branch-name",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer-css/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test-docs": "../../script/test-docs",
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"cards",
|
||||
"css",
|
||||
"github",
|
||||
"primer",
|
||||
"primercss",
|
||||
"style"
|
||||
"primer"
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-breadcrumb",
|
||||
"description": "Breadcrumb navigation for pages with parents / grandparents.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,7 +28,7 @@
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"breadcrumb",
|
||||
|
||||
@ -245,6 +245,25 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
|
||||
#### Using button styles with the details summary element
|
||||
|
||||
You can add `.btn` and `.btn-*` classes to any
|
||||
[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
|
||||
element so that it gains the appearance of a button, and
|
||||
selected/active styles when the parent
|
||||
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
|
||||
element is open.
|
||||
|
||||
```html
|
||||
<details>
|
||||
<summary class="btn btn-block btn-primary">Toggle the content</summary>
|
||||
<p class="mt-2">
|
||||
This content will be toggled.
|
||||
</p>
|
||||
</details>
|
||||
```
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## License
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "2.3.0",
|
||||
"version": "2.4.1",
|
||||
"name": "primer-buttons",
|
||||
"description": "A collection of buttons used for primary and secondary actions.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -1,62 +0,0 @@
|
||||
|
||||
# Primer Marketing CSS Cards
|
||||
[](https://www.npmjs.org/package/primer-cards)
|
||||
[](https://travis-ci.org/primer/primer-css)
|
||||
|
||||
# ⚠️ The primer-cards module is being deprecated in the next major version. Use primer-box instead.
|
||||
|
||||
|
||||
|
||||
> Card-like containers to group semantically related content together on marketing websites at GitHub.
|
||||
|
||||
This repository is a module of the full [primer-css][primer] repository.
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Cards
|
||||
status: In review
|
||||
-->
|
||||
|
||||
Documentation & refactor coming very soon
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-cards` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-cards
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-cards/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/primer
|
||||
[primer-support]: https://github.com/primer/primer-support
|
||||
[support]: https://github.com/primer/primer-support
|
||||
[docs]: http://primercss.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
@ -1,6 +0,0 @@
|
||||
// support files
|
||||
@warn "primer-cards: The primer-cards module is being deprecated in the next major version. Use primer-box instead.";
|
||||
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-marketing-support/index.scss";
|
||||
@import "./lib/cards.scss";
|
||||
@ -1,6 +0,0 @@
|
||||
.card {
|
||||
background-color: $white;
|
||||
border: $border;
|
||||
border-radius: 6px;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
* Primer-core
|
||||
* http://primercss.io
|
||||
*
|
||||
* Released under MIT license. Copyright 2015 GitHub, Inc.
|
||||
* Released under MIT license. Copyright (c) 2017 GitHub Inc.
|
||||
*/
|
||||
|
||||
// Primer master file
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "6.3.1",
|
||||
"version": "6.4.1",
|
||||
"name": "primer-core",
|
||||
"description": "Primer CSS's core modules",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -26,17 +26,17 @@
|
||||
"lint": "../../script/lint-scss"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-base": "1.4.0",
|
||||
"primer-box": "2.4.0",
|
||||
"primer-breadcrumb": "1.3.0",
|
||||
"primer-buttons": "2.3.0",
|
||||
"primer-forms": "1.3.1",
|
||||
"primer-layout": "1.3.0",
|
||||
"primer-navigation": "1.3.0",
|
||||
"primer-support": "4.3.0",
|
||||
"primer-table-object": "1.3.0",
|
||||
"primer-tooltips": "1.3.0",
|
||||
"primer-truncate": "1.3.0",
|
||||
"primer-utilities": "4.7.0"
|
||||
"primer-base": "1.5.1",
|
||||
"primer-box": "2.5.1",
|
||||
"primer-breadcrumb": "1.4.1",
|
||||
"primer-buttons": "2.4.1",
|
||||
"primer-forms": "1.4.1",
|
||||
"primer-layout": "1.4.1",
|
||||
"primer-navigation": "1.4.1",
|
||||
"primer-support": "4.4.1",
|
||||
"primer-table-object": "1.4.1",
|
||||
"primer-tooltips": "1.4.1",
|
||||
"primer-truncate": "1.4.1",
|
||||
"primer-utilities": "4.8.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* Primer
|
||||
* http://primercss.io
|
||||
*
|
||||
* Released under MIT license. Copyright 2015 GitHub, Inc.
|
||||
* Released under MIT license. Copyright (c) 2017 GitHub Inc.
|
||||
*/
|
||||
|
||||
// Primer master file
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "9.4.0",
|
||||
"version": "9.6.0",
|
||||
"name": "primer-css",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. Primer-css 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://primercss.io/",
|
||||
@ -27,34 +27,35 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-alerts": "1.4.0",
|
||||
"primer-avatars": "1.3.0",
|
||||
"primer-base": "1.4.0",
|
||||
"primer-blankslate": "1.3.0",
|
||||
"primer-box": "2.4.0",
|
||||
"primer-breadcrumb": "1.3.0",
|
||||
"primer-buttons": "2.3.0",
|
||||
"primer-cards": "0.4.1",
|
||||
"primer-core": "6.3.1",
|
||||
"primer-alerts": "1.5.1",
|
||||
"primer-avatars": "1.4.1",
|
||||
"primer-base": "1.5.1",
|
||||
"primer-blankslate": "1.4.1",
|
||||
"primer-box": "2.5.1",
|
||||
"primer-branch-name": "0.0.1",
|
||||
"primer-breadcrumb": "1.4.1",
|
||||
"primer-buttons": "2.4.1",
|
||||
"primer-core": "6.4.1",
|
||||
"primer-dropdown": "0.1.0",
|
||||
"primer-forms": "1.3.1",
|
||||
"primer-labels": "1.4.0",
|
||||
"primer-layout": "1.3.0",
|
||||
"primer-markdown": "3.6.0",
|
||||
"primer-marketing": "5.3.1",
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-marketing-type": "1.3.0",
|
||||
"primer-marketing-utilities": "1.3.0",
|
||||
"primer-navigation": "1.3.0",
|
||||
"primer-page-headers": "1.3.0",
|
||||
"primer-page-sections": "1.3.0",
|
||||
"primer-product": "5.3.1",
|
||||
"primer-support": "4.3.0",
|
||||
"primer-table-object": "1.3.0",
|
||||
"primer-tables": "1.3.0",
|
||||
"primer-tooltips": "1.3.0",
|
||||
"primer-truncate": "1.3.0",
|
||||
"primer-utilities": "4.7.0"
|
||||
"primer-forms": "1.4.1",
|
||||
"primer-labels": "1.5.1",
|
||||
"primer-layout": "1.4.1",
|
||||
"primer-markdown": "3.7.1",
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-marketing-type": "1.4.1",
|
||||
"primer-marketing-utilities": "1.4.1",
|
||||
"primer-marketing": "5.4.1",
|
||||
"primer-navigation": "1.4.1",
|
||||
"primer-page-headers": "1.4.1",
|
||||
"primer-page-sections": "1.4.1",
|
||||
"primer-product": "5.4.1",
|
||||
"primer-subhead": "0.0.1",
|
||||
"primer-support": "4.4.1",
|
||||
"primer-table-object": "1.4.1",
|
||||
"primer-tables": "1.4.1",
|
||||
"primer-tooltips": "1.4.1",
|
||||
"primer-truncate": "1.4.1",
|
||||
"primer-utilities": "4.8.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
*.yml
|
||||
.github
|
||||
@ -21,14 +21,14 @@
|
||||
"url": "https://github.com/primer/primer-css/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test-docs": "../../script/test-docs",
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"test-docs": "ava --verbose ../../tests/modules/test-*.js",
|
||||
"build": "primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
"lint": "stylelint **/*.scss -s scss",
|
||||
"test": "npm-run-all -s build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -3,3 +3,4 @@
|
||||
@import "./lib/form-select.scss";
|
||||
@import "./lib/form-group.scss";
|
||||
@import "./lib/form-validation.scss";
|
||||
@import "./lib/input-group.scss";
|
||||
|
||||
@ -47,65 +47,6 @@ dl.form-group > dd {
|
||||
}
|
||||
}
|
||||
|
||||
// Credit cards
|
||||
//
|
||||
// A selector for credit cards. Shows all credit cards we have available and
|
||||
// dims the non-selected ones.
|
||||
|
||||
@warn "primer-forms: The credit cards component is being deprecated in next major version.";
|
||||
|
||||
.form-cards {
|
||||
height: 31px;
|
||||
margin: 0 0 15px;
|
||||
|
||||
.card {
|
||||
float: left;
|
||||
width: 47px;
|
||||
height: 31px;
|
||||
text-indent: -9999px;
|
||||
background-image: url("/images/modules/pricing/credit-cards-@1x.png");
|
||||
background-position: 0 0;
|
||||
opacity: 0.6;
|
||||
|
||||
&.visa { background-position: 0 0; }
|
||||
|
||||
&.amex { background-position: -50px 0; }
|
||||
|
||||
&.mastercard { background-position: -100px 0; }
|
||||
|
||||
&.discover { background-position: -150px 0; }
|
||||
|
||||
&.jcb { background-position: -200px 0; }
|
||||
|
||||
&.dinersclub { background-position: -250px 0; }
|
||||
|
||||
&.enabled { opacity: 1; }
|
||||
|
||||
&.disabled { opacity: 0.2; }
|
||||
}
|
||||
|
||||
> .cards {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
margin: 0 $spacer-1 0 0;
|
||||
list-style-type: none;
|
||||
|
||||
&.text {
|
||||
line-height: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include retina-media-query {
|
||||
.form-cards > .cards .card {
|
||||
background-image: url("/images/modules/pricing/credit-cards-@2x.png");
|
||||
background-size: 300px 31px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline verification
|
||||
// This overrides primer's inline form stuff
|
||||
.status-indicator {
|
||||
|
||||
51
modules/primer-forms/lib/input-group.scss
Normal file
51
modules/primer-forms/lib/input-group.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.input-group {
|
||||
display: table;
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
+ .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// For when you want the input group to behave like inline-block.
|
||||
&.inline {
|
||||
display: inline-table;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control,
|
||||
.input-group-button {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.input-group-button {
|
||||
width: 1%;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-button:first-child .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-button:first-child .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-button:last-child .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-button:last-child .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.1",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-forms",
|
||||
"description": "Style individual form controls and utilize common layouts.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,134 +1,118 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
// sub-stories
|
||||
import inputGroup from './input-group'
|
||||
|
||||
storiesOf('Forms', module)
|
||||
.add('form-control', () => (
|
||||
<div>
|
||||
.addDecorator(story => (
|
||||
<form>
|
||||
{story()}
|
||||
</form>
|
||||
))
|
||||
.add('form-control', () => (
|
||||
<input className='form-control' type='text' placeholder='Standard input' aria-label='Standard input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-lg', () => (
|
||||
<div>
|
||||
<input className='form-control input-lg' type='text' placeholder='Large input' aria-label='Large input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-sm', () => (
|
||||
<div>
|
||||
<input className='form-control input-sm' type='text' placeholder='Small input' aria-label='Small input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-block', () => (
|
||||
<div>
|
||||
))
|
||||
.add('input-block', () => (
|
||||
<input className='form-control input-block' type='text' placeholder='Block input' aria-label='Block input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-monospace', () => (
|
||||
<div>
|
||||
))
|
||||
.add('input-group', inputGroup)
|
||||
.add('input-lg', () => (
|
||||
<input className='form-control input-lg' type='text' placeholder='Large input' aria-label='Large input'/>
|
||||
))
|
||||
.add('input-sm', () => (
|
||||
<input className='form-control input-sm' type='text' placeholder='Small input' aria-label='Small input'/>
|
||||
))
|
||||
.add('input-monospace', () => (
|
||||
<input className='form-control input-monospace' type='text' placeholder='Monospace input' aria-label='SHA'/>
|
||||
</div>
|
||||
))
|
||||
.add('form-select', () => (
|
||||
<div>
|
||||
))
|
||||
.add('form-select', () => (
|
||||
<select className='form-select' aria-label='Important decision'>
|
||||
<option>Select</option>
|
||||
<option value='option 2'>Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
))
|
||||
.add('select-sm', () => (
|
||||
<div>
|
||||
))
|
||||
.add('select-sm', () => (
|
||||
<select className='form-select select-sm' aria-label='Important decision'>
|
||||
<option>Select</option>
|
||||
<option value='option 2'>Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
))
|
||||
.add('radio', () => (
|
||||
<div>
|
||||
))
|
||||
.add('radio', () => (
|
||||
<label>
|
||||
<input type='radio' id='derp' name='radio'/>
|
||||
Radio
|
||||
Radio
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('checkbox', () => (
|
||||
<div>
|
||||
))
|
||||
.add('checkbox', () => (
|
||||
<label>
|
||||
<input type='checkbox'/>
|
||||
checkbox
|
||||
checkbox
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('textarea', () => (
|
||||
<div>
|
||||
))
|
||||
.add('textarea', () => (
|
||||
<textarea className='form-control'>
|
||||
</textarea>
|
||||
</div>
|
||||
))
|
||||
.add('form-actions', () => (
|
||||
<div className='form-actions'>
|
||||
<button type='submit' className='btn btn-primary'>Save changes</button>
|
||||
<button type='button' className='btn'>Cancel</button>
|
||||
</div>
|
||||
))
|
||||
.add('label highlight', () => (
|
||||
<div>
|
||||
<form>
|
||||
<div className='form-checkbox'>
|
||||
<label>
|
||||
<input type='checkbox' checked='checked'/>
|
||||
<em className='highlight'>Available for hire</em>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
))
|
||||
.add('form-checkbox-details', () => (
|
||||
<div className='form-checkbox'>
|
||||
<label aria-live='polite'>
|
||||
<input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
|
||||
Available for hire
|
||||
<span className='form-checkbox-details text-normal'>
|
||||
<span className='d-block mb-1'>Available hours per week</span>
|
||||
<input type='text' name='' className='form-control input-contrast' size='3'/>
|
||||
<span className='text-small text-gray pl-2'>hours per week</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('formgroup', () => (
|
||||
<form>
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-text'>Example Text</label></dt>
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
|
||||
</dl>
|
||||
))
|
||||
.add('form-actions', () => (
|
||||
<div className='form-actions'>
|
||||
<button type='submit' className='btn btn-primary'>Save changes</button>
|
||||
<button type='button' className='btn'>Cancel</button>
|
||||
</div>
|
||||
))
|
||||
.add('label highlight', () => (
|
||||
<div className='form-checkbox'>
|
||||
<label>
|
||||
<input type='checkbox' checked='checked'/>
|
||||
<em className='highlight'>Available for hire</em>
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('form-checkbox-details', () => (
|
||||
<div className='form-checkbox'>
|
||||
<label aria-live='polite'>
|
||||
<input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
|
||||
Available for hire
|
||||
<span className='form-checkbox-details text-normal'>
|
||||
<span className='d-block mb-1'>Available hours per week</span>
|
||||
<input type='text' name='' className='form-control input-contrast' size='3'/>
|
||||
<span className='text-small text-gray pl-2'>hours per week</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('form-group', () => (
|
||||
<div>
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-text'>Example Text</label></dt>
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
|
||||
</dl>
|
||||
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-select'>Example Select</label></dt>
|
||||
<dd>
|
||||
<select className='form-select' id='example-select'>
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-select'>Example Select</label></dt>
|
||||
<dd>
|
||||
<select className='form-select' id='example-select'>
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-textarea'>Example Textarea</label></dt>
|
||||
<dd>
|
||||
<textarea className='form-control' id='example-textarea'></textarea>
|
||||
</dd>
|
||||
</dl>
|
||||
</form>
|
||||
))
|
||||
.add('form validation', () => (
|
||||
<div>
|
||||
<form>
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-textarea'>Example Textarea</label></dt>
|
||||
<dd>
|
||||
<textarea className='form-control' id='example-textarea'></textarea>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
))
|
||||
.add('form validation', () => (
|
||||
<div>
|
||||
<dl className='form-group errored'>
|
||||
<dt><label for='example-text-errored'>Example Text</label></dt>
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text-errored' aria-describedby='form-error-text'/></dd>
|
||||
@ -140,6 +124,5 @@ storiesOf('Forms', module)
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text-warn' aria-describedby='form-warning-text'/></dd>
|
||||
<dd className='warning' id='form-warning-text'>This example input has a warning.</dd>
|
||||
</dl>
|
||||
</form>
|
||||
</div>
|
||||
))
|
||||
</div>
|
||||
))
|
||||
|
||||
18
modules/primer-forms/stories/input-group.js
Normal file
18
modules/primer-forms/stories/input-group.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import {Octicon} from '../../../.storybook/Octicon'
|
||||
|
||||
export default () => (
|
||||
<div className="input-group">
|
||||
<input
|
||||
className="form-control"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
/>
|
||||
<span className="input-group-button">
|
||||
<button className="btn" type="button" aria-label="Copy to clipboard">
|
||||
<Octicon name="clippy" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.4.0",
|
||||
"version": "1.5.1",
|
||||
"name": "primer-labels",
|
||||
"description": "Labels add metatdata or indicate status of items and navigational elements.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-layout",
|
||||
"description": "Containers, rows, and columns for creating page layout.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,7 +28,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "3.6.0",
|
||||
"version": "3.7.1",
|
||||
"name": "primer-markdown",
|
||||
"description": "GitHub stylesheets for rendering markdown.",
|
||||
"homepage": "https://github.com/primer/primer-markdown",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"name": "primer-marketing-support",
|
||||
"description": "Sass variables, mixins, and functions for use in our components.",
|
||||
"homepage": "http://primercss.io/",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-marketing-type",
|
||||
"description": "Typography for marketing websites at GitHub",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,8 +28,8 @@
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-marketing-utilities",
|
||||
"description": "Marketing specific immutable, atomic CSS classes",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,8 +28,8 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* Primer-marketing
|
||||
* http://primercss.io
|
||||
*
|
||||
* Released under MIT license. Copyright 2015 GitHub, Inc.
|
||||
* Released under MIT license. Copyright (c) 2017 GitHub Inc.
|
||||
*/
|
||||
|
||||
// Primer master file
|
||||
@ -16,7 +16,6 @@
|
||||
|
||||
// marketing specific css modules
|
||||
@import "primer-marketing-type/index.scss";
|
||||
@import "primer-cards/index.scss";
|
||||
@import "primer-page-headers/index.scss";
|
||||
@import "primer-page-sections/index.scss";
|
||||
@import "primer-tables/index.scss";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "5.3.1",
|
||||
"version": "5.4.1",
|
||||
"name": "primer-marketing",
|
||||
"description": "Primer CSS marketing packages",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -26,14 +26,12 @@
|
||||
"lint": "../../script/lint-scss"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-breadcrumb": "1.3.0",
|
||||
"primer-cards": "0.4.1",
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-marketing-type": "1.3.0",
|
||||
"primer-marketing-utilities": "1.3.0",
|
||||
"primer-page-headers": "1.3.0",
|
||||
"primer-page-sections": "1.3.0",
|
||||
"primer-support": "4.3.0",
|
||||
"primer-tables": "1.3.0"
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-marketing-type": "1.4.1",
|
||||
"primer-marketing-utilities": "1.4.1",
|
||||
"primer-page-headers": "1.4.1",
|
||||
"primer-page-sections": "1.4.1",
|
||||
"primer-support": "4.4.1",
|
||||
"primer-tables": "1.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ Primer comes with several navigation components. Some were designed with singula
|
||||
|
||||
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
|
||||
|
||||
```html
|
||||
```html title="Menu"
|
||||
<nav class="menu" aria-label="Person settings">
|
||||
<a class="menu-item selected" href="#url" aria-current="page">Account</a>
|
||||
<a class="menu-item" href="#url">Profile</a>
|
||||
@ -59,7 +59,7 @@ The menu is a vertical list of navigational links. **A menu's width and placemen
|
||||
|
||||
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
|
||||
|
||||
```html
|
||||
```html title="Menu with octicons, avatars and counters"
|
||||
<nav class="menu" aria-label="Person settings">
|
||||
<a class="menu-item selected" href="#url" aria-current="page">
|
||||
<%= octicon "tools" %>
|
||||
@ -83,7 +83,7 @@ There are a few subcomponents and add-ons that work well with the menu, includin
|
||||
|
||||
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
|
||||
|
||||
```html
|
||||
```html title="Menu with heading"
|
||||
<nav class="menu" aria-labelledby="menu-heading">
|
||||
<span class="menu-heading" id="menu-heading">Menu heading</span>
|
||||
<a class="menu-item selected" href="#url" aria-current="page">Account</a>
|
||||
@ -97,27 +97,26 @@ You can also add optional headings to a menu. Feel free to use nearly any semant
|
||||
|
||||
`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation.
|
||||
|
||||
```html
|
||||
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
```html title="UnderlineNav"
|
||||
<nav class="UnderlineNav">
|
||||
<div class="UnderlineNav-items">
|
||||
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 2</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
|
||||
<a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
|
||||
<a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
|
||||
<a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
You can right align the navigation.
|
||||
|
||||
```html
|
||||
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
|
||||
```html title="UnderlineNav--right"
|
||||
<nav class="UnderlineNav UnderlineNav--right">
|
||||
<div class="UnderlineNav-items">
|
||||
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 2</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
|
||||
<a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
|
||||
<a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
|
||||
<a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
@ -125,22 +124,33 @@ You can right align the navigation.
|
||||
|
||||
The navigation will work with added counters and/or octicons
|
||||
|
||||
```html
|
||||
```html title="UnderlineNav with Counter"
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-items">
|
||||
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 2
|
||||
<a href="#url" class="UnderlineNav-item selected">
|
||||
<%= octicon "tools" %>
|
||||
Item 1
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<%= octicon "tools" %>
|
||||
Item 2
|
||||
<span className="Counter">10</span>
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<%= octicon "tools" %>
|
||||
Item 3
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<%= octicon "tools" %>
|
||||
Item 4
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Use `.UnderlineNav--full` to use a container within the components
|
||||
|
||||
```html
|
||||
```html title="UnderlineNav--full"
|
||||
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
|
||||
<div class="container-lg">
|
||||
<div class="UnderlineNav-items">
|
||||
@ -157,7 +167,7 @@ Use `.UnderlineNav--full` to use a container within the components
|
||||
|
||||
Use `.UnderlineNav-actions` to use another element alongside the underline nav
|
||||
|
||||
```html
|
||||
```html title="UnderlineNav-actions"
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-items">
|
||||
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||
@ -178,7 +188,7 @@ Use `.UnderlineNav-actions` to use another element alongside the underline nav
|
||||
|
||||
When you need to toggle between different views, consider using a tabnav. It'll given you a left-aligned horizontal row of... tabs!
|
||||
|
||||
```html
|
||||
```html title="tabnav"
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab</a>
|
||||
@ -189,7 +199,7 @@ When you need to toggle between different views, consider using a tabnav. It'll
|
||||
|
||||
Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
```html
|
||||
```html title="tabnav with buttons"
|
||||
<div class="tabnav">
|
||||
<a class="btn btn-sm float-right" href="#url" role="button">Button</a>
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
@ -201,7 +211,7 @@ Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
|
||||
|
||||
```html
|
||||
```html title="tabnav-extra"
|
||||
<div class="tabnav">
|
||||
<div class="tabnav-extra float-right">
|
||||
Tabnav widget text here.
|
||||
@ -213,7 +223,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
```html title="tabnav with everything"
|
||||
<div class="tabnav">
|
||||
<div class="float-right">
|
||||
<a class="tabnav-extra" href="#url">
|
||||
@ -234,7 +244,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
|
||||
|
||||
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
|
||||
|
||||
```html
|
||||
```html title="filter-list"
|
||||
<ul class="filter-list">
|
||||
<li>
|
||||
<a href="#url" class="filter-item selected" aria-current="page">
|
||||
@ -260,7 +270,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
||||
|
||||
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
|
||||
|
||||
```html
|
||||
```html title="subnav"
|
||||
<nav class="subnav" aria-label="Respository">
|
||||
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
|
||||
<a href="#url" class="subnav-item">Item 2</a>
|
||||
@ -270,7 +280,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
||||
|
||||
You can have `subnav-search` in the subnav bar.
|
||||
|
||||
```html
|
||||
```html title="subnav-search"
|
||||
<div class="subnav">
|
||||
<nav class="subnav-links" aria-label="Repository">
|
||||
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
|
||||
@ -287,7 +297,7 @@ You can have `subnav-search` in the subnav bar.
|
||||
|
||||
You can also use a `subnav-search-context` to display search help in a select menu.
|
||||
|
||||
```html
|
||||
```html title="subnav-search-context"
|
||||
<div class="subnav">
|
||||
<nav class="subnav-links">
|
||||
<a href="#url" class="subnav-item selected">Item 1</a>
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
padding: $spacer-3 $spacer-2;
|
||||
margin-right: $spacer-3;
|
||||
font-size: $body-font-size;
|
||||
text-align: center;
|
||||
line-height: $lh-default;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
.Counter {
|
||||
@ -40,9 +40,9 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-dark;
|
||||
border-bottom-color: $orange-600;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
.octicon {
|
||||
color: $gray-500;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-navigation",
|
||||
"description": "Singular purpose and flexible navigation elements.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,7 +27,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,291 +1,10 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
|
||||
|
||||
storiesOf('Navigation', module)
|
||||
.add('UnderlineNav', () => (
|
||||
<nav className="UnderlineNav">
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
))
|
||||
.add('UnderlineNav--right', () => (
|
||||
<nav className="UnderlineNav UnderlineNav--right">
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
))
|
||||
.add('UnderlineNav with Counter', () => (
|
||||
<nav className="UnderlineNav" data-pjax role="navigation">
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
<span className="Counter">
|
||||
10
|
||||
</span>
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
))
|
||||
.add('UnderlineNav with octicon', () => (
|
||||
<nav className="UnderlineNav" data-pjax role="navigation">
|
||||
<div className="UnderlineNav-items">
|
||||
const stories = storiesOf('Navigation', module)
|
||||
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
))
|
||||
.add('UnderlineNav with container', () => (
|
||||
<nav className="UnderlineNav UnderlineNav--full" data-pjax role="navigation">
|
||||
<div className="container-lg">
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
<a className="UnderlineNav-actions">Link</a>
|
||||
</div>
|
||||
</nav>
|
||||
))
|
||||
.add('UnderlineNav with action', () => (
|
||||
<div className="container-lg">
|
||||
<nav className="UnderlineNav" data-pjax role="navigation">
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
<div className="UnderlineNav-actions">
|
||||
<a className="btn">Link</a>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
))
|
||||
.add('UnderlineNav--right with action', () => (
|
||||
|
||||
<nav className="UnderlineNav UnderlineNav--right" data-pjax role="navigation">
|
||||
<div className="UnderlineNav-actions">
|
||||
<a className="btn">Link</a>
|
||||
</div>
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
))
|
||||
.add('UnderlineNav--right with action and container', () => (
|
||||
|
||||
<nav className="UnderlineNav UnderlineNav--right UnderlineNav--full" data-pjax role="navigation">
|
||||
<div className="container-lg">
|
||||
<div className="UnderlineNav-actions">
|
||||
<a className="btn">Link</a>
|
||||
</div>
|
||||
<div className="UnderlineNav-items">
|
||||
<a href="#"
|
||||
className="UnderlineNav-item selected"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
<a href="#"
|
||||
className="UnderlineNav-item"
|
||||
role="tab"
|
||||
title="Overview">
|
||||
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
))
|
||||
storiesFromMarkdown(require.context('.', true, /\.md$/))
|
||||
.forEach(({title, story}) => {
|
||||
stories.add(title, story)
|
||||
})
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-page-headers",
|
||||
"description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,8 +27,8 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-page-sections",
|
||||
"description": "Styles to create distinct sections of marketing pages at GitHub.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,8 +27,8 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* Primer-product
|
||||
* http://primercss.io
|
||||
*
|
||||
* Released under MIT license. Copyright 2015 GitHub, Inc.
|
||||
* Released under MIT license. Copyright (c) 2017 GitHub Inc.
|
||||
*/
|
||||
|
||||
// Primer master file
|
||||
@ -17,6 +17,8 @@
|
||||
@import "primer-alerts/index.scss";
|
||||
@import "primer-avatars/index.scss";
|
||||
@import "primer-blankslate/index.scss";
|
||||
@import "primer-branch-name/index.scss";
|
||||
@import "primer-dropdown/index.scss";
|
||||
@import "primer-labels/index.scss";
|
||||
@import "primer-markdown/index.scss";
|
||||
@import "primer-subhead/index.scss";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "5.3.1",
|
||||
"version": "5.4.1",
|
||||
"name": "primer-product",
|
||||
"description": "Primer CSS's product modules",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -26,12 +26,14 @@
|
||||
"lint": "../../script/lint-scss"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-alerts": "1.4.0",
|
||||
"primer-avatars": "1.3.0",
|
||||
"primer-blankslate": "1.3.0",
|
||||
"primer-alerts": "1.5.1",
|
||||
"primer-avatars": "1.4.1",
|
||||
"primer-blankslate": "1.4.1",
|
||||
"primer-branch-name": "0.0.1",
|
||||
"primer-dropdown": "0.1.0",
|
||||
"primer-labels": "1.4.0",
|
||||
"primer-markdown": "3.6.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-labels": "1.5.1",
|
||||
"primer-markdown": "3.7.1",
|
||||
"primer-subhead": "0.0.1",
|
||||
"primer-support": "4.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
124
modules/primer-subhead/README.md
Normal file
124
modules/primer-subhead/README.md
Normal file
@ -0,0 +1,124 @@
|
||||
# Primer CSS / Subhead
|
||||
|
||||
[](https://www.npmjs.org/package/primer-subhead)
|
||||
[](https://travis-ci.org/primer/primer-css)
|
||||
|
||||
> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
|
||||
|
||||
This repository is a module of the full [primer-css][primer-css] repository.
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-subhead` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-subhead
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-subhead/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Subhead
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/101
|
||||
-->
|
||||
|
||||
The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It's an `<h2>` sized heading with normal font-weight.
|
||||
|
||||
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Plain subhead</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.
|
||||
|
||||
```html
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<div class="Subhead-heading">Spacious subhead</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can add a one line description to the subhead with `.Subhead-description`.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with description</div>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Plain subhead</div>
|
||||
</div>
|
||||
<p>
|
||||
This is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have <strong>bold</strong> text. <a href="#">Click to learn more.</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with button</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
</div>
|
||||
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<div class="Subhead-heading">Subhead with link</div>
|
||||
<div class="Subhead-actions"><a href="#url">Learn more</a></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use all the elements together to create a Subhead with actions and a description.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with actions and description</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer-css]: https://github.com/primer/primer
|
||||
[docs]: http://primercss.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
3
modules/primer-subhead/index.scss
Normal file
3
modules/primer-subhead/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/subhead.scss";
|
||||
39
modules/primer-subhead/lib/subhead.scss
Normal file
39
modules/primer-subhead/lib/subhead.scss
Normal file
@ -0,0 +1,39 @@
|
||||
// Subhead styles
|
||||
.Subhead {
|
||||
display: flex;
|
||||
padding-bottom: $spacer-2;
|
||||
margin-bottom: $spacer-3;
|
||||
border-bottom: $border;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
// Modifier class to give a lot of breathing room between sections of content.
|
||||
.Subhead--spacious {
|
||||
margin-top: $spacer-6;
|
||||
}
|
||||
|
||||
// <h2> sized heading with normal font weight
|
||||
.Subhead-heading {
|
||||
font-size: $h2-size;
|
||||
font-weight: normal;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
// Make the text bold and red for dangerous content
|
||||
.Subhead-heading--danger {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
// One-liner of supporting text
|
||||
.Subhead-description {
|
||||
font-size: $body-font-size;
|
||||
color: $text-gray;
|
||||
flex: 1 100%;
|
||||
}
|
||||
|
||||
// Add 1 or 2 buttons to the right of the heading
|
||||
.Subhead-actions {
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
32
modules/primer-subhead/package.json
Normal file
32
modules/primer-subhead/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "primer-subhead",
|
||||
"description": "The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.",
|
||||
"homepage": "http://primercss.io/",
|
||||
"primer": {
|
||||
"category": "product",
|
||||
"module_type": "components"
|
||||
},
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-subhead",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer-css/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test-docs": "../../script/test-docs",
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
"primer"
|
||||
]
|
||||
}
|
||||
@ -23,7 +23,8 @@
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected {
|
||||
&.selected,
|
||||
[open] > & {
|
||||
background-color: darken(desaturate($bg, 10%), 6%);
|
||||
background-image: none;
|
||||
border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
|
||||
@ -54,7 +55,8 @@
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected {
|
||||
&.selected,
|
||||
[open] > & {
|
||||
background-color: darken(mix($bg, $bg2, 50%), 7%);
|
||||
background-image: none;
|
||||
border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
|
||||
@ -99,7 +101,8 @@
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected {
|
||||
&.selected,
|
||||
[open] > & {
|
||||
color: $text-white;
|
||||
background-color: darken($color, 5%);
|
||||
background-image: none;
|
||||
@ -129,7 +132,8 @@
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected {
|
||||
&.selected,
|
||||
[open] > & {
|
||||
color: $bg-color;
|
||||
background-color: $text-color;
|
||||
background-image: none;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "4.3.0",
|
||||
"version": "4.4.1",
|
||||
"name": "primer-support",
|
||||
"description": "Sass variables, mixins, and functions for use in our components.",
|
||||
"homepage": "http://primercss.io/",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-table-object",
|
||||
"description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,7 +28,7 @@
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-tables",
|
||||
"description": "Styles to display tabular data for marketing websites at GitHub.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -27,8 +27,8 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-marketing-support": "1.3.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-marketing-support": "1.3.1",
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -71,8 +71,7 @@
|
||||
.tooltipped-no-delay:focus {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-tooltips",
|
||||
"description": "Add tooltips built entirely in CSS to nearly any element.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,7 +28,7 @@
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.1",
|
||||
"name": "primer-truncate",
|
||||
"description": "Shorten text with an ellipsis.",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,7 +28,7 @@
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "4.7.0",
|
||||
"version": "4.8.1",
|
||||
"name": "primer-utilities",
|
||||
"description": "Immutable, atomic CSS classes to rapidly build product",
|
||||
"homepage": "http://primercss.io/",
|
||||
@ -28,7 +28,7 @@
|
||||
"test": "../../script/npm-run-all build lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.4.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -33,14 +33,14 @@ storiesOf('Typography', module)
|
||||
))
|
||||
.add('line-height', () =>(
|
||||
<div>
|
||||
<p className="lh-default">
|
||||
<p className='lh-default'>
|
||||
lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default
|
||||
|
||||
</p>
|
||||
<p className="lh-condensed">
|
||||
<p className='lh-condensed'>
|
||||
lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed
|
||||
</p>
|
||||
<p className="lh-condensed-ultra">
|
||||
<p className='lh-condensed-ultra'>
|
||||
lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra
|
||||
</p>
|
||||
</div>
|
||||
@ -49,31 +49,31 @@ storiesOf('Typography', module)
|
||||
<div>
|
||||
<h3 className='text-normal'>text-normal</h3>
|
||||
<p className='text-bold'>text-bold</p>
|
||||
<p className="text-uppercase">text-uppercase</p>
|
||||
<p className="no-wrap">no-wrap</p>
|
||||
<p className="ws-normal">ws-normal</p>
|
||||
<p className="wb-break-all">wb-break-all</p>
|
||||
<p className="no-underline">no-underline</p>
|
||||
<p className="text-emphasized">text-emphasized</p>
|
||||
<p className="text-small">text-small</p>
|
||||
<p className="lead">lead</p>
|
||||
<p className='text-uppercase'>text-uppercase</p>
|
||||
<p className='no-wrap'>no-wrap</p>
|
||||
<p className='ws-normal'>ws-normal</p>
|
||||
<p className='wb-break-all'>wb-break-all</p>
|
||||
<p className='no-underline'>no-underline</p>
|
||||
<p className='text-emphasized'>text-emphasized</p>
|
||||
<p className='text-small'>text-small</p>
|
||||
<p className='lead'>lead</p>
|
||||
</div>
|
||||
))
|
||||
.add('text alignment', () => (
|
||||
<div>
|
||||
<p className="text-left">text-left</p>
|
||||
<p className="text-center">text-center</p>
|
||||
<p className="text-right">text-right</p>
|
||||
<p className='text-left'>text-left</p>
|
||||
<p className='text-center'>text-center</p>
|
||||
<p className='text-right'>text-right</p>
|
||||
</div>
|
||||
))
|
||||
.add('responsive text alignment', () => (
|
||||
<div>
|
||||
<p className="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
||||
<p className='text-left text-sm-center text-lg-right'>Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
||||
</div>
|
||||
))
|
||||
.add('list-style-none', () => (
|
||||
<div>
|
||||
<ul className="list-style-none">
|
||||
<ul className='list-style-none'>
|
||||
<li>list-style-none</li>
|
||||
<li>list-style-none</li>
|
||||
<li>list-style-none</li>
|
||||
@ -82,11 +82,11 @@ storiesOf('Typography', module)
|
||||
))
|
||||
.add('text shadows', () => (
|
||||
<div>
|
||||
<div className="bg-purple p-5">
|
||||
<h3 className="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
|
||||
<div className='bg-purple p-5'>
|
||||
<h3 className='text-white text-shadow-dark'>.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
|
||||
</div>
|
||||
<div className="bg-yellow p-5">
|
||||
<h3 className="text-shadow-light">.text-shadow-light creates an embossed effect for dark text</h3>
|
||||
<div className='bg-yellow p-5'>
|
||||
<h3 className='text-shadow-light'>.text-shadow-light creates an embossed effect for dark text</h3>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
18
package.json
18
package.json
@ -3,8 +3,11 @@
|
||||
"scripts": {
|
||||
"postinstall": "npm run bootstrap",
|
||||
"start": "start-storybook -p 8000 -c .storybook",
|
||||
"storybook": "build-storybook -o build",
|
||||
"publish-storybook": "npm run storybook && gh-pages -d build -b gh-pages -r https://github.com/primer/storybook",
|
||||
"bootstrap": "lerna bootstrap --hoist",
|
||||
"clean": "lerna clean",
|
||||
"distclean": "lerna clean --yes && rm -rf node_modules",
|
||||
"diff": "lerna diff",
|
||||
"updated": "lerna updated || exit 0",
|
||||
"lint": "lerna run lint",
|
||||
@ -13,19 +16,26 @@
|
||||
"release": "script/release",
|
||||
"bump": "lerna publish --exact --skip-npm --since \"v$(npm info primer-css version)\"",
|
||||
"new-module": "script/new-module",
|
||||
"test": "lerna run test"
|
||||
"test": "npm run test-all-modules && lerna run test",
|
||||
"test-all-modules": "ava --verbose tests/test-*.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-options": "^3.2.6",
|
||||
"@storybook/react": "^3.2.4",
|
||||
"@storybook/react": "^3.2.12",
|
||||
"ava": "^0.21.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-minify": "^0.2.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"commit-status": "^4.1.0",
|
||||
"css-loader": "^0.28.4",
|
||||
"execa": "^0.8.0",
|
||||
"fs-extra": "^4.0.2",
|
||||
"gh-pages": "^1.0.0",
|
||||
"glob": "^7.1.2",
|
||||
"globby": "^6.1.0",
|
||||
"html-to-react": "^1.2.11",
|
||||
"lerna": "^2.0.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"lerna": "^2.4.0",
|
||||
"node-sass": "^4.5.3",
|
||||
"npm-run-all": "^4.0.2",
|
||||
"octicons": "^6.0.1",
|
||||
@ -35,7 +45,7 @@
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-svg-inline": "^2.0.0",
|
||||
"registry-url": "^3.1.0",
|
||||
"remark": "^8.0.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
"semver": "^5.3.0",
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
branch=$TRAVIS_BRANCH
|
||||
branch=$TRAVIS_PULL_REQUEST_BRANCH
|
||||
event=$TRAVIS_EVENT_TYPE
|
||||
|
||||
# only publish canary releases on PRs against dev
|
||||
if [[ "$event" = "pull_request" && "$branch" = "dev" ]]; then
|
||||
if [[ "$event" = "pull_request" ]] && [[ !("$branch" =~ ^release-.*) ]] && [[ !("$branch" = "master") ]];
|
||||
then
|
||||
script/release-pr --yes
|
||||
fi
|
||||
|
||||
44
script/bump-rc
Executable file
44
script/bump-rc
Executable file
@ -0,0 +1,44 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
package="$1"
|
||||
npm_tag=rc
|
||||
semver=$(npm bin)/semver
|
||||
|
||||
bold=$(tput bold)
|
||||
normal=$(tput sgr0)
|
||||
|
||||
pushd modules/$package > /dev/null
|
||||
|
||||
# get the version we're publishing as a release candidate
|
||||
local_version=$(jq -r .version package.json)
|
||||
echo "Bumping $package@${local_version}"
|
||||
if [[ $local_version =~ "-" ]]; then
|
||||
echo "❌ Found pre-release version: $package@$local_version; bailing!"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# find the *greatest* published prerelease
|
||||
rc_prefix="$local_version-rc"
|
||||
rc_version=$(
|
||||
npm info "$package@$npm_tag" --json \
|
||||
| jq -r '.versions[]' \
|
||||
| grep "^${rc_prefix/./\.}" \
|
||||
| tail -1
|
||||
)
|
||||
# if there isn't one, use the current local version
|
||||
if [[ "$rc_version" == "" ]]; then
|
||||
echo " 🤷♀️ no published RC; using ${bold}${local_version}${normal}"
|
||||
rc_version="$local_version-rc.0"
|
||||
else
|
||||
echo " 📰 published RC: ${bold}${rc_version}${normal}"
|
||||
fi
|
||||
|
||||
# increment by the tagged prerelease id
|
||||
next_version=$(
|
||||
$semver -i prerelease --preid $npm_tag "$rc_version"
|
||||
)
|
||||
|
||||
bumped=$(npm version --no-git "$next_version")
|
||||
echo " ➡️ ${bold}${bumped}${normal}"
|
||||
popd > /dev/null
|
||||
101
script/check-imports
Executable file
101
script/check-imports
Executable file
@ -0,0 +1,101 @@
|
||||
#!/usr/bin/env node
|
||||
const fse = require('fs-extra')
|
||||
const globby = require('globby')
|
||||
|
||||
const DEP_FIELDS = [
|
||||
'dependencies',
|
||||
]
|
||||
|
||||
const parseImports = filename => {
|
||||
return fse.readFile(filename, 'utf8')
|
||||
.then(scss => {
|
||||
const matches = scss.match(/\@import\s+"[-a-z]+\/index\.scss"/g)
|
||||
return matches
|
||||
? Array.from(matches).map(stmt => stmt.match(/"([-a-z]+)\//)[1])
|
||||
: []
|
||||
})
|
||||
}
|
||||
|
||||
const isPrimerModule = name => name.indexOf('primer-') === 0
|
||||
|
||||
globby('modules/primer-*')
|
||||
.then(paths => {
|
||||
return paths.reduce((modules, path) => {
|
||||
const pkg = require(`../${path}/package.json`)
|
||||
if (pkg.dependencies) {
|
||||
pkg.path = path
|
||||
modules.push(pkg)
|
||||
} else {
|
||||
console.warn('%s: no dependencies', pkg.name)
|
||||
}
|
||||
return modules
|
||||
}, [])
|
||||
})
|
||||
.then(modules => {
|
||||
console.log('⏱ checking %d modules...', modules.length)
|
||||
|
||||
const maxNameLength = modules.reduce((len, {name}) => {
|
||||
return Math.max(len, name.length)
|
||||
}, 0)
|
||||
|
||||
const map = new Map()
|
||||
modules.forEach(mod => map.set(mod.name, mod))
|
||||
|
||||
const tasks = []
|
||||
const matches = []
|
||||
|
||||
modules.forEach(mod => {
|
||||
const deps = Object.keys(mod.dependencies)
|
||||
.filter(isPrimerModule)
|
||||
|
||||
tasks.push(
|
||||
parseImports(`${mod.path}/index.scss`)
|
||||
.then(imports => {
|
||||
console.warn('📦 %s: %s%d dependencies, %d import(s)',
|
||||
mod.name, ' '.repeat(maxNameLength - mod.name.length),
|
||||
deps.length, imports.length)
|
||||
imports.forEach(imported => {
|
||||
if (!deps.includes(imported)) {
|
||||
throw new Error(
|
||||
`❌ ${mod.name} imports ${imported}, but is missing a dependency`
|
||||
)
|
||||
}
|
||||
matches.push({
|
||||
module: mod.name,
|
||||
imports: imported
|
||||
})
|
||||
})
|
||||
})
|
||||
)
|
||||
})
|
||||
return Promise.all(tasks)
|
||||
.then(() => {
|
||||
const primer = map.get('primer-css')
|
||||
|
||||
const deps = new Set(
|
||||
Object.keys(primer.dependencies)
|
||||
.filter(isPrimerModule)
|
||||
.sort()
|
||||
)
|
||||
|
||||
modules
|
||||
.map(mod => mod.name)
|
||||
.filter(mod => mod !== primer.name)
|
||||
.sort()
|
||||
.forEach(mod => {
|
||||
if (!deps.has(mod)) {
|
||||
throw new Error(
|
||||
`primer-css is missing dependency for ${mod}@${map.get(mod).version}`
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
.then(() => matches)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
process.exit(1)
|
||||
})
|
||||
.then(matches => {
|
||||
console.warn('✅ checked %d dependency/import pairs', matches.length)
|
||||
})
|
||||
62
script/check-versions
Executable file
62
script/check-versions
Executable file
@ -0,0 +1,62 @@
|
||||
#!/usr/bin/env node
|
||||
const globby = require('globby')
|
||||
const lernaConfig = require('../lerna.json')
|
||||
|
||||
const DEP_FIELDS = [
|
||||
'dependencies',
|
||||
'devDependencies',
|
||||
'peerDependencies',
|
||||
'optionalDependencies',
|
||||
]
|
||||
|
||||
globby(lernaConfig.packages)
|
||||
.then(paths => {
|
||||
return paths.reduce((packages, path) => {
|
||||
try {
|
||||
const pkg = require(`../${path}/package.json`)
|
||||
pkg.path = path
|
||||
packages.push(pkg)
|
||||
} catch (error) {
|
||||
}
|
||||
return packages
|
||||
}, [])
|
||||
})
|
||||
.then(packages => {
|
||||
console.log('⏱ checking %d packages...', packages.length)
|
||||
const map = new Map()
|
||||
const matches = []
|
||||
packages.forEach(pkg => map.set(pkg.name, pkg))
|
||||
packages.forEach(pkg => {
|
||||
DEP_FIELDS
|
||||
.filter(field => field in pkg)
|
||||
.forEach(field => {
|
||||
const deps = pkg[field]
|
||||
Object.keys(deps)
|
||||
.filter(dep => map.has(dep))
|
||||
.forEach(dep => {
|
||||
const expected = map.get(dep).version
|
||||
const actual = deps[dep]
|
||||
if (expected !== actual) {
|
||||
throw new Error(
|
||||
`${pkg.name}.${field} has bad version for ${dep}: ${expected} != ${actual}`
|
||||
)
|
||||
} else {
|
||||
matches.push({
|
||||
from: pkg.name,
|
||||
to: dep,
|
||||
field,
|
||||
version: expected
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
return matches
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message)
|
||||
process.exit(1)
|
||||
})
|
||||
.then(matches => {
|
||||
console.warn('✅ checked %d matching version dependencies', matches.length)
|
||||
})
|
||||
@ -5,9 +5,7 @@ set -e
|
||||
# script/compare-published [tag]
|
||||
tag=${1:-${NPM_TAG:-latest}}
|
||||
|
||||
# this is way faster than `lerna exec npm info . .name`
|
||||
# (but will skip modules that don't have "primer-" in them)
|
||||
modules=`ls -1 modules | egrep primer-`
|
||||
packages=$($(dirname $0)/get-packages)
|
||||
|
||||
# tabular output separator for column(1)
|
||||
s=,
|
||||
@ -15,9 +13,10 @@ s=,
|
||||
echo "📦 Comparing Primer modules published @${tag}..."
|
||||
(
|
||||
echo "module${s}tag${s}published${s}local"
|
||||
for module in $modules; do
|
||||
v_published=`npm info ${module}@${tag} .version`
|
||||
v_local=`jq -Mr .version modules/${module}/package.json`
|
||||
for package in $packages; do
|
||||
module=$(jq -r .name "$package/package.json")
|
||||
v_published=$(npm info "$module@$tag" .version)
|
||||
v_local=$(jq -Mr .version "$package/package.json")
|
||||
echo "${module}${s}${tag}${s}${v_published:-x}${s}${v_local}"
|
||||
done
|
||||
) | column -t -s=${s}
|
||||
|
||||
31
script/get-packages
Executable file
31
script/get-packages
Executable file
@ -0,0 +1,31 @@
|
||||
#!/usr/bin/env node
|
||||
const fs = require('fs')
|
||||
const globby = require('globby')
|
||||
const path = require('path')
|
||||
|
||||
const getPackages = (debug) => {
|
||||
const lernaConfig = require('../lerna.json')
|
||||
const packageGlobs = lernaConfig.packages
|
||||
return globby(packageGlobs)
|
||||
.then(packagePaths => {
|
||||
return packagePaths.filter(pkg => {
|
||||
try {
|
||||
require.resolve(`../${pkg}/package.json`)
|
||||
return true
|
||||
} catch (error) {
|
||||
if (debug) {
|
||||
console.warn('No package.json in %s', pkg)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (module.parent) {
|
||||
module.exports = getPackages
|
||||
} else {
|
||||
getPackages(true).then(packages => {
|
||||
console.warn('%d packages:', packages.length)
|
||||
packages.forEach(pkg => console.log(pkg))
|
||||
})
|
||||
}
|
||||
28
script/get-release-version
Executable file
28
script/get-release-version
Executable file
@ -0,0 +1,28 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const RELEASE_PREFIX = 'release-'
|
||||
|
||||
const getReleaseVersion = (pkg, branch) => {
|
||||
const version = require(`../modules/${pkg}/package.json`).version
|
||||
|
||||
if (branch && branch.indexOf(RELEASE_PREFIX) === 0) {
|
||||
const release = branch.replace(RELEASE_PREFIX, '')
|
||||
if (release !== version) {
|
||||
console.warn('⚠️ Release branch version mismatch:')
|
||||
console.warn(' "%s" should be "%s" in %s/package.json', version, release, pkg)
|
||||
}
|
||||
return release
|
||||
} else {
|
||||
return version
|
||||
}
|
||||
}
|
||||
|
||||
if (module.parent) {
|
||||
module.exports = getReleaseVersion
|
||||
} else {
|
||||
const args = process.argv.slice(2)
|
||||
const pkg = args.shift() || 'primer-css'
|
||||
const branch = args.shift() || process.env.TRAVIS_BRANCH
|
||||
const version = getReleaseVersion(pkg, branch)
|
||||
console.log(version)
|
||||
}
|
||||
@ -3,7 +3,7 @@ set -e
|
||||
|
||||
function generate() {
|
||||
pushd modules > /dev/null
|
||||
../node_modules/.bin/yo ./generator-primer-module/app "$@"
|
||||
../node_modules/.bin/yo ../tools/generator-primer-module/app "$@"
|
||||
popd > /dev/null
|
||||
}
|
||||
|
||||
|
||||
@ -1,64 +1,151 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
echo "👌 Publishing release candidate..."
|
||||
#!/usr/bin/env node
|
||||
const execa = require('execa')
|
||||
const fetch = require('isomorphic-fetch')
|
||||
const fse = require('fs-extra')
|
||||
const registryUrl = require('registry-url')
|
||||
const semver = require('semver')
|
||||
|
||||
package=primer-css
|
||||
npm_tag=rc
|
||||
const bin = 'node_modules/.bin/'
|
||||
const lernaBin = `${bin}lerna`
|
||||
const getPackages = require('./get-packages')
|
||||
const getReleaseVersion = require('./get-release-version')
|
||||
const revertPackages = require('./revert-packages')
|
||||
|
||||
# get the version we're publishing as a release candidate
|
||||
local_version=$(jq -r .version modules/$package/package.json)
|
||||
if [[ $local_version =~ "-" ]]; then
|
||||
echo "❌ Found pre-release version: $package@$local_version; bailing!"
|
||||
exit 1
|
||||
else
|
||||
echo "🏔 Local version: $package@$local_version"
|
||||
fi
|
||||
|
||||
# get the version most recently published to the rc dist-tag
|
||||
rc_version=$(npm info $package@$npm_tag version)
|
||||
echo "📦 Published version for $package@$npm_tag: $rc_version"
|
||||
rc_release=${rc_version%-*}
|
||||
if [[ $local_version != $rc_release ]]; then
|
||||
rc_version=$local_version
|
||||
fi
|
||||
|
||||
# determine the
|
||||
next_version=$(
|
||||
$(npm bin)/semver --increment prerelease --preid $npm_tag $rc_version
|
||||
const PRERELEASE = 'prerelease'
|
||||
const DIST_TAG = 'rc'
|
||||
const PRIMER_CSS = 'primer-css'
|
||||
const RELEASE_VERSION = getReleaseVersion(
|
||||
PRIMER_CSS,
|
||||
process.env.TRAVIS_BRANCH
|
||||
)
|
||||
echo "🤜 Next version: $package@$next_version"
|
||||
|
||||
# strip the pre-release version, yielding just major.minor.patch
|
||||
pre_version=${next_version:${#local_version}}
|
||||
echo " Prerelease suffix: '$pre_version'"
|
||||
const depFields = [
|
||||
'dependencies',
|
||||
'devDependencies',
|
||||
'optionalDependencies',
|
||||
'peerDependencies',
|
||||
]
|
||||
|
||||
# if this is the same version, we need to bump the prerelease
|
||||
# for all of the modules using the same prerelease identifier
|
||||
echo "Updating all module versions in place..."
|
||||
echo
|
||||
module_dirs=modules/primer-*
|
||||
for module_dir in $module_dirs; do
|
||||
pushd $module_dir > /dev/null
|
||||
module=$(basename $module_dir)
|
||||
const getUpdated = (args) => {
|
||||
return execa(lernaBin, ['updated', '--json'], { reject: false })
|
||||
.then(res => {
|
||||
if (res.stdout == "") {
|
||||
console.warn("No packages need updating")
|
||||
return []
|
||||
} else {
|
||||
return JSON.parse(res.stdout)
|
||||
}
|
||||
})
|
||||
.then(updated => updated.map(pkg => pkg.name))
|
||||
}
|
||||
|
||||
# determine the local version (in git)
|
||||
module_version=$(jq -r .version package.json)
|
||||
# strip the rc version, just in case
|
||||
module_version=${module_version%-*}
|
||||
module_next_version="$module_version$pre_version"
|
||||
const notify = status => {
|
||||
return execa('script/notify', [status], {env: process.env})
|
||||
.catch(error => {
|
||||
console.error('notify error:', error)
|
||||
})
|
||||
}
|
||||
|
||||
echo "$module@$module_version => $module_next_version"
|
||||
# "upgrade" to the most recent RC version so that
|
||||
# `npm version prerelease` can increment automatically
|
||||
npm version --no-git --quiet "$module_next_version"
|
||||
const writePackage = (pkg) => {
|
||||
const {dir} = pkg
|
||||
delete pkg.dir
|
||||
const json = JSON.stringify(pkg, null, ' ') + '\n'
|
||||
pkg.dir = dir
|
||||
return fse.writeFile(`${pkg.dir}/package.json`, json, 'utf8')
|
||||
.then(() => pkg)
|
||||
}
|
||||
|
||||
popd > /dev/null
|
||||
done
|
||||
const bump = (pkg, by, preid) => {
|
||||
if (pkg.name === PRIMER_CSS) {
|
||||
pkg.version = RELEASE_VERSION
|
||||
}
|
||||
|
||||
# publish all the things!
|
||||
$(dirname $0)/notify pending
|
||||
const original = pkg.version
|
||||
let version = increment(pkg.version, by, preid)
|
||||
return getPackageInfo(pkg.name)
|
||||
.then(info => {
|
||||
while (version in info.versions) {
|
||||
version = increment(version, by, preid)
|
||||
}
|
||||
console.warn('%s %s -> %s', pkg.name, original, version)
|
||||
pkg.version = version
|
||||
return writePackage(pkg)
|
||||
})
|
||||
}
|
||||
|
||||
# note: this should NOT fail, so --bail=true applies
|
||||
$(npm bin)/lerna exec -- npm publish --tag=$npm_tag
|
||||
const getPackageInfo = (name) => {
|
||||
const url = registryUrl() + name
|
||||
return fetch(url).then(res => res.json())
|
||||
}
|
||||
|
||||
$(dirname $0)/notify success
|
||||
const increment = (version, by, preid) => {
|
||||
const {major, minor, patch} = semver(version)
|
||||
const prev = [major, minor, patch].join('.')
|
||||
const next = semver.inc(version, by, preid)
|
||||
// if this is a prerelease, "revert" major.minor.patch
|
||||
// so that only the prerelease id is incremented
|
||||
return by === PRERELEASE
|
||||
? next.replace(/^\d+\.\d+\.\d+/, prev)
|
||||
: next
|
||||
}
|
||||
|
||||
const updateDependants = (pkg, pkgs) => {
|
||||
return pkgs.filter(other => {
|
||||
return depFields.some(field => {
|
||||
if (other[field] && (pkg.name in other[field])) {
|
||||
other[field][pkg.name] = pkg.version
|
||||
return true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
revertPackages()
|
||||
.then(() => getPackages())
|
||||
.then(dirs => {
|
||||
return dirs.map(dir => {
|
||||
const pkg = require(`../${dir}/package.json`)
|
||||
pkg.dir = dir
|
||||
return pkg
|
||||
})
|
||||
})
|
||||
.then(pkgs => {
|
||||
const by = PRERELEASE
|
||||
const preid = DIST_TAG
|
||||
return getUpdated()
|
||||
.then(updated => {
|
||||
console.warn('%d packages updated...', updated.length)
|
||||
return pkgs.filter(pkg => updated.includes(pkg.name))
|
||||
})
|
||||
.then(updated => {
|
||||
const changed = new Set(updated)
|
||||
return Promise.all(updated.map(pkg => {
|
||||
return bump(pkg, by, preid)
|
||||
.then(pkg => updateDependants(pkg, pkgs))
|
||||
.then(dependants => {
|
||||
dependants.forEach(dep => changed.add(dep))
|
||||
})
|
||||
}))
|
||||
.then(() => {
|
||||
const tasks = Array.from(changed)
|
||||
.map(writePackage)
|
||||
return Promise.all(tasks)
|
||||
})
|
||||
.then(updated => {
|
||||
const tasks = updated.map(pkg => {
|
||||
return execa('npm', ['publish', '--tag', DIST_TAG], {
|
||||
cwd: pkg.dir,
|
||||
stdio: 'inherit',
|
||||
})
|
||||
})
|
||||
return Promise.all(tasks)
|
||||
})
|
||||
.then(() => notify('success'))
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error)
|
||||
process.exitCode = 1
|
||||
return notify('error')
|
||||
})
|
||||
.then(() => process.exit())
|
||||
|
||||
30
script/revert-packages
Executable file
30
script/revert-packages
Executable file
@ -0,0 +1,30 @@
|
||||
#!/usr/bin/env node
|
||||
const execa = require('execa')
|
||||
const fse = require('fs-extra')
|
||||
const globby = require('globby')
|
||||
|
||||
const revertPackages = () => {
|
||||
const lernaConfig = require('../lerna.json')
|
||||
const globs = lernaConfig.packages
|
||||
const jsons = globs.map(glob => glob + '/package.json')
|
||||
const tarballs = globs.map(glob => glob + '/*.tgz')
|
||||
const opts = {stdio: 'inherit'}
|
||||
return Promise.all([
|
||||
execa('git', ['checkout', '--'].concat(globs), opts),
|
||||
globby(tarballs)
|
||||
.then(paths => {
|
||||
if (paths.length) {
|
||||
console.warn('deleting %d tarball(s)', paths.length)
|
||||
return Promise.all(
|
||||
paths.map(tgz => fse.remove(tgz))
|
||||
)
|
||||
}
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
if (module.parent) {
|
||||
module.exports = revertPackages
|
||||
} else {
|
||||
revertPackages().then(() => process.exit(0))
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
$(dirname $0)/npm-run ava --verbose $(dirname $0)/../tests/modules/test-*.js
|
||||
$(dirname $0)/npm-run ava --verbose $(dirname $0)/../tests/modules/test-document-styles.js
|
||||
|
||||
@ -1,17 +1,25 @@
|
||||
const test = require("ava")
|
||||
const css = require(process.env.PWD)
|
||||
const css = require(process.cwd())
|
||||
const fs = require("fs")
|
||||
const glob = require("glob")
|
||||
|
||||
var selectors, classnames = null
|
||||
const classRegex = /class="([^"]+)"/ig
|
||||
let selectors
|
||||
let classnames
|
||||
|
||||
const classPatterns = [
|
||||
// HTML class attributes
|
||||
/class="([^"]+)"/ig,
|
||||
// assume that ERB helpers generate an element with the same class
|
||||
/<%= (\w+)\b/g,
|
||||
]
|
||||
|
||||
// Find unique selectors from the cssstats selector list
|
||||
function uniqueSelectors(s) {
|
||||
s = s.map(s => {
|
||||
// split multi-selectors into last class used .foo .bar .baz
|
||||
return s.split(" ").pop()
|
||||
}).filter(s => {
|
||||
})
|
||||
.filter(s => {
|
||||
// remove any selector that aren't just regular classnames eg. ::hover [type]
|
||||
return s.match(/^\.[a-z\-_]+$/ig)
|
||||
})
|
||||
@ -22,37 +30,42 @@ function uniqueSelectors(s) {
|
||||
|
||||
// From the given glob sources array, read the files and return found classnames
|
||||
function documentedClassnames(sources) {
|
||||
var cn = []
|
||||
sources.forEach( f => {
|
||||
glob.sync(f).forEach( g => {
|
||||
var match = null
|
||||
const classes = []
|
||||
const files = sources.reduce((acc, pattern) => {
|
||||
return acc.concat(glob.sync(pattern))
|
||||
}, [])
|
||||
|
||||
// While we match a classRegex in the source
|
||||
while ((match = classRegex.exec(fs.readFileSync(g, "utf8"))) != null) {
|
||||
files.forEach(file => {
|
||||
let match = null
|
||||
const content = fs.readFileSync(file, "utf8")
|
||||
|
||||
// Get the matched classnames "..." and split by space into classes
|
||||
cn = cn.concat(match[1].split(" "))
|
||||
classPatterns.forEach(pattern => {
|
||||
// match each pattern against the source
|
||||
while (match = pattern.exec(content)) {
|
||||
// get the matched classnames and split by whitespace into classes
|
||||
const klasses = match[1].trim().split(/\s+/)
|
||||
classes.push(...klasses)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// return only the unique classnames
|
||||
return [...new Set(cn)]
|
||||
return Array.from(new Set(classes))
|
||||
}
|
||||
|
||||
// Before all the tests get the selectors and classnames
|
||||
test.before(t => {
|
||||
selectors = uniqueSelectors(css.cssstats.selectors.values)
|
||||
classnames = documentedClassnames([
|
||||
'docs/*.md',
|
||||
'README.md'
|
||||
"docs/*.md",
|
||||
"README.md"
|
||||
])
|
||||
})
|
||||
|
||||
test("Every selector class is documented", t => {
|
||||
var undocumented = []
|
||||
selectors.forEach( selector => {
|
||||
if (!classnames.includes(selector.replace(".", ""))) {
|
||||
const undocumented = []
|
||||
selectors.forEach(selector => {
|
||||
if (!classnames.includes(selector.replace(/^\./, ""))) {
|
||||
undocumented.push(selector)
|
||||
}
|
||||
})
|
||||
|
||||
32
tests/test-for-current-year.js
Normal file
32
tests/test-for-current-year.js
Normal file
@ -0,0 +1,32 @@
|
||||
const test = require("ava")
|
||||
const fs = require("fs-extra")
|
||||
const globby = require("globby")
|
||||
|
||||
const year = (new Date()).getFullYear()
|
||||
const yearRegex = new RegExp(`Copyright \\(c\\) ${year} GitHub Inc\\.`)
|
||||
|
||||
test(`LICENSE files have the current year ${year}`, t => {
|
||||
return globby(["**/LICENSE", "!**/node_modules/**/LICENSE"])
|
||||
.then(paths => {
|
||||
t.plan(paths.length)
|
||||
return paths.map(path => {
|
||||
const license = fs.readFileSync(path, "utf8")
|
||||
return t.regex(license, yearRegex, `The license "${path}" does not include the current year ${year}`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
test(`Source header copyrights have the current year ${year}`, t => {
|
||||
return globby(["**/*.css", "**/*.scss", "!**/node_modules/**", "!**/build/**"])
|
||||
.then(paths => {
|
||||
t.plan(paths.length)
|
||||
return paths.map(path => {
|
||||
const source = fs.readFileSync(path, "utf8")
|
||||
if (source.match(/Copyright \(c\)/)) {
|
||||
return t.regex(source, yearRegex, `The source's header "${path}" does not include the current year ${year}`)
|
||||
} else {
|
||||
return t.true(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -163,7 +163,7 @@ module.exports = class PrimerModule extends Generator {
|
||||
)
|
||||
|
||||
const destPath = require.resolve(
|
||||
path.join("../../", dest, "package.json")
|
||||
path.join("../../../modules/", dest, "package.json")
|
||||
)
|
||||
|
||||
this.fs.extendJSON(destPath, {
|
||||
@ -1,6 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 GitHub Inc.
|
||||
Copyright (c) 2017 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.1.0",
|
||||
"version": "1.0.0",
|
||||
"name": "generator-primer-module",
|
||||
"description": "Use this to create a new Primer CSS modules!",
|
||||
"author": "GitHub, Inc.",
|
||||
13
tools/stylelint-config-primer/.eslintrc.json
Normal file
13
tools/stylelint-config-primer/.eslintrc.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"plugins": [
|
||||
"eslint-plugin-github"
|
||||
],
|
||||
"env": {
|
||||
"es6": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:github/recommended",
|
||||
"plugin:github/es6"
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user