Replace u-inline-block with u-rescue-orphan, include text-decoration inheritance (#1976)

Author: tylersticka

.changeset/strange-toys-bake.md

@@ -2,4 +2,4 @@
 '@cloudfour/patterns': minor
 ---
 
-Add `u-inline-block` utility
+Add `u-rescue-orphan` utility to fine-tune where text breaks occur as space allows

src/utilities/display/demo/inline-block.twig

@@ -0,0 +1,5 @@
+<div class="u-border-md u-pad-1" style="max-width: 11em;">
+  <a href="#">
+    Look how the last two words <span class="u-rescue-orphan">stay together</span>
+  </a>
+</div>

src/utilities/display/demo/rescue-orphan.twig

@@ -13,7 +13,8 @@
   display: block;
 }
 
-/// Set `display` to `inline-block`
-.u-inline-block {
+/// Attempt to keep chunks of text together as space allows
+.u-rescue-orphan {
   display: inline-block;
+  text-decoration: inherit;
 }

src/utilities/display/display.scss

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import hiddenVisuallyDemo from './demo/hidden-visually.twig';
 import clearfixDemo from './demo/clearfix.twig';
-import inlineBlockDemo from './demo/inline-block.twig';
+import rescueOrphanDemo from './demo/rescue-orphan.twig';
 
 <Meta title="Utilities/Display" />
 
@@ -32,10 +32,10 @@ The `u-clearfix` class forces a container to expand to fit floated children.
   <Story name="Clearfix">{clearfixDemo}</Story>
 </Canvas>
 
-## Inline Block
+## Rescue Orphan
 
-The `u-inline-block` class sets the `display` property to `inline-block`. This can be used to discourage inline elements from breaking across multiple lines.
+The `u-rescue-orphan` class can wrap the last few words of a chunk of text, attempting to keep them together unless space limitations force a break. This can help reduce the chance of [a typographic orphan](https://en.wikipedia.org/wiki/Widows_and_orphans) in some situations.
 
 <Canvas>
-  <Story name="Inline Block">{inlineBlockDemo}</Story>
+  <Story name="Rescue Orphan">{rescueOrphanDemo}</Story>
 </Canvas>