Add new alert type for feature availability

8 files changed, 107 insertions, 63 deletions

diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 6e1ce8a0..1dac9dd2 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -173,14 +173,17 @@
   }
 
   .introduced-in {
-    border-left: 4px solid $theme-indigo-200;
+    border-left: 2px solid $color-tanuki-light;
     padding-left: 0.75rem;
     margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    line-height: 1.65rem;
 
-    p,
+    ul,
     li,
-    a {
-      font-size: 0.875rem;
+    p {
+      margin: 0;
+      padding-bottom: 0;
     }
   }
 
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 441557c5..a545a0b8 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -76,7 +76,7 @@ $toc-link-color: $global-nav-link-level2;
 /// Elements
 $h1-border-bottom: $gds-gray-700;
 
-// Pajama alerts
+// Alerts
 $alert-note-bg: #fafafa;
 $alert-note-txt: $gds-black;
 $alert-note-border: #dbdbdb;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 65ec26dd..da8a8325 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -167,8 +167,33 @@ ol {
   }
 }
 
+.admonition {
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.admonition-non-dismissable {
+  position: relative;
+  padding-top: $gl-spacing-scale-5;
+  padding-bottom: $gl-spacing-scale-5;
+  padding-left: $gl-spacing-scale-9;
+
+  .alert-icon {
+    margin-top: $gl-spacing-scale-1;
+    position: absolute;
+    top: $gl-spacing-scale-5;
+    left: $gl-spacing-scale-5;
+    vertical-align: middle;
+  }
+
+  .alert-body {
+    @include gl-line-height-24;
+  }
+}
+
 // 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;
@@ -197,22 +222,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;
@@ -236,6 +245,31 @@ ol {
 
 // End of Pajamas alerts
 
+// Custom alerts
+.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: 2rem;
+
+  @media (max-width: $bp-sm) {
+    width: 100%;
+    margin: 0.25rem 0 1rem;
+    float: none;
+  }
+}
+
+.alert-details {
+  font-size: 0.875rem;
+  border-left: 2px solid $color-tanuki-light;
+  padding: 0 0 0 0.75rem;
+  margin-bottom: 0;
+}
+
+// Sticky navbar
 body.has-archive-banner {
   .gl-alert.gl-alert-sticky {
     margin-top: 0;
@@ -497,31 +531,6 @@ p.result-snippet {
   margin: 1rem 0;
 }
 
-.admonition {
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.admonition-non-dismissable {
-  position: relative;
-  padding-top: $gl-spacing-scale-5;
-  padding-bottom: $gl-spacing-scale-5;
-  padding-left: $gl-spacing-scale-9;
-
-  .alert-icon {
-    margin-top: $gl-spacing-scale-1;
-    position: absolute;
-    top: $gl-spacing-scale-5;
-    left: $gl-spacing-scale-5;
-    vertical-align: middle;
-  }
-
-  .alert-body {
-    @include gl-line-height-24;
-  }
-}
-
 .gl-tabs .gl-tabs-nav {
   margin-bottom: 0;
 }
diff --git a/content/frontend/default/feature_details.js b/content/frontend/default/feature_details.js
new file mode 100644
index 00000000..17e15c2b
--- /dev/null
+++ b/content/frontend/default/feature_details.js
@@ -0,0 +1,26 @@
+/**
+ * Formats the feature details box
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.admonition-wrapper.details').forEach((el) => {
+    // Add a line break before availability labels
+    el.querySelectorAll('strong').forEach((label, index) => {
+      if (index > 0) {
+        label.insertAdjacentHTML('beforebegin', '<br>');
+      }
+    });
+
+    // Add a bottom margin if an accompanying "Version history" section is not present
+    if (!el.nextElementSibling.classList.contains('introduced-in')) {
+      el.classList.add('gl-mb-3');
+    }
+  });
+
+  // Bold the "Version history" label if it's adjacent to a feature details box
+  document.querySelectorAll('.introduced-in').forEach((el) => {
+    if (el.previousElementSibling.classList.contains('details')) {
+      el.querySelector('.version-label').classList.add('gl-font-weight-bold');
+    }
+  });
+});
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.*' %>
diff --git a/lib/filters/admonition.rb b/lib/filters/admonition.rb
index d19f97ac..387fa285 100644
--- a/lib/filters/admonition.rb
+++ b/lib/filters/admonition.rb
@@ -10,7 +10,7 @@ class AdmonitionFilter < Nanoc::Filter
     doc = Nokogiri::HTML.fragment(content.dup)
     doc.css('p').each do |para|
       content = para.inner_html
-      match = content.match(%r{\A(?<type>NOTE|WARNING|FLAG|INFO|DISCLAIMER):\s?(?<content>.*)\Z}m)
+      match = content.match(%r{\A(?<type>NOTE|WARNING|FLAG|INFO|DISCLAIMER|DETAILS):\s?(?<content>.*)\Z}m)
       next unless match
 
       new_content = admonition(match[:type].downcase, match[:content])
diff --git a/lib/filters/introduced_in.rb b/lib/filters/introduced_in.rb
index 9ab479cc..a15ee6aa 100644
--- a/lib/filters/introduced_in.rb
+++ b/lib/filters/introduced_in.rb
@@ -39,18 +39,13 @@ class IntroducedInFilter < Nanoc::Filter
 
   def generate(content)
     @incremental_id += 1
-    # If the content is a list of items, collapse the content.
-    if content.match?(%r{<ul>}i)
-      <<~HTML
-      <div class="introduced-in mb-3">Version history
-        <button class="text-expander" type="button" data-toggle="collapse" data-target="#release_version_notes_#{@incremental_id}" aria-expanded="false" aria-controls="release_version_notes_#{@incremental_id}" aria-label="Version history"></button>
-        <div class="introduced-in-content collapse" id="release_version_notes_#{@incremental_id}">
-          #{content}
-        </div>
+    <<~HTML
+    <div class="introduced-in mb-3"><span class="version-label">Version history</span>
+      <button class="text-expander" type="button" data-toggle="collapse" data-target="#release_version_notes_#{@incremental_id}" aria-expanded="false" aria-controls="release_version_notes_#{@incremental_id}" aria-label="Version history"></button>
+      <div class="introduced-in-content collapse" id="release_version_notes_#{@incremental_id}">
+        #{content}
       </div>
-      HTML
-    else
-      %(<div class="introduced-in">#{content}</div>)
-    end
+    </div>
+    HTML
   end
 end
diff --git a/lib/helpers/admonition.rb b/lib/helpers/admonition.rb
index e6df0eca..f1a4d54e 100644
--- a/lib/helpers/admonition.rb
+++ b/lib/helpers/admonition.rb
@@ -7,7 +7,8 @@ module Nanoc::Helpers
       'warning' => 'warning',
       'flag' => 'flag',
       'info' => 'info',
-      'disclaimer' => 'disclaimer'
+      'disclaimer' => 'disclaimer',
+      'details' => 'details'
     }.freeze
 
     GITLAB_SVGS_MAPPING = {
@@ -15,14 +16,23 @@ module Nanoc::Helpers
       'warning' => 'warning',
       'flag' => 'flag',
       'info' => 'tanuki',
-      'disclaimer' => 'review-warning'
+      'disclaimer' => 'review-warning',
+      'details' => ''
     }.freeze
 
     def admonition(kind, content)
       kind = kind.downcase
+      icon = GITLAB_SVGS_MAPPING[kind]
+
+      icon_html = if icon.nil? || icon.empty?
+                    ""
+                  else
+                    icon(GITLAB_SVGS_MAPPING[kind], 16, 'alert-icon')
+                  end
+
       %(<div class="mt-3 admonition-wrapper #{kind}">) +
         %(<div class="admonition admonition-non-dismissable alert alert-#{BOOTSTRAP_MAPPING[kind]}">) +
-        %(<div>#{icon(GITLAB_SVGS_MAPPING[kind], 16, 'alert-icon')}<div role="alert"><div class="alert-body">#{content}</div></div></div></div></div>)
+        %(<div>#{icon_html}<div role="alert"><div class="alert-body">#{content}</div></div></div></div></div>)
     end
 
     def legal_disclaimer