diff options
4 files changed, 21 insertions, 17 deletions
diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue index 0bb92806..d9ff88d1 100644 --- a/content/frontend/default/components/table_of_contents.vue +++ b/content/frontend/default/components/table_of_contents.vue @@ -1,4 +1,5 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { flattenItems } from '../../shared/toc/flatten_items'; import CollapsibleContainer from './collapsible_container.vue'; import TableOfContentsList from './table_of_contents_list.vue'; @@ -8,6 +9,7 @@ export default { components: { CollapsibleContainer, TableOfContentsList, + GlIcon, }, props: { items: { @@ -50,8 +52,8 @@ export default { // Flatten the items so that only one is highlighted at a time return flattenItems(this.items.concat(this.helpAndFeedbackItems)); }, - collapseIconClass() { - return this.isCollapsed ? 'fa-angle-right' : 'fa-angle-down'; + collapseIcon() { + return this.isCollapsed ? 'chevron-right' : 'chevron-down'; }, }, methods: { @@ -74,12 +76,7 @@ export default { data-testid="collapse" @click.prevent="toggleCollapse" > - <i - class="fa d-flex align-items-center justify-content-center mr-1 gl-w-3" - :class="collapseIconClass" - role="presentation" - ></i> - On this page + <gl-icon :name="collapseIcon" class="gl-pt-2 gl-mr-2 s18" /> On this page </a> </h4> <h4 class="border-0 gl-font-base font-weight-bold toc-lg">On this page</h4> diff --git a/layouts/default.html b/layouts/default.html index 320a8f87..227d60a9 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -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="#"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> | </a> + <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> </div> </div> </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 4763abef..4677a1ba 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,12 +17,17 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = ` href="#" role="button" > - <i - class="fa d-flex align-items-center justify-content-center mr-1 gl-w-3 fa-angle-right" - role="presentation" - /> - - On this page + <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> + On this page </a> </h4> diff --git a/spec/frontend/default/components/table_of_contents_spec.js b/spec/frontend/default/components/table_of_contents_spec.js index 86f14d1b..81718d7a 100644 --- a/spec/frontend/default/components/table_of_contents_spec.js +++ b/spec/frontend/default/components/table_of_contents_spec.js @@ -35,7 +35,7 @@ describe('frontend/default/components/table_of_contents', () => { }; const findCollapseButton = () => wrapper.find('[data-testid="collapse"]'); - const findCollapseIcon = () => findCollapseButton().find('i'); + const findCollapseIcon = () => findCollapseButton().find('svg'); const findCollapsibleContainer = () => wrapper.find('[data-testid="container"]'); const findMainList = () => wrapper.find('[data-testid="main-list"]'); const findMainListItems = () => findMainList().props('items'); @@ -44,7 +44,9 @@ describe('frontend/default/components/table_of_contents', () => { const expectCollapsed = (isCollapsed = true) => { expect(findCollapseButton().attributes('aria-expanded')).toBe(isCollapsed ? undefined : 'true'); expect(findCollapsibleContainer().props('isCollapsed')).toBe(isCollapsed); - expect(findCollapseIcon().classes(isCollapsed ? 'fa-angle-right' : 'fa-angle-down')).toBe(true); + expect(findCollapseIcon().attributes('data-testid')).toBe( + isCollapsed ? 'chevron-right-icon' : 'chevron-down-icon', + ); }; it('matches snapshot', () => { |