@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.31.0-rc.0

package/es/components/coachmark/coachmark.test.js

@@ -0,0 +1,168 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { fixture, html } from '@open-wc/testing';
+import './coachmark.js';
+import './coachmark-header.js';
+import './coachmark-body.js';
+import { coachmarkDetailsSignal } from './coachmark-context.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader';
+import Crossroads from '@carbon/icons/es/crossroads/16.js';
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const templateTooltip = (args = {}) => {
+    const handleClick = () => {
+        var _a;
+        (_a = document.querySelector('c4p-coachmark')) === null || _a === void 0 ? void 0 : _a.toggleAttribute('open');
+    };
+    return html `
+    <c4p-coachmark
+      .open=${args.open}
+      align=${args.align}
+      .position=${{ x: 150, y: 100 }}
+    >
+      <c4p-coachmark-beacon
+        label="Show information"
+        .expanded=${args.open}
+        @c4p-coachmark-beacon-clicked=${handleClick}
+        slot="trigger"
+      >
+      </c4p-coachmark-beacon>
+      <c4p-coachmark-header
+        class="coachmark-header"
+        closeIconDescription="close icon"
+      ></c4p-coachmark-header>
+      <c4p-coachmark-body class="coachmark-body">
+        <h2>Hello World</h2>
+        <p>this is a description test</p>
+        <cds-button size="sm">Done</cds-button>
+      </c4p-coachmark-body>
+    </c4p-coachmark>
+  `;
+};
+const templateFloating = (args = {}) => {
+    const handleClick = () => {
+        var _a;
+        (_a = document.querySelector('c4p-coachmark')) === null || _a === void 0 ? void 0 : _a.toggleAttribute('open');
+    };
+    return html `
+    <c4p-coachmark
+      .open=${args.open}
+      align=${args.align}
+      ?floating=${args.floating}
+    >
+      <cds-button
+        kind="tertiary"
+        slot="trigger"
+        class="trigger-btn"
+        @click=${handleClick}
+        >Show information ${iconLoader(Crossroads, { slot: 'icon' })}
+      </cds-button>
+      <c4p-coachmark-header
+        closeIconDescription="close icon"
+        dragIconDescription="drag icon"
+        class="coachmark-header"
+      ></c4p-coachmark-header>
+      <c4p-coachmark-body class="coachmark-body">
+        <h2>Hello World</h2>
+        <p>this is a description test</p>
+        <cds-button size="sm">Done</cds-button>
+      </c4p-coachmark-body>
+    </c4p-coachmark>
+  `;
+};
+describe('c4p-coachmark', function () {
+    const mockDetails = {
+        open: false,
+        floating: false,
+    };
+    beforeEach(() => {
+        coachmarkDetailsSignal.get = vi.fn(() => mockDetails);
+    });
+    it('applies className to the containing node', async () => {
+        const customClass = 'test';
+        const el = await fixture(templateTooltip({ align: 'bottom', open: true }));
+        el.classList.add(customClass);
+        expect(el.getAttribute('class')).to.include(customClass);
+    });
+    it('should render tooltip variant with beacon and popover(includes header and body)', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(templateTooltip({ align: 'bottom', open: true }));
+        //Beacon
+        const beacon = el.querySelector('c4p-coachmark-beacon');
+        expect(beacon).to.exist;
+        expect(beacon === null || beacon === void 0 ? void 0 : beacon.getAttribute('label')).to.equal('Show information');
+        // Header
+        const header = el === null || el === void 0 ? void 0 : el.querySelector(`${prefix}-coachmark-header`);
+        const headerShadow = header.shadowRoot;
+        const headerSlot = headerShadow.querySelector('slot[name="header"]');
+        expect(headerSlot).to.exist;
+        const closeButton = headerShadow.querySelector(`${carbonPrefix}-button`);
+        expect(closeButton).to.exist;
+        // Popover
+        const body = el === null || el === void 0 ? void 0 : el.querySelector(`${prefix}-coachmark-body`);
+        const slot = (_a = body.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        expect(slot).to.exist;
+        const heading = el.querySelector('h2');
+        const paragraph = el.querySelector('p');
+        const button = el.querySelector(`${carbonPrefix}-button`);
+        expect(heading).to.exist;
+        expect((_b = heading === null || heading === void 0 ? void 0 : heading.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Hello World');
+        expect(paragraph).to.exist;
+        expect((_c = paragraph === null || paragraph === void 0 ? void 0 : paragraph.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('this is a description test');
+        expect(button).to.exist;
+        expect((_d = button === null || button === void 0 ? void 0 : button.textContent) === null || _d === void 0 ? void 0 : _d.trim()).to.equal('Done');
+    });
+    it('responds to close button and renders closeIconDescription', async () => {
+        const el = (await fixture(templateTooltip({ align: 'bottom', open: true })));
+        expect(el === null || el === void 0 ? void 0 : el.open).toBeTruthy();
+        const header = el === null || el === void 0 ? void 0 : el.querySelector(`${prefix}-coachmark-header`);
+        const headerShadow = header.shadowRoot;
+        const headerSlot = headerShadow.querySelector('slot[name="header"]');
+        expect(headerSlot).to.exist;
+        const closeButton = headerShadow.querySelector(`${carbonPrefix}-button`);
+        expect(closeButton).to.exist;
+        expect(closeButton.hasAttribute('icondescription')).to.be.true;
+        expect(closeButton.getAttribute('icondescription')).to.equal('close icon');
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.click();
+        await el.updateComplete;
+        expect(coachmarkDetailsSignal.get().open).to.be.false;
+    });
+    it('responds to position attribute and updates the coachmark’s position accordingly for Tooltip variant.', async () => {
+        const el = (await fixture(templateTooltip({ align: 'bottom', open: true })));
+        expect(el.style.transform).to.equal('translate(150px, 100px)');
+        el.position = { x: 50, y: 20 };
+        await el.updateComplete;
+        expect(el.style.transform).to.equal('translate(50px, 20px)');
+    });
+    it('should render floating variant with button and popover(should include Drag icon)', async () => {
+        var _a;
+        mockDetails.floating = true;
+        const el = await fixture(templateFloating({ align: 'bottom', open: true, floating: true }));
+        expect(el === null || el === void 0 ? void 0 : el.floating).to.be.true;
+        //Button
+        const button = el.querySelector('cds-button');
+        expect(button).to.exist;
+        const contentText = (_a = button === null || button === void 0 ? void 0 : button.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        expect(contentText).to.equal('Show information');
+        // Check if drag icon is present in Header
+        const header = el === null || el === void 0 ? void 0 : el.querySelector(`${prefix}-coachmark-header`);
+        const headerShadow = header.shadowRoot;
+        const headerSlot = headerShadow.querySelector('slot[name="header"]');
+        expect(headerSlot).to.exist;
+        const buttons = headerShadow.querySelectorAll(`${carbonPrefix}-button`);
+        expect(buttons[0].getAttribute('icondescription')).to.equal('drag icon');
+    });
+});
+//# sourceMappingURL=coachmark.test.js.map

package/es/components/coachmark/coachmark.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coachmark.test.js","sources":["../../../src/components/coachmark/coachmark.test.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/components/coachmark/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './coachmark';
+import './coachmark-header';
+import './coachmark-body';

package/es/components/coachmark/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './coachmark.js';
+import './coachmark-header.js';
+import './coachmark-body.js';
+//# sourceMappingURL=index.js.map

package/es/components/coachmark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}