Merge pull request #372 from alphagov/fix-quotation-marks-and-apostro…

…phes

Use smart quotes and apostrophes

README.md

@@ -94,7 +94,7 @@ You can pick and chosoe partials from the govuk-elements-sass package.
 You can find these at the top of the `_govuk_elements.scss` partial.
 
 If you're not using the [GOV.UK template](https://github.com/alphagov/govuk_template),
-you'll also need to uncomment the base partial in `_govuk_elements.scss`, or create your own.
+you’ll also need to uncomment the base partial in `_govuk_elements.scss`, or create your own.
 
     // @import "elements/base";                       // HTML elements, set by the GOV.UK template
 

app/views/examples/example_details_summary.html

@@ -20,7 +20,7 @@ <h1 class="heading-xlarge">
       </p>
 
       <p>
-        These elements are only supported by <a href="http://caniuse.com/#feat=details" rel="external">a few modern browsers</a> at the moment so you'll need a JavaScript polyfill to make them work in other browsers. <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js" rel="external">Here's the polyfill used by GOV.UK elements</a>.
+        These elements are only supported by <a href="http://caniuse.com/#feat=details" rel="external">a few modern browsers</a> at the moment so you’ll need a JavaScript polyfill to make them work in other browsers. <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js" rel="external">Here’s the polyfill used by GOV.UK elements</a>.
       </p>
 
       <p>

app/views/examples/example_grid_layout.html

@@ -148,7 +148,7 @@ <h2 class="bold-medium">One quarter</h2>
         $html.toggleClass('example-highlight-grid');
 
         if ($('.column-highlight').length>0) {
-          // Don't add more than once
+          // Don’t add more than once
         } else {
           $('.grid-row div').wrapInner('<div class="column-highlight"></div>');
         }

app/views/examples/example_radios_checkboxes.html

@@ -17,7 +17,7 @@ <h1 class="heading-xlarge">
 
       <p class="text">
         This test page demonstrates selection-buttons.js from the govuk frontend toolkit, which
-        sets 'focused' and 'selected' states for the large hit area labels that wrap checkboxes and radio buttons.
+        sets ‘focused’ and ‘selected’ states for the large hit area labels that wrap checkboxes and radio buttons.
       </p>
 
       <p class="text">

app/views/guide_buttons.html

@@ -62,7 +62,7 @@ <h3 class="heading-medium" id="button-start-now">Start now button</h3>
 
   <h3 class="heading-medium" id="button-alignment">Button alignment</h3>
   <p class="text">
-    Align the primary action button to the left edge of your form, in the user's line of sight.
+    Align the primary action button to the left edge of your form, in the user’s line of sight.
   </p>
 
   <div class="example example-button">
@@ -82,7 +82,7 @@ <h3 class="heading-medium" id="button-alignment">Button alignment</h3>
   <h3 class="heading-medium" id="button-disabled">Disabled buttons</h3>
   <ul class="list list-bullet text">
     <li>don’t disable buttons, unless there’s a good reason to</li>
-    <li>if you have to disable buttons, make sure they look like you can't click them (use 50% opacity)</li>
+    <li>if you have to disable buttons, make sure they look like you can’t click them (use 50% opacity)</li>
     <li>an example of a useful disabled option is a calendar with greyed out days where no bookings are available</li>
     <li>provide another way for the user to continue, add an error message or text to explain why the button is disabled</li>
   </ul>

app/views/guide_colour.html

@@ -406,7 +406,7 @@ <h2 class="heading-medium">
           What happens next?
         </h2>
         <p>
-          We've sent your application to Hackney Electoral Register Office.
+          We’ve sent your application to Hackney Electoral Register Office.
         </p>
         <p>
           They will contact you either to confirm your registration, or to ask for more information.

app/views/guide_data.html

@@ -32,7 +32,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
   <h3 class="heading-medium" id="data-table-numeric">Numeric tabular data</h3>
   <ul class="text list list-bullet">
     <li>when comparing rows of numbers, align numbers to the right in table cells</li>
-    <li>use the GOV.UK frontend toolkit's <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/mixins.md#tabular-numbers" rel="external">tabular numbers</a> to allow numbers of the same width to be more easily compared</li>
+    <li>use the GOV.UK frontend toolkit’s <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/mixins.md#tabular-numbers" rel="external">tabular numbers</a> to allow numbers of the same width to be more easily compared</li>
   </ul>
 
 <div class="example">

app/views/guide_form_elements.html

@@ -14,7 +14,7 @@ <h1 class="heading-xlarge">
   </h1>
 
   <p class="lede text">
-    Keep forms as simple as possible &ndash; only ask what's needed to run your service.
+    Keep forms as simple as possible &ndash; only ask what’s needed to run your service.
   </p>
 
   <h2 class="heading-small heading-contents">Contents:</h2>
@@ -42,14 +42,14 @@ <h2 class="heading-small heading-contents">Contents:</h2>
   <h3 class="heading-medium" id="form-optional-fields">Optional and mandatory fields</h3>
   <ul class="text list list-bullet">
     <li>only ask for the information you absolutely need</li>
-    <li>if you do ask for optional information, mark the labels of optional fields with '(optional)'</li>
-    <li>don't mark mandatory fields with asterisks</li>
+    <li>if you do ask for optional information, mark the labels of optional fields with ‘(optional)’</li>
+    <li>don’t mark mandatory fields with asterisks</li>
   </ul>
 
   <h3 class="heading-medium" id="form-labels">Labels</h3>
   <ul class="text list list-bullet">
     <li>all form fields should be given labels</li>
-    <li>don't hide labels, unless the surrounding context makes them unnecessary</li>
+    <li>don’t hide labels, unless the surrounding context makes them unnecessary</li>
     <li>labels should be aligned above their fields</li>
     <li>label text should be short, direct and in sentence case</li>
     <li>avoid colons at the end of labels</li>
@@ -90,7 +90,7 @@ <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
       All elements use the yellow focus style as a highlight, as either a fill or 3px outline.
     </p>
     <p>
-      Click on the label "Full name" or inside the form field to show the focus state.
+      Click on the label “Full name” or inside the form field to show the focus state.
     </p>
   </div>
 
@@ -100,7 +100,7 @@ <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
 
   <h3 class="heading-medium"  id="form-hint-text">Hint text</h3>
   <ul class="list list-bullet text">
-    <li>don't use placeholder text in form fields, as this will disappear once content is entered into the form field</li>
+    <li>don’t use placeholder text in form fields, as this will disappear once content is entered into the form field</li>
     <li>use hint text for supporting contextual help, this will always be shown</li>
     <li>hint text should sit above a form field</li>
     <li>ensure hint text can be read correctly by screen readers</li>
@@ -236,8 +236,8 @@ <h4 class="heading-small">Stacked checkboxes</h4>
 
   <h4 class="heading-small">Inline checkboxes</h4>
   <ul class="list list-bullet text">
-    <li>large hit areas aren't always appropriate</li>
-    <li>only pre-select options if there's a strong, user-centred reason to</li>
+    <li>large hit areas aren’t always appropriate</li>
+    <li>only pre-select options if there’s a strong, user-centred reason to</li>
   </ul>
 
   <div class="example">

app/views/guide_icons_images.html

@@ -14,7 +14,7 @@ <h1 class="heading-xlarge">
   </h1>
 
   <p class="lede text">
-    Avoid unnecessary decoration - only use icons and images if there's a real user need.
+    Avoid unnecessary decoration - only use icons and images if there’s a real user need.
   </p>
 
   <h2 class="heading-small heading-contents">Contents:</h2>

app/views/guide_typography.html

@@ -40,7 +40,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
   <h3 class="heading-medium" id="typography-font">Font</h3>
   <div class="text">
     <p>
-      Use the GDS Transport Website font in Light and Bold. It's licensed for use on the GOV.UK domains only.
+      Use the GDS Transport Website font in Light and Bold. It’s licensed for use on the GOV.UK domains only.
     </p>
     <p>
       For services publicly available on different domains, use an alternative typeface like Arial.
@@ -96,8 +96,8 @@ <h3 class="heading-medium" id="typography-body-copy">
     <li>use GDS Transport Website Light</li>
     <li>avoid using bold and italics</li>
     <li>use 19px for body copy &ndash; 16px for smaller screens</li>
-    <li>use smaller sizes only if there's a user need (eg 16px, 14px, 12px)</li>
-    <li>make sure lines of text don't exceed 75 characters, as they become harder to read beyond that point</li>
+    <li>use smaller sizes only if there’s a user need (eg 16px, 14px, 12px)</li>
+    <li>make sure lines of text don’t exceed 75 characters, as they become harder to read beyond that point</li>
   </ul>
 
 <div class="example">
@@ -202,10 +202,10 @@ <h3 class="heading-medium" id="typography-hidden-text">Hidden text (progressive
 
   <div class="panel panel-border-wide text">
     <p>
-      If you're using the HTML5 details and summary elements, you'll need a polyfill for <a href="http://caniuse.com/#feat=details" rel="external">not-so-modern browsers</a>.
+      If you’re using the HTML5 details and summary elements, you’ll need a polyfill for <a href="http://caniuse.com/#feat=details" rel="external">not-so-modern browsers</a>.
     </p>
     <p>
-      You'll need to ensure that your markup matches the example above.
+      You’ll need to ensure that your markup matches the example above.
       <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js">GOV.UK elements uses this polyfill</a>.
     </p>
     <p>

app/views/snippets/form_error_multiple.html

@@ -48,9 +48,9 @@ <h1 class="heading-large">
 
     <span class="form-label-bold">National Insurance number</span>
     <span class="form-hint">
-      It's on your National Insurance card, benefit letter, payslip or P60.
+      It’s on your National Insurance card, benefit letter, payslip or P60.
       <br>
-      For example, 'QQ 12 34 56 C'.
+      For example, ‘QQ 12 34 56 C’.
     </span>
     {% if error %}
       {% if not niNo %}

app/views/snippets/form_error_multiple_show_errors.html

@@ -38,9 +38,9 @@ <h1 class="heading-large">
 
     <span class="form-label-bold">National Insurance number</span>
     <span class="form-hint">
-      It's on your National Insurance card, benefit letter, payslip or P60.
+      It’s on your National Insurance card, benefit letter, payslip or P60.
       <br>
-      For example, 'QQ 12 34 56 C'.
+      For example, ‘QQ 12 34 56 C’.
     </span>
     <span class="error-message" id="error-message-ni-number">
       Error message about National Insurance number goes here

app/views/snippets/form_hint_text.html

@@ -3,7 +3,7 @@
   <span class="form-hint">
     It's on your National Insurance card, benefit letter, payslip or P60.
     <br>
-    For example, 'QQ 12 34 56 C'.
+    For example, ‘QQ 12 34 56 C’.
   </span>
 </label>
 <input class="form-control" id="ni-number" type="text">