Merge branch '1690-badge-refactor' into 'main'

Refactor tier badges

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4153

Merged-by: David O'Regan <doregan@gitlab.com>
Approved-by: David O'Regan <doregan@gitlab.com>
Approved-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

4 files changed, 12 insertions, 307 deletions

diff --git a/content/assets/javascripts/badges.js b/content/assets/javascripts/badges.js
deleted file mode 100644
index 9244526f..00000000
--- a/content/assets/javascripts/badges.js
+++ /dev/null
@@ -1,182 +0,0 @@
-(function() {
-  const classes = ['core-only', 'core', 'starter-only', 'premium-only', 'ultimate-only', 'starter', 'premium', 'ultimate', 'free-only' , 'bronze-only', 'silver-only', 'gold-only', 'free', 'free-saas', 'free-self', 'premium-saas', 'premium-self', 'ultimate-saas', 'ultimate-self', 'contribute'];
-
-  const BADGES_TITLES = {
-    // Free
-    free: 'On GitLab self-managed and GitLab SaaS, available in all tiers.',
-    'free-self':
-      'On GitLab self-managed, available in all tiers. Not available on GitLab SaaS.',
-    'free-only':
-      'On GitLab SaaS, available in all tiers. Not available on self-managed.',
-    'free-saas':
-      'On GitLab SaaS, available in all tiers. Not available on self-managed.',
-    // Premium
-    premium: 'On GitLab self-managed and GitLab SaaS, available in Premium and Ultimate.',
-    'premium-saas':
-      'On GitLab SaaS, available in Premium and Ultimate. Not available on self-managed.',
-    'silver-only':
-      'On GitLab SaaS, available in Premium and Ultimate. Not available on self-managed.',
-    'premium-only':
-      'On GitLab self-managed, available in Premium and Ultimate. Not available on GitLab SaaS.',
-    'premium-self':
-      'On GitLab self-managed, available in Premium and Ultimate. Not available on GitLab SaaS.',
-    // Ultimate
-    ultimate: 'On GitLab self-managed and GitLab SaaS, available in Ultimate.',
-    'ultimate-only':
-      'On GitLab self-managed, available in Ultimate. Not available on GitLab SaaS.',
-    'ultimate-self':
-      'On GitLab self-managed, available in Ultimate. Not available on GitLab SaaS.',
-    'ultimate-saas':
-      'On GitLab SaaS, available in Ultimate. Not available on self-managed.',
-    'gold-only':
-      'On GitLab SaaS, available in Ultimate. Not available on self-managed.',
-    // Deprecated badges
-    core: 'On GitLab self-managed and GitLab SaaS, available in all tiers.',
-    'core-only':
-      'On GitLab self-managed, available in all tiers. Not available on GitLab SaaS.',
-    starter: 'Available on GitLab Starter, GitLab.com Bronze, and higher tiers.',
-    'starter-only':
-      'Available on GitLab Starter and higher tiers. Not available on GitLab.com.',
-    'bronze-only':
-      'Available on GitLab Bronze and higher tiers. Not available on self-managed.',
-    // Contributor page badge
-    'contribute':
-      'Use this content to contribute to GitLab development.'
-  };
-
-  const BADGES_MAPPING = {
-    // Free
-    core: ['all tiers'],
-    free: ['all tiers'],
-    'core-only': ['all tiers', 'self-managed'],
-    'free-self': ['all tiers', 'self-managed'],
-    'free-only': ['all tiers', 'saas'],
-    'free-saas': ['all tiers', 'saas'],
-    // Premium
-    premium: ['premium'],
-    'silver-only': ['premium', 'saas'],
-    'premium-only': ['premium', 'self-managed'],
-    'premium-self': ['premium', 'self-managed'],
-    'premium-saas': ['premium', 'saas'],
-    // Ultimate
-    ultimate: ['ultimate'],
-    'ultimate-only': ['ultimate', 'self-managed'],
-    'gold-only': ['ultimate', 'saas'],
-    'ultimate-self': ['ultimate', 'self-managed'],
-    'ultimate-saas': ['ultimate', 'saas'],
-    // Deprecated badges
-    starter: ['starter', 'bronze'],
-    'starter-only': ['starter'],
-    'bronze-only': ['bronze'],
-    // Contributor badge
-    contribute: ['contribute']
-  };
-
-  const BADGES_CLASS = {
-    // Tier class
-    core: 'tier',
-    starter: 'tier',
-    premium: 'tier',
-    ultimate: 'tier',
-    'all tiers': 'tier',
-    // Contributors
-    'contribute': 'contribute',
-    // GitLab SaaS
-    bronze: 'saas',
-    silver: 'saas',
-    gold: 'saas',
-    saas: 'saas',
-    // GitLab self-managed
-    'self-managed': 'self-managed',
-  };
-
-  // Check if the currently-viewed page is GitLab contributor documentation.
-  const isContributorDocs = () => {
-    const paths = ['/ee/development/', '/omnibus/development/', '/runner/development/', '/charts/development/'];
-    return paths.some(substr => window.location.pathname.startsWith(substr))
-  }
-
-  function init() {
-    // Insert markup for the "Contribute" badge if this is a contributor doc page.
-    if (isContributorDocs()) {
-      $('<span class="badge-trigger contribute"></span>').insertBefore('h1 a');
-    }
-
-    var $badges = $('.badge-trigger');
-
-    $badges.each(function() {
-      convertBadge($(this));
-    });
-
-    $('[data-toggle="tooltip"]').tooltip();
-  }
-
-  function convertBadge($badge) {
-    var small = isSmall($badge);
-    var badgeType = retrieveBadgeType($badge);
-
-    var smallBadgeTag = function(title) {
-      return $('<span>', {
-        class: 'badge-small',
-        html: '<%= icon("information-o", 14) %>',
-        'data-title': title,
-      });
-    };
-
-    var largeBadgeTag = function(badge, badgeClass) {
-      return $('<div>', {
-        class: 'badge-display badge-' + badgeClass,
-        text: badge,
-      });
-    };
-
-    var template = function(title, badges) {
-      let container = $('<a>', {
-        class: 'badges-drop',
-        'data-toggle': 'tooltip',
-        'data-placement': 'top',
-        'target': '_blank',
-        title: title,
-        href: 'https://about.gitlab.com/pricing/?glm_source=docs.gitlab.com&glm_content=badges-docs'
-      });
-      if (isContributorDocs()) {
-        container.attr({href: "https://docs.gitlab.com/ee/development/"})
-      }
-      container.append($('<span>').append(badges));
-      return container;
-    };
-
-    var tags = [];
-
-    if (small) {
-      tags.push(smallBadgeTag(BADGES_MAPPING[badgeType].join(' | ')));
-    } else {
-      $.each(BADGES_MAPPING[badgeType], function(i, badge) {
-        tags.push(largeBadgeTag(badge, BADGES_CLASS[badge]));
-      });
-    }
-
-    $badge.append($(template(BADGES_TITLES[badgeType], tags)));
-  }
-
-  // Get the badge type from a specific list of expected values in element class
-  function retrieveBadgeType($badge) {
-    const classType = $badge.attr('class').split(' ');
-    const match = classes.filter(matchingClass => classType.includes(matchingClass));
-    if (match) {
-      return match.pop();
-    }
-  }
-
-  // When badge is not in a HTML header, we use the small version
-  function isSmall($badge) {
-    return !$badge
-      .parent()
-      .prop('tagName')
-      .match(/H1|H2|H3|H4|H5/);
-  }
-
-  $(function() {
-    init();
-  });
-})();
diff --git a/content/assets/stylesheets/_tables.scss b/content/assets/stylesheets/_tables.scss
index 1414859b..0f8a9ce0 100644
--- a/content/assets/stylesheets/_tables.scss
+++ b/content/assets/stylesheets/_tables.scss
@@ -57,10 +57,6 @@ table {
       border-bottom: 0 !important;
       /* stylelint-enable declaration-no-important */
     }
-
-    .badge-drop {
-      display: none;
-    }
   }
 }
 
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 7a7fc7c4..6e1ce8a0 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -172,20 +172,6 @@
     }
   }
 
-  // Badge tier
-
-  .badge-tier {
-    color: $red-500;
-    font-size: 0.75rem;
-    font-weight: 800;
-    text-transform: uppercase;
-
-    &:hover {
-      border-bottom-color: $red-700;
-      color: $red-700;
-    }
-  }
-
   .introduced-in {
     border-left: 4px solid $theme-indigo-200;
     padding-left: 0.75rem;
@@ -354,11 +340,6 @@
     }
   }
 
-  .sm {
-    @include gl-font-size-markdown-sm;
-    @include gl-line-height-20;
-  }
-
   .monospace {
     @include gl-font-monospace;
     @include gl-font-size-monospace;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index ebaa60bd..3a1d074a 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -374,115 +374,25 @@ p.result-snippet {
   font-size: 0.875rem;
 }
 
-//badges
-.badges-drop {
-  display: inline-block;
-  cursor: pointer;
-  transition: background-color 0.5s ease-in-out;
-  /* stylelint-disable declaration-no-important */
-  border-bottom: 0 !important;
-  /* stylelint-enable declaration-no-important */
-
-  &:hover {
+// Badges
+.docs-badges-wrapper {
+  a.gl-link {
     border-bottom: 0;
+    color: inherit;
   }
-
-  .badge-tier,
-  .badge-self-managed,
-  .badge-saas,
-  .badge-contribute {
-    &::after {
-      content: '';
-      display: block;
-      width: 0;
-      height: 1px;
-      transition: width 0.3s;
-      opacity: 0.5;
-    }
-  }
-
-  .badge-tier,
-  .badge-contribute {
-    &::after {
-      background: $badge-tier;
-    }
-  }
-
-  .badge-self-managed {
-    &::after {
-      background: $badge-self-managed;
-    }
-  }
-
-  .badge-saas {
-    &::after {
-      background: $badge-saas;
-    }
-  }
-  &:hover {
-    .badge-tier,
-    .badge-self-managed,
-    .badge-saas,
-    .badge-contribute {
-      &::after {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.badge-tier {
-  color: $badge-tier;
-}
-
-.badge-self-managed {
-  color: $badge-self-managed;
-  padding-left: 5px;
-}
-
-.badge-saas {
-  color: $badge-saas;
-  padding-left: 5px;
 }
-
-.badge-contribute {
-  color: $badge-tier;
-  padding-left: 5px;
+// Badges in headings
+.badge-heading-true  span.gl-badge {
+  vertical-align: super;
 }
-
-.badge-small {
-  color: $badge-self-managed;
-  opacity: 0.6;
-  transition: opacity 0.3s;
-  &:hover {
-    opacity: 1;
-    &::after {
-      content: attr(data-title);
-      text-transform: uppercase;
-      font-weight: 700;
-      font-size: 0.7em;
-      display: inline;
-      position: absolute;
-      padding: 1px 5px;
-      opacity: 1;
-      background-color: $white;
-      white-space: nowrap;
-      border-radius: 2px;
-      max-width: 150px;
-    }
-  }
+// Badges in regular content
+.badge-heading-false span.gl-badge {
+  vertical-align: middle;
 }
 
-.badge-display {
-  text-transform: uppercase;
-  text-align: center;
-  display: inline-block;
-  margin-left: 2px;
-  border-radius: 2px;
+// Tooltips
+.tooltip {
   font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  line-height: 1.4;
 }
 
 //in-page styles