From 6498a0f1b2cf603a82979538b015274d92228eab Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 16:50:31 -0700 Subject: [PATCH 1/3] import subhead component (product) --- modules/primer-css/package.json | 3 +- modules/primer-product/package.json | 3 +- modules/primer-subhead/LICENSE | 21 ++++ modules/primer-subhead/README.md | 124 ++++++++++++++++++++++++ modules/primer-subhead/index.scss | 3 + modules/primer-subhead/lib/subhead.scss | 39 ++++++++ modules/primer-subhead/package.json | 32 ++++++ 7 files changed, 223 insertions(+), 2 deletions(-) create mode 100644 modules/primer-subhead/LICENSE create mode 100644 modules/primer-subhead/README.md create mode 100644 modules/primer-subhead/index.scss create mode 100644 modules/primer-subhead/lib/subhead.scss create mode 100644 modules/primer-subhead/package.json diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json index 8a9fa3c401..28752cbc72 100644 --- a/modules/primer-css/package.json +++ b/modules/primer-css/package.json @@ -54,7 +54,8 @@ "primer-tables": "1.3.0", "primer-tooltips": "1.3.0", "primer-truncate": "1.3.0", - "primer-utilities": "4.6.0" + "primer-utilities": "4.6.0", + "primer-subhead": "0.0.1" }, "keywords": [ "primer", diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 827e79a08d..301e17156e 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -32,6 +32,7 @@ "primer-dropdown": "0.1.0", "primer-labels": "1.4.0", "primer-markdown": "3.6.0", - "primer-support": "4.3.0" + "primer-support": "4.3.0", + "primer-subhead": "0.0.1" } } diff --git a/modules/primer-subhead/LICENSE b/modules/primer-subhead/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/modules/primer-subhead/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 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..129728df1f --- /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.3.0" + }, + "keywords": [ + "github", + "primer" + ] +} From a6a10fb50253894cafd52ae17e7818d0099f275c Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 08:56:40 -0700 Subject: [PATCH 2/3] Updating year and changelog --- CHANGELOG.md | 5 +++++ modules/primer-subhead/LICENSE | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) 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-subhead/LICENSE b/modules/primer-subhead/LICENSE index 5715c13693..61c8a4cffb 100644 --- a/modules/primer-subhead/LICENSE +++ b/modules/primer-subhead/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 From bc0bea4e3e9d9b4ad472331358cbd8bad181c8c2 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 08:58:33 -0700 Subject: [PATCH 3/3] Importing subhead in product --- modules/primer-product/index.scss | 1 + modules/primer-subhead/package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) 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-subhead/package.json b/modules/primer-subhead/package.json index 129728df1f..f33aa5ac8e 100644 --- a/modules/primer-subhead/package.json +++ b/modules/primer-subhead/package.json @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.3.0" + "primer-support": "4.4.1" }, "keywords": [ "github",