Merge pull request #1220 from alphagov/improve-word-wrapping

Improve word wrapping in summary list component
alphagov · Mar 1, 2019 · 4446431 · 4446431
2 parents 9651423 + d890acf
commit 4446431
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/app/views/full-page-examples/check-your-answers/index.njk b/app/views/full-page-examples/check-your-answers/index.njk
@@ -177,6 +177,39 @@
               }
             ]
           }
+        },
+        {
+          key: {
+            text: "Additional details"
+          },
+          value: {
+            html: '
+              <p class="govuk-body">I have contacted my council for a Temporary Event Notice (<abbr title="Temporary Event Notice">TEN</abbr>) as I want to carry out a ‘licensable activity’ on unlicensed premises in England or Wales.</p>
+
+              <p class="govuk-body">Licensable activity includes:</p>
+
+              <ul class="govuk-list govuk-list--bullet">
+                <li>selling alcohol</li>
+                <li>serving alcohol to members of a private club</li>
+                <li>providing entertainment, such as music, dancing or indoor sporting events</li>
+                <li>serving hot food or drink between 11pm and 5am</li>
+              </ul>
+
+              <p class="govuk-body">
+                To find out more you can visit out website at: 
+                <a class="govuk-link" href="#">https://reallylongurlformyeventthatneedsatemporaryeventsnotice.com</a>
+              </p>
+            '
+          },
+          actions: {
+            items: [
+              {
+                href: "#/additional-details",
+                text: "Change",
+                visuallyHiddenText: "additional details"
+              }
+            ]
+          }
         }
       ]
     }) }}

diff --git a/src/components/summary-list/_summary-list.scss b/src/components/summary-list/_summary-list.scss
@@ -10,6 +10,7 @@
     @include govuk-media-query($from: tablet) {
       display: table;
       width: 100%;
+      table-layout: fixed; // Required to allow us to wrap words that overflow.
     }
     margin: 0; // Reset default user agent styles
     @include govuk-responsive-margin(6, "bottom");
@@ -49,17 +50,17 @@
   .govuk-summary-list__actions {
     margin-bottom: govuk-spacing(3);
     @include govuk-media-query($from: tablet) {
+      width: 20%;
       padding-right: 0;
       text-align: right;
     }
   }
 
   .govuk-summary-list__key,
   .govuk-summary-list__value {
-    // sass-lint:disable no-duplicate-properties
     // Automatic wrapping for unbreakable text (e.g. URLs)
-    word-break: break-all; // Standards
-    word-break: break-word; // WebKit/Blink only
+    word-wrap: break-word; // Fallback for older browsers only
+    overflow-wrap: break-word;
   }
 
   .govuk-summary-list__key {
@@ -74,6 +75,9 @@
     @include govuk-media-query($until: tablet) {
       margin-bottom: govuk-spacing(3);
     }
+    @include govuk-media-query($from: tablet) {
+      width: 50%;
+    }
   }
 
   .govuk-summary-list__value > p {

diff --git a/src/components/summary-list/summary-list.yaml b/src/components/summary-list/summary-list.yaml
@@ -370,8 +370,8 @@ examples:
             text: Pneumonoultramicroscopicsilicovolcanoconiosis
           value:
             html: |
-              <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis consequat diam. Duis efficitur justo at congue iaculis. Quisque scelerisque ornare justo nec congue. Duis egestas felis nibh, eu cursus metus rutrum eget. In dictum lectus diam, dapibus ullamcorper risus gravida a. Vestibulum tempor mattis sapien, at auctor tellus dignissim non. Praesent dictum felis nec diam tempor, vel lobortis leo ultricies.</p>
-              <p class="govuk-body">Suspendisse potenti. Aliquam dictum eu ipsum sed facilisis. Maecenas hendrerit est eget ultrices venenatis. Nam ex nisl, venenatis eget molestie quis, hendrerit id tellus. Morbi et posuere ex, vel interdum sapien. Mauris ac mattis turpis, interdum eleifend erat. Morbi eget efficitur lectus. Sed suscipit laoreet ipsum et iaculis. Integer ornare ipsum quis aliquet scelerisque. Proin venenatis dictum suscipit. Nunc tristique, felis quis fermentum rhoncus, tortor augue egestas ipsum, non porttitor nulla odio vitae purus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+              <p class="govuk-body">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers' League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."</p>
+              <p class="govuk-body">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>
           actions:
             items:
               - href: '#'