Merge pull request #945 from uktrade/feature/article-page-video

Display image or video on international article page

core/sass/atlas/_tokens.scss

@@ -16,6 +16,7 @@ $atlas-green-light: #8ce2d0;
 
 $atlas-blue-lighter: #d2d0da;
 $atlas-blue-light: #787191;
+$atlas-blue-link: #1D70B8;
 
 $govuk-focus-yellow: #ffbf47;
 
@@ -32,10 +33,27 @@ $breakpoint-medium: 768px;
 $breakpoint-large: 1024px;
 $breakpoint-xlarge: 1300px;
 
-$breakpoint-suffixes: ("-s": $breakpoint-small, "-m": $breakpoint-medium, "-l": $breakpoint-large, "-xl": $breakpoint-xlarge);
-
-$spacings: ("xs": 10px, "s": 15px, "m": 30px, "l": 45px, "xl": 75px);
-$spacings-medium: ("xs": 15px, "s": 25px, "m": 40px, "l": 60px, "xl": 100px);
+$breakpoint-suffixes: (
+    "-s": $breakpoint-small,
+    "-m": $breakpoint-medium,
+    "-l": $breakpoint-large,
+    "-xl": $breakpoint-xlarge
+);
+
+$spacings: (
+    "xs": 10px,
+    "s": 15px,
+    "m": 30px,
+    "l": 45px,
+    "xl": 75px
+);
+$spacings-medium: (
+    "xs": 15px,
+    "s": 25px,
+    "m": 40px,
+    "l": 60px,
+    "xl": 100px
+);
 
 
 $govuk-focus: 4px solid $govuk-focus-yellow;

core/sass/atlas/components/_details.scss

@@ -2,20 +2,35 @@
 
 .atlas-details {
   & summary {
-    color: $atlas-body;
+    color: $atlas-blue-link;
     text-decoration: underline;
   }
 
   & summary::-webkit-details-marker {
     display: none;
   }
 
-  & summary .atlas-button__icon {
+  & summary .atlas-button__icon,
+  & summary .atlas-details__icon {
     transform: rotate(90deg);
     transition: transform ease-in-out .25s;
   }
 
-  &[open] summary .atlas-button__icon {
+  &[open] summary .atlas-button__icon,
+  &[open] summary .atlas-details__icon {
     transform: rotate(-90deg);
   }
+
+  & .atlas-details__icon {
+    width: 1em;
+    height: 1em;
+    margin-left: 0;
+    margin-right: 5px;
+
+    & svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
 }

core/sass/atlas/components/_images.scss

@@ -1,3 +1,5 @@
+@import '../tokens';
+
 .atlas-image,
 .atlas-video video {
   display: block;
@@ -7,9 +9,9 @@
 }
 
 .atlas-video__transcript {
-  max-height: 9em;
-  overflow-y: scroll;
-  white-space: pre-line;
+  border-left: 5px solid $atlas-grey-light;
+  padding: 0 20px;
+  margin-top: 20px;
 }
 
 // The following three blocks set scrollbar to always appear

core/sass/atlas/main.scss

@@ -36,4 +36,4 @@
 @import 'pages/opportunity';
 @import 'pages/region-listing';
 @import 'pages/search';
-@import 'pages/freeport'
+@import 'pages/article-page'

core/sass/atlas/pages/_freeport.scss → core/sass/atlas/pages/_article-page.scss

@@ -1,9 +1,8 @@
-.freeport-map-container {
-  height: 400px;
+.article-video-container {
   width: 50%;
   position: relative;
   float: right;
-  margin-left: 10px;
+  margin-left: 30px;
   margin-bottom: 10px;
 
   .atlas-card__heading {

core/static/core/js/videoTranscript.js

@@ -0,0 +1,14 @@
+const handleToggle = (element) => {
+  const summaryText = element.getElementsByClassName('atlas-summary-text')[0]
+
+  if (summaryText.textContent === 'View video transcript') {
+    summaryText.textContent = 'Hide video transcript'
+  } else {
+    summaryText.textContent = 'View video transcript'
+  }
+}
+
+const detailsElements = document.querySelectorAll('[data-transcript-toggle]')
+detailsElements.forEach((element) =>
+  element.addEventListener('toggle', () => handleToggle(element))
+)

investment_atlas/templates/investment_atlas/article_detail.html

@@ -1,4 +1,10 @@
 {% extends 'investment_atlas/base_cms.html' %}
+{% load static %}
+
+{% block body_js %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static 'core/js/videoTranscript.js' %}"></script>
+{% endblock %}
 {% block content %}
     {% if page.hero_video or page.hero_image %}
         {% include 'investment_atlas/includes/hero_image.html' %}
@@ -23,11 +29,16 @@ <h1 class="atlas-h--l">{{ page.title }}</h1>
         {% endif  %}  
         <div class="{% if page.hero_video or page.hero_image %} atlas-cms-text atlas-m-b-m {% else %} atlas-container atlas-p-v-l {% endif %}">
             <div class="atlas-cms-text atlas-cms-text--regular-headings atlas-p-b-m">
-            {% if page.type_of_article == 'Freeport landing' %}
-                <div class="freeport-map-container">
-            {% include 'investment_atlas/includes/freeport_map.html' with title=page.title %}
-        </div>
-            {% endif %} 
+            {% if page.article_video %}
+            <div class="article-video-container">
+              {% include 'investment_atlas/includes/video.html' with video=page.article_video %}
+            </div>
+          {% endif %}
+          {% if page.article_image and not page.article_video %}
+            <div class="article-video-container">
+                <img src="{{ page.article_image.url }}" alt="{{ page.article_image.alt }}" class="width-full">
+            </div>
+          {% endif %}
                 {{ page.article_body_text|safe }}
             </div>
         </div>

investment_atlas/templates/investment_atlas/general_content_page.html

@@ -1,4 +1,10 @@
 {% extends 'investment_atlas/base_cms.html' %}
+{% load static %}
+
+{% block body_js %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static 'core/js/videoTranscript.js' %}"></script>
+{% endblock %}
 
 {% block content %}
     {% include 'investment_atlas/includes/hero_image.html' %}

investment_atlas/templates/investment_atlas/includes/video.html

@@ -17,15 +17,15 @@
     </video>
 
     {% if video.transcript %}
-        <details class="atlas-details atlas-m-t-xs">
+        <details data-transcript-toggle class="atlas-details atlas-m-t-xs">
             <summary class="atlas-button atlas-button--link">
-                View transcript
-                <span class="atlas-button__icon">
+                <span class="atlas-details__icon">
                     {% include 'investment_atlas/includes/svg/icon-arrow.svg' %}
                 </span>
+                <span class='atlas-summary-text'>View video transcript</span>
             </summary>
 
-            <div class="atlas-video__transcript atlas-bg--grey-lighter atlas-m-t-xs atlas-p-s">{{ video.transcript }}</div>
+            <div aria-label="video transcript" class="atlas-video__transcript atlas-m-t-xs atlas-p-s">{{ video.transcript }}</div>
         </details>
     {% endif %}
 </div>

investment_atlas/templates/investment_atlas/investment.html

@@ -1,6 +1,10 @@
 {% extends 'investment_atlas/base_cms.html' %}
 {% load static %}
 
+{% block body_js %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static 'core/js/videoTranscript.js' %}"></script>
+{% endblock %}
 {% block content %}
     <div class="atlas-landing__hero">
     {% if page.hero_video %}

investment_atlas/templates/investment_atlas/opportunity.html

@@ -1,6 +1,11 @@
 {% extends 'investment_atlas/base_cms.html' %}
 {% load static %}
 
+{% block body_js %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static 'core/js/videoTranscript.js' %}"></script>
+{% endblock %}
+
 {% block content %}
     {% include 'investment_atlas/includes/hero_image.html' %}
 

investment_atlas/templates/investment_atlas/why_invest_in_the_uk_page.html

@@ -1,5 +1,10 @@
 {% extends 'investment_atlas/base_cms.html' %}
+{% load static %}
 
+{% block body_js %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static 'core/js/videoTranscript.js' %}"></script>
+{% endblock %}
 {% block content %}
     {% include 'investment_atlas/includes/hero_image.html' %}