Skip to content

Commit bc3003d

Browse files
committed
fix(battery): Add Battery docs
1 parent 6dc6c67 commit bc3003d

File tree

8 files changed

+112
-14
lines changed

8 files changed

+112
-14
lines changed
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
# Sidenav top-level section
3+
# should be the same for all markdown files
4+
section: extensions
5+
subsection: Component groups
6+
# Sidenav secondary level section
7+
# should be the same for all markdown files
8+
id: Battery
9+
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
10+
source: react
11+
# If you use typescript, the name of the interface to display props for
12+
# These are found through the sourceProps function provided in patternfly-docs.source.js
13+
propComponents: ['Battery']
14+
---
15+
16+
import { Battery } from "@patternfly/react-component-groups";
17+
18+
19+
This is the battery component that generates a 'battery' which corresponds to a level 1-4.
20+
- 1 - low, green (best case scenario)
21+
- 2 - medium, yellow
22+
- 3 - high, orange
23+
- 4 - critical, red (worst case scenario)
24+
25+
Also accepts a label which can be made invisible.
26+
27+
28+
## Component usage
29+
30+
### Low severity
31+
32+
```js file="./BatteryLowExample.tsx"
33+
34+
```
35+
36+
### Medium severity
37+
38+
```js file="./BatteryMediumExample.tsx"
39+
40+
```
41+
42+
### High severity
43+
44+
```js file="./BatteryHighExample.tsx"
45+
46+
```
47+
48+
### Critical severity
49+
50+
```js file="./BatteryCriticalExample.tsx"
51+
52+
```
53+
54+
### Default variant
55+
56+
```js file="./BatteryDefaultExample.tsx"
57+
58+
```
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { Battery } from '@patternfly/react-component-groups';
3+
4+
const BatteryCriticalExample: React.FunctionComponent = () => (
5+
<>
6+
<Battery label="With prop: 4" severity={4} />
7+
<Battery className="pf-u-ml-md" label="With prop: critical" severity="critical" />
8+
</>
9+
);
10+
11+
export default BatteryCriticalExample;
12+
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import { Battery } from '@patternfly/react-component-groups';
3+
4+
const BatteryDefaultExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/>
5+
6+
export default BatteryDefaultExample;
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { Battery } from '@patternfly/react-component-groups';
3+
4+
const BatteryHighExample: React.FunctionComponent = () => (
5+
<>
6+
<Battery label="With prop: 3" severity={3} />
7+
<Battery className="pf-u-ml-md" label="With prop: high" severity="high" />
8+
<Battery className="pf-u-ml-md" label="With prop: error" severity="error" />
9+
</>
10+
);
11+
12+
export default BatteryHighExample;
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { Battery } from '@patternfly/react-component-groups';
3+
4+
const BatteryLowExample: React.FunctionComponent = () => (
5+
<>
6+
<Battery label="With prop: 1" severity={1} />
7+
<Battery className="pf-u-ml-md" label="With prop: low" severity="low" />
8+
<Battery className="pf-u-ml-md" label="With prop: info" severity="info" />
9+
</>
10+
);
11+
12+
export default BatteryLowExample;
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { Battery } from '@patternfly/react-component-groups';
3+
4+
const BatteryMediumExample: React.FunctionComponent = () => (
5+
<>
6+
<Battery label="With prop: 2" severity={2} />
7+
<Battery className="pf-u-ml-md" label="With prop: medium" severity="medium" />
8+
<Battery className="pf-u-ml-md" label="With prop: warn" severity="warn" />
9+
</>
10+
);
11+
12+
export default BatteryMediumExample;

packages/module/src/Battery/Battery.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
119119
<i className={batteryClasses} {...ariaLabels} {...props} widget-type="InsightsBattery" widget-id={label}>
120120
<svg
121121
version="1.1"
122-
id="battery_svg"
123122
x="0px"
124123
y="0px"
125124
viewBox="0 0 448 512"

packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ exports[`Battery component API should hide label 1`] = `
99
widget-type="InsightsBattery"
1010
>
1111
<svg
12-
id="battery_svg"
1312
shape-rendering="geometricpresision"
1413
style="enable-background: new 0 0 448 512;"
1514
version="1.1"
@@ -77,7 +76,6 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
7776
widget-type="InsightsBattery"
7877
>
7978
<svg
80-
id="battery_svg"
8179
shape-rendering="geometricpresision"
8280
style="enable-background: new 0 0 448 512;"
8381
version="1.1"
@@ -112,7 +110,6 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
112110
widget-type="InsightsBattery"
113111
>
114112
<svg
115-
id="battery_svg"
116113
shape-rendering="geometricpresision"
117114
style="enable-background: new 0 0 448 512;"
118115
version="1.1"
@@ -147,7 +144,6 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
147144
widget-type="InsightsBattery"
148145
>
149146
<svg
150-
id="battery_svg"
151147
shape-rendering="geometricpresision"
152148
style="enable-background: new 0 0 448 512;"
153149
version="1.1"
@@ -182,7 +178,6 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
182178
widget-type="InsightsBattery"
183179
>
184180
<svg
185-
id="battery_svg"
186181
shape-rendering="geometricpresision"
187182
style="enable-background: new 0 0 448 512;"
188183
version="1.1"
@@ -217,7 +212,6 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
217212
widget-type="InsightsBattery"
218213
>
219214
<svg
220-
id="battery_svg"
221215
shape-rendering="geometricpresision"
222216
style="enable-background: new 0 0 448 512;"
223217
version="1.1"
@@ -252,7 +246,6 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
252246
widget-type="InsightsBattery"
253247
>
254248
<svg
255-
id="battery_svg"
256249
shape-rendering="geometricpresision"
257250
style="enable-background: new 0 0 448 512;"
258251
version="1.1"
@@ -287,7 +280,6 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
287280
widget-type="InsightsBattery"
288281
>
289282
<svg
290-
id="battery_svg"
291283
shape-rendering="geometricpresision"
292284
style="enable-background: new 0 0 448 512;"
293285
version="1.1"
@@ -322,7 +314,6 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
322314
widget-type="InsightsBattery"
323315
>
324316
<svg
325-
id="battery_svg"
326317
shape-rendering="geometricpresision"
327318
style="enable-background: new 0 0 448 512;"
328319
version="1.1"
@@ -357,7 +348,6 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
357348
widget-type="InsightsBattery"
358349
>
359350
<svg
360-
id="battery_svg"
361351
shape-rendering="geometricpresision"
362352
style="enable-background: new 0 0 448 512;"
363353
version="1.1"
@@ -392,7 +382,6 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
392382
widget-type="InsightsBattery"
393383
>
394384
<svg
395-
id="battery_svg"
396385
shape-rendering="geometricpresision"
397386
style="enable-background: new 0 0 448 512;"
398387
version="1.1"
@@ -427,7 +416,6 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
427416
widget-type="InsightsBattery"
428417
>
429418
<svg
430-
id="battery_svg"
431419
shape-rendering="geometricpresision"
432420
style="enable-background: new 0 0 448 512;"
433421
version="1.1"
@@ -462,7 +450,6 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
462450
widget-type="InsightsBattery"
463451
>
464452
<svg
465-
id="battery_svg"
466453
shape-rendering="geometricpresision"
467454
style="enable-background: new 0 0 448 512;"
468455
version="1.1"

0 commit comments

Comments
 (0)