feat(helper-text): add pf-helper-text element

core/pfe-core/package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.5",
+    "@pwrs/cem": "^0.6.5",
     "lit": "^3.3.0"
   },
   "repository": {

elements/package.json

@@ -31,6 +31,7 @@
     "./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",
     "./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.js",
     "./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
+    "./pf-helper-text/pf-helper-text.js": "./pf-helper-text/pf-helper-text.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
     "./pf-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.js",
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",

elements/pf-helper-text/README.md

@@ -0,0 +1,11 @@
+# Helper Text
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-helper-text>
+
+</pf-helper-text>
+```

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

@@ -0,0 +1,68 @@
+<script type="module">
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+  import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+  PfIcon.addIconSet('fas', (set, icon) => {
+
+    return new URL(`@fortawesome/fontawesome-free/svgs/solid/${icon}.svg`, import.meta.url);
+  });
+</script>
+
+<pf-helper-text status="warning">
+  This is a warning helper text
+</pf-helper-text>
+
+<pf-helper-text status="error" icon="exclamation-triangle" icon-set="fas">
+  This is an error helper text with icon
+</pf-helper-text>
+
+<pf-helper-text status="success">
+  <svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="green" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 10.8L3.2 8 2 9.2l4 4 8-8-1.2-1.2L6 10.8z"/>
+  </svg>
+  This is a success helper text with slotted icon
+</pf-helper-text>
+
+<pf-helper-text status="indeterminate">
+  This is an indeterminate helper text
+</pf-helper-text>
+
+<pf-helper-text icon="arrow" icon-set="patternfly">
+  Custom Icon
+</pf-helper-text>
+
+
+
+<style>
+pf-helper-text {
+  display: block;
+  margin: 1rem 0;
+  font-family: var(--pf-global--FontFamily--sans-serif, Arial, sans-serif);
+}
+
+pf-helper-text .helper-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+pf-helper-text .icon-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+pf-helper-text[status="warning"] {
+  color: var(--pf-global--warning-color, #f0ab00);
+}
+
+pf-helper-text[status="error"] {
+  color: var(--pf-global--danger-color, #c9190b);
+}
+
+pf-helper-text[status="success"] {
+  color: var(--pf-global--success-color, #3e8635);
+}
+
+pf-helper-text[status="indeterminate"] {
+  color: var(--pf-global--info-color, #06c);
+}
+</style>

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

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <pf-helper-text></pf-helper-text>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}

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

@@ -0,0 +1,29 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.helper-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+:host([status="error"]) {
+  color: var(--pf-global--danger-color--100, #c9190b);
+}
+
+:host([status="warning"]) {
+  color: var(--pf-global--warning-color--100, #f0ab00);
+}
+
+:host([status="success"]) {
+  color: var(--pf-global--success-color--100, #3e8635);
+}
+
+:host([status="indeterminate"]) {
+  color: var(--pf-global--palette--black-600, #6a6e73);
+}

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

@@ -0,0 +1,94 @@
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import styles from './pf-helper-text.css';
+
+/**
+ * Helper Text Statuses
+ */
+export type HelperTextStatus = 'default' | 'success' | 'warning' | 'error' | 'indeterminate';
+
+/**
+ * Helper Text
+ * @slot icon - Custom icon to override default
+ * @slot - Place element content here
+ */
+@customElement('pf-helper-text')
+export class PfHelperText extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /**
+   * Defines the helper text status and its corresponding icon.
+   * Options include 'default', 'success', 'warning', 'error', 'indeterminate'.
+   */
+  @property({ attribute: 'status' })
+  status: HelperTextStatus = 'default';
+
+  /**
+   * The icon name to use. Overrides the default icon for a given status.
+   * Requires pf-icon to be imported.
+   */
+  @property({ attribute: 'icon' })
+  icon: string | undefined;
+
+  /**
+   * The icon set to use, e.g., 'fas' for Font Awesome Solid.
+   * Required when using the 'icon' property.
+   */
+  @property({ attribute: 'icon-set' })
+  iconSet: string | undefined;
+
+  /**
+   * מחשב את האייקון שיוצג, בהתבסס על הסטטוס או המאפיין icon
+   */
+  private get _iconName(): string | undefined {
+    // אם המשתמש הגדיר אייקון ספציפי, השתמש בו
+    if (this.icon) {
+      return this.icon;
+    }
+
+    // אם לא הוגדר אייקון ספציפי, החזר אייקון ברירת מחדל לפי הסטטוס
+    switch (this.status) {
+      case 'success':
+        return 'circle-check';
+      case 'warning':
+        return 'exclamation-triangle';
+      case 'error':
+        return 'exclamation-circle';
+      case 'indeterminate':
+        return 'minus-circle';
+      default:
+        return undefined; // במצב 'default' אין אייקון ברירת מחדל
+    }
+  }
+
+  // בקובץ pf-helper-text.ts
+  render(): TemplateResult<1> {
+    const iconName = this._iconName; // מקבל את שם האייקון או undefined
+    const hasIcon = !!iconName;
+
+    return html`
+
+      <slot name="icon">
+
+        ${hasIcon ?
+          html`
+            <pf-icon icon="${iconName}"  set="${ifDefined(this.iconSet)}" ></pf-icon>
+
+          `
+          : ''}
+      </slot>
+
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-helper-text': PfHelperText;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
+
+const tagName = 'pf-helper-text';
+
+test.describe(tagName, () => {
+  test('snapshot', async ({ page }) => {
+    const componentPage = new PfeDemoPage(page, tagName);
+    await componentPage.navigate();
+    await componentPage.snapshot();
+  });
+
+  test('ssr', async ({ browser }) => {
+    const fixture = new SSRPage({
+      tagName,
+      browser,
+      demoDir: new URL('../demo/', import.meta.url),
+      importSpecifiers: [
+        `@patternfly/elements/${tagName}/${tagName}.js`,
+      ],
+    });
+    await fixture.snapshots();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfHelperText } from '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+
+describe('<pf-helper-text>', function() {
+  describe('simply instantiating', function() {
+    let element: PfHelperText;
+    it('imperatively instantiates', function() {
+      expect(document.createElement('pf-helper-text')).to.be.an.instanceof(PfHelperText);
+    });
+
+    it('should upgrade', async function() {
+      element = await createFixture<PfHelperText>(html`<pf-helper-text></pf-helper-text>`);
+      const klass = customElements.get('pf-helper-text');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfHelperText);
+    });
+  });
+});