Skip to content

Commit 5de6b70

Browse files
dali327519294dali327519294
committed
feat: create pf-helper-text element
1 parent a850589 commit 5de6b70

File tree

11 files changed

+494
-6
lines changed

11 files changed

+494
-6
lines changed

‎core/pfe-core/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"dependencies": {
6868
"@floating-ui/dom": "^1.6.10",
6969
"@lit/context": "^1.1.5",
70+
"@pwrs/cem": "^0.6.5",
7071
"lit": "^3.3.0"
7172
},
7273
"repository": {

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",
3232
"./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.js",
3333
"./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
34+
"./pf-helper-text/pf-helper-text.js": "./pf-helper-text/pf-helper-text.js",
3435
"./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
3536
"./pf-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.js",
3637
"./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",

‎elements/pf-helper-text/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Helper Text
2+
Add a description of the component here.
3+
4+
## Usage
5+
Describe how best to use this web component along with best practices.
6+
7+
```html
8+
<pf-helper-text>
9+
10+
</pf-helper-text>
11+
```

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script type="module">
2+
import '@patternfly/elements/pf-icon/pf-icon.js';
3+
import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
4+
PfIcon.addIconSet('fas', (set, icon) => {
5+
6+
return new URL(`@fortawesome/fontawesome-free/svgs/solid/${icon}.svg`, import.meta.url);
7+
});
8+
</script>
9+
10+
<pf-helper-text status="warning">
11+
This is a warning helper text
12+
</pf-helper-text>
13+
14+
<pf-helper-text status="error" icon="exclamation-triangle" icon-set="fas">
15+
This is an error helper text with icon
16+
</pf-helper-text>
17+
18+
<pf-helper-text status="success">
19+
<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="green" xmlns="http://www.w3.org/2000/svg">
20+
<path d="M6 10.8L3.2 8 2 9.2l4 4 8-8-1.2-1.2L6 10.8z"/>
21+
</svg>
22+
This is a success helper text with slotted icon
23+
</pf-helper-text>
24+
25+
<pf-helper-text status="indeterminate">
26+
This is an indeterminate helper text
27+
</pf-helper-text>
28+
29+
<pf-helper-text icon="arrow" icon-set="patternfly">
30+
Custom Icon
31+
</pf-helper-text>
32+
33+
34+
35+
<style>
36+
pf-helper-text {
37+
display: block;
38+
margin: 1rem 0;
39+
font-family: var(--pf-global--FontFamily--sans-serif, Arial, sans-serif);
40+
}
41+
42+
pf-helper-text .helper-container {
43+
display: flex;
44+
align-items: center;
45+
gap: 0.5rem;
46+
}
47+
48+
pf-helper-text .icon-container {
49+
display: inline-flex;
50+
align-items: center;
51+
}
52+
53+
pf-helper-text[status="warning"] {
54+
color: var(--pf-global--warning-color, #f0ab00);
55+
}
56+
57+
pf-helper-text[status="error"] {
58+
color: var(--pf-global--danger-color, #c9190b);
59+
}
60+
61+
pf-helper-text[status="success"] {
62+
color: var(--pf-global--success-color, #3e8635);
63+
}
64+
65+
pf-helper-text[status="indeterminate"] {
66+
color: var(--pf-global--info-color, #06c);
67+
}
68+
</style>

‎elements/pf-helper-text/docs/pf-helper-text.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% renderOverview %}
2+
<pf-helper-text></pf-helper-text>
3+
{% endrenderOverview %}
4+
5+
{% band header="Usage" %}{% endband %}
6+
7+
{% renderSlots %}{% endrenderSlots %}
8+
9+
{% renderAttributes %}{% endrenderAttributes %}
10+
11+
{% renderMethods %}{% endrenderMethods %}
12+
13+
{% renderEvents %}{% endrenderEvents %}
14+
15+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
16+
17+
{% renderCssParts %}{% endrenderCssParts %}

‎elements/pf-helper-text/pf-helper-text.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
:host {
2+
display: inline-flex;
3+
align-items: center;
4+
gap: 0.4rem;
5+
font-size: 14px;
6+
line-height: 1.5;
7+
}
8+
9+
.helper-container {
10+
display: inline-flex;
11+
align-items: center;
12+
gap: 0.4rem;
13+
}
14+
15+
:host([status="error"]) {
16+
color: var(--pf-global--danger-color--100, #c9190b);
17+
}
18+
19+
:host([status="warning"]) {
20+
color: var(--pf-global--warning-color--100, #f0ab00);
21+
}
22+
23+
:host([status="success"]) {
24+
color: var(--pf-global--success-color--100, #3e8635);
25+
}
26+
27+
:host([status="indeterminate"]) {
28+
color: var(--pf-global--palette--black-600, #6a6e73);
29+
}

‎elements/pf-helper-text/pf-helper-text.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import '@patternfly/elements/pf-icon/pf-icon.js';
2+
import { LitElement, html, type TemplateResult } from 'lit';
3+
import { customElement } from 'lit/decorators/custom-element.js';
4+
import { property } from 'lit/decorators/property.js';
5+
import { ifDefined } from 'lit/directives/if-defined.js';
6+
7+
import styles from './pf-helper-text.css';
8+
9+
/**
10+
* Helper Text Statuses
11+
*/
12+
export type HelperTextStatus = 'default' | 'success' | 'warning' | 'error' | 'indeterminate';
13+
14+
/**
15+
* Helper Text
16+
* @slot icon - Custom icon to override default
17+
* @slot - Place element content here
18+
*/
19+
@customElement('pf-helper-text')
20+
export class PfHelperText extends LitElement {
21+
static readonly styles: CSSStyleSheet[] = [styles];
22+
23+
/**
24+
* Defines the helper text status and its corresponding icon.
25+
* Options include 'default', 'success', 'warning', 'error', 'indeterminate'.
26+
*/
27+
@property({ attribute: 'status' })
28+
status: HelperTextStatus = 'default';
29+
30+
/**
31+
* The icon name to use. Overrides the default icon for a given status.
32+
* Requires pf-icon to be imported.
33+
*/
34+
@property({ attribute: 'icon' })
35+
icon: string | undefined;
36+
37+
/**
38+
* The icon set to use, e.g., 'fas' for Font Awesome Solid.
39+
* Required when using the 'icon' property.
40+
*/
41+
@property({ attribute: 'icon-set' })
42+
iconSet: string | undefined;
43+
44+
/**
45+
* מחשב את האייקון שיוצג, בהתבסס על הסטטוס או המאפיין icon
46+
*/
47+
private get _iconName(): string | undefined {
48+
// אם המשתמש הגדיר אייקון ספציפי, השתמש בו
49+
if (this.icon) {
50+
return this.icon;
51+
}
52+
53+
// אם לא הוגדר אייקון ספציפי, החזר אייקון ברירת מחדל לפי הסטטוס
54+
switch (this.status) {
55+
case 'success':
56+
return 'circle-check';
57+
case 'warning':
58+
return 'exclamation-triangle';
59+
case 'error':
60+
return 'exclamation-circle';
61+
case 'indeterminate':
62+
return 'minus-circle';
63+
default:
64+
return undefined; // במצב 'default' אין אייקון ברירת מחדל
65+
}
66+
}
67+
68+
// בקובץ pf-helper-text.ts
69+
render(): TemplateResult<1> {
70+
const iconName = this._iconName; // מקבל את שם האייקון או undefined
71+
const hasIcon = !!iconName;
72+
73+
return html`
74+
75+
<slot name="icon">
76+
77+
${hasIcon ?
78+
html`
79+
<pf-icon icon="${iconName}" set="${ifDefined(this.iconSet)}" ></pf-icon>
80+
81+
`
82+
: ''}
83+
</slot>
84+
85+
<slot></slot>
86+
`;
87+
}
88+
}
89+
90+
declare global {
91+
interface HTMLElementTagNameMap {
92+
'pf-helper-text': PfHelperText;
93+
}
94+
}

‎elements/pf-helper-text/test/pf-helper-text.e2e.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { test } from '@playwright/test';
2+
import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
3+
import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
4+
5+
const tagName = 'pf-helper-text';
6+
7+
test.describe(tagName, () => {
8+
test('snapshot', async ({ page }) => {
9+
const componentPage = new PfeDemoPage(page, tagName);
10+
await componentPage.navigate();
11+
await componentPage.snapshot();
12+
});
13+
14+
test('ssr', async ({ browser }) => {
15+
const fixture = new SSRPage({
16+
tagName,
17+
browser,
18+
demoDir: new URL('../demo/', import.meta.url),
19+
importSpecifiers: [
20+
`@patternfly/elements/${tagName}/${tagName}.js`,
21+
],
22+
});
23+
await fixture.snapshots();
24+
});
25+
});

‎elements/pf-helper-text/test/pf-helper-text.spec.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { expect, html } from '@open-wc/testing';
2+
import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
3+
import { PfHelperText } from '@patternfly/elements/pf-helper-text/pf-helper-text.js';
4+
5+
describe('<pf-helper-text>', function() {
6+
describe('simply instantiating', function() {
7+
let element: PfHelperText;
8+
it('imperatively instantiates', function() {
9+
expect(document.createElement('pf-helper-text')).to.be.an.instanceof(PfHelperText);
10+
});
11+
12+
it('should upgrade', async function() {
13+
element = await createFixture<PfHelperText>(html`<pf-helper-text></pf-helper-text>`);
14+
const klass = customElements.get('pf-helper-text');
15+
expect(element)
16+
.to.be.an.instanceOf(klass)
17+
.and
18+
.to.be.an.instanceOf(PfHelperText);
19+
});
20+
});
21+
});

0 commit comments

Comments
 (0)