diff --git a/CHANGELOG.md b/CHANGELOG.md index 47319c6bb5..58edc77647 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# 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. + # 9.6.0 ### Added diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json index 379c4f8bfd..821324c2c2 100644 --- a/modules/primer-css/package.json +++ b/modules/primer-css/package.json @@ -42,14 +42,15 @@ "primer-labels": "1.5.1", "primer-layout": "1.4.1", "primer-markdown": "3.7.1", - "primer-marketing": "5.4.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", diff --git a/modules/primer-product/index.scss b/modules/primer-product/index.scss index 621ef5f825..acddbdb0f1 100644 --- a/modules/primer-product/index.scss +++ b/modules/primer-product/index.scss @@ -21,3 +21,4 @@ @import "primer-dropdown/index.scss"; @import "primer-labels/index.scss"; @import "primer-markdown/index.scss"; +@import "primer-subhead/index.scss"; diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 8e4cdfdaa5..50d150e61a 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -27,12 +27,13 @@ }, "dependencies": { "primer-alerts": "1.5.1", - "primer-dropdown": "0.1.0", "primer-avatars": "1.4.1", "primer-blankslate": "1.4.1", "primer-branch-name": "0.0.1", + "primer-dropdown": "0.1.0", "primer-labels": "1.5.1", "primer-markdown": "3.7.1", + "primer-subhead": "0.0.1", "primer-support": "4.4.1" } } diff --git a/modules/primer-subhead/LICENSE b/modules/primer-subhead/LICENSE new file mode 100644 index 0000000000..61c8a4cffb --- /dev/null +++ b/modules/primer-subhead/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +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 +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/modules/primer-subhead/README.md b/modules/primer-subhead/README.md new file mode 100644 index 0000000000..b4d7b31a4c --- /dev/null +++ b/modules/primer-subhead/README.md @@ -0,0 +1,124 @@ +# Primer CSS / Subhead + +[![npm version](http://img.shields.io/npm/v/primer-subhead.svg)](https://www.npmjs.org/package/primer-subhead) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](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 + + + +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 `

` 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 +
+
Plain subhead
+
+``` + +To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page. + +```html +
+
Spacious subhead
+
+``` + +You can add a one line description to the subhead with `.Subhead-description`. + +```html +
+
Subhead with description
+
The subhead is a subdued header style with a light bottom border.
+
+``` + +For longer descriptions, it is recommended that you use a paragraph below the Subhead. + +```html +
+
Plain subhead
+
+

+ 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 bold text. Click to learn more. +

+``` + +You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element. + +```html +
+
Subhead with button
+
Action
+
+ +
+
Subhead with link
+
Learn more
+
+``` + +Use all the elements together to create a Subhead with actions and a description. + +```html +
+
Subhead with actions and description
+
Action
+
The subhead is a subdued header style with a light bottom border.
+
+``` + +Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users. + +```html +
+
Danger zone
+
+``` + + + +## 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/ diff --git a/modules/primer-subhead/index.scss b/modules/primer-subhead/index.scss new file mode 100644 index 0000000000..233be9b432 --- /dev/null +++ b/modules/primer-subhead/index.scss @@ -0,0 +1,3 @@ +// support files +@import "primer-support/index.scss"; +@import "./lib/subhead.scss"; diff --git a/modules/primer-subhead/lib/subhead.scss b/modules/primer-subhead/lib/subhead.scss new file mode 100644 index 0000000000..11b37ea216 --- /dev/null +++ b/modules/primer-subhead/lib/subhead.scss @@ -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; +} + +//

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; +} diff --git a/modules/primer-subhead/package.json b/modules/primer-subhead/package.json new file mode 100644 index 0000000000..f33aa5ac8e --- /dev/null +++ b/modules/primer-subhead/package.json @@ -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" + ] +}