Merge branch 'help-feedback-footer' into 'main'

Help and feedback footer updates

Closes #1325

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

Merged-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

7 files changed, 25 insertions, 177 deletions

diff --git a/content/assets/stylesheets/help.scss b/content/assets/stylesheets/help.scss
index 18754596..350ad5a7 100644
--- a/content/assets/stylesheets/help.scss
+++ b/content/assets/stylesheets/help.scss
@@ -34,7 +34,6 @@
   }
 
   a {
-    text-decoration: underline;
     color: $help-blue-500;
   }
 
@@ -86,6 +85,10 @@
   .help-and-feedback-link {
     color: $help-blue-500;
     text-decoration: underline;
+    border-width: 0;
+    &:hover {
+      border-width: 0;
+    }
   }
 
   .support-btn {
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index c46991d0..28f0218b 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -21,6 +21,9 @@ body {
   }
 }
 
+main {
+  min-height: 52vh;
+}
 .main {
   padding: 0 1rem;
   z-index: 1;
diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue
index d9ff88d1..d60e8bc5 100644
--- a/content/frontend/default/components/table_of_contents.vue
+++ b/content/frontend/default/components/table_of_contents.vue
@@ -16,16 +16,6 @@ export default {
       type: Array,
       required: true,
     },
-    helpAndFeedbackId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    hasHelpAndFeedback: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
@@ -33,24 +23,9 @@ export default {
     };
   },
   computed: {
-    helpAndFeedbackItems() {
-      if (!this.hasHelpAndFeedback) {
-        return [];
-      }
-
-      return [
-        {
-          text: 'Help and feedback',
-          href: `#${this.helpAndFeedbackId}`,
-          id: null,
-          items: [],
-          withSeparator: true,
-        },
-      ];
-    },
     allItems() {
       // Flatten the items so that only one is highlighted at a time
-      return flattenItems(this.items.concat(this.helpAndFeedbackItems));
+      return flattenItems(this.items);
     },
     collapseIcon() {
       return this.isCollapsed ? 'chevron-right' : 'chevron-down';
diff --git a/content/frontend/default/setup_table_of_contents.js b/content/frontend/default/setup_table_of_contents.js
index 478635ba..db7b376a 100644
--- a/content/frontend/default/setup_table_of_contents.js
+++ b/content/frontend/default/setup_table_of_contents.js
@@ -5,14 +5,12 @@ import { StickToFooter } from './directives/stick_to_footer';
 
 const SIDEBAR_SELECTOR = '.doc-nav';
 const MARKDOWN_TOC_ID = 'markdown-toc';
-const HELP_AND_FEEDBACK_ID = 'help-and-feedback';
 const MAIN_SELECTOR = '.js-main-wrapper';
 
 export const setupTableOfContents = () => {
   const sidebar = document.querySelectorAll(SIDEBAR_SELECTOR);
   const menu = document.getElementById(MARKDOWN_TOC_ID);
   const main = document.querySelector(MAIN_SELECTOR);
-  const hasHelpAndFeedback = Boolean(document.getElementById(HELP_AND_FEEDBACK_ID));
 
   if (!sidebar || !menu) {
     return null;
@@ -37,8 +35,6 @@ export const setupTableOfContents = () => {
         return h(TableOfContents, {
           props: {
             items,
-            helpAndFeedbackId: HELP_AND_FEEDBACK_ID,
-            hasHelpAndFeedback,
           },
           directives: [
             {
diff --git a/layouts/feedback.html b/layouts/feedback.html
index 482847a6..ed705ce7 100644
--- a/layouts/feedback.html
+++ b/layouts/feedback.html
@@ -12,7 +12,7 @@
       'toggle-icon') %>
     </h2>
   </a>
-  <div class="collapse show" id="help-feedback-content">
+  <div class="collapse" id="help-feedback-content">
     <div class="row mt-3">
       <div class="col-md-8">
         <div>
diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
index 4677a1ba..bd943190 100644
--- a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
@@ -17,16 +17,11 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
         href="#"
         role="button"
       >
-        <svg
-          aria-hidden="true"
-          class="gl-pt-2 gl-mr-2 s18 gl-icon s16"
-          data-testid="chevron-right-icon"
-          role="img"
-        >
-          <use
-            href="[object Object]#chevron-right"
-          />
-        </svg>
+        <gl-icon-stub
+          class="gl-pt-2 gl-mr-2 s18"
+          name="chevron-right"
+          size="16"
+        />
          On this page
       
       </a>
@@ -38,119 +33,19 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
       On this page
     </h4>
      
-    <div
-      class="sm-collapsed"
+    <collapsible-container-stub
+      collapsedclass="sm-collapsed"
+      collapsingclass="sm-collapsing"
       data-testid="container"
+      iscollapsed="true"
     >
-      <ul
-        class="nav nav-pills flex-column my-0"
+      <table-of-contents-list-stub
+        class="my-0"
         data-testid="main-list"
-      >
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-0"
-            href="#lorem"
-            id="Lorem-anchor"
-          >
-            Lorem
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-1"
-            href="#lorem-"
-            id="Lorem 2-anchor"
-          >
-            Lorem 2
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-0"
-            href="#ipsum"
-            id="Ipsum-anchor"
-          >
-            Ipsum
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-1"
-            href="#dolar"
-            id="Dolar-anchor"
-          >
-            Dolar
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-2"
-            href="#sit"
-            id="Sit-anchor"
-          >
-            Sit
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-2"
-            href="#amit"
-            id="Amit-anchor"
-          >
-            Amit
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-2"
-            href="#test"
-            id="Test-anchor"
-          >
-            Test
-          </a>
-           
-          <!---->
-        </li>
-        <li
-          class="mb-0"
-        >
-          <a
-            class="nav-link d-block toc-level-0"
-            href="#test-help-and-feedback"
-          >
-            Help and feedback
-          </a>
-           
-          <!---->
-        </li>
-      </ul>
-    </div>
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        level="0"
+      />
+    </collapsible-container-stub>
   </div>
 </div>
 `;
diff --git a/spec/frontend/default/components/table_of_contents_spec.js b/spec/frontend/default/components/table_of_contents_spec.js
index 81718d7a..851258c3 100644
--- a/spec/frontend/default/components/table_of_contents_spec.js
+++ b/spec/frontend/default/components/table_of_contents_spec.js
@@ -9,7 +9,6 @@ import { flattenItems } from '../../../../content/frontend/shared/toc/flatten_it
 import { createExampleToc } from '../../shared/toc_helper';
 
 const TEST_ITEMS = createExampleToc();
-const TEST_HELP_AND_FEEDBACK_ID = 'test-help-and-feedback';
 
 describe('frontend/default/components/table_of_contents', () => {
   let wrapper;
@@ -28,7 +27,6 @@ describe('frontend/default/components/table_of_contents', () => {
     wrapper = mountFn(TableOfContents, {
       propsData: {
         items: TEST_ITEMS,
-        helpAndFeedbackId: TEST_HELP_AND_FEEDBACK_ID,
         ...props,
       },
     });
@@ -50,32 +48,10 @@ describe('frontend/default/components/table_of_contents', () => {
   };
 
   it('matches snapshot', () => {
-    createComponent({ hasHelpAndFeedback: true }, mount);
+    createComponent();
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('with hasHelpAndFeedback', () => {
-    beforeEach(() => {
-      createComponent({ hasHelpAndFeedback: true });
-    });
-
-    it('appends help and feedback item', () => {
-      expect(findMainListItems()).toEqual(
-        flattenItems(
-          TEST_ITEMS.concat([
-            {
-              href: `#${TEST_HELP_AND_FEEDBACK_ID}`,
-              id: null,
-              items: [],
-              text: 'Help and feedback',
-              withSeparator: true,
-            },
-          ]),
-        ),
-      );
-    });
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent({}, mount);