Skip to content

Commit ac032e1

Browse files
jonrohanjonrohan
authored
Merge pull request #342 from primer/import-subhead
Import Subhead component
2 parents 0771124 + bc0bea4 commit ac032e1

File tree

9 files changed

+229
-2
lines changed

9 files changed

+229
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
# 10.0.0
2+
3+
### Added
4+
- 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.
5+
16
# 9.6.0
27

38
### Added

‎modules/primer-css/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,15 @@
4242
"primer-labels": "1.5.1",
4343
"primer-layout": "1.4.1",
4444
"primer-markdown": "3.7.1",
45-
"primer-marketing": "5.4.1",
4645
"primer-marketing-support": "1.3.1",
4746
"primer-marketing-type": "1.4.1",
4847
"primer-marketing-utilities": "1.4.1",
48+
"primer-marketing": "5.4.1",
4949
"primer-navigation": "1.4.1",
5050
"primer-page-headers": "1.4.1",
5151
"primer-page-sections": "1.4.1",
5252
"primer-product": "5.4.1",
53+
"primer-subhead": "0.0.1",
5354
"primer-support": "4.4.1",
5455
"primer-table-object": "1.4.1",
5556
"primer-tables": "1.4.1",

‎modules/primer-product/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@
2121
@import "primer-dropdown/index.scss";
2222
@import "primer-labels/index.scss";
2323
@import "primer-markdown/index.scss";
24+
@import "primer-subhead/index.scss";

‎modules/primer-product/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,13 @@
2727
},
2828
"dependencies": {
2929
"primer-alerts": "1.5.1",
30-
"primer-dropdown": "0.1.0",
3130
"primer-avatars": "1.4.1",
3231
"primer-blankslate": "1.4.1",
3332
"primer-branch-name": "0.0.1",
33+
"primer-dropdown": "0.1.0",
3434
"primer-labels": "1.5.1",
3535
"primer-markdown": "3.7.1",
36+
"primer-subhead": "0.0.1",
3637
"primer-support": "4.4.1"
3738
}
3839
}

‎modules/primer-subhead/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 GitHub Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎modules/primer-subhead/README.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Primer CSS / Subhead
2+
3+
[![npm version](http://img.shields.io/npm/v/primer-subhead.svg)](https://www.npmjs.org/package/primer-subhead)
4+
[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
5+
6+
> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
7+
8+
This repository is a module of the full [primer-css][primer-css] repository.
9+
10+
## Install
11+
12+
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-subhead` with this command.
13+
14+
```
15+
$ npm install --save primer-subhead
16+
```
17+
18+
## Usage
19+
20+
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.
21+
22+
```scss
23+
@import "primer-subhead/index.scss";
24+
```
25+
26+
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._
27+
28+
## Build
29+
30+
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:
31+
32+
```
33+
$ npm run build
34+
```
35+
36+
## Documentation
37+
38+
<!-- %docs
39+
title: Subhead
40+
status: New release
41+
status_issue: https://github.com/github/design-systems/issues/101
42+
-->
43+
44+
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.
45+
46+
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
47+
48+
```html
49+
<div class="Subhead">
50+
<div class="Subhead-heading">Plain subhead</div>
51+
</div>
52+
```
53+
54+
To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.
55+
56+
```html
57+
<div class="Subhead Subhead--spacious">
58+
<div class="Subhead-heading">Spacious subhead</div>
59+
</div>
60+
```
61+
62+
You can add a one line description to the subhead with `.Subhead-description`.
63+
64+
```html
65+
<div class="Subhead">
66+
<div class="Subhead-heading">Subhead with description</div>
67+
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
68+
</div>
69+
```
70+
71+
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
72+
73+
```html
74+
<div class="Subhead">
75+
<div class="Subhead-heading">Plain subhead</div>
76+
</div>
77+
<p>
78+
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>
79+
</p>
80+
```
81+
82+
You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element.
83+
84+
```html
85+
<div class="Subhead">
86+
<div class="Subhead-heading">Subhead with button</div>
87+
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
88+
</div>
89+
90+
<div class="Subhead Subhead--spacious">
91+
<div class="Subhead-heading">Subhead with link</div>
92+
<div class="Subhead-actions"><a href="#url">Learn more</a></div>
93+
</div>
94+
```
95+
96+
Use all the elements together to create a Subhead with actions and a description.
97+
98+
```html
99+
<div class="Subhead">
100+
<div class="Subhead-heading">Subhead with actions and description</div>
101+
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
102+
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
103+
</div>
104+
```
105+
106+
Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users.
107+
108+
```html
109+
<div class="Subhead">
110+
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
111+
</div>
112+
```
113+
114+
<!-- %enddocs -->
115+
116+
## License
117+
118+
[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
119+
120+
[primer-css]: https://github.com/primer/primer
121+
[docs]: http://primercss.io/
122+
[npm]: https://www.npmjs.com/
123+
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
124+
[sass]: http://sass-lang.com/

‎modules/primer-subhead/index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// support files
2+
@import "primer-support/index.scss";
3+
@import "./lib/subhead.scss";

‎modules/primer-subhead/lib/subhead.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Subhead styles
2+
.Subhead {
3+
display: flex;
4+
padding-bottom: $spacer-2;
5+
margin-bottom: $spacer-3;
6+
border-bottom: $border;
7+
flex-flow: row wrap;
8+
}
9+
10+
// Modifier class to give a lot of breathing room between sections of content.
11+
.Subhead--spacious {
12+
margin-top: $spacer-6;
13+
}
14+
15+
// <h2> sized heading with normal font weight
16+
.Subhead-heading {
17+
font-size: $h2-size;
18+
font-weight: normal;
19+
flex: 1 1 auto;
20+
}
21+
22+
// Make the text bold and red for dangerous content
23+
.Subhead-heading--danger {
24+
font-weight: $font-weight-bold;
25+
color: $text-red;
26+
}
27+
28+
// One-liner of supporting text
29+
.Subhead-description {
30+
font-size: $body-font-size;
31+
color: $text-gray;
32+
flex: 1 100%;
33+
}
34+
35+
// Add 1 or 2 buttons to the right of the heading
36+
.Subhead-actions {
37+
align-self: center;
38+
justify-content: flex-end;
39+
}

‎modules/primer-subhead/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"version": "0.0.1",
3+
"name": "primer-subhead",
4+
"description": "The Subhead is a simple header with a bottom border. It&#39;s designed to be used on settings and configuration pages.",
5+
"homepage": "http://primercss.io/",
6+
"primer": {
7+
"category": "product",
8+
"module_type": "components"
9+
},
10+
"author": "GitHub, Inc.",
11+
"license": "MIT",
12+
"style": "index.scss",
13+
"main": "build/index.js",
14+
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-subhead",
15+
"bugs": {
16+
"url": "https://github.com/primer/primer-css/issues"
17+
},
18+
"scripts": {
19+
"test-docs": "../../script/test-docs",
20+
"build": "../../script/npm-run primer-module-build index.scss",
21+
"prepare": "npm run build",
22+
"lint": "../../script/lint-scss",
23+
"test": "../../script/npm-run-all build lint test-docs"
24+
},
25+
"dependencies": {
26+
"primer-support": "4.4.1"
27+
},
28+
"keywords": [
29+
"github",
30+
"primer"
31+
]
32+
}

0 commit comments

Comments
 (0)