From c818b5afd4b95953e54e1b30424e3e37151c0143 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Thu, 7 Jan 2021 22:48:20 +0900 Subject: [PATCH 1/2] chore(leaving-ibm): introduce supplemental component Introduces `` for the supplemental content so our strategy of supplying content aligns to other components. Refs #4839. --- .../leaving-ibm/leaving-ibm-composite.ts | 4 +- .../leaving-ibm/leaving-ibm-modal-body.ts | 8 +--- .../leaving-ibm-modal-supplemental.ts | 38 +++++++++++++++++++ .../components/leaving-ibm/leaving-ibm.scss | 13 ++++--- 4 files changed, 49 insertions(+), 14 deletions(-) create mode 100644 packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts index cfa5f297a6b..00a81dd82f8 100644 --- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts +++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts @@ -1,7 +1,7 @@ /** * @license * - * 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. @@ -99,7 +99,7 @@ class DDSLeavingIbmComposite extends ModalRenderMixin(LitElement) {

${leavingIbmCopy?.LEAVING002}

- ${leavingIbmCopy?.LEAVING003} + ${leavingIbmCopy?.LEAVING003} ${leavingIbmButtonLabel} diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts index 5ed263aee2c..0284076b4b9 100644 --- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts +++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts @@ -1,7 +1,7 @@ /** * @license * - * 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. @@ -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`

-

- -

+ ${new URL(href).hostname} `; } diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts new file mode 100644 index 00000000000..ea8059d0a11 --- /dev/null +++ b/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` + + `; + } + + // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; +} + +export default DDSLeavingIbmModalSupplemental; diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss b/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss index c8c47bd09d3..73127cdaf20 100644 --- a/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss +++ b/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'); } From 1f261e93e4247356daf51196d7f3b63e4c3b732b Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Fri, 8 Jan 2021 00:17:10 +0900 Subject: [PATCH 2/2] fix(leaving-ibm-modal): fix missing import --- .../src/components/leaving-ibm/leaving-ibm-composite.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts index 00a81dd82f8..2b81ee96e15 100644 --- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts +++ b/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';