Skip to content

Commit 84dbf03

Browse files
markcaronkylebuch8
markcaron
authored and
kylebuch8
committed
Pfe docs status (#408)
* Adding PFE-Docs-Status element for previewing Docs in FCC * Fixing README of pfe-docs-status * Removing unnecessary CSS href links * Renaming PFE Docs Status to PFE Page Status * Updating README file for Page Status * Updating PFE Page Status options on README * Fixing README options as table * Updating package.json * Updating CSS vars so they more BEMy and utilize the broadcasted text color * Add schema; storybook; a few tests; style on host for better IE11 experience * Update complement color in tests to match what is being used in the component * cleaning up package.json and the README
1 parent 827aa51 commit 84dbf03

20 files changed

+517
-0
lines changed

‎elements/pfe-page-status/.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": [["env", { "modules": false }]],
3+
"plugins": ["external-helpers"]
4+
}

‎elements/pfe-page-status/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# EditorConfig: http://EditorConfig.org
2+
3+
# Top-most EditorConfig file
4+
root = true
5+
6+
# Rules for JavaScript files:
7+
8+
[*.{js,py,json,sh,html}]
9+
# 4 space indentation
10+
indent_style = space
11+
indent_size = 2
12+
# No trailing spaces
13+
trim_trailing_whitespace = true
14+
# Unix-style newlines
15+
end_of_line = lf
16+
# Newline ending every file
17+
insert_final_newline = true

‎elements/pfe-page-status/.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎elements/pfe-page-status/.travis.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
language: node_js
2+
dist: trusty
3+
sudo: required
4+
addons:
5+
firefox: "latest"
6+
apt:
7+
sources:
8+
- google-chrome
9+
packages:
10+
- google-chrome-stable
11+
node_js: stable
12+
before_install:
13+
- npm install -g web-component-tester
14+
install:
15+
- npm install
16+
before_script:
17+
script:
18+
- xvfb-run npm run test

‎elements/pfe-page-status/LICENSE.txt‎

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

‎elements/pfe-page-status/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# PatternFly Element | Page Status Element
2+
3+
The Page Status element creates a flag/banner on the right side of the page denoting the status of the page or Doc the author is viewing.
4+
5+
## Usage
6+
7+
```html
8+
<pfe-page-status pfe-status="critical">
9+
Previewing
10+
</pfe-page-status>
11+
```
12+
13+
```html
14+
<pfe-page-status pfe-status="moderate">
15+
Unpublished
16+
</pfe-page-status>
17+
```
18+
19+
## Options & Styling
20+
21+
### Statuses
22+
23+
Use the attribute `pfe-status="{option}"`
24+
25+
| Option | Theme Color Variable |
26+
| ------ | -------------------- |
27+
| default | `--pfe-theme--color--feedback--default` |
28+
| `moderate` | `--pfe-theme--color--feedback--moderate` |
29+
| `warning` | *Same as `moderate`* |
30+
| `important` | `--pfe-theme--color--feedback--important` |
31+
| `critical` | `--pfe-theme--color--feedback--critical` |
32+
| `success` | `--pfe-theme--color--feedback--success` |
33+
| `info` | `--pfe-theme--color--feedback--info` |
34+
| `normal` | `--pfe-theme--color--ui-base` |
35+
| `accent` | `--pfe-theme--color--ui-accent` |
36+
| `complement` | `--pfe-theme--color--ui-complement` |
37+
38+
## Test
39+
40+
npm run test
41+
42+
## Build
43+
44+
npm run build
45+
46+
## Demo
47+
48+
From the PFElements root directory, run:
49+
50+
npm start
51+
52+
## Code style
53+
54+
Page Status (and all PatternFly Elements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
55+
56+
[prettier]: https://github.com/prettier/prettier/
57+
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
58+
[polyserve]: https://github.com/Polymer/polyserve
59+
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/pfe-page-status/demo/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>PatternFly Element | pfe-page-status Demo</title>
6+
7+
<noscript>
8+
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
9+
</noscript>
10+
11+
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
12+
13+
<!-- uncomment the es5-adapter if you're using the umd version -->
14+
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
15+
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
17+
<script>require(['../pfe-page-status.umd.js'])</script>
18+
</head>
19+
<body unresolved>
20+
<h1>&lt;pfe-page-status&gt;</h1>
21+
<pfe-page-status pfe-status="critical">
22+
Previewing
23+
</pfe-page-status>
24+
</body>
25+
</html>

‎elements/pfe-page-status/demo/pfe-page-status.story.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { storiesOf } from "@storybook/polymer";
2+
import * as storybookBridge from "@storybook/addon-knobs/polymer";
3+
import * as tools from "../../../.storybook/utils.js";
4+
5+
import PfePageStatus from "../pfe-page-status.js";
6+
7+
const stories = storiesOf("Page status", module);
8+
9+
stories.addDecorator(storybookBridge.withKnobs);
10+
11+
const template = (data = {}) =>
12+
tools.component(PfePageStatus.tag, data.prop, data.slots);
13+
14+
stories.add(PfePageStatus.tag, () => {
15+
let config = {};
16+
17+
const props = PfePageStatus.properties;
18+
const slots = PfePageStatus.slots;
19+
20+
// -- Customize the default selection for the preview
21+
props.status.default = "important";
22+
23+
// Build the knobs and read in their selections
24+
config.prop = tools.autoPropKnobs(props, storybookBridge);
25+
26+
// Set a default value for the user-entered content
27+
slots.content.default = "Preview";
28+
29+
// Build the knobs and read in their selections
30+
config.has = tools.autoContentKnobs(slots, storybookBridge);
31+
32+
config.slots = [{
33+
content: config.has.content
34+
}];
35+
36+
let rendered = template(config);
37+
38+
return tools.preview(rendered);
39+
});

‎elements/pfe-page-status/gulpfile.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const gulpFactory = require("../../scripts/gulpfile.factory.js");
2+
const pfelementPackage = require("./package.json");
3+
4+
gulpFactory(pfelementPackage.pfelement);

‎elements/pfe-page-status/package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)