Skip to content

Commit e2ba182

Browse files
kylebuch8kylebuch8
authored
feat: pfe-health-index size="mini" version (#789)
* feat: pfe-health-index size="mini" version Fixes #788 * fixing the height * updating the changelog
1 parent fdfd6fc commit e2ba182

File tree

8 files changed

+164
-68
lines changed

8 files changed

+164
-68
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
Tag: [v1.0.0-prerelease.41](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.41)
44

55
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add events to the generator
6+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-health-index size="mini" version #789
67

78
## Prerelease 40 ( 2020-03-10 )
89

910
Tag: [v1.0.0-prerelease.40](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.40)
1011

1112
- [d0c2a45](https://github.com/patternfly/patternfly-elements/commit/d0c2a4526ec3fc15339bd4ec393364486a260c84) fix: pfe-navigation cta overlap bug in IE11 (#766)
12-
- [eb4a9f6](https://github.com/patternfly/patternfly-elements/commit/eb4a9f63514ad9635d1b195e89d596c3feaf2201) chore: Prettier updates (#770)
13+
- [eb4a9f6](https://github.com/patternfly/patternfly-elements/commit/eb4a9f63514ad9635d1b195e89d596c3feaf2201) chore: Prettier updates (#770)
1314
- [7deb9bb](https://github.com/patternfly/patternfly-elements/commit/7deb9bb6227c0560b60a665ecd43b450db0f90e1) fix: Prevent default pfe-cta arrow from wrapping to a new line by itself #679 (#765)
1415
- [ba9d8b2](https://github.com/patternfly/patternfly-elements/commit/ba9d8b2cfed50580671041778d3d00cb5d5741d1) chore: Fixed invalid Markdown, was missing a back tic (#762)
1516

‎elements/pfe-health-index/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Sets the value for the health index in the UI.
1616

1717
Changes the size.
1818

19-
Possible values: `lg`
19+
Possible values: `mini`, `lg`
2020

2121
## Test
2222

‎elements/pfe-health-index/demo/index.html‎

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
1111
-->
12-
12+
1313
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
1414
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
1515
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
@@ -32,52 +32,81 @@
3232
line-height: 1.5rem;
3333
font-weight: 400;
3434
}
35+
section {
36+
padding: 16px;
37+
}
3538
div {
3639
margin-bottom: 8px;
3740
}
3841
</style>
3942

4043
</head>
4144
<body unresolved>
45+
<section>
4246
<h1>&lt;pfe-health-index&gt;</h1>
43-
<h2>Default</h2>
44-
<div>
45-
<pfe-health-index health-index="A">A</pfe-health-index>
46-
</div>
47-
<div>
48-
<pfe-health-index health-index="B">B</pfe-health-index>
49-
</div>
50-
<div>
51-
<pfe-health-index health-index="C">C</pfe-health-index>
52-
</div>
53-
<div>
54-
<pfe-health-index health-index="D">D</pfe-health-index>
55-
</div>
56-
<div>
57-
<pfe-health-index health-index="E">E</pfe-health-index>
58-
</div>
59-
<div>
60-
<pfe-health-index health-index="F">F</pfe-health-index>
61-
</div>
47+
<h2>Default</h2>
48+
<div>
49+
<pfe-health-index health-index="A">A</pfe-health-index>
50+
</div>
51+
<div>
52+
<pfe-health-index health-index="B">B</pfe-health-index>
53+
</div>
54+
<div>
55+
<pfe-health-index health-index="C">C</pfe-health-index>
56+
</div>
57+
<div>
58+
<pfe-health-index health-index="D">D</pfe-health-index>
59+
</div>
60+
<div>
61+
<pfe-health-index health-index="E">E</pfe-health-index>
62+
</div>
63+
<div>
64+
<pfe-health-index health-index="F">F</pfe-health-index>
65+
</div>
66+
</section>
67+
68+
<section>
69+
<h2>Mini</h2>
70+
<div>
71+
<pfe-health-index health-index="A" size="mini">A</pfe-health-index>
72+
</div>
73+
<div>
74+
<pfe-health-index health-index="B" size="mini">B</pfe-health-index>
75+
</div>
76+
<div>
77+
<pfe-health-index health-index="C" size="mini">C</pfe-health-index>
78+
</div>
79+
<div>
80+
<pfe-health-index health-index="D" size="mini">D</pfe-health-index>
81+
</div>
82+
<div>
83+
<pfe-health-index health-index="E" size="mini">E</pfe-health-index>
84+
</div>
85+
<div>
86+
<pfe-health-index health-index="F" size="mini">F</pfe-health-index>
87+
</div>
88+
</section>
6289

63-
<h2>Large</h2>
64-
<div>
65-
<pfe-health-index health-index="A" size="lg">A</pfe-health-index>
66-
</div>
67-
<div>
68-
<pfe-health-index health-index="B" size="lg">B</pfe-health-index>
69-
</div>
70-
<div>
71-
<pfe-health-index health-index="C" size="lg">C</pfe-health-index>
72-
</div>
73-
<div>
74-
<pfe-health-index health-index="D" size="lg">D</pfe-health-index>
75-
</div>
76-
<div>
77-
<pfe-health-index health-index="E" size="lg">E</pfe-health-index>
78-
</div>
79-
<div>
80-
<pfe-health-index health-index="F" size="lg">F</pfe-health-index>
81-
</div>
90+
<section>
91+
<h2>Large</h2>
92+
<div>
93+
<pfe-health-index health-index="A" size="lg">A</pfe-health-index>
94+
</div>
95+
<div>
96+
<pfe-health-index health-index="B" size="lg">B</pfe-health-index>
97+
</div>
98+
<div>
99+
<pfe-health-index health-index="C" size="lg">C</pfe-health-index>
100+
</div>
101+
<div>
102+
<pfe-health-index health-index="D" size="lg">D</pfe-health-index>
103+
</div>
104+
<div>
105+
<pfe-health-index health-index="E" size="lg">E</pfe-health-index>
106+
</div>
107+
<div>
108+
<pfe-health-index health-index="F" size="lg">F</pfe-health-index>
109+
</div>
110+
</section>
82111
</body>
83112
</html>

‎elements/pfe-health-index/src/pfe-health-index.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
${this.size !== "lg" ? `
2-
<div id="healthIndex"></div>
3-
<div class="box-container">
4-
<div class="box a"></div>
5-
<div class="box b"></div>
6-
<div class="box c"></div>
7-
<div class="box d"></div>
8-
<div class="box e"></div>
9-
<div class="box f"></div>
10-
</div>
1+
${this.props.size.value !== "lg" ? `
2+
${this.props.size.value === "mini" ? `
3+
<div class="box-container">
4+
<div class="box">
5+
<div class="grade" id="healthIndex"></div>
6+
</div>
7+
</div>
8+
` : `
9+
<div id="healthIndex"></div>
10+
<div class="box-container">
11+
<div class="box a"></div>
12+
<div class="box b"></div>
13+
<div class="box c"></div>
14+
<div class="box d"></div>
15+
<div class="box e"></div>
16+
<div class="box f"></div>
17+
</div>
18+
`}
1119
` : `
1220
<div class="box-container">
1321
<div class="box a">

‎elements/pfe-health-index/src/pfe-health-index.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,19 @@ class PfeHealthIndex extends PFElement {
2323

2424
constructor() {
2525
super(PfeHealthIndex, { delayRender: true });
26-
this.size = null;
2726
}
2827

2928
attributeChangedCallback(attr, oldValue, newValue) {
29+
super.attributeChangedCallback(attr, oldValue, newValue);
30+
3031
switch (attr) {
3132
case "size":
32-
this.size = newValue;
33+
this.props.size.value = newValue;
3334
this.render();
34-
this.updateHealthIndex(this.getAttribute("health-index"));
35+
this.updateHealthIndex(this.getAttribute("health-index"), oldValue);
3536
break;
3637
case "health-index":
38+
this.props.size.value = this.getAttribute("size");
3739
this.render();
3840
this.updateHealthIndex(newValue);
3941
break;
@@ -42,12 +44,17 @@ class PfeHealthIndex extends PFElement {
4244
}
4345
}
4446

45-
updateHealthIndex(grade) {
47+
updateHealthIndex(grade, oldValue) {
4648
const healthIndex = grade.toLowerCase();
4749
const healthIndexUpperCase = grade.toUpperCase();
4850
const boxes = [...this.shadowRoot.querySelectorAll(".box")];
4951
this.innerHTML = healthIndexUpperCase;
5052

53+
if (this.props.size.value === "mini") {
54+
this.shadowRoot.querySelector(".box").classList.remove(oldValue);
55+
this.shadowRoot.querySelector(".box").classList.add(healthIndex);
56+
}
57+
5158
boxes.forEach(box => {
5259
if (box.classList.contains(healthIndex)) {
5360
box.classList.add("active");
@@ -56,7 +63,7 @@ class PfeHealthIndex extends PFElement {
5663
}
5764
});
5865

59-
if (this.size !== "lg") {
66+
if (this.props.size.value !== "lg") {
6067
this.shadowRoot.querySelector(
6168
"#healthIndex"
6269
).innerText = healthIndexUpperCase;

‎elements/pfe-health-index/src/pfe-health-index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"size": {
2828
"title": "Size",
2929
"type": "string",
30-
"enum": ["lg"],
30+
"enum": ["mini", "lg"],
3131
"default": null,
3232
"prefixed": false
3333
}

‎elements/pfe-health-index/src/pfe-health-index.scss‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
$pfe-health--width: 10px;
99
$pfe-health--height: $pfe-health--width * 2;
10+
$pfe-health-mini--width: 22px;
11+
$pfe-health-mini--height: $pfe-health-mini--width;
1012

1113
$pfe-health--color-bg: #fff;
1214

@@ -30,44 +32,44 @@ $pfe-health--color-f: #a30000;
3032
display: none;
3133
}
3234

33-
:host(:not([size="lg"])) {
35+
:host(:not([size="lg"]):not([size="mini"])) {
3436
.box-container {
3537
display: flex;
3638
border: 1px solid #{pfe-color(surface--border)};
3739
margin-left: calc(#{pfe-var(container-spacer)} * 0.5);
38-
40+
3941
.box {
4042
background: $pfe-health--color-bg;
4143
width: $pfe-health--width;
4244
height: $pfe-health--height;
4345
border-right: 1px solid #{pfe-color(surface--border)};
44-
46+
4547
&:last-child {
4648
border-right: 0;
4749
}
48-
50+
4951
&.active {
5052

5153
&.a {
5254
background-color: $pfe-health--color-a;
5355
}
54-
56+
5557
&.b {
5658
background-color: $pfe-health--color-b;
5759
}
58-
60+
5961
&.c {
6062
background-color: $pfe-health--color-c;
6163
}
62-
64+
6365
&.d {
6466
background-color: $pfe-health--color-d;
6567
}
66-
68+
6769
&.e {
6870
background-color: $pfe-health--color-e;
6971
}
70-
72+
7173
&.f {
7274
background-color: $pfe-health--color-f;
7375
}
@@ -76,6 +78,48 @@ $pfe-health--color-f: #a30000;
7678
}
7779
}
7880

81+
:host([size="mini"]) {
82+
.box-container {
83+
margin: 0;
84+
border: none;
85+
86+
.box {
87+
display: flex;
88+
width: $pfe-health-mini--width;
89+
height: $pfe-health-mini--height;
90+
justify-content: center;
91+
align-items: center;
92+
color: white;
93+
font-size: 16px;
94+
border-radius: 1px;
95+
96+
&.a {
97+
background-color: $pfe-health--color-a;
98+
}
99+
100+
&.b {
101+
background-color: $pfe-health--color-b;
102+
}
103+
104+
&.c {
105+
background-color: $pfe-health--color-c;
106+
}
107+
108+
&.d {
109+
background-color: $pfe-health--color-d;
110+
}
111+
112+
&.e {
113+
background-color: $pfe-health--color-e;
114+
}
115+
116+
&.f {
117+
background-color: $pfe-health--color-f;
118+
}
119+
}
120+
}
121+
}
122+
79123
:host([size="lg"]) {
80124
.box-container {
81125
display: flex;
@@ -145,4 +189,4 @@ $pfe-health--color-f: #a30000;
145189
background-color: $pfe-health--color-f;
146190
}
147191
}
148-
}
192+
}

‎elements/pfe-health-index/test/pfe-health-index_test.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<pfe-health-index id="E" health-index="E">E</pfe-health-index>
2121
<pfe-health-index id="F" health-index="F">F</pfe-health-index>
2222
<pfe-health-index id="largeSize" health-index="A">A</pfe-health-index>
23+
<pfe-health-index id="miniSize" health-index="A" size="mini">A></pfe-health-index>
2324

2425
<script>
2526
suite('<pfe-health-index>', () => {
@@ -163,10 +164,16 @@
163164

164165
healthIndex.setAttribute("size", "lg");
165166
activeBox = healthIndex.shadowRoot.querySelector(".box.active");
166-
167+
167168
assert.isTrue(defaultWidth < activeBox.offsetWidth);
168169
assert.isTrue(defaultHeight < activeBox.offsetHeight);
169170
});
171+
172+
test("it should only show a single box if the size attribute is set to mini", () => {
173+
const healthIndex = document.querySelector("#miniSize");
174+
const boxes = healthIndex.shadowRoot.querySelectorAll(".box");
175+
assert.equal(boxes.length, 1);
176+
});
170177
});
171178
</script>
172179
</body>

0 commit comments

Comments
 (0)