@@ -590,8 +590,8 @@ Box patterns can also be made with, and modified with [border utilities](../util [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer-css]: https://github.com/primer/primer -[docs]: http://primercss.io/ +[primer]: https://github.com/primer/primer +[docs]: http://primer.github.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-box/package.json b/modules/primer-box/package.json index d62ca6a5db..196e13fd16 100644 --- a/modules/primer-box/package.json +++ b/modules/primer-box/package.json @@ -1,8 +1,8 @@ { - "version": "2.4.0", + "version": "2.5.3", "name": "primer-box", "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", - "homepage": "http://primercss.io/", + "homepage": "http://primer.github.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,23 +16,23 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-box", + "repository": "https://github.com/primer/primer/tree/master/modules/primer-box", "bugs": { - "url": "https://github.com/primer/primer-css/issues" + "url": "https://github.com/primer/primer/issues" }, "scripts": { - "build": "primer-module-build index.scss", + "build": "../../script/npm-run primer-module-build index.scss", "prepare": "npm run build", - "lint": "stylelint **/*.scss -s scss", - "test": "npm-run-all -s build lint" + "lint": "../../script/lint-scss", + "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.3.0" + "primer-support": "4.5.0" }, "keywords": [ "primer", "css", "github", - "primercss" + "design-system" ] } diff --git a/modules/primer-box/stories.js b/modules/primer-box/stories.js new file mode 100644 index 0000000000..2aeada432d --- /dev/null +++ b/modules/primer-box/stories.js @@ -0,0 +1,213 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Box', module) + .add('Box', () => ( + + )) + .add('Box elements', () => ( + + )) + .add('Box-row', () => ( + + )) + .add('Box--condensed', () => ( + + )) + .add('Box--spacious', () => ( + + )) + .add('Box--blue', () => ( + + )) + .add('Box-header--blue', () => ( + + )) + .add('Box--danger', () => ( + + )) + .add('Box-row themes', () => ( + + )) + .add('Box-row--unread', () => ( + + )) + .add('Box-row-link', () => ( + + )) + .add('Box border-dashed', () => ( + + )) + .add('Box with flash-full', () => ( + + )) diff --git a/modules/primer-cards/LICENSE b/modules/primer-branch-name/LICENSE similarity index 97% rename from modules/primer-cards/LICENSE rename to modules/primer-branch-name/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/modules/primer-cards/LICENSE +++ b/modules/primer-branch-name/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 diff --git a/modules/primer-branch-name/README.md b/modules/primer-branch-name/README.md new file mode 100644 index 0000000000..49b26d442c --- /dev/null +++ b/modules/primer-branch-name/README.md @@ -0,0 +1,69 @@ +# Primer / Branch Name + +[](https://www.npmjs.org/package/primer-branch-name) +[](https://travis-ci.org/primer/primer) + +> A nice, consistent way to display branch names. + +This repository is a module of the full [primer][primer] 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 + + + +Branch names can be a link name or not: + +```html +a_new_feature_branch +a_new_feature_branch +``` + +You may also include an octicon before the branch name text: + +```html + + <%= octicon("git-branch") width:16 height:16 %> + a_new_feature_branch + +``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer]: https://github.com/primer/primer +[docs]: http://primer.github.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/modules/primer-branch-name/index.scss b/modules/primer-branch-name/index.scss new file mode 100644 index 0000000000..d893139c4e --- /dev/null +++ b/modules/primer-branch-name/index.scss @@ -0,0 +1,3 @@ +// support files +@import "primer-support/index.scss"; +@import "./lib/branch-name.scss"; diff --git a/modules/primer-branch-name/lib/branch-name.scss b/modules/primer-branch-name/lib/branch-name.scss new file mode 100644 index 0000000000..f86ff604bf --- /dev/null +++ b/modules/primer-branch-name/lib/branch-name.scss @@ -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 diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json new file mode 100644 index 0000000000..0d769d1f20 --- /dev/null +++ b/modules/primer-branch-name/package.json @@ -0,0 +1,32 @@ +{ + "version": "1.0.1", + "name": "primer-branch-name", + "description": "A nice, consistent way to display branch names.", + "homepage": "http://primer.github.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/tree/master/modules/primer-branch-name", + "bugs": { + "url": "https://github.com/primer/primer/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.5.0" + }, + "keywords": [ + "github", + "primer" + ] +} diff --git a/modules/primer-breadcrumb/LICENSE b/modules/primer-breadcrumb/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/modules/primer-breadcrumb/LICENSE +++ b/modules/primer-breadcrumb/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 diff --git a/modules/primer-breadcrumb/README.md b/modules/primer-breadcrumb/README.md index 0563466146..718b0d0469 100644 --- a/modules/primer-breadcrumb/README.md +++ b/modules/primer-breadcrumb/README.md @@ -1,11 +1,11 @@ -# Primer Marketing CSS Breadcrumb Navigation +# Primer Breadcrumb Navigation -[](https://www.npmjs.org/package/primer-breadcrumb) -[](https://travis-ci.org/primer/primer-css) +[](https://www.npmjs.org/package/primer-breadcrumb) +[](https://travis-ci.org/primer/primer) -> Breadcrumb navigation for GitHub's marketing pages with parents / grandparents. +> Breadcrumb navigation for GitHub's pages with parents / grandparents. -This repository is a module of the full [primer-css][primer] repository. +This repository is a module of the full [primer][primer] repository. ## Documentation @@ -22,7 +22,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d #### Usage -```html +```html title="Breadcrumb"

+        Really long pre blocks should scroll horizontally when the words are longer than the parent container
+