Skip to content

Commit ea3ed60

Browse files
brandonrosagebrandonrosage
committed
Init .Popover
1 parent 23e4fbc commit ea3ed60

File tree

7 files changed

+171
-0
lines changed

7 files changed

+171
-0
lines changed

‎modules/primer-popover/.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.yml
2+
.github

‎modules/primer-popover/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-popover/README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Primer CSS Breadcrumb Navigation
2+
3+
[![npm version](http://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)
4+
[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
5+
6+
> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.
7+
8+
This repository is a module of the full [primer-css][primer] repository.
9+
10+
## Documentation
11+
12+
<!-- %docs
13+
title: Popover
14+
status: Unstable
15+
-->
16+
17+
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
18+
19+
- Are many levels deep on a site
20+
- Do not have a section-level navigation
21+
- May need the ability to quickly go back to the previous (parent) page
22+
23+
#### Usage
24+
25+
```html title="Popover"
26+
<div class="Popover top-right position-absolute right-0 js-notice p-4 Box">
27+
<h4 class="mb-2">Popover heading</h4>
28+
<p>Message about this particular piece of UI.</p>
29+
<button type="submit" class="js-notice-dismiss btn btn-outline mt-2 text-bold">Got it!</button>
30+
</div>
31+
```
32+
33+
<!-- %enddocs -->
34+
35+
## License
36+
37+
MIT &copy; [GitHub](https://github.com/)
38+
39+
[primer]: https://github.com/primer/primer
40+
[primer-support]: https://github.com/primer/primer-support
41+
[support]: https://github.com/primer/primer-support
42+
[docs]: http://primercss.io/
43+
[npm]: https://www.npmjs.com/
44+
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
45+
[sass]: http://sass-lang.com/

‎modules/primer-popover/index.scss‎

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

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.Popover {
2+
left: 50%;
3+
z-index: 20;
4+
width: 235px;
5+
margin-top: 30px;
6+
margin-left: -118px;
7+
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
8+
9+
// Carets
10+
&::before,
11+
&::after {
12+
position: absolute;
13+
display: inline-block;
14+
content: "";
15+
}
16+
17+
&::before {
18+
top: -16px;
19+
right: 109px;
20+
left: auto;
21+
border: 8px solid transparent;
22+
border-bottom-color: rgba(0, 0, 0, 0.15);
23+
}
24+
25+
&::after {
26+
top: -14px;
27+
right: 110px;
28+
left: auto;
29+
border: 7px solid transparent;
30+
border-bottom-color: $bg-white;
31+
}
32+
33+
&.top-right {
34+
left: auto;
35+
width: 330px;
36+
margin-top: 45px;
37+
38+
&::before {
39+
right: 20px;
40+
}
41+
42+
&::after {
43+
right: 21px;
44+
}
45+
}
46+
}

‎modules/primer-popover/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"version": "1.4.1",
3+
"name": "primer-popver",
4+
"description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.",
5+
"homepage": "http://primercss.io/",
6+
"author": "GitHub, Inc.",
7+
"license": "MIT",
8+
"style": "build/build.css",
9+
"main": "build/index.js",
10+
"primer": {
11+
"category": "marketing",
12+
"module_type": "components"
13+
},
14+
"files": [
15+
"index.scss",
16+
"lib",
17+
"build"
18+
],
19+
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-popover",
20+
"bugs": {
21+
"url": "https://github.com/primer/primer-css/issues"
22+
},
23+
"scripts": {
24+
"test-docs": "../../script/test-docs",
25+
"build": "../../script/npm-run primer-module-build index.scss",
26+
"prepare": "npm run build",
27+
"lint": "../../script/lint-scss",
28+
"test": "../../script/npm-run-all build lint test-docs"
29+
},
30+
"dependencies": {
31+
"primer-marketing-support": "1.3.1",
32+
"primer-support": "4.4.1"
33+
},
34+
"keywords": [
35+
"popover",
36+
"css",
37+
"github",
38+
"navigation",
39+
"primer",
40+
"primercss",
41+
"style"
42+
]
43+
}

‎modules/primer-popover/stories.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import { storiesOf } from '@storybook/react'
3+
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
4+
5+
const stories = storiesOf('Popover', module)
6+
7+
storiesFromMarkdown(require.context('.', true, /\.md$/))
8+
.forEach(({title, story}) => {
9+
stories.add(title, story)
10+
})

0 commit comments

Comments
 (0)