Add read more and real less on long description

In the spec we added in system/sdg/goals_spec.rb we couldn't use
either click_link or find_link, because the link to show/hide the
long description doesn't have the href attribute.

app/assets/stylesheets/sdg/goals/show.scss

@@ -63,6 +63,21 @@
         }
       }
     }
+
+    .goal-description-content {
+
+      .read-more {
+        text-align: center;
+      }
+    }
+
+    .goal-description {
+
+      &.short {
+        height: rem-calc(150);
+        overflow: hidden;
+      }
+    }
   }
 
   .feed-processes {

app/components/sdg/goals/show_component.html.erb

@@ -8,7 +8,22 @@
       <h1><%= heading %></h1>
     </header>
     <div class="goal-description-content">
-      <%= long_description %>
+      <div id="description_goal_<%= goal.code %>" class="goal-description short" data-toggler="short">
+        <%= long_description %>
+      </div>
+      <div class="read-more">
+        <a id="read_more_goal_<%= goal.code %>"
+           data-toggle="description_goal_<%= goal.code %> read_more_goal_<%= goal.code %> read_less_goal_<%= goal.code %>"
+           data-toggler="hide">
+          <%= t("sdg.goals.show.read_more", goal: goal.title) %>
+        </a>
+        <a id="read_less_goal_<%= goal.code %>"
+           data-toggle="description_goal_<%= goal.code %> read_more_goal_<%= goal.code %> read_less_goal_<%= goal.code %>"
+           data-toggler="hide"
+           class="hide">
+          <%= t("sdg.goals.show.read_less", goal: goal.title) %>
+        </a>
+      </div>
     </div>
   </article>
 

config/locales/en/sdg.yml

@@ -441,6 +441,9 @@ en:
             title: "By 2020, enhance capacity-building support to developing countries, including for least developed countries and small island developing States, to increase significantly the availability of high-quality, timely and reliable data disaggregated by income, gender, age, race, ethnicity, migratory status, disability, geographic location and other characteristics relevant in national contexts."
           target_17_19:
             title: "By 2030, build on existing initiatives to develop measurements of progress on sustainable development that complement gross domestic product, and support statistical capacity-building in developing countries."
+      show:
+        read_more: "Read more about %{goal}"
+        read_less: "Read less about %{goal}"
       title: "Sustainable Development Goals"
       filter:
         heading: "Filters by SDG"

config/locales/es/sdg.yml

@@ -441,6 +441,9 @@ es:
             title: "De aquí a 2020, mejorar el apoyo a la creación de capacidad prestado a los países en desarrollo, incluidos los países menos adelantados y los pequeños Estados insulares en desarrollo, para aumentar significativamente la disponibilidad de datos oportunos, fiables y de gran calidad desglosados por ingresos, sexo, edad, raza, origen étnico, estatus migratorio, discapacidad, ubicación geográfica y otras características pertinentes en los contextos nacionales."
           target_17_19:
             title: "De aquí a 2030, aprovechar las iniciativas existentes para elaborar indicadores que permitan medir los progresos en materia de desarrollo sostenible y complementen el producto interno bruto, y apoyar la creación de capacidad estadística en los países en desarrollo."
+      show:
+        read_more: "Leer más sobre %{goal}"
+        read_less: "Leer menos sobre %{goal}"
       title: "Objetivos de Desarrollo Sostenible"
       filter:
         heading: "Filtros por ODS"

spec/components/sdg/goals/show_component_spec.rb

@@ -23,5 +23,8 @@ describe SDG::Goals::ShowComponent, type: :component do
 
     expect(page).to have_css "#description_goal_#{goal_1.code}"
     expect(page).to have_content "Globally, the number of people living in extreme poverty"
+    expect(page).to have_css "#read_more_goal_#{goal_1.code}"
+    expect(page).to have_content "Read more about No Poverty"
+    expect(page).to have_css "#read_less_goal_#{goal_1.code}.hide"
   end
 end

spec/system/sdg/goals_spec.rb

@@ -105,5 +105,17 @@ describe "SDG Goals", :js do
         expect(page).to have_select "By SDG", selected: "15. Life on Land"
       end
     end
+
+    scenario "has links to read more and read less for long description" do
+      visit sdg_goal_path(15)
+
+      expect(page).to have_css("div.read-more a", text: "Read more about Life on Land")
+      expect(page).to have_css("div.read-more a", text: "Read less about Life on Land", visible: :hidden)
+
+      find("div.read-more a", text: "Read more about Life on Land").click
+
+      expect(page).to have_css("div.read-more a", text: "Read more about Life on Land", visible: :hidden)
+      expect(page).to have_css("div.read-more a", text: "Read less about Life on Land")
+    end
   end
 end