feat(print): add 3 new print utilities

Deprecate `.visible-print`

BREAKING CHANGE

[#76802876]

Signed-off-by: Geoff Pleiss <gpleiss@pivotal.io>

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Latest Changes
 
+.visible-print -> .visible-print-block
+
 .panel-space -> .panel-alt
 .panel-stopped -> .panel-off
 .panel-crashed -> .panel-danger

src/pivotal-ui/components/utils.css.scss

@@ -37,14 +37,34 @@ categories:
   - Utilities
 ---
 
-### Printing
-Try printing this page to see these styles in action.
+Similar to the regular responsive classes, use these for toggling content for print.
+
+<table class="styleguide">
+  <thead>
+    <tr>
+      <th>Classes</th>
+      <th>Browser</th>
+      <th>Print</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>
+        <code>.visible-print-block</code><br>
+        <code>.visible-print-inline</code><br>
+        <code>.visible-print-inline-block</code>
+      </th>
+      <td class="is-hidden">Hidden</td>
+      <td class="is-visible">Visible</td>
+    </tr>
+    <tr>
+      <th><code>.hidden-print</code></th>
+      <td class="is-visible">Visible</td>
+      <td class="is-hidden">Hidden</td>
+    </tr>
+  </tbody>
+</table>
 
-```haml_example_table
-%h3.visible-print This will only show when printed
-
-%h3.hidden-print This will not show when printed
-```
 
 */
 

src/style_guide/style_guide.scss

@@ -480,3 +480,17 @@ background-position: 0 50%;
   }
 }
 
+td.is-visible, td.is-hidden {
+  text-align: center;
+  vertical-align: middle;
+}
+
+td.is-visible {
+  color: #468847;
+  background-color: #dff0d8 !important;
+}
+
+td.is-hidden {
+  color: #ccc;
+  background-color: #f9f9f9 !important;
+}