govuk_publishing_components 8.2.0 → 9.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -0,0 +1,41 @@
+// Govspeak warning callout
+// https://govuk-static.herokuapp.com/component-guide/govspeak/warning_callout
+//
+// Support:
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .help-notice {
+    $icon-size: 34px;
+    $line-height-mobile: 20px;
+    $line-height-tablet: 25px;
+
+    margin: 2em 0;
+
+    // Add '!' icon
+    background-image: image-url("icon-important.png");
+    background-size: $icon-size $icon-size;
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio() {
+      background-image: image-url("icon-important-2x.png");
+    }
+
+    min-height: $icon-size;
+    padding-left: $icon-size;
+
+    // Center the icon around the baseline
+    padding-top: ($icon-size - $line-height-mobile) / 2;
+
+    @include media(tablet) {
+      padding-top: ($icon-size - $line-height-tablet) / 2;
+    }
+
+    p {
+      @include bold-19;
+      margin-left: 1em;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/form-download.scss

@@ -0,0 +1,24 @@
+.gem-c-govspeak .form-download {
+  padding: 0.25em 0;
+
+  @include media-down(mobile) {
+    margin: 1em 0 1.5em;
+  }
+
+  p {
+    padding-right: 3em;
+  }
+
+  a {
+    display: block;
+    font-weight: 600;
+    background: image-url("icon-file-download.png") no-repeat scroll 0 0;
+    min-height: 2.5em;
+    padding: 0 0 0 2.5em;
+
+    @include device-pixel-ratio() {
+      background-image: image-url("icon-file-download-2x.png");
+      background-size: 25px 25px;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_contents-list-helper.scss

@@ -0,0 +1,25 @@
+// Contents list helper is used in both print and screen stylesheets
+.gem-c-contents-list__list-item--numbered {
+  .gem-c-contents-list__link {
+    display: table;
+  }
+}
+
+.gem-c-contents-list__number,
+.gem-c-contents-list__numbered-text {
+  display: table-cell;
+}
+
+.gem-c-contents-list__number {
+  min-width: 1.5em;
+}
+
+.gem-c-contents-list__numbered-text {
+  $contents-text-padding: 0.3em;
+  padding-left: $contents-text-padding;
+
+  .direction-rtl & {
+    padding-left: 0;
+    padding-right: $contents-text-padding;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_contents-list.scss

@@ -0,0 +1,19 @@
+@import "../helpers/contents-list-helper";
+
+// Override default browser indentation
+.gem-c-contents-list__list,
+.gem-c-contents-list__nested-list {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+// Put indentation back where we use list style types
+.gem-c-contents-list__list-item--dashed {
+  margin-left: $gutter / 2;
+  list-style-type: disc;
+}
+
+.gem-c-contents-list__list-item--numbered,
+.gem-c-contents-list__list-item--parent {
+  list-style-type: none;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak-html-publication.scss

@@ -0,0 +1,5 @@
+.gem-c-govspeak-html-publication {
+  .govuk-sticky-element {
+    display: none;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -0,0 +1,65 @@
+.gem-c-govspeak {
+  .media-player {
+    display: none;
+  }
+
+  .info-notice,
+  .help-notice,
+  .call-to-action {
+    margin: $gutter-half 0;
+    padding: 0 $gutter-half;
+    border: 1pt solid $border-colour;
+  }
+
+  .help-notice p {
+    font-weight: 700;
+  }
+
+  .fraction {
+    img {
+      display: inline-block;
+      margin-bottom: -7px;
+    }
+  }
+
+  .attachment {
+    margin: $gutter 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .attachment-thumb {
+      display: none;
+    }
+
+    .attachment-details {
+      .download {
+        display: block;
+      }
+    }
+
+    .accessibility-warning {
+      h2 {
+        @include core-14;
+      }
+
+      .toggler {
+        display: none;
+      }
+    }
+  }
+
+  .footnotes {
+    border-top: 1px solid $text-colour;
+  }
+
+  .legislative-list {
+    padding-left: 0;
+
+    &,
+    ol {
+      list-style: none;
+    }
+  }
+}

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -3,7 +3,7 @@
 
 <div class="component-show">
   <div class="component-doc">
-    <%= render "govuk_component/govspeak", content: @component_example.html_description %>
+    <%= render "govuk_publishing_components/components/govspeak", content: @component_example.html_description %>
     <h2 class="component-doc-h2">How to call this example</h2>
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>
 

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -1,6 +1,6 @@
 <%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title %>
 
-<div class="govuk-govspeak">
+<div class="gem-c-govspeak">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
   <p>A component must:</p>
   <ul>

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -13,7 +13,7 @@
       <%= render 'govuk_publishing_components/components/lead_paragraph', text: @component_doc.description %>
       <% if @component_doc.body.present? %>
         <div class="component-body">
-          <%= render 'govuk_component/govspeak', content: @component_doc.html_body %>
+          <%= render 'govuk_publishing_components/components/govspeak', content: @component_doc.html_body %>
         </div>
       <% end %>
     </div>
@@ -32,7 +32,7 @@
     <div class="grid-row component-accessibility-criteria">
       <div class="column-two-thirds">
         <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
-        <%= render 'govuk_component/govspeak', content: @component_doc.html_accessibility_criteria %>
+        <%= render 'govuk_publishing_components/components/govspeak', content: @component_doc.html_accessibility_criteria %>
       </div>
     </div>
   <% end %>
@@ -48,7 +48,7 @@
             <a href="<%= component_example_path(@component_doc.id, example.id) %>"><%= example.name %></a>
             <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>">preview</a>)</small>
           </h3>
-          <%= render "govuk_component/govspeak", content: example.html_description %>
+          <%= render "govuk_publishing_components/components/govspeak", content: example.html_description %>
           <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
           <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %>
         </div>

data/app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -0,0 +1,84 @@
+<%
+  cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new
+  format_numbers ||= false
+  underline_links ||= false
+  contents ||= []
+  aria_label ||= ''
+  nested = !!contents.find { |c| c[:items] && c[:items].any? }
+  parent_list_item_modifier = if nested
+                                'parent'
+                              elsif format_numbers
+                                'numbered'
+                              else
+                                'dashed'
+                              end
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+  hide_title ||= false
+%>
+<% if contents.any? %>
+  <nav
+    role="navigation"
+    class="gem-c-contents-list <%= 'gem-c-contents-list--no-underline' unless underline_links %> <%= brand_helper.brand_class %>"
+    data-module="track-click"
+    <% if aria_label.present? %>
+      aria-label="<%= aria_label %>"
+    <% end %>
+  >
+    <% unless hide_title %>
+      <h2 class="gem-c-contents-list__title"><%= t("components.contents_list.contents") %></h2>
+    <% end %>
+
+    <ol class="gem-c-contents-list__list">
+      <% contents.each.with_index(1) do |contents_item, position| %>
+        <%
+          active_class = "gem-c-contents-list__list-item--active" if contents_item[:active]
+          aria_current = "aria-current = true" if contents_item[:active]
+        %>
+        <li
+          class="gem-c-contents-list__list-item gem-c-contents-list__list-item--<%= parent_list_item_modifier %> <%= active_class %>"
+          <%= aria_current %>
+        >
+          <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text] %>
+          <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
+            class: "gem-c-contents-list__link #{brand_helper.color_class}",
+            data: {
+              track_category: 'contentsClicked',
+              track_action: "content_item #{position}",
+              track_label: contents_item[:href],
+              track_options: {
+                dimension29: contents_item[:text]
+              }
+            }
+          %>
+          <% if contents_item[:items] && contents_item[:items].any? %>
+            <ol class="gem-c-contents-list__nested-list">
+              <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
+              <%
+                active_class = "gem-c-contents-list__list-item--active" if nested_contents_item[:active]
+                aria_current = "aria-current = true" if nested_contents_item[:active]
+              %>
+                <li
+                  class="gem-c-contents-list__list-item gem-c-contents-list__list-item--dashed <%= active_class %>"
+                  <%= aria_current %>
+                >
+                  <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],
+                    class: "gem-c-contents-list__link #{brand_helper.color_class}",
+                    data: {
+                      track_category: 'contentsClicked',
+                      track_action: "nested_content_item #{position}:#{nested_position}",
+                      track_label: nested_contents_item[:href],
+                      track_options: {
+                        dimension29: nested_contents_item[:text]
+                      }
+                    }
+                  %>
+                </li>
+              <% end %>
+            </ol>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </nav>
+<% end %>

data/app/views/govuk_publishing_components/components/_govspeak.html.erb

@@ -0,0 +1,14 @@
+<%
+  direction_class = "direction-#{direction}" if local_assigns.include?(:direction)
+  rich_govspeak = local_assigns.fetch(:rich_govspeak) if local_assigns.include?(:rich_govspeak)
+  disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
+
+  classes = []
+  classes << direction_class if direction_class
+  classes << "rich-govspeak" if rich_govspeak
+  classes << "disable-youtube" if disable_youtube_expansions
+%>
+
+<div class="gem-c-govspeak govuk-govspeak <%= classes.join(" ") %>">
+  <%= raw content %>
+</div>

data/app/views/govuk_publishing_components/components/_govspeak_html_publication.html.erb

@@ -0,0 +1,9 @@
+<%
+  govspeak_locals = { content: content }
+  govspeak_locals[:direction] = local_assigns.fetch(:direction) if local_assigns.include?(:direction)
+  govspeak_locals[:rich_govspeak] = local_assigns.fetch(:rich_govspeak) if local_assigns.include?(:rich_govspeak)
+  govspeak_locals[:disable_youtube_expansions] = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
+%>
+<div class="gem-c-govspeak-html-publication">
+  <%= render 'govuk_publishing_components/components/govspeak', govspeak_locals %>
+</div>

data/app/views/govuk_publishing_components/components/_image_card.html.erb

@@ -0,0 +1,41 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
+%>
+<% if card_helper.href %>
+  <div class="gem-c-image-card <%= "gem-c-image-card--large" if card_helper.large %> <%= brand_helper.brand_class %>"
+    <%= "data-module=track-click" if card_helper.is_tracking? %>
+  >
+    <%= card_helper.image %>
+
+    <div class="gem-c-image-card__text-wrapper">
+      <%= card_helper.context %>
+
+      <% if card_helper.heading_text %>
+        <%= content_tag(card_helper.heading_tag,
+          class: "gem-c-image-card__title") do %>
+            <%= link_to card_helper.heading_text, card_helper.href,
+              class: "gem-c-image-card__title-link #{brand_helper.color_class}",
+              data: card_helper.href_data_attributes
+            %>
+        <% end %>
+      <% end %>
+
+      <%= card_helper.description %>
+
+      <% if card_helper.extra_links %>
+        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
+          <% card_helper.extra_links.each do |link| %>
+            <li class="gem-c-image-card__list-item">
+              <%= link_to link[:text], link[:href],
+                class: brand_helper.color_class,
+                data: link[:data_attributes]
+              %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/govuk_publishing_components/components/_lead_paragraph.html.erb

@@ -1,9 +1,6 @@
 <%
   text ||= ""
   inverse ||= false
-  # Replace the space between the last 2 words with a non-breaking space, so
-  # we'll never have a dangling word in a paragraph. 
-  text = GovukPublishingComponents::Presenters::Sanitisation.sub_safely(text, /\s([\w\.\?\!\:]+)$/, '&nbsp;\1')
 %>
 
 <% if text.present? %>

data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb

@@ -1,3 +1,4 @@
+<% local_assigns[:logo_url] = image_url("govuk_publishing_components/govuk-logo.png") %>
 <% page = GovukPublishingComponents::Presenters::Page.new(local_assigns) %>
 <% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(page).structured_data %>
 

data/app/views/govuk_publishing_components/components/_notice.html.erb

@@ -0,0 +1,22 @@
+<% if defined?(title) %>
+  <%
+    description_text ||= false
+    description_govspeak ||= false
+    margin_bottom_class = " gem-c-notice--bottom-margin" unless local_assigns[:margin_bottom]
+  %>
+  <section class="gem-c-notice<%= margin_bottom_class %>" aria-label="Notice" role="region">
+    <% if description_text || description_govspeak %>
+      <h2 class="gem-c-notice__title"><%= title %></h2>
+    <% else %>
+      <span class="gem-c-notice__title"><%= title %></span>
+    <% end %>
+
+    <% if description_text %>
+      <p class="gem-c-notice__description"><%= description_text %></p>
+    <% end %>
+
+    <% if description_govspeak %>
+      <%= render 'govuk_publishing_components/components/govspeak', content: description_govspeak %>
+    <% end %>
+  </section>
+<% end %>

data/app/views/govuk_publishing_components/components/_share_links.html.erb

@@ -1,36 +1,74 @@
 <%
-  title ||= 'Share this page'
-  facebook_href ||= false
-  twitter_href ||= false
+  links ||= []
+  title ||= false
+  track_as_sharing ||= false
+  stacked ||= false
+
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 %>
-<% if facebook_href || twitter_href %>
-  <div class="gem-c-share-links dont-print" data-module="gem-track-share-button-clicks">
-    <h2 class="gem-c-share-links__title"><%= title %></h2>
-
-    <% if facebook_href %>
-      <%= link_to facebook_href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        class: "gem-c-share-links__link js-share-facebook" do %>
-        <span class="gem-c-share-links__link__icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
-            <path fill="currentColor" d="M31.006 0H.993A.997.997 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.013a.998.998 0 0 0 .994-.993V.993A.999.999 0 0 0 31.006 0z"/>
-            <path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
-          </svg>
-        </span><span class="visually-hidden">Share on </span>Facebook<% end %>
+<% if links.any? %>
+  <div class="gem-c-share-links dont-print <%= brand_helper.brand_class %> <%= 'gem-c-share-links--stacked' if stacked %>" data-module="track-click">
+    <% if title %>
+      <h2 class="gem-c-share-links__title"><%= title %></h2>
     <% end %>
 
-    <% if twitter_href %>
-      <%= link_to twitter_href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        class: "gem-c-share-links__link js-share-twitter" do %>
-        <span class="gem-c-share-links__link__icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
-            <path fill="currentColor" d="M31.007 0H.993A.999.999 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.014a.997.997 0 0 0 .993-.993V.993A.998.998 0 0 0 31.007 0z"/>
-            <path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
-          </svg>
-        </span><span class="visually-hidden">Share on </span>Twitter<% end %>
-    <% end %>
+    <ul class="gem-c-share-links__list">
+      <% links.each do |link| %>
+        <li class="gem-c-share-links__list-item">
+          <%
+            if track_as_sharing
+              track_options = {
+                'socialAction': 'share',
+                'socialNetwork': link[:icon],
+                'socialTarget': link[:href]
+              }
+            end
+          %>
+          <%= link_to link[:href],
+            target: "_blank",
+            rel: "noopener noreferrer",
+            data: {
+              'track-category': 'social media',
+              'track-action': link[:icon],
+              'track-options': track_options
+            },
+            class: "gem-c-share-links__link #{brand_helper.color_class}" do %>
+            <span class="gem-c-share-links__link__icon">
+              <% if link[:icon] == 'facebook' %>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                  <path fill="currentColor" d="M31.006 0H.993A.997.997 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.013a.998.998 0 0 0 .994-.993V.993A.999.999 0 0 0 31.006 0z"/>
+                  <path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
+                </svg>
+
+              <% elsif link[:icon] == 'twitter' %>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                  <path fill="currentColor" d="M31.007 0H.993A.999.999 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.014a.997.997 0 0 0 .993-.993V.993A.998.998 0 0 0 31.007 0z"/>
+                  <path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
+                </svg>
+
+              <% elsif link[:icon] == 'email' %>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M34.983 18.76v12.48H15.016V18.76h19.967m2.496-2.496H12.52v17.472h24.959V16.264z"/><path fill="none" stroke="#FFF" stroke-width="2.496" stroke-miterlimit="10" d="M14.59 18.963L25 26.945l10.263-7.869"/></svg>
+
+              <% elsif link[:icon] == 'flickr' %>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M23.72 25a5.76 5.76 0 1 1-11.52 0 5.76 5.76 0 1 1 11.52 0m14.08 0c0 3.182-2.578 5.76-5.76 5.76s-5.76-2.578-5.76-5.76a5.76 5.76 0 1 1 11.52 0"/></svg>
+
+              <% elsif link[:icon] == 'instagram' %>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M25 28.2a3.204 3.204 0 0 1-3.2-3.2c0-1.764 1.436-3.2 3.2-3.2 1.765 0 3.2 1.436 3.2 3.2 0 1.765-1.435 3.2-3.2 3.2"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" fill="#FFF" d="M25 22.44c1.412 0 2.56 1.148 2.56 2.56s-1.147 2.56-2.56 2.56a2.561 2.561 0 0 1 0-5.12m0-1.28A3.844 3.844 0 0 0 21.16 25 3.844 3.844 0 0 0 25 28.84 3.845 3.845 0 0 0 28.84 25 3.844 3.844 0 0 0 25 21.16"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#e" overflow="visible"/></clipPath><path clip-path="url(#f)" fill="#FFF" d="M17.32 35.24c-1.555 0-2.56-1.005-2.56-2.561V17.373c0-1.611.981-2.613 2.56-2.613h15.36c1.58 0 2.561 1.002 2.561 2.613v15.36c0 1.522-1.005 2.507-2.561 2.507H17.32zM25 17.96c-3.881 0-7.04 3.159-7.04 7.04 0 3.881 3.159 7.04 7.04 7.04 3.881 0 7.04-3.159 7.04-7.04 0-3.881-3.159-7.04-7.04-7.04m7.36-2.56a2.243 2.243 0 0 0-2.24 2.24 2.243 2.243 0 0 0 2.24 2.24 2.241 2.241 0 0 0 0-4.48"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#g" overflow="visible"/></clipPath><path clip-path="url(#h)" fill="#FFF" d="M30.552 15.4a2.873 2.873 0 0 0-.704 3.648A7.64 7.64 0 0 0 25 17.319c-4.235 0-7.68 3.445-7.68 7.68 0 4.235 3.445 7.68 7.68 7.68 4.235 0 7.68-3.444 7.68-7.68a7.642 7.642 0 0 0-1.728-4.848 2.876 2.876 0 0 0 3.647-.703v13.285c0 1.169-.717 1.866-1.92 1.866H17.32c-1.22 0-1.92-.699-1.92-1.92V17.373c0-1.254.7-1.973 1.92-1.973h13.232m2.128-1.28H17.32c-1.92 0-3.2 1.28-3.2 3.253V32.68c0 1.92 1.28 3.2 3.2 3.2h15.36c1.92 0 3.2-1.28 3.2-3.146v-15.36c0-1.974-1.28-3.254-3.2-3.254m-.32 5.12a1.6 1.6 0 1 1-.001-3.2 1.6 1.6 0 0 1 .001 3.2M25 31.4a6.4 6.4 0 1 1 .002-12.802A6.4 6.4 0 0 1 25 31.4"/></svg>
+
+              <% elsif link[:icon] == 'linkedin' %>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.24 35.24V21.8h-4.48v13.44h4.48z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M26.28 35.24V28.2c0-1.92.64-3.2 1.92-3.2h.64c1.28 0 1.92 1.28 1.92 4.48v5.76h4.48V28.2c0-4.48-1.28-6.4-4.48-6.4-3.84 0-4.479 1.92-4.479 1.92V21.8H21.8v13.44h4.48zm-6.72-17.92a2.56 2.56 0 1 1-5.12 0 2.56 2.56 0 0 1 5.12 0"/></svg>
+
+              <% elsif link[:icon] == 'youtube' %>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.88 33.32V16.68L33.32 25l-13.44 8.32z"/></svg>
+
+              <% else %>
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M12.84 14.12v19.2h5.76l5.76 5.76v-5.76h12.8v-19.2H12.84zm3.2 8.32H28.2V25H16.04v-2.56zm16 7.68h-16v-2.56h16v2.56zm1.92-10.24H16.04v-2.56h17.92v2.56z"/></svg>
+
+              <% end %>
+            </span><span class="visually-hidden">Share on </span><%= link[:text] %><% end %>
+        </li>
+      <% end %>
+    </ul>
   </div>
 <% end %>