@carbon/ibm-products-web-components 0.12.0 → 0.13.0

package/es/components/tearsheet/utils.js

@@ -0,0 +1,294 @@
+/**
+ * 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 { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
+import '@carbon/web-components/es/components/tabs/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/textarea/index.js';
+import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/dropdown/index.js';
+import '@carbon/web-components/es/components/progress-indicator/index.js';
+import '@carbon/web-components/es/components/progress-bar/index.js';
+import './tearsheet.js';
+import { html } from 'lit';
+import { prefix } from '../../globals/settings.js';
+import styles from './story-styles.scss.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024, 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.
+ */
+const storyPrefix = 'tearsheet-stories';
+const cancelButton = () => {
+    var _a;
+    (_a = document.querySelector(`${prefix}-tearsheet`)) === null || _a === void 0 ? void 0 : _a.removeAttribute('open');
+};
+const influencers = {
+    'No influencer': 0,
+    'Simple influencer': 1,
+    'Progress influencer': 2,
+};
+const getInfluencer = (index) => {
+    switch (index) {
+        case 1:
+            return html `<div
+        slot="influencer"
+        class=${`${storyPrefix}__dummy-content-block`}
+      >
+        Influencer
+      </div>`;
+        case 2:
+            return html ` <cds-progress-indicator
+        vertical
+        slot="influencer"
+        class=${`${storyPrefix}__dummy-content-block`}
+      >
+        <cds-progress-step
+          state="complete"
+          label="First step"
+          secondary-label="Optional label"
+          description="Step 1: Getting started with Carbon Design System"
+        ></cds-progress-step>
+        <cds-progress-step
+          label="Second step with tooltip"
+          state="current"
+        ></cds-progress-step>
+        <cds-progress-step
+          label="Third step with tooltip"
+          state="incomplete"
+        ></cds-progress-step>
+        <cds-progress-step
+          label="Fourth step"
+          secondary-label="Example invalid step"
+          state="invalid"
+        ></cds-progress-step>
+        <cds-progress-step
+          disabled
+          label="Fifth step"
+          state="incomplete"
+        ></cds-progress-step>
+      </cds-progress-indicator>`;
+        default:
+            return null;
+    }
+};
+const getContent = (index) => {
+    switch (index) {
+        case 1:
+            return html `
+        <style>
+          ${styles}
+        </style>
+        <div class=${`${storyPrefix}__dummy-content-block`}>
+          <h5>Section</h5>
+          <cds-text-input
+            label="Input A"
+            id="tearsheet-story-text-input-a"
+            class="${storyPrefix}text-input"
+          ></cds-text-input>
+          <cds-text-input
+            label="Input B"
+            id="tearsheet-story-text-input-b"
+            class="${storyPrefix}text-input"
+          ></cds-text-input>
+        </div>
+      `;
+        case 2:
+            return html ` <style>
+          ${styles}
+        </style>
+        <div class=${`${storyPrefix}__dummy-content-block`}>
+          <h5>Section</h5>
+          <div class="${storyPrefix}text-inputs">
+            <cds-text-input
+              label="Input A"
+              id="tearsheet-story-text-input-a"
+            ></cds-text-input>
+            <cds-text-input
+              label="Input B"
+              id="tearsheet-story-text-input-b"
+            ></cds-text-input>
+          </div>
+          <div class="${storyPrefix}text-inputs">
+            <cds-text-input
+              label="Input C"
+              id="tearsheet-story-text-input-c"
+            ></cds-text-input>
+            <cds-text-input
+              label="Input D"
+              id="tearsheet-story-text-input-d"
+            ></cds-text-input>
+          </div>
+          <div class="${storyPrefix}textarea-container">
+            <cds-textarea
+              label="Notes"
+              value="This is a text area"
+            ></cds-textarea>
+            <cds-textarea
+              label="Notes"
+              value="This is a text area"
+            ></cds-textarea>
+            <cds-textarea
+              label="Notes"
+              value="This is a text area"
+            ></cds-textarea>
+          </div>
+        </div>`;
+        default:
+            return null;
+    }
+};
+const getLabel = (index) => {
+    switch (index) {
+        case 1:
+            return html `<span slot="label">Optional label for context</span>`;
+        case 2:
+            return html `<span slot="label"
+        >A longer label giving a bit more context
+      </span>`;
+        default:
+            return null;
+    }
+};
+const getActionToolbarItems = (index) => {
+    switch (index) {
+        case 1:
+            return html `<cds-dropdown slot="header-actions" value="option 1">
+        ${['option 1', 'option 2', 'option 3', 'option 4'].map((option) => html ` <cds-dropdown-item value="${option}"
+              >${option}</cds-dropdown-item
+            >`)}
+      </cds-dropdown>`;
+        case 2:
+            return html `
+        <cds-button
+          slot="header-actions"
+          kind=${BUTTON_KIND.SECONDARY}
+          size="sm"
+          style="width: initial"
+        >
+          Secondary
+        </cds-button>
+        <cds-button
+          slot="header-actions"
+          kind=${BUTTON_KIND.PRIMARY}
+          size="sm"
+          style="width: initial"
+        >
+          Primary
+        </cds-button>
+      `;
+        default:
+            return null;
+    }
+};
+const toActions = (kinds) => {
+    return kinds === null || kinds === void 0 ? void 0 : kinds.map((kind) => {
+        return html `<cds-button
+      key=${kind}
+      slot="actions"
+      kind=${kind}
+      @click=${kind === 'ghost' && cancelButton}
+    >
+      ${kind.charAt(0).toUpperCase() + kind.slice(1)}
+    </cds-button>`;
+    });
+};
+// TODO: There are problems switching this
+const getActionItems = (index) => {
+    switch (index) {
+        case 1:
+            return toActions([BUTTON_KIND.PRIMARY]);
+        case 2:
+            return toActions([BUTTON_KIND.GHOST, BUTTON_KIND.PRIMARY]);
+        case 3:
+            return toActions([BUTTON_KIND.DANGER, BUTTON_KIND.PRIMARY]);
+        case 4:
+            return toActions([
+                BUTTON_KIND.GHOST,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 5:
+            return toActions([
+                BUTTON_KIND.DANGER,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 6:
+            return toActions([
+                BUTTON_KIND.GHOST,
+                BUTTON_KIND.TERTIARY,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 7:
+            return toActions([
+                BUTTON_KIND.DANGER,
+                BUTTON_KIND.TERTIARY,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 8:
+            return toActions([
+                BUTTON_KIND.GHOST,
+                BUTTON_KIND.DANGER,
+                BUTTON_KIND.TERTIARY,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        default:
+            return null;
+    }
+};
+const getNavigation = (index) => {
+    switch (index) {
+        case 1:
+            return html ` <div
+        className="tearsheet-stories__tabs"
+        slot="header-navigation"
+      >
+        <cds-tabs value="1">
+          <cds-tab value="1">Tab 1</cds-tab>
+          <cds-tab value="2">Tab 2</cds-tab>
+          <cds-tab value="3">Tab 3</cds-tab>
+          <cds-tab value="4">Tab 4</cds-tab>
+        </cds-tabs>
+      </div>`;
+        default:
+            return null;
+    }
+};
+const getSlug = (index) => {
+    switch (index) {
+        case 1:
+            return html `<cds-slug size="xs" alignment="bottom-right">
+        <div slot="body-text">
+          <p class="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p class="secondary bold">Confidence score</p>
+          <!-- //cspell: disable -->
+          <p class="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <!-- //cspell: enable -->
+          <hr />
+          <p class="secondary">Model type</p>
+          <p class="bold">Foundation model</p>
+        </div>
+      </cds-slug>`;
+        default:
+            return null;
+    }
+};
+
+export { getActionItems, getActionToolbarItems, getContent, getInfluencer, getLabel, getNavigation, getSlug, influencers };
+//# sourceMappingURL=utils.js.map

package/es/components/tearsheet/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/tearsheet/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAgBH,MAAM,WAAW,GAAG,mBAAmB;AACvC,MAAM,YAAY,GAAG,MAAK;;AACxB,IAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,aAAa,CAAC,CAAG,EAAA,MAAM,CAAY,UAAA,CAAA,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,eAAe,CAAC,MAAM,CAAC;AACxE,CAAC;AAEY,MAAA,WAAW,GAAG;AACzB,IAAA,eAAe,EAAE,CAAC;AAClB,IAAA,mBAAmB,EAAE,CAAC;AACtB,IAAA,qBAAqB,EAAE,CAAC;;AAGb,MAAA,aAAa,GAAG,CAAC,KAAK,KAAI;IACrC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;AAED,cAAA,EAAA,CAAA,EAAG,WAAW,CAAuB,qBAAA,CAAA;;;aAGxC;AACT,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGD,cAAA,EAAA,CAAA,EAAG,WAAW,CAAuB,qBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0BrB;AAC5B,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,UAAU,GAAG,CAAC,KAAK,KAAI;IAClC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;YAEL,MAAM;;AAEG,mBAAA,EAAA,CAAA,EAAG,WAAW,CAAuB,qBAAA,CAAA,CAAA;;;;;qBAKrC,WAAW,CAAA;;;;;qBAKX,WAAW,CAAA;;;OAGzB;AACH,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;YACL,MAAM;;AAEG,mBAAA,EAAA,CAAA,EAAG,WAAW,CAAuB,qBAAA,CAAA,CAAA;;wBAElC,WAAW,CAAA;;;;;;;;;;wBAUX,WAAW,CAAA;;;;;;;;;;wBAUX,WAAW,CAAA;;;;;;;;;;;;;;eAcpB;AACX,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,QAAQ,GAAG,CAAC,KAAK,KAAI;IAChC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;YACJ,OAAO,IAAI,CAAA,CAAA,oDAAA,CAAsD;AACnE,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;cAEH;AACV,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,qBAAqB,GAAG,CAAC,KAAK,KAAI;IAC7C,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;AACP,QAAA,EAAA,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,GAAG,CACpD,CAAC,MAAM,KACL,IAAI,CAAA,8BAA8B,MAAM,CAAA;iBACnC,MAAM,CAAA;cACT,CACL;sBACa;AAClB,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;;AAGA,eAAA,EAAA,WAAW,CAAC,SAAS;;;;;;;;AAQrB,eAAA,EAAA,WAAW,CAAC,OAAO;;;;;;OAM7B;AACH,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;IACzC,OAAO,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,KAAI;AACzB,QAAA,OAAO,IAAI,CAAA,CAAA;YACH,IAAI;;aAEH,IAAI;eACF,IAAI,KAAK,OAAO,IAAI,YAAY;;AAEvC,MAAA,EAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;kBAClC;AAChB,KAAC,CAAC;AACJ,CAAC;AAED;AACa,MAAA,cAAc,GAAG,CAAC,KAAK,KAAI;IACtC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;YACJ,OAAO,SAAS,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACzC,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;AAC5D,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC,CAAC,WAAW,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;AAC7D,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC;AACf,gBAAA,WAAW,CAAC,KAAK;AACjB,gBAAA,WAAW,CAAC,SAAS;AACrB,gBAAA,WAAW,CAAC,OAAO;AACpB,aAAA,CAAC;AACJ,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC;AACf,gBAAA,WAAW,CAAC,MAAM;AAClB,gBAAA,WAAW,CAAC,SAAS;AACrB,gBAAA,WAAW,CAAC,OAAO;AACpB,aAAA,CAAC;AACJ,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC;AACf,gBAAA,WAAW,CAAC,KAAK;AACjB,gBAAA,WAAW,CAAC,QAAQ;AACpB,gBAAA,WAAW,CAAC,SAAS;AACrB,gBAAA,WAAW,CAAC,OAAO;AACpB,aAAA,CAAC;AACJ,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC;AACf,gBAAA,WAAW,CAAC,MAAM;AAClB,gBAAA,WAAW,CAAC,QAAQ;AACpB,gBAAA,WAAW,CAAC,SAAS;AACrB,gBAAA,WAAW,CAAC,OAAO;AACpB,aAAA,CAAC;AACJ,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,SAAS,CAAC;AACf,gBAAA,WAAW,CAAC,KAAK;AACjB,gBAAA,WAAW,CAAC,MAAM;AAClB,gBAAA,WAAW,CAAC,QAAQ;AACpB,gBAAA,WAAW,CAAC,SAAS;AACrB,gBAAA,WAAW,CAAC,OAAO;AACpB,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,aAAa,GAAG,CAAC,KAAK,KAAI;IACrC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;aAUJ;AACT,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,OAAO,GAAG,CAAC,KAAK,KAAI;IAC/B,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;kBAeC;AACd,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;;;;"}

package/es/components/user-avatar/user-avatar.test.d.ts

@@ -0,0 +1 @@
+import './index';

package/es/components/user-avatar/user-avatar.test.js

@@ -0,0 +1,128 @@
+/**
+ * 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 { vi, describe, it, expect } from 'vitest';
+import { fixture, html } from '@open-wc/testing';
+import './user-avatar.js';
+import { prefix } from '../../globals/settings.js';
+
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+vi.mock('./_story-assets/headshot.jpg', () => 'mock-image-path');
+const blockClass = `${prefix}--user-avatar`;
+const defaultProps = {
+    tooltipText: 'TW, Thomas J. Watson user profile',
+    name: 'Thomas J. Watson',
+    backgroundColor: 'order-1-cyan',
+};
+const template = (props = defaultProps) => html `
+  <c4p-user-avatar
+    tooltip-text=${props.tooltipText}
+    name=${props.name}
+    background-color=${props.backgroundColor}
+    size=${props.size}
+    image=${props.image}
+    imageDescription=${props.imageDescription}
+  >
+  </c4p-user-avatar>
+`;
+const iconTemplate = (props = defaultProps) => html `
+  <c4p-user-avatar
+    tooltip-text=${props.tooltipText}
+    name=${props.name}
+    background-color=${props.backgroundColor}
+    size=${props.size}
+    image=${props.image}
+    imageDescription=${props.imageDescription}
+  >
+    <svg slot="rendericon" data-test-id="mock-icon" viewBox="0 0 32 32">
+      <circle cx="16" cy="10" r="6"></circle>
+      <path d="M16 18C10 18 4 22 4 26V28H28V26C28 22 22 18 16 18Z"></path>
+    </svg>
+  </c4p-user-avatar>
+`;
+describe('c4p-user-avatar', () => {
+    it('should render a user avatar', async () => {
+        const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
+        expect(userAvatar).toBeDefined();
+    });
+    it('should return a circle with background color', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
+        expect(userAvatar).toBeDefined();
+        expect(userAvatar.getAttribute('background-color')).toBe('order-1-cyan');
+        const bgClass = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}--order-1-cyan`)) === null || _b === void 0 ? void 0 : _b[0];
+        expect(bgClass).toBeDefined();
+    });
+    it('should return a circle with updated background color', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { backgroundColor: 'order-3-green' })));
+        expect(userAvatar).toBeDefined();
+        expect(userAvatar.getAttribute('background-color')).toBe('order-3-green');
+        const bgClass = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}--order-3-green`)) === null || _b === void 0 ? void 0 : _b[0];
+        expect(bgClass).toBeDefined();
+    });
+    it('applies className to the containing node', async () => {
+        const customClass = 'test';
+        const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
+        userAvatar.classList.add(customClass);
+        expect(userAvatar.getAttribute('class')).to.include(customClass);
+    });
+    it('should return appropriately size circle based on size prop', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { size: 'md' })));
+        const hasSizeClass = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}--md`)) === null || _b === void 0 ? void 0 : _b[0];
+        // expect the element is present
+        expect(hasSizeClass).toBeDefined();
+    });
+    it('should render the initials when passed the name prop', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
+        const initials = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
+        expect(initials).to.exist;
+        expect(initials === null || initials === void 0 ? void 0 : initials.textContent).to.equal('TW');
+    });
+    it('should render the initials when simply passing two names to the name prop', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { name: 'DN' })));
+        const initials = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
+        expect(initials).to.exist;
+        expect(initials === null || initials === void 0 ? void 0 : initials.textContent).to.equal('DN');
+    });
+    it('should render a tooltip if the tooltipText is supplied', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign({}, defaultProps)));
+        const tooltipElement = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}__tooltip`)) === null || _b === void 0 ? void 0 : _b[0];
+        expect(tooltipElement).to.exist;
+    });
+    it('should render a tooltip if the tooltipText is supplied', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { tooltipText: '' })));
+        const tooltipElement = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${blockClass}__tooltip`)) === null || _b === void 0 ? void 0 : _b[0];
+        expect(tooltipElement).to.not.exist;
+    });
+    it('should return an icon for the avatar image', async () => {
+        var _a;
+        const userAvatar = await fixture(iconTemplate(Object.assign(Object.assign({}, defaultProps), { size: 'md' })));
+        const renderedSVG = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="rendericon"]');
+        expect(renderedSVG).to.exist;
+        const assignedNodes = renderedSVG.assignedNodes({ flatten: true });
+        const svg = assignedNodes.find((node) => node.nodeName.toLowerCase() === 'svg');
+        expect(svg).to.exist;
+    });
+    it('should render image for the avatar image', async () => {
+        var _a, _b;
+        const userAvatar = await fixture(template(Object.assign(Object.assign({}, defaultProps), { image: 'mock-image-path', imageDescription: 'test alt text' })));
+        const imagePath = (_b = (_a = userAvatar === null || userAvatar === void 0 ? void 0 : userAvatar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img')) === null || _b === void 0 ? void 0 : _b.getAttribute('src');
+        expect(typeof imagePath).toBe('string');
+    });
+});
+//# sourceMappingURL=user-avatar.test.js.map

package/es/components/user-avatar/user-avatar.test.js.map

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

package/es/index.d.ts

@@ -8,5 +8,6 @@
  */
 export { default as CDSSidePanel } from './components/side-panel/side-panel';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet';
+export { default as CDSFullPageError } from './components/full-page-error/full-page-error';
 export { default as CDSAboutModal } from './components/about-modal/about-modal';
 export { default as CDSUseravatar } from './components/user-avatar/user-avatar';

package/es/index.js

@@ -7,6 +7,7 @@
 
 export { default as CDSSidePanel } from './components/side-panel/side-panel.js';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet.js';
+export { default as CDSFullPageError } from './components/full-page-error/full-page-error.js';
 export { default as CDSAboutModal } from './components/about-modal/about-modal.js';
 export { default as CDSUseravatar } from './components/user-avatar/user-avatar.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

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

package/es/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.12.0-rc.0";
+var version = "0.13.0-rc.0";
 var packageJson = {
 	version: version};