Skip to content

Commit 3fd4f24

Browse files
authored
Merge pull request #169 from RHElements/health-index
rh-health-index component
2 parents 53bcda4 + 023cf43 commit 3fd4f24

21 files changed

Lines changed: 777 additions & 0 deletions

doc/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ <h1>RHElements demos</h1>
1313
<li><a href="../elements/rh-card/demo">rh-card</a></li>
1414
<li><a href="../elements/rh-cta/demo">rh-cta</a></li>
1515
<li><a href="../elements/rh-datetime/demo">rh-datetime</a></li>
16+
<li><a href="../elements/rh-health-index/demo">rh-health-index</a></li>
1617
<li><a href="../elements/rh-icon-panel/demo">rh-icon-panel</a></li>
1718
<li><a href="../elements/rh-icon/demo">rh-icon</a></li>
1819
<li><a href="../elements/rh-number/demo">rh-number</a></li>

elements/all/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@rhelements/rh-card": "file:elements/rh-card",
1111
"@rhelements/rh-cta": "file:elements/rh-cta",
1212
"@rhelements/rh-datetime": "file:elements/rh-datetime",
13+
"@rhelements/rh-health-index": "file:elements/rh-health-index",
1314
"@rhelements/rh-icon": "file:elements/rh-icon",
1415
"@rhelements/rh-icon-panel": "file:elements/rh-icon-panel",
1516
"@rhelements/rh-number": "file:elements/rh-number",

elements/rh-health-index/.babelrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["env", { "modules": "umd" }]
4+
]
5+
}
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
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules
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
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright 2018 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/rh-health-index/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# RHElements Health Element
2+
3+
## Usage
4+
5+
```html
6+
<rh-health-index health-index="A">A</rh-health-index>
7+
```
8+
9+
## Attributes
10+
11+
### health-index (observed)
12+
13+
Sets the value for the health index in the UI.
14+
15+
## Test
16+
17+
npm run test
18+
19+
## Build
20+
21+
npm run build
22+
23+
## Demo
24+
25+
From the RHElements root directory, run:
26+
27+
npm start
28+
29+
## Code style
30+
31+
Card (and all RHElements) 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.
32+
33+
[prettier]: https://github.com/prettier/prettier/
34+
[prettier-ed]: https://prettier.io/docs/en/editors.html
35+
[web-component-tester]: https://github.com/Polymer/web-component-tester
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>RHElements: rh-health-index Demo</title>
6+
7+
<!-- uncomment the es5-adapter if you're using the umd version -->
8+
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
9+
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
11+
<script>require(['../rh-health-index.umd.js'])</script>
12+
<style>
13+
div {
14+
margin-bottom: 8px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<h1>&lt;rh-health-index&gt;</h1>
20+
<div>
21+
<rh-health-index health-index="A">A</rh-health-index>
22+
</div>
23+
<div>
24+
<rh-health-index health-index="B">B</rh-health-index>
25+
</div>
26+
<div>
27+
<rh-health-index health-index="C">C</rh-health-index>
28+
</div>
29+
<div>
30+
<rh-health-index health-index="D">D</rh-health-index>
31+
</div>
32+
<div>
33+
<rh-health-index health-index="E">E</rh-health-index>
34+
</div>
35+
<div>
36+
<rh-health-index health-index="F">F</rh-health-index>
37+
</div>
38+
</body>
39+
</html>
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
const fs = require("fs");
2+
const path = require("path");
3+
4+
const gulp = require("gulp");
5+
const babel = require("gulp-babel");
6+
const uglify = require("gulp-uglify");
7+
const rename = require("gulp-rename");
8+
const replace = require("gulp-replace");
9+
const stripCssComments = require("strip-css-comments");
10+
const trim = require("trim");
11+
const decomment = require("decomment");
12+
const sass = require("node-sass");
13+
14+
gulp.task("compile", () => {
15+
return gulp
16+
.src("./rh-health-index.js")
17+
.pipe(
18+
replace(
19+
/^(import .*?)(['"]\.\.\/(?!\.\.\/).*)(\.js['"];)$/gm,
20+
"$1$2.umd$3"
21+
)
22+
)
23+
.pipe(babel())
24+
.pipe(uglify())
25+
.pipe(
26+
rename({
27+
suffix: ".umd"
28+
})
29+
)
30+
.pipe(gulp.dest("./"));
31+
});
32+
33+
gulp.task("watch", () => {
34+
return gulp.watch("./src/*", gulp.series("merge", "compile"));
35+
});
36+
37+
gulp.task("merge", () => {
38+
return gulp
39+
.src("./src/rh-health-index.js")
40+
.pipe(
41+
replace(
42+
/extends\s+RHElement\s+{/g,
43+
(classStatement, character, jsFile) => {
44+
// extract the templateUrl and styleUrl with regex. Would prefer to do
45+
// this by require'ing rh-health-index.js and asking it directly, but without
46+
// node.js support for ES modules, we're stuck with this.
47+
const oneLineFile = jsFile
48+
.slice(character)
49+
.split("\n")
50+
.join(" ");
51+
const [
52+
,
53+
templateUrl
54+
] = /get\s+templateUrl\([^)]*\)\s*{\s*return\s+"([^"]+)"/.exec(
55+
oneLineFile
56+
);
57+
58+
let html = fs
59+
.readFileSync(path.join("./src", templateUrl))
60+
.toString()
61+
.trim();
62+
63+
html = decomment(html);
64+
65+
const [
66+
,
67+
styleUrl
68+
] = /get\s+styleUrl\([^)]*\)\s*{\s*return\s+"([^"]+)"/.exec(
69+
oneLineFile
70+
);
71+
72+
const styleFilePath = path.join("./src", styleUrl);
73+
74+
let cssResult = sass.renderSync({
75+
file: styleFilePath
76+
}).css;
77+
78+
cssResult = stripCssComments(cssResult).trim();
79+
80+
return `${classStatement}
81+
get html() {
82+
return \`
83+
<style>
84+
${cssResult}
85+
</style>
86+
${html}\`;
87+
}
88+
`;
89+
}
90+
)
91+
)
92+
.pipe(gulp.dest("./"));
93+
});
94+
95+
gulp.task("default", gulp.series("merge", "compile"));
96+
97+
gulp.task("dev", gulp.series("merge", "compile", "watch"));

0 commit comments

Comments
 (0)