Add text-wrap to typographic elements (#2225)

* Add `text-wrap` to typographic elements

* Reduce scope of change to headings

* Remove `u-rescue-orphan` utility.

Author: tylersticka

.changeset/loud-paws-tease.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Improved text wrapping for headings and subheadings with `text-wrap`. Removes the `u-rescue-orphan` utility, which is now redundant.

src/base/_typography.scss

@@ -59,6 +59,7 @@ body {
   h#{$i} {
     @include headings.level($i);
     color: var(--theme-color-text-emphasis);
+    text-wrap: balance;
   }
 }
 

src/components/heading/heading.scss

@@ -140,6 +140,7 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16);
   font-weight: font-weight.$medium;
   line-height: line-height.$tight;
   max-inline-size: 100%;
+  text-wrap: balance;
 
   .c-heading--light & {
     font-weight: font-weight.$normal;

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

@@ -12,9 +12,3 @@
   content: '';
   display: 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,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import hiddenVisuallyDemo from './demo/hidden-visually.twig';
 import clearfixDemo from './demo/clearfix.twig';
-import rescueOrphanDemo from './demo/rescue-orphan.twig';
 
 <Meta title="Utilities/Display" />
 
@@ -31,11 +30,3 @@ The `u-clearfix` class forces a container to expand to fit floated children.
 <Canvas>
   <Story name="Clearfix">{clearfixDemo}</Story>
 </Canvas>
-
-## Rescue Orphan
-
-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="Rescue Orphan">{rescueOrphanDemo}</Story>
-</Canvas>