chore(leaving-ibm): introduce supplemental component

packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts

@@ -13,6 +13,7 @@ import { LeavingIBMLabels, Translation } from '../../internal/vendor/@carbon/ibm
 import './leaving-ibm-modal';
 import './leaving-ibm-modal-body';
 import './leaving-ibm-modal-heading';
+import './leaving-ibm-modal-supplemental';
 import ModalRenderMixin from '../../globals/mixins/modal-render';
 import 'carbon-web-components/es/components/modal/modal-header';
 import 'carbon-web-components/es/components/modal/modal-close-button';
@@ -100,7 +101,7 @@ class DDSLeavingIbmComposite extends ModalRenderMixin(LitElement) {
         </bx-modal-header>
         <dds-leaving-ibm-modal-body href="${href}">
           <p>${leavingIbmCopy?.LEAVING002}</p>
-          <span slot="supplemental">${leavingIbmCopy?.LEAVING003}</span>
+          <dds-leaving-ibm-modal-supplemental>${leavingIbmCopy?.LEAVING003}</dds-leaving-ibm-modal-supplemental>
         </dds-leaving-ibm-modal-body>
         <bx-modal-footer>
           <bx-btn data-autoid="${ddsPrefix}--leaving-ibm-cta" href="${href}" kind="primary">${leavingIbmButtonLabel}</bx-btn>

packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts

@@ -10,12 +10,10 @@
 import { customElement, html, property } from 'lit-element';
 import BXModalBody from 'carbon-web-components/es/components/modal/modal-body.js';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
-import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import 'carbon-web-components/es/components/link/link';
 import styles from './leaving-ibm.scss';
 
-const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
 /**
@@ -35,9 +33,7 @@ class DDSLeavingIbmModalBody extends BXModalBody {
     const { href } = this;
     return html`
       <p><slot></slot></p>
-      <p class="${prefix}--leaving-ibm__text">
-        <slot name="supplemental"></slot>
-      </p>
+      <slot name="supplemental"></slot>
       <bx-link href="${ifNonNull(href)}">${!href ? href : new URL(href).hostname}</bx-link>
     `;
   }

packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021
+ *
+ * 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 { html, property, customElement, LitElement } from 'lit-element';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import styles from './leaving-ibm.scss';
+
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * The supplemental content of leaving IBM modal.
+ *
+ * @element dds-leaving-ibm-modal-supplemental
+ */
+@customElement(`${ddsPrefix}-leaving-ibm-modal-supplemental`)
+class DDSLeavingIbmModalSupplemental extends LitElement {
+  /**
+   * The shadow slot this supplemental content should be in.
+   */
+  @property({ reflect: true })
+  slot = 'supplemental';
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles;
+}
+
+export default DDSLeavingIbmModalSupplemental;

packages/web-components/src/components/leaving-ibm/leaving-ibm.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020
+// Copyright IBM Corp. 2020, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -29,10 +29,11 @@
   @extend :host(#{$prefix}-modal-body);
 
   padding-right: 20%;
+}
 
-  .#{$prefix}--leaving-ibm__text {
-    margin-top: $spacing-07;
-    color: $text-02;
-    @include carbon--type-style('label-01');
-  }
+:host(#{$dds-prefix}-leaving-ibm-modal-supplemental) {
+  display: block;
+  margin-top: $spacing-07;
+  color: $text-02;
+  @include carbon--type-style('label-01');
 }