feat(toggletip): add option for alternate icon

packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx

@@ -47,6 +47,20 @@ import '@carbon/web-components/es/components/button/index.js';
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-toggletip open>`) and `false` means not setting the attribute (e.g.
-`<cds-toggletip>` without `open` attribute).
+`<cds-toggletip>` without `open` attribute).<br/>
+Use `hasCustomIcon` for including custom icons.
+
+```html
+<cds-toggletip hasCustomIcon>
+  Toggletip label
+  <span slot="icon"> ${Information16({ id: 'trigger' })} </span>
+  <p slot="body-text">
+    Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+  </p>
+  <cds-link slot="actions">Test</cds-link>
+  <cds-button slot="actions">Button</cds-button>
+</cds-toggletip>
+```
 
 <ArgsTable of="cds-toggletip" />

packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts

@@ -16,6 +16,10 @@ import './toggletip';
 import '../button';
 import { POPOVER_ALIGNMENT } from '../popover/defs';
 import storyDocs from './toggletip-story.mdx';
+import Information16 from '@carbon/icons/lib/information/16';
+import View16 from '@carbon/icons/lib/view/16';
+import Video16 from '@carbon/icons/lib/video/16';
+import User16 from '@carbon/icons/lib/user/16';
 
 const tooltipAlignments = {
   [`top`]: POPOVER_ALIGNMENT.TOP,
@@ -31,13 +35,35 @@ const tooltipAlignments = {
   [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
   [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
 };
-
+const iconList = {
+  [`information`]: `Information16`,
+  [`view`]: `View16`,
+  [`user`]: `User16`,
+  [`video`]: `Video16`,
+};
 export const Default = (args) => {
-  const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {};
+  const { alignment, icon, bodyText } = args?.[`${prefix}-toggletip`] ?? {};
+  let iconVal;
+  switch (icon) {
+    case 'Information16':
+      iconVal = Information16;
+      break;
+    case 'View16':
+      iconVal = View16;
+      break;
+    case 'Video16':
+      iconVal = Video16;
+      break;
+    case 'User16':
+      iconVal = User16;
+      break;
+    default:
+      iconVal = Information16;
+  }
   return html`
-    <cds-toggletip alignment="${ifDefined(alignment)}">
+    <cds-toggletip alignment="${ifDefined(alignment)}" hasCustomIcon>
       Toggletip label
-
+      <span slot="icon"> ${iconVal({ id: 'trigger' })} </span>
       <p slot="body-text">${bodyText}</p>
       <cds-link slot="actions">Test</cds-link>
       <cds-button slot="actions">Button</cds-button>
@@ -53,6 +79,7 @@ Default.parameters = {
         tooltipAlignments,
         POPOVER_ALIGNMENT.BOTTOM
       ),
+      icon: select('Toggletip icon', iconList, Information16),
       bodyText: textNullable(
         'Toggletip content (bodyText)',
         `Lorem ipsum dolor sit amet, di os consectetur adipiscing elit,

packages/carbon-web-components/src/components/toggle-tip/toggletip.scss

@@ -28,7 +28,6 @@
   justify-content: center;
 
   outline: none;
-
   .#{$prefix}--popover-caret {
     background-color: $background-inverse;
   }
@@ -44,3 +43,11 @@
     @include declaration('popover-text-color', $text-inverse);
   }
 }
+
+:host(#{$prefix}-toggletip) {
+  slot[name='icon'] {
+    color: var(--cds-icon-secondary, #525252);
+    display: inline-block;
+    height: 16px;
+  }
+}

packages/carbon-web-components/src/components/toggle-tip/toggletip.ts

@@ -48,6 +48,11 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
    */
   @property({ type: Boolean, reflect: true })
   open = false;
+  /**
+   * Set whether toggletip is open
+   */
+  @property({ type: Boolean })
+  hasCustomIcon = false;
 
   /**
    * Handles `slotchange` event.
@@ -96,12 +101,15 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
   };
 
   protected _renderTooltipButton = () => {
+    const { hasCustomIcon } = this;
     return html`
       <button
         aria-controls="${this.id}"
         class="${prefix}--toggletip-button"
         @click=${this._handleClick}>
-        ${Information16({ id: 'trigger' })}
+        ${hasCustomIcon
+          ? html` <slot name="icon"></slot> `
+          : html`${Information16({ id: 'trigger' })}`}
       </button>
     `;
   };
@@ -143,6 +151,11 @@ class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
       ${this._renderTooltipButton()} ${this._renderTooltipContent()}
     `;
   };
+  firstUpdated() {
+    if (this.hasAttribute('hasCustomIcon')) {
+      this.hasCustomIcon = true;
+    }
+  }
 
   updated() {
     if (this.autoalign && this.open) {