Reformats File link in Media Document

localgov_theme.theme

@@ -190,3 +190,29 @@ function localgov_theme_preprocess_paragraph(&$variables) {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_file_link().
+ *
+ * Changes:
+ * - Inserts file *type* and size into the theme variable.
+ * - Reformats file size.  Example: 123.4KB.
+ * - Appends file metadata to the file link text.
+ *
+ * @see template_preprocess_file_link()
+ */
+function localgov_theme_preprocess_file_link(&$variables) {
+
+  $file = $variables['file'];
+  $filename = $file->getFilename();
+  $file_extension = pathinfo($filename, PATHINFO_EXTENSION);
+
+  $variables['file_type'] = strtoupper($file_extension);
+
+  // 123.45 KB -> 123.45KB
+  $variables['file_size'] = strtr($variables['file_size'], [' ' => '']);
+
+  $variables['link']['#title'] = [
+    '#markup' => "{$variables['link']['#title']} <span class=\"file-meta\">(<span class=\"file-type\">{$variables['file_type']}</span>, <span class=\"file-size\">{$variables['file_size']}</span>)</span>",
+  ];
+}

templates/field/file-link.html.twig

@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Theme implementation for a file link.
+ *
+ * Among other places, this is used by the "Generic file" field formatter.
+ *
+ * Available variables:
+ * - attributes: The HTML attributes for the containing element.
+ * - link: A link to the file.
+ * - file_size: The size of the file.
+ * - file_type: This is the second part of the mimetype e.g. a mimetype of
+ *   "application/pdf" leads to a file type of "pdf".
+ *
+ * Example output markup:
+ * <span><a href="https://example.net/files/foo.pdf">Foo</a></span>
+ * <span class="file-meta">(<span class="file-type">PDF</span><span class="file-size">12.9KB</span>)</span>
+ *
+ * @see template_preprocess_file_link()
+ * @see localgov_theme_croydon_preprocess_file_link()
+ *
+ * @ingroup themeable
+ */
+#}
+<span{{ attributes }}>
+  {{ link }}
+</span>

templates/media/media--document.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme template for Media document.
+ *
+ * The "Default" display mode of Media document only displays a file link.
+ * Here we strip out all wrapper tags from the Default display and keep only
+ * the file link for the sake of minimal markup.  Media documents are often
+ * embedded within tWYSIWYG content.  The minimal markup suits that well.
+ *
+ * Available variables:
+ * - name: Name of the media.
+ * - content: Media content.  This is a File link.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  {{ content }}
+{% endif %}