6 files changed, 58 insertions, 141 deletions
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
index 0197b4bff79..a7d6145285c 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
@@ -2,28 +2,34 @@
 
 exports[`Design management pagination component hides components when designs are empty 1`] = `<!---->`;
 
-exports[`Design management pagination component renders pagination buttons 1`] = `
+exports[`Design management pagination component renders navigation buttons 1`] = `
 <div
   class="d-flex align-items-center"
 >
   
   0 of 2
   
-  <div
-    class="btn-group ml-3 mr-3"
+  <gl-button-group-stub
+    class="ml-3 mr-3"
   >
-    <pagination-button-stub
+    <gl-button-stub
+      category="primary"
       class="js-previous-design"
-      iconname="angle-left"
+      disabled="true"
+      icon="angle-left"
+      size="medium"
       title="Go to previous design"
+      variant="default"
     />
      
-    <pagination-button-stub
+    <gl-button-stub
+      category="primary"
       class="js-next-design"
-      design="[object Object]"
-      iconname="angle-right"
+      icon="angle-right"
+      size="medium"
       title="Go to next design"
+      variant="default"
     />
-  </div>
+  </gl-button-group-stub>
 </div>
 `;
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
index e55cff8de3d..b286a74ebb8 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
@@ -2,60 +2,60 @@
 
 exports[`Design management toolbar component renders design and updated data 1`] = `
 <header
-  class="d-flex p-2 bg-white align-items-center js-design-header"
+  class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header"
 >
-  <a
-    aria-label="Go back to designs"
-    class="mr-3 text-plain d-flex justify-content-center align-items-center"
-  >
-    <icon-stub
-      name="close"
-      size="18"
-    />
-  </a>
-   
   <div
-    class="overflow-hidden d-flex align-items-center"
+    class="gl-display-flex gl-align-items-center"
   >
-    <h2
-      class="m-0 str-truncated-100 gl-font-base"
+    <a
+      aria-label="Go back to designs"
+      class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain"
+      data-testid="close-design"
     >
-      test.jpg
-    </h2>
+      <gl-icon-stub
+        name="close"
+        size="16"
+      />
+    </a>
      
-    <small
-      class="text-secondary"
+    <div
+      class="overflow-hidden d-flex align-items-center"
     >
-      Updated 1 hour ago by Test Name
-    </small>
+      <h2
+        class="m-0 str-truncated-100 gl-font-base"
+      >
+        test.jpg
+      </h2>
+       
+      <small
+        class="text-secondary"
+      >
+        Updated 1 hour ago by Test Name
+      </small>
+    </div>
   </div>
    
-  <pagination-stub
+  <design-navigation-stub
     class="ml-auto flex-shrink-0"
     id="1"
   />
    
-  <gl-deprecated-button-stub
-    class="mr-2"
+  <gl-button-stub
+    category="primary"
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
-    size="md"
-    variant="secondary"
-  >
-    <icon-stub
-      name="download"
-      size="18"
-    />
-  </gl-deprecated-button-stub>
+    icon="download"
+    size="medium"
+    variant="default"
+  />
    
   <delete-button-stub
+    buttoncategory="secondary"
     buttonclass=""
-    buttonvariant="danger"
+    buttonicon="archive"
+    buttonsize="medium"
+    buttonvariant="warning"
+    class="gl-ml-3"
     hasselecteddesigns="true"
-  >
-    <icon-stub
-      name="remove"
-      size="18"
-    />
-  </delete-button-stub>
+  />
 </header>
 `;
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap
deleted file mode 100644
index 08662a04f15..00000000000
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Design management pagination button component disables button when no design is passed 1`] = `
-<router-link-stub
-  aria-label="Test title"
-  class="btn btn-default disabled"
-  disabled="true"
-  to="[object Object]"
->
-  <icon-stub
-    name="angle-right"
-    size="16"
-  />
-</router-link-stub>
-`;
-
-exports[`Design management pagination button component renders router-link 1`] = `
-<router-link-stub
-  aria-label="Test title"
-  class="btn btn-default"
-  to="[object Object]"
->
-  <icon-stub
-    name="angle-right"
-    size="16"
-  />
-</router-link-stub>
-`;
diff --git a/spec/frontend/design_management/components/toolbar/pagination_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index db5a36dadf6..1c6588a9628 100644
--- a/spec/frontend/design_management/components/toolbar/pagination_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -1,7 +1,7 @@
 /* global Mousetrap */
 import 'mousetrap';
 import { shallowMount } from '@vue/test-utils';
-import Pagination from '~/design_management/components/toolbar/pagination.vue';
+import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue';
 import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 
 const push = jest.fn();
@@ -18,7 +18,7 @@ describe('Design management pagination component', () => {
   let wrapper;
 
   function createComponent() {
-    wrapper = shallowMount(Pagination, {
+    wrapper = shallowMount(DesignNavigation, {
       propsData: {
         id: '2',
       },
@@ -41,7 +41,7 @@ describe('Design management pagination component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders pagination buttons', () => {
+  it('renders navigation buttons', () => {
     wrapper.setData({
       designs: [{ id: '1' }, { id: '2' }],
     });
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 2910b2f62ba..2914365b0df 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -1,9 +1,9 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
+import { GlButton } from '@gitlab/ui';
 import Toolbar from '~/design_management/components/toolbar/index.vue';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
-import { GlDeprecatedButton } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -116,7 +116,7 @@ describe('Design management toolbar component', () => {
   });
 
   it('renders download button with correct link', () => {
-    expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe(
+    expect(wrapper.find(GlButton).attributes('href')).toBe(
       '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
     );
   });
diff --git a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js b/spec/frontend/design_management/components/toolbar/pagination_button_spec.js
deleted file mode 100644
index b7df201795b..00000000000
--- a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
-import PaginationButton from '~/design_management/components/toolbar/pagination_button.vue';
-import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
-
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
-
-describe('Design management pagination button component', () => {
-  let wrapper;
-
-  function createComponent(design = null) {
-    wrapper = shallowMount(PaginationButton, {
-      localVue,
-      router,
-      propsData: {
-        design,
-        title: 'Test title',
-        iconName: 'angle-right',
-      },
-      stubs: ['router-link'],
-    });
-  }
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('disables button when no design is passed', () => {
-    createComponent();
-
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it('renders router-link', () => {
-    createComponent({ id: '2' });
-
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe('designLink', () => {
-    it('returns empty link when design is null', () => {
-      createComponent();
-
-      expect(wrapper.vm.designLink).toEqual({});
-    });
-
-    it('returns design link', () => {
-      createComponent({ id: '2', filename: 'test' });
-
-      wrapper.vm.$router.replace('/root/test-project/issues/1/designs/test?version=1');
-
-      expect(wrapper.vm.designLink).toEqual({
-        name: DESIGN_ROUTE_NAME,
-        params: { id: 'test' },
-        query: { version: '1' },
-      });
-    });
-  });
-});