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

core/pfe-core/package.json

@@ -66,6 +66,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.5",
+    "@pwrs/cem": "^0.6.5",
     "lit": "^3.3.0"
   },
   "repository": {

elements/package.json

@@ -31,6 +31,8 @@
     "./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-helper-text/pf-helper-text-item.js": "./pf-helper-text/pf-helper-text-item.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",
@@ -47,6 +49,7 @@
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
     "./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js",
+    "./pf-sidebar/pf-sidebar.js": "./pf-sidebar/pf-sidebar.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
     "./pf-table/context.js": "./pf-table/context.js",

elements/pf-helper-text/README.md

@@ -0,0 +1,151 @@
+# `<pf-helper-text>`
+
+The **pf-helper-text** component provides contextual feedback messages for form fields or other UI elements.
+It visually communicates states such as success, warning, error, or informational messages.
+The component can display a default status icon or a fully custom icon provided through a slot or property.
+
+Read more about dropdown in the [PatternFly Elements Dropdown 
+documentation](https://patternflyelements.org/components/dropdown)
+
+---
+##  Installation
+
+Load `<pf-helper-text>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-helper-text/pf-helper-text.js"></script>
+
+<script src="https://jspm.dev/@patternfly/elements/pf-icon/pf-icon.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+
+```
+
+##  Usage
+
+```html
+<script type="module">
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+  import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+
+  // Optional: add FontAwesome icon set
+  PfIcon.addIconSet('fas', (set, icon) => {
+    return new URL(`@fortawesome/fontawesome-free/svgs/solid/${icon}.svg`, import.meta.url);
+  });
+</script>
+
+<pf-helper-text>
+  This is default helper text
+</pf-helper-text>
+
+<pf-helper-text status="indeterminate" icon="minus" icon-set="fas">
+  This is indeterminate helper text
+</pf-helper-text>
+
+<pf-helper-text status="warning" icon="exclamation-triangle" icon-set="fas">
+  This is warning helper text
+</pf-helper-text>
+
+<pf-helper-text status="success" icon="check-circle" icon-set="fas">
+  This is success helper text
+</pf-helper-text>
+
+<pf-helper-text status="error" icon="exclamation-circle" icon-set="fas">
+  This is error helper text
+</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:not([status]) {
+  color: var(--pf-global--Color--100, #151515);
+}
+pf-helper-text[status="indeterminate"] {
+  color: var(--pf-global--Color--200, #6a6e73);
+}
+pf-helper-text[status="warning"] {
+  color: var(--pf-global--warning-color--100, #f0ab00);
+}
+pf-helper-text[status="success"] {
+  color: var(--pf-global--success-color--100, #3e8635);
+}
+pf-helper-text[status="error"] {
+  color: var(--pf-global--danger-color--100, #c9190b);
+}
+
+pf-helper-text [slot="icon"],
+pf-icon {
+  fill: currentColor;
+}
+</style>
+
+
+```
+## Slots
+
+| Name       | Description                                                                            |
+|------------|----------------------------------------------------------------------------------------|
+| `icon`     | Optional named slot for providing a custom icon.<br>Overrides the default status icon. |
+| (default)  | Default unnamed slot for the helper text content (text or other inline elements).      |
+
+Properties
+
+|Name   |	Type                                                | Default |	Description|
+| ----- |-----------------------------------------------------|---------|-------------------------- 
+|status |'default','success','warning','error','indeterminate'|'default'|	Defines the visual state of the helper text and determines which default icon is shown if no custom icon is provided.|
+|icon   |	string                                              |undefined|	Custom icon name to display. Overrides the default icon derived from status. Requires pf-icon to be imported.|
+|iconSet|	string                                              |undefined|	Icon set to use when specifying a custom icon (e.g., 'fas').|
+
+## Events
+
+| Event Name   | Description                                                                      |
+| ------------ | -------------------------------------------------------------------------------- |
+| `icon-load`  | Fired when a custom or default icon successfully loads.                          |
+| `icon-error` | Fired if the icon fails to load. The event’s `detail` contains the error object. |
+
+## Default Icons by Status
+
+| Status          | Default Icon           |
+| --------------- | ---------------------- |
+| `default`       | *(none)*               |
+| `indeterminate` | `minus-circle`         |
+| `warning`       | `exclamation-triangle` |
+| `success`       | `circle-check`         |
+| `error`         | `exclamation-circle`   |
+
+## Notes
+
+Providing a custom <slot name="icon"> overrides the default icon.
+
+Icons are lazy-loaded (loading="lazy") to optimize performance.
+
+The pf-icon element must be imported if using built-in icons.
+
+The component emits icon-load and icon-error events to track icon state.
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" class="pf-m-redhat-font">
+<head>
+  <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>pf-helper-text — Dynamic list</title>
+  <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.css" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://unpkg.com/@patternfly/elements/pf-styles/demo.css" crossorigin="anonymous" />
+  <style>body{margin:0;background:var(--pf-global--BackgroundColor--100);color:var(--pf-global--Color--100);
+    font-family:var(--pf-global--FontFamily--text,"Red Hat Text",Arial,sans-serif);line-height:1.5}
+    pf-demo{display:block;padding:2rem;max-width:700px;margin-inline:auto}
+    h2{font-size:var(--pf-global--FontSize--xl);font-weight:var(--pf-global--FontWeight--bold);margin-bottom:1rem}
+  </style>
+</head>
+<body>
+  <pf-demo>
+    <h2>Dynamic list</h2>
+    <pf-helper-text component="ul" live role="list">
+      <pf-helper-text-item icon="check-circle" icon-set="fas" status="success" is-dynamic>
+        Must be at least 14 characters
+      </pf-helper-text-item>
+      <pf-helper-text-item icon="exclamation-circle" icon-set="fas" status="error" is-dynamic>
+        Cannot contain any variation of the word "redhat"
+      </pf-helper-text-item>
+      <pf-helper-text-item icon="check-circle" icon-set="fas" status="success" is-dynamic>
+        Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
+      </pf-helper-text-item>
+    </pf-helper-text>
+  </pf-demo>
+
+  <script type="module">
+    import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+    import '@patternfly/elements/pf-helper-text/pf-helper-text-item.js';
+    import '@patternfly/elements/pf-icon/pf-icon.js';
+    import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
+    PfIcon.addIconSet('fas', (set, icon) =>
+      new URL('/node_modules/@fortawesome/fontawesome-free/svgs/solid/' + icon + '.svg', window.location.origin)
+    );
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,107 @@
+
+<!DOCTYPE html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>pf-helper-text — Dynamic</title>
+
+    <!-- PatternFly core styles -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@patternfly/patternfly/patternfly.css"
+      crossorigin="anonymous"
+    />
+
+    <!-- PatternFly Elements demo layout -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@patternfly/elements/pf-styles/demo.css"
+      crossorigin="anonymous"
+    />
+
+    <style>
+      body {
+        margin: 0;
+        background-color: var(--pf-global--BackgroundColor--100);
+        color: var(--pf-global--Color--100);
+        font-family: var(--pf-global--FontFamily--text, "Red Hat Text", Arial, sans-serif);
+        line-height: 1.5;
+      }
+
+      pf-demo {
+        display: block;
+        padding: 2rem;
+        max-width: 700px;
+        margin-inline: auto;
+      }
+
+      h2 {
+        font-size: var(--pf-global--FontSize--xl);
+        font-weight: var(--pf-global--FontWeight--bold);
+        margin-bottom: 1rem;
+      }
+
+      pf-helper-text {
+        display: block;
+        margin-block: 0.25rem;
+      }
+
+      pf-helper-text-item {
+        display: flex;
+        align-items: center;
+        font-size: var(--pf-c-helper-text--FontSize, 0.875rem);
+        gap: var(--pf-c-helper-text--Gap, 0.25rem);
+      }
+
+      pf-icon {
+        fill: currentColor;
+        width: 1em;
+        height: 1em;
+      }
+    </style>
+  </head>
+
+  <body>
+    <pf-demo>
+      <h2>Dynamic</h2>
+
+      <pf-helper-text>
+        <pf-helper-text-item icon="minus" icon-set="fas" status="default" is-dynamic>
+          This is default helper text
+        </pf-helper-text-item>
+
+        <pf-helper-text-item icon="minus" icon-set="fas" status="indeterminate" is-dynamic>
+          This is indeterminate helper text
+        </pf-helper-text-item>
+
+        <pf-helper-text-item icon="exclamation-triangle" icon-set="fas" status="warning" is-dynamic>
+          This is warning helper text
+        </pf-helper-text-item>
+
+        <pf-helper-text-item icon="check-circle" icon-set="fas" status="success" is-dynamic>
+          This is success helper text
+        </pf-helper-text-item>
+
+        <pf-helper-text-item icon="exclamation-circle" icon-set="fas" status="error" is-dynamic>
+          This is error helper text
+        </pf-helper-text-item>
+      </pf-helper-text>
+    </pf-demo>
+
+    <script type="module">
+      import '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+      import '@patternfly/elements/pf-helper-text/pf-helper-text-item.js';
+      import '@patternfly/elements/pf-icon/pf-icon.js';
+      import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
+
+      // ✅ טעינת סט האייקונים של Font Awesome
+      PfIcon.addIconSet('fas', (set, icon) => {
+        return new URL(
+          '/node_modules/@fortawesome/fontawesome-free/svgs/solid/' + icon + '.svg',
+          window.location.origin
+        );
+      });
+    </script>
+  </body>
+</html>