name: Share links
description: Social media links for linking to or sharing the current page on social media.
body: |
  The component will not process a URL into a share link itself. Pass complete share URLs to the component.

  Real world examples:

    - [News article](https://www.gov.uk/government/news/fast-tracking-uk-innovation-apply-for-business-funding)
    - [Consultation](https://www.gov.uk/government/consultations/soft-drinks-industry-levy)
    - [Right to left](https://www.gov.uk/government/news/uk-sets-out-long-term-support-for-stable-secure-and-prosperous-afghanistan-to-2020.ur)

accessibility_criteria: |
  The share link icons must be presentational and ignored by screen readers.
shared_accessibility_criteria:
  - link
examples:
  default:
    data:
      links: [
        {
          href: '/facebook-share-link',
          text: 'Facebook',
          icon: 'facebook'
        },
        {
          href: '/twitter-share-link',
          text: 'Twitter',
          icon: 'twitter'
        },
      ]
  right_to_left:
    data:
      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) in UA. 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 in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
    data:
      track_as_sharing: true
      links: [
        {
          href: 'share',
          text: 'Share on Facebook',
          icon: 'facebook'
        },
        {
          href: 'share',
          text: 'Share on Twitter',
          icon: 'twitter'
        },
      ]
  track_as_follow_links:
    description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
    data:
      track_as_follow: true
      links: [
        {
          href: 'follow',
          text: 'Follow us on Facebook',
          icon: 'facebook'
        },
        {
          href: 'follow',
          text: 'Follow us on Twitter',
          icon: 'twitter'
        },
      ]
  with_title:
    data:
      title: 'Share this page'
      links: [
        {
          href: 'share',
          text: 'Share on Facebook',
          icon: 'facebook'
        }
      ]
  with_custom_visually_hidden_text:
    description: |
      Use this option to specify a visually hidden text for screenreaders to prepend to the link text.

      If omitted, the default text used will be 'Share on'.
    data:
      links: [
        {
          href: 'share',
          text: 'Facebook',
          hidden_text: 'Download from',
          icon: 'facebook'
        }
      ]
  with_branding:
    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/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'
        },
      ]
  arrange_in_columns:
    description: |
      Share links are arranged in even columns that adjust according to the available space. Note that the column width is based on an assumed width, so if the link text is long it may wrap (the example below demonstrates this).

      This option uses CSS grid, which is not fully supported in IE <= 11, so in those browsers the columns are floated.
    data:
      columns: true
      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'
        },
      ]
  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: '/whatsapp-share-link',
          text: 'WhatsApp',
          icon: 'whatsapp'
        },
        {
          href: '/other-share-link',
          text: 'Anything else that might be included that could have quite a long name',
          icon: 'other'
        },
        {
          href: '/youtube-share-link',
          text: 'YouTube',
          icon: 'youtube'
        }
      ]