Refactor the archives banner to use versions.json and GitLab UI

author: Sarah German <sgerman@gitlab.com> 2022-10-05 01:56:11 +0300
committer: David O'Regan <doregan@gitlab.com> 2022-10-05 01:56:11 +0300
commit: 309860fa7bc365106de9c9e8af83b7edf9a1c92b (patch)
tree: 2fbce6fce805d4cfc056e2ca58baa897b815ebb7
parent: b16c762757c462214cae0c5abc9cecd1acc1e805 (diff)
8 files changed, 39 insertions, 34 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 5b82d005..62100d6e 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -6,8 +6,6 @@ version: 1
 $body-font-size: 16px;
 
 // Heights
-$page-header-height: 2.5rem;
-$banner-height: 1.938rem;
 $header-height: 3rem;
 
 // Width
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 02a28ec4..f3ea836f 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -241,7 +241,6 @@ ol {
   min-height: $header-height;
   background-color: $header-background-color;
   z-index: 3;
-  padding: 0.5rem 1rem;
 
   .navbar-brand {
     font-size: 1rem;
@@ -442,15 +441,6 @@ ol {
   display: none;
 }
 
-.banner {
-  z-index: 5;
-  line-height: 2;
-  top: $page-header-height;
-  height: $banner-height;
-  background: $gds-gray-50;
-  border-bottom: 1px solid $gds-gray-200;
-}
-
 .gl-icon {
   @each $size in $gl-icon-sizes {
     &.s#{$size} {
diff --git a/content/frontend/shared/components/docs_banner.vue b/content/frontend/shared/components/docs_banner.vue
index 3748bf8e..0c205a05 100644
--- a/content/frontend/shared/components/docs_banner.vue
+++ b/content/frontend/shared/components/docs_banner.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlButton } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlButton,
+  },
   props: {
     text: {
       type: String,
@@ -30,10 +35,16 @@ export default {
 </script>
 
 <template>
-  <div v-if="isVisible" class="banner position-fixed w-100 text-center">
+  <div
+    v-if="isVisible"
+    class="gl-z-index-3 gl-left-0 gl-bg-gray-50 gl-border-b-gray-200 gl-fixed gl-w-full gl-text-center"
+  >
     <span v-if="text">{{ text }}</span>
     <slot></slot>
-    <!-- TODO: Replace the 'x' below with a gl-icon component once gitlab-ui becomes available in the docs -->
-    <button class="btn btn-close pull-right" @click="toggleBanner(false)">x</button>
+    <gl-button
+      icon="close"
+      class="gl-shadow-none! gl-bg-transparent!"
+      @click="toggleBanner(false)"
+    />
   </div>
 </template>
diff --git a/doc/architecture.md b/doc/architecture.md
index fde04405..c4ea6a66 100644
--- a/doc/architecture.md
+++ b/doc/architecture.md
@@ -182,28 +182,32 @@ we reference the array with a symbol (`:versions`).
 A banner is displayed on archived documentation pages with the text `This is archived documentation for
 GitLab. Go to the latest.` when either:
 
-- The version of the documentation displayed is not the first version entry in `online` in
-  `content/_data/versions.yaml`.
+- The version of the documentation displayed is not the entry for `current` in
+  `content/versions.json`.
 - The documentation was built from the default branch (`main`).
 
-For example, if the `online` entries for `content/_data/versions.yaml` are:
-
-```yaml
-online:
-  - "14.4"
-  - "14.3"
-  - "14.2"
+For example, if the entries for `content/versions.json` are:
+
+```json
+[
+  {
+    "next": "15.5",
+    "current": "15.4",
+    "last_minor": ["15.3", "15.2"],
+    "last_major": ["14.10", "13.12"]
+  }
+]
 ```
 
 In this case, the archived documentation banner isn't displayed:
 
-- For 14.4, the docs built from the `14.4` branch. The branch name is the first entry in `online`.
-- For 14.5-pre, the docs built from the default project branch (`main`).
+- For 15.4, the docs built from the `15.4` branch. The branch name is the entry in `current`.
+- For 15.5, the docs built from the default project branch (`main`).
 
 The archived documentation banner is displayed:
 
-- For 14.3.
-- For 14.2.
+- For 15.3.
+- For 14.10.
 - For any other version.
 
 ## Bumping versions of CSS and JavaScript
diff --git a/layouts/default.html b/layouts/default.html
index f0674675..856a5cc9 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -8,7 +8,7 @@
   <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
-    <section class="gl-docs container-fluid mt-7">
+    <section class="gl-docs container-fluid gl-mt-9">
       <div class="row">
         <div class="col-0 col-xl-2 pl-0">
           <div class="nav-wrapper active">
@@ -35,7 +35,7 @@
           <div class="row">
             <div class="col">
               <div class="my-3 my-xl-0">
-                <a class="position-absolute text-muted mt-2 pt-1 text-decoration-none border-bottom-0 mobile-nav-toggle" href="#"><%= icon('hamburger', 18, 'gl-ml-0!') %></a>
+                <a class="gl-absolute text-muted gl-mt-4 gl-pt-4 gl-text-decoration-none gl-border-bottom-0! mobile-nav-toggle" href="#"><%= icon('hamburger', 18, 'gl-ml-0!') %></a>
               </div>
             </div>
           </div>
diff --git a/layouts/header.html b/layouts/header.html
index 3a8be124..d3dd9539 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -13,7 +13,7 @@
           <% location = @item.identifier.to_s.split('/')[1] %>
           <% unless %w(search index.erb).any?(location) %>
             <% if @config[:algolia] == "true" %>
-              <div id="docsearch" class="gl-my-3 my-lg-0"></div>
+              <div id="docsearch" class="gl-my-3 gl-md-mt-0 gl-md-mb-0"></div>
             <% else %>
               <div class="js-lunr-form"></div>
             <% end %>
diff --git a/lib/helpers/versions.rb b/lib/helpers/versions.rb
index ea98b966..954ea6ca 100644
--- a/lib/helpers/versions.rb
+++ b/lib/helpers/versions.rb
@@ -18,7 +18,9 @@ module Nanoc::Helpers
     # Check if the current version is the latest.
     #
     def latest?
-      latest_version = @items['/_data/versions.yaml'][:online][0]
+      file = File.read('./content/versions.json')
+      parsed = JSON.parse(file)
+      latest_version = parsed[0]['current']
       ENV['CI_COMMIT_REF_NAME'] == ENV['CI_DEFAULT_BRANCH'] || ENV['CI_COMMIT_REF_NAME'] == latest_version
     end
 
diff --git a/spec/frontend/shared/components/docs_banner_spec.js b/spec/frontend/shared/components/docs_banner_spec.js
index eb89eb91..aabb623d 100644
--- a/spec/frontend/shared/components/docs_banner_spec.js
+++ b/spec/frontend/shared/components/docs_banner_spec.js
@@ -24,7 +24,7 @@ describe('component: Banner', () => {
   });
 
   it('renders a close button', () => {
-    expect(wrapper.exists('.btn-close')).toBe(true);
+    expect(wrapper.exists('[data-testid="close-icon"]')).toBe(true);
   });
 
   it('emits a toggle event on mount', () => {
@@ -32,7 +32,7 @@ describe('component: Banner', () => {
   });
 
   it('emits a toggle event when the close button is clicked', () => {
-    const closeBtn = wrapper.find('.btn-close');
+    const closeBtn = wrapper.find('[data-testid="close-icon"]');
     closeBtn.trigger('click');
     expect(wrapper.emitted('toggle')[1]).toEqual([false]);
   });
author	Sarah German <sgerman@gitlab.com>	2022-10-05 01:56:11 +0300
committer	David O'Regan <doregan@gitlab.com>	2022-10-05 01:56:11 +0300
commit	309860fa7bc365106de9c9e8af83b7edf9a1c92b (patch)
tree	2fbce6fce805d4cfc056e2ca58baa897b815ebb7
parent	b16c762757c462214cae0c5abc9cecd1acc1e805 (diff)