From 8d0eea31466202b018674008f041d5f0785e046e Mon Sep 17 00:00:00 2001
From: Putra Roeung Bonaccorsi <putra.roeung@gmail.com>
Date: Fri, 12 Nov 2021 20:01:41 -0500
Subject: [PATCH] feat(leadspace & button group): add print friendly styles
 (#7608)

### Related Ticket(s)

DDS Issue: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7413
HC JIRA Ticket: https://jsw.ibm.com/browse/HC-2297

### Description

- This PR adds print-friendly styles for the Button Group and Leadspace components and variations based on the design specs (see below).
  - Lead space: https://ibm.ent.box.com/file/879963299367
  - Button group: https://ibm.ent.box.com/file/879964531443


### Changelog

**Changed**

-  Add `href` prop to `renderInner()` event so that we can showcase the button `href` for print mode type and hide it on normal media types.

### Expected designs
![Screen Shot 2021-11-05 at 12 24 14 PM](https://user-images.githubusercontent.com/1815714/140564375-cc470ed9-b5db-44ef-843b-57dbc253c2bc.png)
![Screen Shot 2021-11-05 at 12 24 23 PM](https://user-images.githubusercontent.com/1815714/140564380-1f621e5a-8faf-46b7-805c-a4c4750a0140.png)

### Testing
- Visit the "Button group" and "Leadspace" components within the Storybook preview.
- Inspect the page using Chrome DevTools and open the rendering tab.
- Scroll down to the Emulate CSS Media Type and selected "Print"
- From here you should be able to view the print style and compare it with the design specs to ensure the styling are looking as expected.


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../components/buttongroup/_buttongroup.scss  | 41 +++++++++++++++++++
 .../scss/components/leadspace/_leadspace.scss | 21 ++++++++++
 .../src/components/button/button.ts           |  1 +
 .../tests/snapshots/dds-button-group.md       |  9 ++++
 4 files changed, 72 insertions(+)

diff --git a/packages/styles/scss/components/buttongroup/_buttongroup.scss b/packages/styles/scss/components/buttongroup/_buttongroup.scss
index 3b80e3bd841..6e6ac66ce48 100644
--- a/packages/styles/scss/components/buttongroup/_buttongroup.scss
+++ b/packages/styles/scss/components/buttongroup/_buttongroup.scss
@@ -30,6 +30,10 @@
         1fr
       );
     }
+
+    @media print {
+      display: block;
+    }
   }
 
   .#{$prefix}--buttongroup-item,
@@ -38,6 +42,12 @@
     max-width: carbon--mini-units(40);
     min-width: 0;
 
+    @media print {
+      max-width: carbon--rem(640px);
+      margin-bottom: $spacing-05;
+      display: block;
+    }
+
     .#{$prefix}--btn {
       font-size: 1rem;
       position: relative;
@@ -47,10 +57,37 @@
       transition: all $duration--fast-01 motion(entrance, productive), width 0s,
         height 0s;
 
+      @media print {
+        background: $white-0;
+        border: carbon--rem(1px) solid $gray-100;
+        color: $gray-100;
+        font-weight: 600;
+        display: block;
+        max-width: inherit;
+      }
+
       .#{$prefix}--btn__icon {
         width: auto;
         height: auto;
       }
+
+      .#{$prefix}--btn--hidden {
+        display: none;
+        visibility: hidden;
+
+        @media print {
+          display: inline-block;
+          visibility: visible;
+          font-weight: 200;
+          color: $gray-100;
+
+          span {
+            font-weight: 600;
+            margin-left: calc(-1 * #{$spacing-02});
+            margin-right: $spacing-02;
+          }
+        }
+      }
     }
 
     .#{$prefix}--btn--multiline {
@@ -65,6 +102,10 @@
       top: 50%;
       transform: translateY(-50%);
       flex-shrink: 0;
+
+      @media print {
+        fill: $gray-100;
+      }
     }
   }
 
diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss
index 02c051d7e1b..fc6911d596e 100644
--- a/packages/styles/scss/components/leadspace/_leadspace.scss
+++ b/packages/styles/scss/components/leadspace/_leadspace.scss
@@ -24,6 +24,10 @@ $btn-min-width: 26;
   .#{$prefix}--leadspace__section {
     display: flex;
     background-color: $ui-background;
+
+    @media print {
+      background-color: $white-0;
+    }
   }
 
   .#{$prefix}--leadspace__gradient__stops stop {
@@ -38,6 +42,10 @@ $btn-min-width: 26;
   .#{$prefix}--leadspace__title,
   .#{$prefix}--leadspace__desc {
     color: $text-01;
+
+    @media print {
+      color: $gray-100;
+    }
   }
 
   .#{$prefix}--leadspace--centered .#{$prefix}--leadspace__desc {
@@ -101,6 +109,10 @@ $btn-min-width: 26;
 
       @include carbon--breakpoint(md) {
         display: flex;
+
+        @media print {
+          display: block;
+        }
       }
     }
 
@@ -315,6 +327,10 @@ $btn-min-width: 26;
       width: 100%;
       height: 100%;
       padding-bottom: 0;
+
+      @media print {
+        display: none;
+      }
     }
 
     .#{$prefix}--leadspace__gradient__rect {
@@ -535,6 +551,11 @@ $btn-min-width: 26;
         display: block;
       }
     }
+
+    @media print {
+      display: none;
+      visibility: hidden;
+    }
   }
 }
 
diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index e94d230ed2b..c7b3d747813 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -94,6 +94,7 @@ class DDSButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
     const { _handleSlotChange: handleSlotChange } = this;
     return html`
       <slot @slotchange="${handleSlotChange}"></slot>
+      <p class="${prefix}--btn--hidden" aria-hidden="true"><span>:</span> ${this.href}</p>
       <slot name="icon" @slotchange="${handleSlotChange}"></slot>
     `;
   }
diff --git a/packages/web-components/tests/snapshots/dds-button-group.md b/packages/web-components/tests/snapshots/dds-button-group.md
index 5724ba0f766..eb5d395fc9d 100644
--- a/packages/web-components/tests/snapshots/dds-button-group.md
+++ b/packages/web-components/tests/snapshots/dds-button-group.md
@@ -20,6 +20,15 @@
 >
   <slot>
   </slot>
+  <p
+    aria-hidden="true"
+    class="bx--btn--hidden"
+  >
+    <span>
+      :
+    </span>
+    https://example.com
+  </p>
   <slot name="icon">
   </slot>
 </a>