Skip to content

Commit c549734

Browse files
DjfaucetteDjfaucette
authored
Merge pull request #462 from patternfly/pfe-progress-indicator
Pfe progress indicator
2 parents 5244409 + 5ae4a54 commit c549734

21 files changed

+443
-1
lines changed

‎elements/pfe-progress-indicator/.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-progress-indicator/.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-progress-indicator/.npmignore‎

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

‎elements/pfe-progress-indicator/.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-progress-indicator/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-progress-indicator/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# PFElements Progress Indicator Element
2+
3+
`pfe-progress-indicator` is a "loader" that indicates to the user that part of the web page is loading, or waiting on other http events to be ready to use.
4+
5+
## Usage
6+
```html
7+
<pfe-progress-indicator pfe-indeterminate>
8+
<h1>My fallback loading message</h1>
9+
</pfe-progress-indicator>
10+
```
11+
12+
At the time of writing there is only one style variant, `pfe-indeterminate` that spins without informing the user of where they are in the waiting process, only that http activity has not been resolved. This may change in the future as more style variants become available.
13+
14+
## Slots
15+
16+
Progress Indicator has one unnamed slot only.
17+
18+
### Default slot
19+
20+
We expect any html tag to be the first child inside `pfe-progress-indicator` element. The provided element should contain a fallback loading message if JavaScript should fail for any reason. When the element is connected, the loading message is visually hidden, and replaced by an animated "spinner".
21+
22+
E.g.
23+
24+
```
25+
// The web component that upgrades to a "loader"
26+
<pfe-progress-indicator>
27+
28+
// your custom message for JS failure AND a11y technologies
29+
<h1>
30+
This text will be seen if JS fails, but will be hidden on upgrade.
31+
Screen readers will still see it as a part of the DOM.
32+
</h1>
33+
34+
</pfe-progress-indicator>
35+
```
36+
37+
## Styling
38+
39+
As of writing, the progress indicator element has only one style, but in the future it could be expanded to include many different types of progress indicators.
40+
41+
## Test
42+
43+
npm run test
44+
45+
## Build
46+
47+
npm run build
48+
49+
## Demo
50+
51+
From the PFElements root directory, run:
52+
53+
npm start
54+
55+
## Code style
56+
57+
Progress Indicator (and all PFElements) 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.
58+
59+
[prettier]: https://github.com/prettier/prettier/
60+
[prettier-ed]: https://prettier.io/docs/en/editors.html
61+
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/pfe-progress-indicator/demo/index.html‎

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

‎elements/pfe-progress-indicator/demo/pfe-progress-indicator.story.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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 PfeProgressIndicator from "../pfe-progress-indicator";
6+
7+
const stories = storiesOf("Progress indicator", module);
8+
9+
// Define the template to be used
10+
const template = (data = {}) => {
11+
return tools.component(PfeProgressIndicator.tag, data.prop, data.slots);
12+
};
13+
14+
stories.addDecorator(storybookBridge.withKnobs);
15+
16+
stories.add(PfeProgressIndicator.tag, () => {
17+
18+
let config = {};
19+
const props = PfeProgressIndicator.properties;
20+
21+
// Trigger the auto generation of the knobs for attributes
22+
config.prop = tools.autoPropKnobs(props, storybookBridge);
23+
24+
const slots = PfeProgressIndicator.slots;
25+
26+
// Trigger the auto generation of the knobs for slots
27+
config.has = tools.autoContentKnobs(slots, storybookBridge);
28+
29+
const rendered = template(config);
30+
return tools.preview(rendered);
31+
});

‎elements/pfe-progress-indicator/gulpfile.js‎

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

‎elements/pfe-progress-indicator/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)