govuk_publishing_components 8.2.0 → 9.0.0

data/app/views/govuk_publishing_components/components/docs/govspeak_html_publication.yml

@@ -0,0 +1,183 @@
+name: "Govspeak content (HTML Publications)"
+description: "To display long form text with numbered parts, which has been converted from Govspeak"
+body: |
+  This component calls the standard [Govspeak component](/components/govspeak), and layers a set of overriding styles on top. Styles for numbered parts are added, and heading sizes are increased.
+
+  Requires Slimmer >= 9.1.0 for nested component support.
+accessibility_criteria: |
+  - headings must be part of a correct heading structure for the page
+  - text should have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+shared_accessibility_criteria:
+  - link
+examples:
+  basic_content:
+    data:
+      content: |
+        <p>This is a Budget that puts security first. It ensures economic security for working people by putting the public finances in order and setting out a bold plan for a more productive, balanced economy.</p>
+  heading_level_2:
+    data:
+      content: |
+        <h2>
+          <span class="number">1. </span>Executive summary
+        </h2>
+        <p>This is a Budget that puts security first. It ensures economic security for working people by putting the public finances in order and setting out a bold plan for a more productive, balanced economy.</p>
+  heading_level_3:
+    data:
+      content: |
+        <h3>
+          <span class="number">1.1 </span>Fixing the public finances and running a surplus
+        </h3>
+        <p>The government’s long-term economic plan has laid the foundations for a stronger economy, and the UK’s recovery is now well established. The labour market remains strong, and in the 3 months to April 2015, employment was around record levels at 31.1 million.</p>
+  numbered_content:
+    data:
+      content: |
+        <h2 id="executive-summary">
+          <span class="number">1. </span>Executive summary
+        </h2>
+        <p>This is a Budget that puts security first. It ensures economic security for working people by putting the public finances in order and setting out a bold plan for a more productive, balanced economy.</p>
+        <h3 id="fixing-the-public-finances-and-running-a-surplus">
+          <span class="number">1.1 </span>Fixing the public finances and running a surplus
+        </h3>
+        <p>The government’s long-term economic plan has laid the foundations for a stronger economy, and the UK’s recovery is now well established. The labour market remains strong, and in the 3 months to April 2015, employment was around record levels at 31.1 million.</p>
+        <h3 id="economic-forecast">
+          <span class="number">1.2 </span>Economic forecast
+        </h3>
+        <p>The Office for Budget Responsibility (OBR) forecasts GDP growth of 2.4% in 2015, 2.3% in 2016, and 2.4% for the remainder of the forecast period.</p>
+        <h2 id="the-uk-economy-and-public-finances">
+          <span class="number">2. </span>The UK economy and public finances
+        </h2>
+        <h3 id="uk-economy">
+          <span class="number">2.1 </span>UK economy
+        </h3>
+        <p>The government’s long‑term economic plan has secured the recovery. The government’s fiscal responsibility has allowed monetary activism to support demand in the economy alongside repair of the financial sector. This has been supported by supply-side reform to deliver sustainable increases in standards of living.</p>
+  right_to_left:
+    data:
+      direction: 'rtl'
+      content: |
+        <h2>
+          <span class="number">1. </span>Executive summary
+        </h2>
+        <p>This is a Budget that puts security first. It ensures economic security for working people by putting the public finances in order and setting out a bold plan for a more productive, balanced economy.</p>
+        <h3>
+          <span class="number">1.1 </span>Fixing the public finances and running a surplus
+        </h3>
+        <p>The government’s long-term economic plan has laid the foundations for a stronger economy, and the UK’s recovery is now well established. The labour market remains strong, and in the 3 months to April 2015, employment was around record levels at 31.1 million.</p>
+        <h3>
+          <span class="number">1.2 </span>Economic forecast
+        </h3>
+        <p>The Office for Budget Responsibility (OBR) forecasts GDP growth of 2.4% in 2015, 2.3% in 2016, and 2.4% for the remainder of the forecast period.</p>
+        <h2>
+          <span class="number">2. </span>The UK economy and public finances
+        </h2>
+        <h3>
+          <span class="number">2.1 </span>UK economy
+        </h3>
+        <p>The government’s long‑term economic plan has secured the recovery. The government’s fiscal responsibility has allowed monetary activism to support demand in the economy alongside repair of the financial sector. This has been supported by supply-side reform to deliver sustainable increases in standards of living.</p>
+  financial_table:
+    data:
+      content: |
+        <table class="financial-data">
+          <caption>Table 1.6: Total Managed Expenditure (as produced by the <a href="https://alphagov.github.io/table-editor/financial-tables.html">financial table editor</a>)</caption>
+          <thead>
+            <tr>
+              <td></td>
+              <th class="numeric">2015-16</th>
+              <th class="numeric">2016-17</th>
+              <th class="numeric">2017-18</th>
+              <th class="numeric">2018-19</th>
+              <th class="numeric">2019-20</th>
+              <th class="numeric">2020-21</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="section-heading">
+              <th colspan="7">Current Expenditure</th>
+            </tr>
+            <tr>
+              <th>Resource AME</th>
+              <td class="numeric">345.3</td>
+              <td class="numeric">353.3</td>
+              <td class="numeric">365.9</td>
+              <td class="numeric">378.4</td>
+              <td class="numeric">391.8</td>
+              <td class="numeric">403.9</td>
+            </tr>
+            <tr>
+              <th>Resource DEL excluding depreciation</th>
+              <td class="numeric">315.1</td>
+              <td class="numeric">320.8</td>
+              <td class="numeric">322.9</td>
+              <td class="numeric">325.2</td>
+              <td class="numeric">328.3</td>
+              <td class="numeric">341.2</td>
+            </tr>
+            <tr>
+              <th>Ring-fenced depreciation</th>
+              <td class="numeric">21.9</td>
+              <td class="numeric">21.9</td>
+              <td class="numeric">21.9</td>
+              <td class="numeric">21.9</td>
+              <td class="numeric">21.9</td>
+              <td class="numeric">21.9</td>
+            </tr>
+            <tr class="subtotal">
+              <th>Public Sector Current Expenditure</th>
+              <td class="numeric">682.3</td>
+              <td class="numeric">696.0</td>
+              <td class="numeric">710.7</td>
+              <td class="numeric">725.5</td>
+              <td class="numeric">742.0</td>
+              <td class="numeric">767.0</td>
+            </tr>
+            <tr class="section-heading">
+              <th colspan="7">Capital Expenditure</th>
+            </tr>
+            <tr>
+              <th>Capital AME</th>
+              <td class="numeric">31.7</td>
+              <td class="numeric">33.4</td>
+              <td class="numeric">31.7</td>
+              <td class="numeric">30.7</td>
+              <td class="numeric">31.7</td>
+              <td class="numeric">34.5</td>
+            </tr>
+            <tr>
+              <th>Capital DEL</th>
+              <td class="numeric">41.7</td>
+              <td class="numeric">44.0</td>
+              <td class="numeric">45.0</td>
+              <td class="numeric">45.0</td>
+              <td class="numeric">47.3</td>
+              <td class="numeric">55.7</td>
+            </tr>
+            <tr class="subtotal">
+              <th>Public Sector Gross Investment</th>
+              <td class="numeric">73.4</td>
+              <td class="numeric">77.4</td>
+              <td class="numeric">76.7</td>
+              <td class="numeric">75.7</td>
+              <td class="numeric">79.0</td>
+              <td class="numeric">90.2</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr class="total">
+              <th>Total Managed Expenditure</th>
+              <td class="numeric">755.7</td>
+              <td class="numeric">773.3</td>
+              <td class="numeric">787.5</td>
+              <td class="numeric">801.2</td>
+              <td class="numeric">821.0</td>
+              <td class="numeric">857.2</td>
+            </tr>
+            <tr>
+              <th>Total Managed Expenditure (% GDP)</th>
+              <td class="numeric">39.7%</td>
+              <td class="numeric">39.1%</td>
+              <td class="numeric">38.1%</td>
+              <td class="numeric">37.2%</td>
+              <td class="numeric">36.5%</td>
+              <td class="numeric">36.4%</td>
+            </tr>
+          </tfoot>
+        </table>

data/app/views/govuk_publishing_components/components/docs/image_card.yml

@@ -0,0 +1,160 @@
+name: Image card
+description: Image and associated text with a link
+body: |
+  An image and an associated link, meant for use for news articles and people. Includes optional paragraph and additional links.
+
+  The component is generally to be used within a grid column but has no grid of its own, so the text and the images in the examples below may not always line up. This will normally look tidier, for example [on pages like this](https://www.gov.uk/government/organisations/attorney-generals-office).
+accessibility_criteria: |
+  The component must:
+
+  - include alt text for images when present
+  - not have duplicate links for the image and the text
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      href: "/not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "News headline"
+  with_a_different_heading_level:
+    description: Use a different heading level for the main link title. Defaults to H2 if not passed.
+    data:
+      href: "/really-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "I am a heading level 3"
+      heading_level: 3
+  with_more_information:
+    data:
+      href: "/also-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      context: "10 May 2018 - Press release"
+      heading_text: "Government does things"
+      description: "Following a thorough review of existing procedure, a government body has today announced that further work is necessary."
+  with_extra_links:
+    data:
+      href: "/a-page-no-just-kidding"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "Some more links"
+      description: "Greater transparency across government is at the heart of our commitment to let you hold politicians and public bodies to account."
+      extra_links: [
+        {
+          text: "Single departmental plans",
+          href: "/1"
+        },
+        {
+          text: "Prime Minister's and Cabinet Office ministers' transparency publications",
+          href: "/2"
+        },
+        {
+          text: "Government transparency data",
+          href: "/3"
+        },
+      ]
+  extra_links_without_indent:
+    description: Don't indent the extra links. Used for links to people pages.
+    data:
+      href: "/government/people/"
+      image_src: "http://placekitten.com/215/140"
+      image_alt: "some meaningful alt text please"
+      context: "The Rt Hon"
+      heading_text: "John Whiskers MP"
+      extra_links: [
+        {
+          text: "Minister for Cats",
+          href: "/government/ministers/"
+        }
+      ]
+      extra_links_no_indent: true
+  without_heading_text:
+    description: |
+      The only required parameter to the component is href but if no heading_text is supplied the link will not appear. This is to allow the component to use only extra links as shown.
+
+      In this situation the link could have been applied to the image but having a link on the image like this without text can be confusing.
+    data:
+      href: "/still-not-a-link"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      description: Here are some links to more information about the thing you are reading about.
+      extra_links: [
+        {
+          text: "More information",
+          href: "/1"
+        },
+        {
+          text: "Even more information",
+          href: "/2"
+        },
+        {
+          text: "One final bit of information we forgot to mention",
+          href: "/2"
+        }
+      ]
+  without_an_image:
+    description: Despite the name of the component, it is possible to have it display without an image.
+    data:
+      href: '/no-valid-links-here'
+      heading_text: 'John McJohnson'
+      description: 'Deputy director for Parks and Small Trees'
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: "department-for-work-pensions"
+      href: "/again-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "Something relating to this"
+      description: "Public reform committee consultation vote department interior minister referendum."
+      extra_links: [
+        {
+          text: "Something",
+          href: "/1"
+        },
+        {
+          text: "Something else",
+          href: "/2"
+        }
+      ]
+  large_version:
+    data:
+      large: true
+      href: "/still-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/frontend/homepage/leaving-the-eu-bc9992ee672a30d8e8a3e195c9afa750e618748130a4e073a593ba36dfc29af9.jpg"
+      image_alt: "some meaningful alt text please"
+      context: "14 Jun 2017 - Announcement"
+      heading_text: "Something has happened nearby possibly"
+      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
+  with_tracking:
+    data:
+      href: "/i-am-not-a-valid-link"
+      href_data_attributes: {
+        track_category: 'href_category',
+        track_action: 1.1,
+        track_label: 'href_label',
+        track_options: {
+          dimension28: 1,
+          dimension29: 'dimension29Href'
+        }
+      }
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "A link with tracking"
+      extra_links: [
+        {
+          text: "Another link with tracking",
+          href: "/1",
+          data_attributes: {
+            track_category: 'extra_category',
+            track_action: 2.1,
+            track_label: 'extra_label',
+            track_options: {
+              dimension28: 1,
+              dimension29: 'dimension29Extra'
+            }
+          }
+        }
+      ]

data/app/views/govuk_publishing_components/components/docs/inverse_header.yml

@@ -59,5 +59,5 @@ examples:
           </h1>
         </div>
         <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
-          Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early&nbsp;years.
+          Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
         </p>

data/app/views/govuk_publishing_components/components/docs/machine_readable_metadata.yml

@@ -14,6 +14,16 @@ examples:
         base_path: "/foo"
         details: {}
       schema: :article
+
+  with_description:
+    data:
+      content_item:
+        title: "A title"
+        base_path: "/foo"
+        details: {}
+      schema: :article
+      description: "Some manually set description of the page"
+
   with_canonical_url:
     data:
       content_item:
@@ -22,7 +32,6 @@ examples:
         details: {}
       schema: :article
       canonical_url: "https://www.gov.uk/foreign-travel-advice/andorra/health"
-
   with_body:
     data:
       content_item:
@@ -31,3 +40,10 @@ examples:
         details: {}
       schema: :article
       body: "Some other body"
+  person_schema:
+    data:
+      content_item:
+        title: "A. Person"
+        base_path: "/foo"
+        details: {}
+      schema: :person

data/app/views/govuk_publishing_components/components/docs/notice.yml

@@ -0,0 +1,27 @@
+name: Notice
+description: A notice to convey and highlight information
+body: |
+  The notice component replaces the notice and withdrawal notice patterns on GOV.UK.
+
+  The component accepts either a simple string description_text parameter that it wraps in a paragraph, or a description_govspeak parameter that is rendered through govspeak for more complex HTML layout.
+accessibility_criteria: |
+  The notice must:
+
+  - have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct.
+  - always render headings with associated description content, so there are no isolated heading elements inside the component
+examples:
+  default:
+    data:
+      title: 'Statistics release cancelled'
+  with_description_text:
+    data:
+      title: 'Statistics release cancelled'
+      description_text: 'Duplicate, added in error'
+  with_description_govspeak:
+    data:
+      title: 'Statistics release update'
+      description_govspeak: '<p>The Oil &amp; Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.</p><p>This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to <a rel="external" href="https://www.ogauthority.co.uk/news-publications/announcements/2015/establishment-of-the-oil-and-gas-authority-1/">www.ogauthority.co.uk</a></p>'
+  with_markup_in_the_title:
+    description: In some circumstances it may be necessary to include simple markup in the title, such as a link. Note that this will be wrapped in a H2 tag if there is no description included, so be sure that any markup inserted is valid inside that tag (e.g. another heading tag inside a H2 would be invalid).
+    data:
+      title: 'Advisory Committee on Novel Foods and Processes has a <a href="http://www.food.gov.uk/acnfp">separate website</a>'

data/app/views/govuk_publishing_components/components/docs/share_links.yml

@@ -1,11 +1,7 @@
 name: Share links
-description: Links to share the current page on Facebook or Twitter
+description: Social media links for linking to or sharing the current page on social media.
 body: |
-  Pass complete share URLs to the component. The component will not process a URL into a share link itself.
-
-  Use only with content that benefits from being shared, for example a consultation.
-
-  The component will track interactions with the share links to Google Analytics using [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions)
+  The component will not process a URL into a share link itself. Pass complete share URLs to the component.
 
   Real world examples:
 
@@ -20,19 +16,124 @@ shared_accessibility_criteria:
 examples:
   default:
     data:
-      facebook_href: '/facebook-link'
-      twitter_href: '/twitter-link'
-  with_custom_text:
-    data:
-      title: 'Share this news article'
-      facebook_href: '/facebook-share-link'
-      twitter_href: '/twitter-share-link'
-  with_only_one_link_provided:
-    data:
-      facebook_href: '/only-facebook-link'
+      links: [
+        {
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter'
+        },
+      ]
   right_to_left:
     data:
-      facebook_href: '/facebook-link'
-      twitter_href: '/twitter-link'
+      links: [
+        {
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter'
+        },
+      ]
     context:
       right_to_left: true
+  track_as_sharing_links:
+    description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions). If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call.
+    data:
+      track_as_sharing: true
+      links: [
+        {
+          href: 'share',
+          text: 'Share on Facebook',
+          icon: 'facebook'
+        }
+      ]
+  with_title:
+    data:
+      title: 'Share this page'
+      links: [
+        {
+          href: 'share',
+          text: 'Share on Facebook',
+          icon: 'facebook'
+        }
+      ]
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: 'attorney-generals-office'
+      links: [
+        {
+          href: 'share',
+          text: 'Follow the Attorney General on Twitter',
+          icon: 'twitter'
+        }
+      ]
+  stack_vertically:
+    data:
+      stacked: true
+      links: [
+        {
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter'
+        },
+      ]
+  with_all_icons:
+    data:
+      stacked: true
+      brand: 'hm-treasury'
+      links: [
+        {
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter'
+        },
+        {
+          href: '/email-share-link',
+          text: 'Email',
+          icon: 'email'
+        },
+        {
+          href: '/flickr-share-link',
+          text: 'Flickr',
+          icon: 'flickr'
+        },
+        {
+          href: '/instagram-share-link',
+          text: 'Instagram',
+          icon: 'instagram'
+        },
+        {
+          href: '/linkedin-share-link',
+          text: 'Linkedin',
+          icon: 'linkedin'
+        },
+        {
+          href: '/youtube-share-link',
+          text: 'YouTube',
+          icon: 'youtube'
+        },
+        {
+          href: '/other-share-link',
+          text: 'Anything else',
+          icon: 'other'
+        },
+      ]