Skip to content

Commit db4dee5

Browse files
dali327519294dali327519294
committed
feat(helper-text): implement pf-helper-text component and refactor demos
1 parent d868e40 commit db4dee5

File tree

11 files changed

+631
-194
lines changed

11 files changed

+631
-194
lines changed

‎elements/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.js",
3333
"./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
3434
"./pf-helper-text/pf-helper-text.js": "./pf-helper-text/pf-helper-text.js",
35+
"./pf-helper-text/pf-helper-text-item.js": "./pf-helper-text/pf-helper-text-item.js",
3536
"./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
3637
"./pf-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.js",
3738
"./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
@@ -48,6 +49,7 @@
4849
"./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
4950
"./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
5051
"./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js",
52+
"./pf-sidebar/pf-sidebar.js": "./pf-sidebar/pf-sidebar.js",
5153
"./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
5254
"./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
5355
"./pf-table/context.js": "./pf-table/context.js",

‎elements/pf-helper-text/demo/dynamic-list.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="pf-m-redhat-font">
3+
<head>
4+
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<title>pf-helper-text — Dynamic list</title>
6+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.css" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/elements/pf-styles/demo.css" crossorigin="anonymous" />
8+
<style>body{margin:0;background:var(--pf-global--BackgroundColor--100);color:var(--pf-global--Color--100);
9+
font-family:var(--pf-global--FontFamily--text,"Red Hat Text",Arial,sans-serif);line-height:1.5}
10+
pf-demo{display:block;padding:2rem;max-width:700px;margin-inline:auto}
11+
h2{font-size:var(--pf-global--FontSize--xl);font-weight:var(--pf-global--FontWeight--bold);margin-bottom:1rem}
12+
</style>
13+
</head>
14+
<body>
15+
<pf-demo>
16+
<h2>Dynamic list</h2>
17+
<pf-helper-text component="ul" live role="list">
18+
<pf-helper-text-item icon="check-circle" icon-set="fas" status="success" is-dynamic>
19+
Must be at least 14 characters
20+
</pf-helper-text-item>
21+
<pf-helper-text-item icon="exclamation-circle" icon-set="fas" status="error" is-dynamic>
22+
Cannot contain any variation of the word "redhat"
23+
</pf-helper-text-item>
24+
<pf-helper-text-item icon="check-circle" icon-set="fas" status="success" is-dynamic>
25+
Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
26+
</pf-helper-text-item>
27+
</pf-helper-text>
28+
</pf-demo>
29+
30+
<script type="module">
31+
import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
32+
import '@patternfly/elements/pf-helper-text/pf-helper-text-item.js';
33+
import '@patternfly/elements/pf-icon/pf-icon.js';
34+
import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
35+
PfIcon.addIconSet('fas', (set, icon) =>
36+
new URL('/node_modules/@fortawesome/fontawesome-free/svgs/solid/' + icon + '.svg', window.location.origin)
37+
);
38+
</script>
39+
</body>
40+
</html>

‎elements/pf-helper-text/demo/dynamic.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="pf-m-redhat-font">
3+
<head>
4+
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<title>pf-helper-text — Dynamic</title>
6+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.css" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/elements/pf-styles/demo.css" crossorigin="anonymous" />
8+
<style>body{margin:0;background:var(--pf-global--BackgroundColor--100);color:var(--pf-global--Color--100);
9+
font-family:var(--pf-global--FontFamily--text,"Red Hat Text",Arial,sans-serif);line-height:1.5}
10+
pf-demo{display:block;padding:2rem;max-width:700px;margin-inline:auto}
11+
h2{font-size:var(--pf-global--FontSize--xl);font-weight:var(--pf-global--FontWeight--bold);margin-bottom:1rem}
12+
</style>
13+
</head>
14+
<body>
15+
<pf-demo>
16+
<h2>Dynamic</h2>
17+
<pf-helper-text live>
18+
<pf-helper-text-item icon="minus" icon-set="fas" status="default" is-dynamic>
19+
This is default helper text
20+
</pf-helper-text-item>
21+
<pf-helper-text-item icon="minus" icon-set="fas" status="indeterminate" is-dynamic>
22+
This is indeterminate helper text
23+
</pf-helper-text-item>
24+
<pf-helper-text-item icon="exclamation-triangle" icon-set="fas" status="warning" is-dynamic>
25+
This is warning helper text
26+
</pf-helper-text-item>
27+
<pf-helper-text-item icon="check-circle" icon-set="fas" status="success" is-dynamic>
28+
This is success helper text
29+
</pf-helper-text-item>
30+
<pf-helper-text-item icon="exclamation-circle" icon-set="fas" status="error" is-dynamic>
31+
This is error helper text
32+
</pf-helper-text-item>
33+
</pf-helper-text>
34+
</pf-demo>
35+
36+
<script type="module">
37+
import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
38+
import '@patternfly/elements/pf-helper-text/pf-helper-text-item.js';
39+
import '@patternfly/elements/pf-icon/pf-icon.js';
40+
import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
41+
PfIcon.addIconSet('fas', (set, icon) =>
42+
new URL('/node_modules/@fortawesome/fontawesome-free/svgs/solid/' + icon + '.svg', window.location.origin)
43+
);
44+
</script>
45+
</body>
46+
</html>

‎elements/pf-helper-text/demo/index.html‎

Whitespace-only changes.

‎elements/pf-helper-text/demo/multiple.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en" class="pf-m-redhat-font">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>pf-helper-text — Multiple static</title>
8+
9+
<!-- PatternFly core styles -->
10+
<link
11+
rel="stylesheet"
12+
href="https://unpkg.com/@patternfly/patternfly/patternfly.css"
13+
crossorigin="anonymous"
14+
/>
15+
16+
<!-- PatternFly Elements demo layout -->
17+
<link
18+
rel="stylesheet"
19+
href="https://unpkg.com/@patternfly/elements/pf-styles/demo.css"
20+
crossorigin="anonymous"
21+
/>
22+
23+
<style>
24+
body {
25+
margin: 0;
26+
background-color: var(--pf-global--BackgroundColor--100);
27+
color: var(--pf-global--Color--100);
28+
font-family: var(--pf-global--FontFamily--text, "Red Hat Text", Arial, sans-serif);
29+
line-height: 1.5;
30+
}
31+
32+
pf-demo {
33+
display: block;
34+
padding: 2rem;
35+
max-width: 700px;
36+
margin-inline: auto;
37+
}
38+
39+
h2 {
40+
font-size: var(--pf-global--FontSize--xl);
41+
font-weight: var(--pf-global--FontWeight--bold);
42+
margin-bottom: 1rem;
43+
}
44+
45+
pf-helper-text {
46+
display: block;
47+
margin-block: 0.25rem;
48+
}
49+
50+
pf-helper-text-item {
51+
display: flex;
52+
align-items: center;
53+
font-size: var(--pf-c-helper-text--FontSize, 0.875rem);
54+
gap: var(--pf-c-helper-text--Gap, 0.25rem);
55+
}
56+
</style>
57+
</head>
58+
59+
<body>
60+
<pf-demo>
61+
<h2>Multiple static</h2>
62+
63+
<pf-helper-text>
64+
<pf-helper-text-item status="default">
65+
This is default helper text
66+
</pf-helper-text-item>
67+
68+
<pf-helper-text-item status="default">
69+
This is another default helper text in the same block
70+
</pf-helper-text-item>
71+
72+
<pf-helper-text-item status="default">
73+
And this is more default text in the same block
74+
</pf-helper-text-item>
75+
</pf-helper-text>
76+
</pf-demo>
77+
78+
<script type="module">
79+
import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
80+
import '@patternfly/elements/pf-helper-text/pf-helper-text-item.js';
81+
</script>
82+
</body>
83+
</html>

‎elements/pf-helper-text/demo/pf-helper-text.html‎

Lines changed: 0 additions & 96 deletions
This file was deleted.

0 commit comments

Comments
 (0)