Merge pull request #342 from primer/import-subhead

Import Subhead component

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

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",

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";

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"
   }
 }

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.

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
+
+<!-- %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) &copy; [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/

modules/primer-subhead/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import "primer-support/index.scss";
+@import "./lib/subhead.scss";

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;
+}
+
+// <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;
+}

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"
+  ]
+}