Add figure component

FIX component

FIX - welsh translation for figure component

app/assets/stylesheets/components/_figure.scss

@@ -0,0 +1,47 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.app-c-figure {
+  @include govuk-clearfix;
+
+  border-top: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(3);
+  margin: 0;
+  margin-bottom: govuk-spacing(8);
+
+  @include govuk-media-query($until: tablet) {
+    margin-bottom: govuk-spacing(6);
+  }
+}
+
+.app-c-figure__image {
+  display: block;
+  width: 100%;
+
+  @include govuk-media-query($from: tablet) {
+    float: left;
+    width: 50%;
+  }
+}
+
+.app-c-figure__figcaption {
+  @include govuk-font(16);
+
+  @include govuk-media-query($from: tablet) {
+    display: block;
+    vertical-align: top;
+    box-sizing: border-box;
+    float: left;
+    padding-left: govuk-spacing(3);
+    width: 50%;
+  }
+
+  @include govuk-media-query($until: tablet) {
+    margin-top: govuk-spacing(2);
+  }
+}
+
+.app-c-figure__figcaption-text {
+  @include govuk-font(16);
+  margin: 0;
+  margin-bottom: govuk-spacing(2);
+}

app/views/components/_figure.html.erb

@@ -0,0 +1,25 @@
+<% add_app_component_stylesheet("figure") %>
+<%
+  alt ||= ''
+  caption ||= ''
+  credit ||= ''
+%>
+<figure class="app-c-figure" lang="en">
+  <% if src.present? %>
+    <img class="app-c-figure__image" src="<%= src %>" alt="<%= alt %>">
+  <% end %>
+  <% if caption.present? || credit.present? %>
+    <figcaption class="app-c-figure__figcaption">
+      <% if caption.present? %>
+        <p class="app-c-figure__figcaption-text">
+          <%= caption %>
+        </p>
+      <% end %>
+      <% if credit.present? %>
+        <p class="app-c-figure__figcaption-text">
+          <%= I18n.t("components.figure.image_credit", credit: credit) %>
+        </p>
+      <% end %>
+    </figcaption>
+  <% end %>
+</figure>

app/views/components/docs/figure.yml

@@ -0,0 +1,43 @@
+name: Figure
+description: A figure containing an image that never exceeds the component’s width
+body: |
+  A figure should be used for images that are referenced within a page, but which can be moved around without affecting the flow of the page [(see guidance here)](https://developer.mozilla.org/en/docs/Web/HTML/Element/figure)
+
+  Examples:
+
+  - [Case Study containing an image](/government/case-studies/2013-elections-in-swaziland)
+  - [Travel Advice containing a map (image)](/foreign-travel-advice/nepal)
+accessibility_criteria: |
+  The figure must:
+
+  - provide an informative text description, as alt text or caption
+
+examples:
+  default:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+  figure_with_alt_text:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      alt: 'An image of the lords chamber'
+  figure_with_caption:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      alt: 'An image of the lords chamber'
+      caption: 'The Lords Chamber'
+  right_to_left_with_caption:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg'
+      alt: 'تأشيرات'
+      caption: 'تأشيرات'
+    context:
+      right_to_left: true
+  figure_with_credit:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      credit: Wallis Crankled
+  figure_with_caption_and_credit:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      caption: The Lords Chamber
+      credit: Wallis Crankled

config/initializers/dartsass.rb

@@ -1,6 +1,7 @@
 APP_STYLESHEETS = {
   "application.scss" => "application.css",
   "components/_calendar.scss" => "components/_calendar.css",
+  "components/_figure.scss" => "components/_figure.css",
   "components/_subscribe.scss" => "components/_subscribe.css",
   "views/_calendars.scss" => "views/_calendars.css",
   "views/_cookie-settings.scss" => "views/_cookie-settings.css",

config/locales/cy.yml

@@ -99,6 +99,9 @@ cy:
     substitute_day: Diwrnod amgen
     today: heddiw
     upcoming_bank_holidays: Gwyliau banc i ddod
+  components:
+    figure:
+      image_credit: 'Delwedd gan: %{credit}'
   continue: Parhau
   cookies:
     always_on: Mae angen iddynt fod ymlaen bob amser.

config/locales/en.yml

@@ -99,6 +99,14 @@ en:
     substitute_day: Substitute day
     today: today
     upcoming_bank_holidays: Upcoming bank holidays
+  components:
+    figure:
+      image_credit: 'Image credit: %{credit}'
+  content_item:
+    schema_name:
+      take_part:
+        one: Take part
+        other: Take part
   continue: Continue
   cookies:
     always_on: They always need to be on.

spec/components/figure_spec.rb

@@ -0,0 +1,47 @@
+RSpec.describe "FigureComponent", type: :view do
+  def component_name
+    "figure"
+  end
+
+  it "fails to render a figure when no data is given" do
+    expect { render_component({}) }.to raise_error
+  end
+
+  it "fails to render an image when no source is given" do
+    render_component(src: "", alt: "")
+
+    expect(rendered).not_to have_css("img")
+  end
+
+  it "renders a figure correctly" do
+    render_component(src: "/image", alt: "image alt text")
+
+    expect(rendered).to have_css(".app-c-figure__image[src=\"/image\"]")
+    expect(rendered).to have_css(".app-c-figure__image[alt=\"image alt text\"]")
+  end
+
+  it "renders a figure with caption correctly" do
+    render_component(src: "/image", alt: "image alt text", caption: "This is a caption")
+
+    expect(rendered).to have_css(".app-c-figure__image[src=\"/image\"]")
+    expect(rendered).to have_css(".app-c-figure__image[alt=\"image alt text\"]")
+    expect(rendered).to have_css(".app-c-figure__figcaption .app-c-figure__figcaption-text", text: "This is a caption")
+  end
+
+  it "renders a figure with credit correctly" do
+    render_component(src: "/image", alt: "image alt text", credit: "Creative Commons")
+
+    expect(rendered).to have_css(".app-c-figure__image[src=\"/image\"]")
+    expect(rendered).to have_css(".app-c-figure__image[alt=\"image alt text\"]")
+    expect(rendered).to have_css(".app-c-figure__figcaption .app-c-figure__figcaption-text", text: "Image credit: Creative Commons")
+  end
+
+  it "renders a figure with caption and credit correctly" do
+    render_component(src: "/image", alt: "image alt text", caption: "This is a caption", credit: "Creative Commons")
+
+    expect(rendered).to have_css(".app-c-figure__image[src=\"/image\"]")
+    expect(rendered).to have_css(".app-c-figure__image[alt=\"image alt text\"]")
+    expect(rendered).to have_css(".app-c-figure__figcaption .app-c-figure__figcaption-text", text: "This is a caption")
+    expect(rendered).to have_css(".app-c-figure__figcaption .app-c-figure__figcaption-text", text: "Image credit: Creative Commons")
+  end
+end