Merge pull request #764 from texastribune/text-balance

Add text balance helper ⚖️

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "conventionalCommits.scopes": [
         "icons",
-        "deps"
+        "deps",
+        "type"
     ]
 }

assets/scss/5-typography/_t-helpers.scss

@@ -121,15 +121,20 @@ $letter-spacing-type: (
 // Helper classes for handling how words are allowed to wrap and break. {{isHelper}}
 //
 // .t-wrap-break - Allow a word to wrap to the next line mid-word
+// .t-wrap-balance - Allow a word to wrap to the next line, but try to keep the lines balanced. This isn't supported in all browsers and could be used in conjunction with our fork of [NYT's balanacer helper](https://github.com/texastribune/text-balancer).
 //
-// Markup: <p class="{{ className }}" style="width: 150px;">barbara.gervin.hawkins@house.texas.gov</p>
+// Markup: 5-typography/wrap.html
 //
 //
 // Styleguide 5.3.6
 .t-wrap-break {
   word-break: break-all;
 }
 
+.t-wrap-balance {
+  text-wrap: balance;
+}
+
 // Text weight (t-weight-<setting>)
 //
 // Helper for adding bold/normal `font-weight`. Sometimes individual `<strong>` can be redundant tags. {{isHelper}}

assets/scss/5-typography/wrap.html

@@ -0,0 +1,5 @@
+{% if className === 't-wrap-break' %}
+<p class="t-wrap-break" style="width: 150px;">barbara.gervin.hawkins@house.texas.gov</p>
+{% else %}
+<p class="{{className}}" style="width: 150px;">The best and worst moments in Texas politics</p>
+{% endif %}