frontend/app/views/components/_impact_header.html.erb at 05b32454cc7438c0658078a98af5be7499e58554 · alphagov/frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<%
  heading ||= nil
  description ||= nil
  image ||= nil
  image_type ||= nil
  variant ||= nil

  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
  component_helper.add_class("app-c-impact-header")
  component_helper.add_class("app-c-impact-header--logo") if image_type == "logo"
  component_helper.add_class("app-c-impact-header--govuk") if variant == "govuk"
  component_helper.add_class("app-c-impact-header--with-background") if variant
  component_helper.add_class("app-c-impact-header--plain") unless variant || image_type == "logo"

  if variant == "notable-death"
    component_helper.add_class("app-c-impact-header--notable-death") if variant == "notable-death"
    inverse = true
  end

  show_caption = true if image && image[:caption] && !image[:caption].empty? && image_type != "logo"
%>
<% if heading %>
  <% text = capture do %>
    <%= render "govuk_publishing_components/components/heading", {
      text: heading,
      font_size: "xl",
      margin_bottom: 6,
      heading_level: 1,
      inverse: inverse,
    } %>

    <%= render "govuk_publishing_components/components/lead_paragraph", {
      text: description,
      margin_bottom: 0,
      inverse: inverse,
    } %>
  <% end %>

  <% caption = capture do %>
    <% if show_caption %>
      <div class="app-c-impact-header__caption">
        <%= render "govuk_publishing_components/components/details", {
          title: "Image details",
          theme: ("black" unless inverse),
          inverse: inverse,
          margin_bottom: 0,
        } do %>
          <%= image[:caption] %>
        <% end %>
      </div>
    <% end %>
  <% end %>

  <%= tag.div(**component_helper.all_attributes) do %>
    <% if image %>
      <div class="app-c-impact-header__container">
        <div class="app-c-impact-header__detail">
          <%= text %>
        </div>

        <div class="app-c-impact-header__image-wrapper">
          <div class="app-c-impact-header__image-thing">
            <%= picture_tag(class: "") do %>
              <%= tag.source srcset: srcset_string(:desktop, image), media: "(min-width: 769px)" %>
              <%= tag.source srcset: srcset_string(:tablet, image), media: "(min-width: 641px) and (max-width: 768px)" %>
              <%= tag.source srcset: srcset_string(:mobile, image), media: "(max-width: 640px)" %>
              <%= image_tag(image[:sources][:desktop], class: "app-c-impact-header__image", alt: "") %>
            <% end %>
          </div>
        <%= caption %>
        </div>
      </div>
    <% else %>
      <div class="app-c-impact-header__grid">
        <div class="govuk-grid-row">
          <div class="govuk-grid-column-two-thirds">
            <%= text %>
          </div>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>