Merge branch 'mw-gl-breakpoints-5' into 'master'

Replace breakpoints with GlBreakpointInstance in feature_highlight_options.js

See merge request gitlab-org/gitlab!22010

app/assets/javascripts/feature_highlight/feature_highlight_options.js

+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { highlightFeatures } from './feature_highlight';
-import bp from '../breakpoints';
 
 export default function domContentLoaded() {
-  if (bp.getBreakpointSize() === 'lg') {
+  if (bp.getBreakpointSize() === 'xl') {
     highlightFeatures();
     return true;
   }

spec/frontend/feature_highlight/feature_highlight_options_spec.js

+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import domContentLoaded from '~/feature_highlight/feature_highlight_options';
-import bp from '~/breakpoints';
 
 describe('feature highlight options', () => {
   describe('domContentLoaded', () => {
@@ -21,9 +21,15 @@ describe('feature highlight options', () => {
       expect(domContentLoaded()).toBe(false);
     });
 
-    it('should call highlightFeatures when breakpoint is lg', () => {
+    it('should not call highlightFeatures when breakpoint is not xl', () => {
       jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('lg');
 
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should call highlightFeatures when breakpoint is xl', () => {
+      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xl');
+
       expect(domContentLoaded()).toBe(true);
     });
   });