feat(pricing-table): support combined checkmark with copy (#10550)

### Related Ticket(s) https://jsw.ibm.com/browse/ADCMS-3264 #10499 ### Description Allows a user of the pricing table to opt in to their slotted text to be shown alongsizde an icon within a pricing table cell. ### Changelog **New** - `dds-pricing-table-cell` now supports an `icon-text` attribute that when set will signal slotted text nodes to display next to the selected icon. If the icon attribute is not set, no change. ### Testing - [ ] Search for "Pricing Table" in Storybook Story - [ ] Check the "Show text with icon" checkbox - [ ] Verify that the slotted text displays next to the icon.
carbon-design-system · Jun 23, 2023 · 795384a · 795384a
1 parent e3df01e
commit 795384a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/packages/styles/scss/components/pricing-table/_pricing-table.scss b/packages/styles/scss/components/pricing-table/_pricing-table.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -152,6 +152,17 @@
       display: flex;
       justify-content: space-between;
     }
+
+    .#{$prefix}--pricing-table-cell-content {
+      display: flex;
+      align-items: start;
+      line-height: 1.25rem;
+
+      svg {
+        margin-inline-end: $spacing-03;
+        flex-shrink: 0;
+      }
+    }
   }
 
   .#{$prefix}--pricing-table-header-cell,

diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -250,6 +250,12 @@
       color: $support-02;
     }
   }
+
+  .#{$prefix}--structured-list-cell-icon-text,
+  :host(#{$dds-prefix}-structured-list-cell)
+    .#{$prefix}--structured-list-cell-icon-text {
+    color: $text-02;
+  }
 }
 
 @include exports('structured-list') {

diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts
@@ -137,7 +137,10 @@ const renderHead = (
   `;
 };
 
-const renderBodyCell = (type: CELL_TYPES): TemplateResult => {
+const renderBodyCell = (
+  type: CELL_TYPES,
+  iconText: string = ''
+): TemplateResult => {
   switch (type) {
     case CELL_TYPES.TEXT:
       return html`
@@ -153,7 +156,7 @@ const renderBodyCell = (type: CELL_TYPES): TemplateResult => {
     case CELL_TYPES.ICON:
       return html`
         <dds-pricing-table-cell icon="checkmark">
-          Cell with icon
+          ${iconText}
           <dds-pricing-table-cell-annotation>
             Sed quis neque ultrices, convallis augue non, scelerisque massa.
           </dds-pricing-table-cell-annotation>
@@ -174,7 +177,8 @@ const renderBodyRow = (
   columnCount: number,
   rowNum: number,
   cellType: CELL_TYPES,
-  rowHeaders: boolean = true
+  rowHeaders: boolean = true,
+  iconText: string = ''
 ): TemplateResult => html`
   <dds-pricing-table-row>
     ${(() => {
@@ -197,7 +201,7 @@ const renderBodyRow = (
         `,
       ];
       for (let i = 1; i < columnCount; i++) {
-        cells.push(renderBodyCell(cellType));
+        cells.push(renderBodyCell(cellType, iconText));
       }
       return cells;
     })()}
@@ -214,6 +218,7 @@ export const Default = (args) => {
     highlightLabel,
     columnCount,
     heading,
+    iconText,
   } = args?.PricingTable ?? {};
   return html`
     <style>
@@ -233,7 +238,7 @@ export const Default = (args) => {
       highlight-label="${highlightLabel}">
       ${renderHead(columnCount, heading)}
       <dds-pricing-table-body>
-        ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON)}
+        ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
         ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
         ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
       </dds-pricing-table-body>
@@ -251,6 +256,7 @@ export const WithoutRowHeaders = (args) => {
     highlightLabel,
     columnCount,
     heading,
+    iconText,
   } = args?.PricingTable ?? {};
   return html`
     <dds-pricing-table
@@ -262,7 +268,7 @@ export const WithoutRowHeaders = (args) => {
       highlight-label="${highlightLabel}">
       ${renderHead(columnCount, heading)}
       <dds-pricing-table-body>
-        ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, false)}
+        ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, false, iconText)}
         ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY, false)}
         ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT, false)}
       </dds-pricing-table-body>
@@ -286,6 +292,7 @@ export const WithSubheaders = (args) => {
     highlightCol,
     highlightLabel,
     heading,
+    iconText,
   } = args?.PricingTable ?? {};
   return html`
     <dds-pricing-table
@@ -298,17 +305,17 @@ export const WithSubheaders = (args) => {
       ${renderHead(columnCount, heading)}
       <dds-pricing-table-body>
         <dds-pricing-table-group title="Group 1">
-          ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON)}
+          ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
           ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
           ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
         </dds-pricing-table-group>
         <dds-pricing-table-group title="Group 2">
-          ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON)}
+          ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
           ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
           ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
         </dds-pricing-table-group>
         <dds-pricing-table-group title="Group 3">
-          ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON)}
+          ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
           ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
           ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
         </dds-pricing-table-group>
@@ -340,6 +347,7 @@ export default {
         colSpan2: textNullable('col-span-2', ''),
         colSpan3: textNullable('col-span-3', ''),
         colSpan4: textNullable('col-span-4', ''),
+        iconText: textNullable('icon-text', ''),
       }),
     },
   },

diff --git a/...ages/web-components/src/components/structured-list/__stories__/structured-list.stories.ts b/...ages/web-components/src/components/structured-list/__stories__/structured-list.stories.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -288,7 +288,6 @@ export const WithComplexContent = (args) => {
         </dds-structured-list-row>
         <dds-structured-list-row>
           <dds-structured-list-cell icon="checkmark">
-            Cell with icon
           </dds-structured-list-cell>
         </dds-structured-list-row>
         <dds-structured-list-row>

diff --git a/packages/web-components/src/components/structured-list/structured-list-cell.ts b/packages/web-components/src/components/structured-list/structured-list-cell.ts
@@ -16,7 +16,9 @@ import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utili
 import DDSStructuredListGroup from './structured-list-group';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+import settings from 'carbon-components/es/globals/js/settings';
 
+const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
 /**
@@ -55,7 +57,10 @@ class DDSStructuredListCell extends BXStructuredListCell {
   private _renderIcon() {
     const { icon, _iconsAllowed: iconMap } = this;
 
-    return html` ${iconMap[icon!.toLowerCase()].call()} `;
+    return html`${iconMap[icon!.toLowerCase()].call()}
+      <span class="${prefix}--structured-list-cell-icon-text">
+        <slot></slot>
+      </span>`;
   }
 
   private _renderTags() {