VOTE-959 VOTE-960 video and document style refinements

web/themes/custom/votegov/src/sass/base/media.scss

@@ -1,25 +1,23 @@
 @use "uswds-core" as *;
 @use "variables" as *;
+@use "mixins" as *;
 
 // Figure
 figure {
   @include u-margin-x('auto');
   @include u-margin-y('auto');
+  @include vote-block-item-margin-y;
 }
 
 figcaption {
+  @include u-font-family('sans');
   @include u-font-size('sans', 4);
   @include u-display('block');
-  color: gray;
-
-  * + & {
-    @include u-margin-top(2);
-  }
 }
 
 // Video
 Video,
-.video-container iframe {
+.vote-media--remote-video__container iframe {
   aspect-ratio: 16 / 9;
   width: 100%;
   height: auto;

web/themes/custom/votegov/src/sass/components/_index.scss

@@ -19,4 +19,5 @@
 @forward "registration-tool";
 @forward "sitemap";
 @forward "touchpoints";
+@forward "media";
 

web/themes/custom/votegov/src/sass/components/media.scss

@@ -0,0 +1,7 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+@use "mixins" as *;
+
+.vote-media--remote-video {
+  @include vote-block-item-margin-y;
+}

web/themes/custom/votegov/src/sass/mixins/mixins.scss

@@ -50,6 +50,12 @@
   }
 }
 
+@mixin vote-block-item-margin-y {
+  > * + * {
+    @include u-margin-top(2);
+  }
+}
+
 @mixin hover {
   &:hover,
   &:focus {

web/themes/custom/votegov/templates/media/media--document.html.twig

@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Theme override to display a media item: document.
+ */
+#}
+
+{% extends 'media.html.twig' %}
+
+{% block content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.field_media_file | render %}
+      {{ content.field_media_file | field_value }}
+      <svg class="usa-icon usa-icon--size-3 text-tbottom" aria-hidden="true" focusable="false" role="img">
+        <use xlink:href="{{ uswds_img_path }}/sprite.svg#file_present"></use>
+      </svg>
+    {% endif %}
+  </div>
+{% endblock %}

web/themes/custom/votegov/templates/media/media--image.html.twig

@@ -1,35 +1,20 @@
 {#
 /**
  * @file
- * Theme override to display a media item.
- *
- * Available variables:
- * - media: The media item, with limited access to object properties and
- *   methods.
- * - name: Name of the media.
- * - content: Media content.
- *
- * @see template_preprocess_media()
- *
- * @ingroup themeable
+ * Theme override to display a media item: image.
  */
 #}
 
-{% set classes = [
-  'media',
-  'media--type--' ~ media.bundle()|clean_class,
-  not media.isPublished() ? 'media--unpublished',
-  view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
-] %}
+{% extends 'media.html.twig' %}
 
-<figure{{ attributes.addClass(classes) }}>
-  {{ title_suffix.contextual_links }}
+{% block content %}
+  <figure{{ attributes.addClass(classes) }}>
+    {{ content.field_media_image | field_value }}
 
-  {{ content.field_media_image | field_value }}
-
-  {% if content.field_caption | render %}
-    <figcaption>
-      {{ content.field_caption | field_value }}
-    </figcaption>
-  {% endif %}
-</figure>
+    {% if content.field_caption | render %}
+      <figcaption class="vote-caption">
+        {{ content.field_caption | field_value }}
+      </figcaption>
+    {% endif %}
+  </figure>
+{% endblock %}

web/themes/custom/votegov/templates/media/media--remote-video.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override to display a media item: remote video.
+ */
+#}
+
+{% extends 'media.html.twig' %}
+
+{% block content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div class="vote-media--remote-video__container">
+      {{ content.field_media_oembed_video | field_value }}
+    </div>
+    {% if content.field_transcript | render %}
+      <div class="vote-media--remote-video__transcript">
+        {{ content.field_transcript | field_value }}
+      </div>
+    {% endif %}
+  </div>
+{% endblock %}

web/themes/custom/votegov/templates/media/media.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Theme override to display a media item.
+ *
+ * Available variables:
+ * - media: The media item, with limited access to object properties and
+ *   methods.
+ * - name: Name of the media.
+ * - content: Media content.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% set classes = [
+  'vote-media',
+  'vote-media--' ~ media.bundle()|clean_class,
+  not media.isPublished() ? 'vote-media--unpublished',
+  view_mode ? 'vote-media--' ~ view_mode|clean_class,
+] %}
+
+{% block content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endblock %}