Add utility classes for 2 different word-break options

app/components/tables/table-with-more-columns.njk

@@ -0,0 +1,70 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Tables' %}
+{% from 'components/tables/macro.njk' import table %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+          {{ table({
+            panel: false,
+            caption: "Users",
+            firstCellIsHeader: false,
+            head: [
+              {
+                text: "Name"
+              },
+              {
+                text: "Email address"
+              },
+              {
+                text: "Status"
+              },
+              {
+                html: "<span class=\"nhsuk-u-visually-hidden\">Actions</span>"
+              }
+            ],
+            rows: [
+              [
+                {
+                  text: "Stephanie Meyer"
+                },
+                {
+                  text: "[email protected]",
+                  classes: "nhsuk-u-word-break-all"
+                },
+                {
+                  text: "Active"
+                },
+                {
+                  html: "<a href=\"#\">Change <span class=\"nhsuk-u-visually-hidden\">status for Stephanie Meyer</span></a>"
+                }
+              ],
+              [
+                {
+                  text: "Aleksandrina Featherstonehaugh-Whitehead"
+                },
+                {
+                  text: "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
+                  classes: "nhsuk-u-word-break-all"
+                },
+                {
+                  text: "Inactive"
+                },
+                {
+                  html: "<a href=\"#\">Change <span class=\"nhsuk-u-visually-hidden\">status for Aleksandrina Featherstonehaugh-Whitehead</span></a>"
+                }
+              ]
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}

app/pages/examples.njk

@@ -122,6 +122,7 @@
     <li><a href="../components/summary-list/without-border.html">Summary list without border</a></li>
     <li><a href="../components/tables/index.html">Table</a></li>
     <li><a href="../components/tables/responsive-table.html">Responsive table</a></li>
+    <li><a href="../components/tables/table-with-more-columns.html">Non-responsive table with more columns</a></li>
     <li><a href="../components/tables/tables-panel.html">Table as a panel</a></li>
     <li><a href="../components/tabs/index.html">Tabs</a> <strong class="nhsuk-tag nhsuk-tag--yellow">Experimental</strong></li>
     <li><a href="../components/tag/index.html">Tag</a></li>
@@ -133,7 +134,7 @@
     <li><a href="../components/warning-callout/index.html">Warning callout</a></li>
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
-  
+
 {% endblock %}
 
 {% block footer %}

packages/components/tables/template.njk

@@ -30,28 +30,21 @@
     <tbody class="nhsuk-table__body">
     {%- for row in params.rows %}
       <tr role="row" class="nhsuk-table__row" >
-        {%- if params.responsive %}
-          {%- for cell in row %}
-            <td role="cell" class="nhsuk-table__cell{% if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}">
+        {%- for cell in row %}
+          {%- if loop.first and params.firstCellIsHeader %}
+            <th class="nhsuk-table__header {%- if cell.classes %}{{ cell.classes }}{% endif %}" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
+          {% else %}
+            <td class="nhsuk-table__cell {% if cell.format %}nhsuk-table__cell--{{ cell.format }}{% endif %} {%- if cell.classes %}{{ cell.classes }}{% endif %}"
+            {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+            {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>
+            {%- if params.responsive %}
               <span class="nhsuk-table-responsive__heading" aria-hidden="true">{{cell.header}} </span>{{ cell.html | safe if cell.html else cell.text }}
+            {% else %}
+              {{ cell.html | safe if cell.html else cell.text }}
+            {% endif %}
             </td>
-          {%- endfor %}
-        {%- else %}
-          {%- for cell in row %}
-            {%- if loop.first and params.firstCellIsHeader %}
-              <th class="nhsuk-table__header" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
-            {%- elseif loop.first %}
-              <td class="nhsuk-table__cell
-            {%- if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}"
-                {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-                {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
-            {%- else %}
-              <td class="nhsuk-table__cell {% if cell.format %}nhsuk-table__cell--{{ cell.format }}{% endif %}"
-                {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-                {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
-            {%- endif %}
-          {%- endfor %}
-        {%- endif %}
+          {%- endif %}
+        {%- endfor %}
       </tr>
     {%- endfor %}
     </tbody>

packages/core/all.scss

@@ -43,3 +43,4 @@
 @import "utilities/typography";
 @import "utilities/visually-hidden";
 @import "utilities/widths";
+@import "utilities/word-breaks";

packages/core/utilities/_word-breaks.scss

@@ -0,0 +1,29 @@
+// ==========================================================================
+// UTILITIES / #WORD-BREAK
+// ==========================================================================
+
+/**
+ * This class allows words to be broken between any 2
+ * to avoid overflowing their container.
+ *
+ * This can be useful on table cells which could contain
+ * long strings such as email addresses.
+ *
+ * Usage: class="nhsuk-u-word-break-all"
+ */
+.nhsuk-u-word-break-all {
+  word-break: break-all;
+}
+
+
+/**
+ * This class also allows words to be broken between any 2
+ * to avoid overflowing their container, but will try
+ * and avoid it by placing the entire word on its own
+ * line first. However this does not work in tables.
+ *
+ * Usage: class="nhsuk-u-word-break-all"
+ */
+.nhsuk-u-word-break-word {
+  overflow-wrap: break-word;
+}