Deploying to gh-pages from @ a147b4d 🚀

data/cssClasses.json

@@ -330,18 +330,19 @@
         "isTool": false,
         "keywords": []
       },
-      "template": "<p class=\"{{ className }}\" style=\"width: 150px;\">[email protected]</p>",
+      "template": "{% if className === 't-wrap-break' %}\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n{% else %}\n<p class=\"{{className}}\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n{% endif %}\n",
       "modifiers": [],
       "modifierList": [
-        "t-wrap-break"
+        "t-wrap-break",
+        "t-wrap-balance"
       ],
       "preview": "",
       "section": "Typography"
     },
     {
       "name": "Text weight (t-weight-<setting>)",
       "description": "<p>Helper for adding bold/normal <code>font-weight</code>. Sometimes individual <code>&lt;strong&gt;</code> can be redundant tags. </p>\n",
-      "location": "https://github.com/texastribune/queso-ui/blob/main/assets/scss/5-typography/_t-helpers.scss#L133",
+      "location": "https://github.com/texastribune/queso-ui/blob/main/assets/scss/5-typography/_t-helpers.scss#L138",
       "label": "Text weight",
       "type": "cssClass",
       "id": 5,

data/fullList.json

@@ -82,6 +82,7 @@
     "t-links-underlined-hover-thin",
     "t-links-unset",
     "t-wrap-break",
+    "t-wrap-balance",
     "t-weight-bold",
     "t-weight-normal",
     "c-caption--wide",

data/modifierMap.json

@@ -277,8 +277,16 @@
       "className": "t-wrap-break",
       "description": "Allow a word to wrap to the next line mid-word",
       "type": "modifier",
-      "template": "<p class=\"{{ className }}\" style=\"width: 150px;\">[email protected]</p>",
-      "preview": "<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>"
+      "template": "{% if className === 't-wrap-break' %}\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n{% else %}\n<p class=\"{{className}}\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n{% endif %}\n",
+      "preview": "\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n\n"
+    },
+    {
+      "name": ".t-wrap-balance",
+      "className": "t-wrap-balance",
+      "description": "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 <a href=\"https://github.com/texastribune/text-balancer\">NYT's balanacer helper</a>.",
+      "type": "modifier",
+      "template": "{% if className === 't-wrap-break' %}\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n{% else %}\n<p class=\"{{className}}\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n{% endif %}\n",
+      "preview": "\n<p class=\"t-wrap-balance\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n\n"
     },
     {
       "name": ".t-weight-bold",

data/modifiers.json

@@ -277,8 +277,16 @@
       "className": "t-wrap-break",
       "description": "Allow a word to wrap to the next line mid-word",
       "type": "modifier",
-      "template": "<p class=\"{{ className }}\" style=\"width: 150px;\">[email protected]</p>",
-      "preview": "<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>"
+      "template": "{% if className === 't-wrap-break' %}\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n{% else %}\n<p class=\"{{className}}\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n{% endif %}\n",
+      "preview": "\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n\n"
+    },
+    "t-wrap-balance": {
+      "name": ".t-wrap-balance",
+      "className": "t-wrap-balance",
+      "description": "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 <a href=\"https://github.com/texastribune/text-balancer\">NYT's balanacer helper</a>.",
+      "type": "modifier",
+      "template": "{% if className === 't-wrap-break' %}\n<p class=\"t-wrap-break\" style=\"width: 150px;\">[email protected]</p>\n{% else %}\n<p class=\"{{className}}\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n{% endif %}\n",
+      "preview": "\n<p class=\"t-wrap-balance\" style=\"width: 150px;\">The best and worst moments in Texas politics</p>\n\n"
     },
     "t-weight-bold": {
       "name": ".t-weight-bold",

data/usage.json

@@ -6058,6 +6058,10 @@
         }
       ]
     },
+    "t-wrap-balance": {
+      "className": "t-wrap-balance",
+      "data": []
+    },
     "t-weight-bold": {
       "className": "t-weight-bold",
       "data": [

date-labels/index.html

@@ -1702,6 +1702,17 @@
   <section>
     <h2 class="subtitle">Date labels</h2>
 
+      <div class="has-b-btm-marg">
+        <div class="date-label has-bg-black has-text-white t-weight-bold t-serif t-lh-s">
+          <div class="l-align-center-children">
+            <div class="c-icon has-text-yellow"><svg aria-hidden="true"><use xlink:href="#bug"></use></svg></div>
+            <div class="has-tiny-btm-marg">
+              <span class="t-size-l"><em>from</em></span> <span class="t-size-xxxl">2024</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="has-b-btm-marg">
         <div class="date-label has-bg-black has-text-white t-weight-bold t-serif t-lh-s">
           <div class="l-align-center-children">