Refactor to avoid HTML in markdown

- Refactors CSS to avoid duplicate rules
- Adds a JavaScript file for formatting the details box
- Fixes for the details box for small-width and shorter
  amounts of surrounding content
- Clarifies that this is not a Pajamas alert"

5 files changed, 61 insertions, 36 deletions

diff --git a/.stylelintrc b/.stylelintrc
index 096fca96..b50ec7ea 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -9,6 +9,7 @@
     "max-nesting-depth": 4,
     "rule-empty-line-before": null,
     "selector-max-compound-selectors": 4,
-    "media-feature-name-no-vendor-prefix": null
+    "media-feature-name-no-vendor-prefix": null,
+    "at-rule-disallowed-list": null
   }
 }
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 6e1ce8a0..191f8f08 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -217,6 +217,7 @@
   .gl-h6 {
     @include gl-font-weight-bold;
     @include gl-mb-3;
+    clear: both;
 
     code {
       font-size: inherit;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index e2ed826e..4382dd47 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -168,7 +168,7 @@ ol {
 }
 
 // Pajamas alerts
-// https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/alerts-spec-previews/
+// https://design.gitlab.com/components/alert/
 .alert-note {
   background-color: $alert-note-bg;
   color: $alert-note-txt;
@@ -176,23 +176,6 @@ ol {
   border-radius: 5px;
 }
 
-.alert-details {
-  font-size: 0.875rem;
-  background-color: $alert-details-bg;
-  color: $alert-details-txt;
-  border: solid 1px $alert-details-border;
-  border-radius: 5px;
-  float: right;
-  width: 35%;
-  margin-left: 25px;
-
-  @media (max-width: $bp-sm) {
-    width: 100%;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-}
-
 .alert-warning {
   background-color: $alert-warning-bg;
   color: $alert-warning-txt;
@@ -214,22 +197,6 @@ ol {
   border-radius: 5px;
 }
 
-.alert-info {
-  background-color: $alert-info-bg;
-  color: $alert-info-txt;
-  border: solid 1px $alert-info-border;
-  border-radius: 5px;
-  float: right;
-  width: 30%;
-  margin-left: 25px;
-
-  @media (max-width: $bp-sm) {
-    width: 100%;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-}
-
 .alert-danger {
   background-color: $alert-danger-bg;
   color: $alert-danger-txt;
@@ -251,8 +218,37 @@ ol {
   border-radius: 5px;
 }
 
-// End of Pajamas alerts
+// Custom alerts
+%floating-alert {
+  border-radius: 5px;
+  float: right;
+  clear: both;
+  width: 30%;
+  margin-left: 2rem;
+
+  @media (max-width: $bp-sm) {
+    width: 100%;
+    margin: 0.25rem 0 1rem;
+    float: none;
+  }
+}
+
+.alert-info {
+  @extend %floating-alert;
+  background-color: $alert-info-bg;
+  color: $alert-info-txt;
+  border: solid 1px $alert-info-border;
+}
+
+.alert-details {
+  @extend %floating-alert;
+  font-size: 0.875rem;
+  background-color: $alert-details-bg;
+  color: $alert-details-txt;
+  border: solid 1px $alert-details-border;
+}
 
+// Sticky navbar
 body.has-archive-banner {
   .gl-alert.gl-alert-sticky {
     margin-top: 0;
diff --git a/content/frontend/default/feature_details.js b/content/frontend/default/feature_details.js
new file mode 100644
index 00000000..34c97ae1
--- /dev/null
+++ b/content/frontend/default/feature_details.js
@@ -0,0 +1,26 @@
+/**
+ * Adds line breaks and links to feature details boxes
+ */
+
+const TIER_LINK =
+  'https://about.gitlab.com/pricing/?glm_source=docs.gitlab.com&glm_content=badges-docs';
+const STATUS_LINK = 'https://docs.gitlab.com/ee/policy/experiment-beta-support.html';
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.alert-details').forEach((el) => {
+    el.querySelectorAll('.alert-details .alert-body strong').forEach((label, index) => {
+      // Add a line break before labels after the first one
+      if (index > 0) {
+        label.insertAdjacentHTML('beforebegin', '<br>');
+      }
+
+      // Wrap labels in links
+      if (label.textContent.trim() === 'Tier:') {
+        label.innerHTML = `<a href="${TIER_LINK}">Tier:</a>`; // eslint-disable-line no-param-reassign
+      }
+      if (label.textContent.trim() === 'Status:') {
+        label.innerHTML = `<a href="${STATUS_LINK}">Status:</a>`; // eslint-disable-line no-param-reassign
+      }
+    });
+  });
+});
diff --git a/layouts/default.html b/layouts/default.html
index c7da9cd3..6e580d3f 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -89,6 +89,7 @@
     <% end %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/frontend/default/badges.*'].path %>"></script>
+    <script src="<%= @items['/frontend/default/feature_details.*'].path %>"></script>
 
     <%# Add analytics only in production %>
     <%= render '/analytics.*' %>