feat(leadspace & button group): add print friendly styles (#7608)

### Related Ticket(s)

DDS Issue: #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) -->

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;
+      }
     }
   }
 

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;
+    }
   }
 }
 

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>
     `;
   }

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>