@patternfly/elements 4.2.0 → 4.3.0

package/pf-helper-text/test/pf-helper-text.spec.js

@@ -0,0 +1,57 @@
+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;
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-helper-text')).to.be.an.instanceof(PfHelperText);
+        });
+        it('should upgrade', async function () {
+            element = await createFixture(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);
+        });
+    });
+    describe('variant property', function () {
+        it('should default to "default" variant', async function () {
+            const element = await createFixture(html `<pf-helper-text></pf-helper-text>`);
+            expect(element.variant).to.equal('default');
+        });
+        it('should reflect variant attribute', async function () {
+            const element = await createFixture(html `<pf-helper-text variant="success"></pf-helper-text>`);
+            expect(element.variant).to.equal('success');
+            expect(element.getAttribute('variant')).to.equal('success');
+        });
+    });
+    describe('icon display', function () {
+        it('should show icon when icon property is set', async function () {
+            const element = await createFixture(html `<pf-helper-text icon="check-circle">Success</pf-helper-text>`);
+            await element.updateComplete;
+            const iconContainer = element.shadowRoot?.querySelector('#icon');
+            expect(iconContainer?.hasAttribute('hidden')).to.be.false;
+        });
+        it('should hide icon when no icon or slotted icon is present', async function () {
+            const element = await createFixture(html `<pf-helper-text variant="default">Text</pf-helper-text>`);
+            await element.updateComplete;
+            const iconContainer = element.shadowRoot?.querySelector('#icon');
+            expect(iconContainer?.hasAttribute('hidden')).to.be.true;
+        });
+    });
+    describe('text content', function () {
+        it('should render text content in default slot', async function () {
+            const element = await createFixture(html `<pf-helper-text>Helper text content</pf-helper-text>`);
+            expect(element.textContent?.trim()).to.equal('Helper text content');
+        });
+        it('should have aria-live on text container', async function () {
+            const element = await createFixture(html `<pf-helper-text>Text</pf-helper-text>`);
+            await element.updateComplete;
+            const textContainer = element.shadowRoot?.querySelector('#text');
+            expect(textContainer?.getAttribute('aria-live')).to.equal('polite');
+        });
+    });
+});
+//# sourceMappingURL=pf-helper-text.spec.js.map

package/pf-helper-text/test/pf-helper-text.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-helper-text.spec.js","sourceRoot":"","sources":["pf-helper-text.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfHelperText } from '@patternfly/elements/pf-helper-text/pf-helper-text.js';\n\ndescribe('<pf-helper-text>', function() {\n  describe('simply instantiating', function() {\n    let element: PfHelperText;\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-helper-text')).to.be.an.instanceof(PfHelperText);\n    });\n\n    it('should upgrade', async function() {\n      element = await createFixture<PfHelperText>(html`<pf-helper-text></pf-helper-text>`);\n      const klass = customElements.get('pf-helper-text');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfHelperText);\n    });\n  });\n\n  describe('variant property', function() {\n    it('should default to \"default\" variant', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text></pf-helper-text>`);\n      expect(element.variant).to.equal('default');\n    });\n\n    it('should reflect variant attribute', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text variant=\"success\"></pf-helper-text>`);\n      expect(element.variant).to.equal('success');\n      expect(element.getAttribute('variant')).to.equal('success');\n    });\n  });\n\n  describe('icon display', function() {\n    it('should show icon when icon property is set', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text icon=\"check-circle\">Success</pf-helper-text>`);\n      await element.updateComplete;\n      const iconContainer = element.shadowRoot?.querySelector('#icon');\n      expect(iconContainer?.hasAttribute('hidden')).to.be.false;\n    });\n\n    it('should hide icon when no icon or slotted icon is present', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text variant=\"default\">Text</pf-helper-text>`);\n      await element.updateComplete;\n      const iconContainer = element.shadowRoot?.querySelector('#icon');\n      expect(iconContainer?.hasAttribute('hidden')).to.be.true;\n    });\n  });\n\n  describe('text content', function() {\n    it('should render text content in default slot', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text>Helper text content</pf-helper-text>`);\n      expect(element.textContent?.trim()).to.equal('Helper text content');\n    });\n\n    it('should have aria-live on text container', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text>Text</pf-helper-text>`);\n      await element.updateComplete;\n      const textContainer = element.shadowRoot?.querySelector('#text');\n      expect(textContainer?.getAttribute('aria-live')).to.equal('polite');\n    });\n  });\n});\n"]}

package/pf-hint/pf-hint.css

@@ -0,0 +1,120 @@
+:host {
+  display: block;
+
+  /* Container */
+  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md, 1rem);
+  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
+  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100, #bee1f4);
+  --pf-c-hint--BorderWidth: 1px;
+  --pf-c-hint--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
+
+  /* Title */
+  --pf-c-hint__title--FontSize: 1.125rem;
+  --pf-c-hint__title--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  --pf-c-hint__title--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__title--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Body */
+  --pf-c-hint__body--FontSize: 1rem;
+  --pf-c-hint__body--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__body--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Footer */
+  --pf-c-hint__footer--MarginTop: 0;
+  --pf-c-hint__footer--child--MarginRight: 1rem;
+
+  /* Actions */
+  --pf-c-hint__actions--Top: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--Right: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--MarginLeft: 3rem;
+  --pf-c-hint__actions--c-dropdown--MarginTop: calc(0.375rem * -1);
+}
+
+#container {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--pf-c-hint--GridRowGap);
+  padding:
+    var(--pf-c-hint--PaddingTop)
+    var(--pf-c-hint--PaddingRight)
+    var(--pf-c-hint--PaddingBottom)
+    var(--pf-c-hint--PaddingLeft);
+  background-color: var(--pf-c-hint--BackgroundColor);
+  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
+  border-radius: var(--pf-c-hint--BorderRadius);
+  box-shadow: var(--pf-c-hint--BoxShadow);
+  overflow: visible;
+}
+
+#container > * {
+  grid-column: 1;
+}
+
+#actions {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  align-self: start;
+  position: relative;
+  z-index: 1000;
+}
+
+#actions ::slotted(pf-dropdown) {
+  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
+  --pf-c-dropdown__menu--MinWidth: auto;
+  --pf-c-dropdown__menu--Left: auto;
+  --pf-c-dropdown__menu--Right: 0;
+}
+
+#title {
+  font-size: var(--pf-c-hint__title--FontSize);
+  font-weight: var(--pf-c-hint__title--FontWeight);
+  color: var(--pf-c-hint__title--Color);
+  line-height: var(--pf-c-hint__title--LineHeight);
+}
+
+#body {
+  font-size: var(--pf-c-hint__body--FontSize);
+  color: var(--pf-c-hint__body--Color);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer {
+  margin-top: var(--pf-c-hint__footer--MarginTop);
+  font-size: var(--pf-c-hint__body--FontSize);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer ::slotted(*) {
+  margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+#footer ::slotted(*:last-child) {
+  margin-right: 0;
+}
+
+/* Hidden elements */
+[hidden] {
+  display: none !important;
+}
+
+/* Link styling within hint */
+::slotted(a) {
+  color: var(--pf-global--link--Color, #06c);
+  text-decoration: none;
+}
+
+::slotted(a:hover) {
+  color: var(--pf-global--link--Color--hover, #004080);
+  text-decoration: underline;
+}
+
+/* Button styling in footer */
+::slotted(pf-button) {
+  --pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);
+}

package/pf-hint/pf-hint.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * A **hint** is in-app messaging that provides a one-step reminder, explanation,
+ * or call to action for a page or modal. Hints provide information about an interaction
+ * or prerequisite step that might not be immediately obvious to the user.
+ *
+ * @summary Provides inline contextual help or information to users
+ * @alias Hint
+ */
+export declare class PfHint extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-hint': PfHint;
+    }
+}

package/pf-hint/pf-hint.js

@@ -0,0 +1,180 @@
+var _PfHint_slots;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import { css } from "lit";
+const styles = css `:host {
+  display: block;
+
+  /* Container */
+  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md, 1rem);
+  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
+  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100, #bee1f4);
+  --pf-c-hint--BorderWidth: 1px;
+  --pf-c-hint--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
+
+  /* Title */
+  --pf-c-hint__title--FontSize: 1.125rem;
+  --pf-c-hint__title--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  --pf-c-hint__title--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__title--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Body */
+  --pf-c-hint__body--FontSize: 1rem;
+  --pf-c-hint__body--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__body--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Footer */
+  --pf-c-hint__footer--MarginTop: 0;
+  --pf-c-hint__footer--child--MarginRight: 1rem;
+
+  /* Actions */
+  --pf-c-hint__actions--Top: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--Right: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--MarginLeft: 3rem;
+  --pf-c-hint__actions--c-dropdown--MarginTop: calc(0.375rem * -1);
+}
+
+#container {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--pf-c-hint--GridRowGap);
+  padding:
+    var(--pf-c-hint--PaddingTop)
+    var(--pf-c-hint--PaddingRight)
+    var(--pf-c-hint--PaddingBottom)
+    var(--pf-c-hint--PaddingLeft);
+  background-color: var(--pf-c-hint--BackgroundColor);
+  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
+  border-radius: var(--pf-c-hint--BorderRadius);
+  box-shadow: var(--pf-c-hint--BoxShadow);
+  overflow: visible;
+}
+
+#container > * {
+  grid-column: 1;
+}
+
+#actions {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  align-self: start;
+  position: relative;
+  z-index: 1000;
+}
+
+#actions ::slotted(pf-dropdown) {
+  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
+  --pf-c-dropdown__menu--MinWidth: auto;
+  --pf-c-dropdown__menu--Left: auto;
+  --pf-c-dropdown__menu--Right: 0;
+}
+
+#title {
+  font-size: var(--pf-c-hint__title--FontSize);
+  font-weight: var(--pf-c-hint__title--FontWeight);
+  color: var(--pf-c-hint__title--Color);
+  line-height: var(--pf-c-hint__title--LineHeight);
+}
+
+#body {
+  font-size: var(--pf-c-hint__body--FontSize);
+  color: var(--pf-c-hint__body--Color);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer {
+  margin-top: var(--pf-c-hint__footer--MarginTop);
+  font-size: var(--pf-c-hint__body--FontSize);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer ::slotted(*) {
+  margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+#footer ::slotted(*:last-child) {
+  margin-right: 0;
+}
+
+/* Hidden elements */
+[hidden] {
+  display: none !important;
+}
+
+/* Link styling within hint */
+::slotted(a) {
+  color: var(--pf-global--link--Color, #06c);
+  text-decoration: none;
+}
+
+::slotted(a:hover) {
+  color: var(--pf-global--link--Color--hover, #004080);
+  text-decoration: underline;
+}
+
+/* Button styling in footer */
+::slotted(pf-button) {
+  --pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);
+}
+`;
+let PfHint = class PfHint extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfHint_slots.set(this, new SlotController(this, 'title', null, 'footer', 'actions'));
+    }
+    render() {
+        const hasActions = !__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('actions');
+        return html `
+      <div id="container"
+           part="container"
+           class=${classMap({
+            'has-actions': hasActions,
+        })}>
+        <div id="actions"
+             part="actions"
+             class="pf-c-hint__actions"
+             ?hidden=${__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('actions')}>
+          <!-- summary: Actions menu (e.g., kebab dropdown) -->
+          <slot name="actions"></slot>
+        </div>
+        <div id="title"
+             part="title"
+             class="pf-c-hint__title"
+             ?hidden=${__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('title')}>
+          <!-- summary: Optional title for the hint -->
+          <slot name="title"></slot>
+        </div>
+        <div id="body"
+             part="body"
+             class="pf-c-hint__body">
+          <!-- summary: Body content of the hint. Main informational text. -->
+          <slot></slot>
+        </div>
+        <div id="footer"
+             part="footer"
+             class="pf-c-hint__footer"
+             ?hidden=${__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('footer')}>
+          <!-- summary: Optional footer content, typically containing action links or buttons -->
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+_PfHint_slots = new WeakMap();
+PfHint.styles = [styles];
+PfHint.version = "4.3.0";
+PfHint = __decorate([
+    customElement('pf-hint')
+], PfHint);
+export { PfHint };
+//# sourceMappingURL=pf-hint.js.map

package/pf-hint/pf-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-hint.js","sourceRoot":"","sources":["pf-hint.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAa9E,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGL,wBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAC;;IAEtE,MAAM;QACJ,MAAM,UAAU,GAAG,CAAC,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;;;mBAGI,QAAQ,CAAC;YACf,aAAa,EAAE,UAAU;SAC1B,CAAC;;;;uBAIU,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,SAAS,CAAC;;;;;;;uBAO9B,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;;uBAa5B,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;;;;;KAK/C,CAAC;IACJ,CAAC;;;AA1Ce,aAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-hint.css';\n\n/**\n * A **hint** is in-app messaging that provides a one-step reminder, explanation,\n * or call to action for a page or modal. Hints provide information about an interaction\n * or prerequisite step that might not be immediately obvious to the user.\n *\n * @summary Provides inline contextual help or information to users\n * @alias Hint\n */\n@customElement('pf-hint')\nexport class PfHint extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  #slots = new SlotController(this, 'title', null, 'footer', 'actions');\n\n  render(): TemplateResult<1> {\n    const hasActions = !this.#slots.isEmpty('actions');\n\n    return html`\n      <div id=\"container\"\n           part=\"container\"\n           class=${classMap({\n             'has-actions': hasActions,\n           })}>\n        <div id=\"actions\"\n             part=\"actions\"\n             class=\"pf-c-hint__actions\"\n             ?hidden=${this.#slots.isEmpty('actions')}>\n          <!-- summary: Actions menu (e.g., kebab dropdown) -->\n          <slot name=\"actions\"></slot>\n        </div>\n        <div id=\"title\"\n             part=\"title\"\n             class=\"pf-c-hint__title\"\n             ?hidden=${this.#slots.isEmpty('title')}>\n          <!-- summary: Optional title for the hint -->\n          <slot name=\"title\"></slot>\n        </div>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"pf-c-hint__body\">\n          <!-- summary: Body content of the hint. Main informational text. -->\n          <slot></slot>\n        </div>\n        <div id=\"footer\"\n             part=\"footer\"\n             class=\"pf-c-hint__footer\"\n             ?hidden=${this.#slots.isEmpty('footer')}>\n          <!-- summary: Optional footer content, typically containing action links or buttons -->\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-hint': PfHint;\n  }\n}\n"]}

package/pf-hint/test/pf-hint.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-hint/test/pf-hint.e2e.js

@@ -0,0 +1,23 @@
+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-hint';
+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();
+    });
+});
+//# sourceMappingURL=pf-hint.e2e.js.map

package/pf-hint/test/pf-hint.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-hint.e2e.js","sourceRoot":"","sources":["pf-hint.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-hint';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-hint/test/pf-hint.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-hint/test/pf-hint.spec.js

@@ -0,0 +1,87 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfHint } from '@patternfly/elements/pf-hint/pf-hint.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+describe('<pf-hint>', function () {
+    describe('simply instantiating', function () {
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-hint')).to.be.an.instanceof(PfHint);
+        });
+        it('should upgrade', async function () {
+            const el = await createFixture(html `
+        <pf-hint>Basic hint</pf-hint>
+      `);
+            const klass = customElements.get('pf-hint');
+            expect(el)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfHint);
+        });
+    });
+    describe('basic hint', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>Welcome to the new documentation experience.</pf-hint>
+      `);
+        });
+        it('should render body content, and not title footer, or actions', async function () {
+            const snap = await a11ySnapshot();
+            expect(snap.children?.length).to.equal(1);
+        });
+    });
+    describe('hint with title', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>
+          <span slot="title">Do more with Find it Fix it capabilities</span>
+          Upgrade to Red Hat Smart Management.
+        </pf-hint>
+      `);
+            await element.updateComplete;
+        });
+        it('should render title and body content', async function () {
+            const snap = await a11ySnapshot();
+            expect(snap.children?.length).to.equal(2);
+        });
+    });
+    describe('hint with footer', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>
+          <span slot="title">Do more with Find it Fix it capabilities</span>
+          Upgrade to Red Hat Smart Management.
+          <a slot="footer" href="#">Try it for 90 days</a>
+        </pf-hint>
+      `);
+            await element.updateComplete;
+        });
+        it('should render footer', function () {
+            const footer = element.shadowRoot.querySelector('#footer');
+            expect(footer).to.exist;
+        });
+    });
+    describe('hint with actions', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>
+          <button slot="actions" aria-label="Actions">⋮</button>
+          <span slot="title">Do more with Find it Fix it capabilities</span>
+          Upgrade to Red Hat Smart Management.
+        </pf-hint>
+      `);
+            await element.updateComplete;
+        });
+        it('should render title, body, and actions', async function () {
+            const { children: [actions, title, body, ...rest] = [] } = await a11ySnapshot();
+            expect(actions.role).to.equal('button');
+            expect(title.role).to.equal('text');
+            expect(body.role).to.equal('text');
+            expect(rest.length).to.equal(0);
+        });
+    });
+});
+//# sourceMappingURL=pf-hint.spec.js.map

package/pf-hint/test/pf-hint.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-hint.spec.js","sourceRoot":"","sources":["pf-hint.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfHint } from '@patternfly/elements/pf-hint/pf-hint.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\ndescribe('<pf-hint>', function() {\n  describe('simply instantiating', function() {\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-hint')).to.be.an.instanceof(PfHint);\n    });\n\n    it('should upgrade', async function() {\n      const el = await createFixture<PfHint>(html`\n        <pf-hint>Basic hint</pf-hint>\n      `);\n      const klass = customElements.get('pf-hint');\n      expect(el)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfHint);\n    });\n  });\n\n  describe('basic hint', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>Welcome to the new documentation experience.</pf-hint>\n      `);\n    });\n\n    it('should render body content, and not title footer, or actions', async function() {\n      const snap = await a11ySnapshot();\n      expect(snap.children?.length).to.equal(1);\n    });\n  });\n\n  describe('hint with title', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>\n          <span slot=\"title\">Do more with Find it Fix it capabilities</span>\n          Upgrade to Red Hat Smart Management.\n        </pf-hint>\n      `);\n      await element.updateComplete;\n    });\n\n    it('should render title and body content', async function() {\n      const snap = await a11ySnapshot();\n      expect(snap.children?.length).to.equal(2);\n    });\n  });\n\n  describe('hint with footer', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>\n          <span slot=\"title\">Do more with Find it Fix it capabilities</span>\n          Upgrade to Red Hat Smart Management.\n          <a slot=\"footer\" href=\"#\">Try it for 90 days</a>\n        </pf-hint>\n      `);\n      await element.updateComplete;\n    });\n\n    it('should render footer', function() {\n      const footer = element.shadowRoot!.querySelector('#footer');\n      expect(footer).to.exist;\n    });\n  });\n\n  describe('hint with actions', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>\n          <button slot=\"actions\" aria-label=\"Actions\">⋮</button>\n          <span slot=\"title\">Do more with Find it Fix it capabilities</span>\n          Upgrade to Red Hat Smart Management.\n        </pf-hint>\n      `);\n      await element.updateComplete;\n    });\n\n    it('should render title, body, and actions', async function() {\n      const { children: [actions, title, body, ...rest] = [] } = await a11ySnapshot();\n      expect(actions.role).to.equal('button');\n      expect(title.role).to.equal('text');\n      expect(body.role).to.equal('text');\n      expect(rest.length).to.equal(0);\n    });\n  });\n});\n"]}

package/pf-icon/pf-icon.js

@@ -227,7 +227,7 @@ PfIcon.instances = new Set();
  *          ```
  */
 PfIcon.resolve = PfIcon.defaultResolve;
-PfIcon.version = "4.2.0";
+PfIcon.version = "4.3.0";
 __decorate([
     property()
 ], PfIcon.prototype, "set", void 0);

package/pf-jump-links/pf-jump-links-item.js

@@ -118,7 +118,7 @@ PfJumpLinksItem.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfJumpLinksItem.version = "4.2.0";
+PfJumpLinksItem.version = "4.3.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfJumpLinksItem.prototype, "active", void 0);

package/pf-jump-links/pf-jump-links-list.js

@@ -29,7 +29,7 @@ let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     }
 };
 PfJumpLinksList.styles = [style];
-PfJumpLinksList.version = "4.2.0";
+PfJumpLinksList.version = "4.3.0";
 PfJumpLinksList = __decorate([
     customElement('pf-jump-links-list')
 ], PfJumpLinksList);

package/pf-jump-links/pf-jump-links.js

@@ -283,7 +283,7 @@ _PfJumpLinks_onToggle = function _PfJumpLinks_onToggle(event) {
     this.dispatchEvent(new Event('toggle'));
 };
 PfJumpLinks.styles = [style];
-PfJumpLinks.version = "4.2.0";
+PfJumpLinks.version = "4.3.0";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfJumpLinks.prototype, "expandable", void 0);

package/pf-label/pf-label.js

@@ -335,7 +335,7 @@ PfLabel.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfLabel.version = "4.2.0";
+PfLabel.version = "4.3.0";
 __decorate([
     property()
 ], PfLabel.prototype, "variant", void 0);

package/pf-modal/pf-modal.d.ts

@@ -21,7 +21,7 @@ export declare class ModalOpenEvent extends ComposedEvent {
  * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.
  * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
  */
-export declare class PfModal extends LitElement implements HTMLDialogElement {
+export declare class PfModal extends LitElement {
     #private;
     static readonly shadowRootOptions: ShadowRootInit;
     static readonly styles: CSSStyleSheet[];

package/pf-modal/pf-modal.js

@@ -455,7 +455,7 @@ PfModal.shadowRootOptions = {
 PfModal.styles = [style];
 /** Should the dialog close when user clicks outside the dialog? */
 PfModal.closeOnOutsideClick = false;
-PfModal.version = "4.2.0";
+PfModal.version = "4.3.0";
 __decorate([
     property({ reflect: true })
 ], PfModal.prototype, "variant", void 0);