@cfpb/cfpb-design-system 4.1.0 → 4.2.0

package/src/elements/cfpb-utilities/media-query-service.spec.js

@@ -0,0 +1,126 @@
+import { jest } from '@jest/globals';
+import { MediaQueryService } from './media-query-service';
+
+describe('MediaQueryService', () => {
+  const originalMatchMedia = window.matchMedia;
+
+  let mockMatchMedia;
+  let listeners = {};
+  let mediaQueryState = {};
+
+  beforeEach(() => {
+    // Reset state before each test.
+    listeners = {};
+    mediaQueryState = {};
+
+    mockMatchMedia = jest.fn().mockImplementation((query) => {
+      const key = query;
+      mediaQueryState[key] = mediaQueryState[key] ?? false;
+
+      return {
+        matches: mediaQueryState[key],
+        media: query,
+        addEventListener: (event, cb) => {
+          if (event === 'change') {
+            listeners[key] = cb;
+          }
+        },
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      };
+    });
+
+    window.matchMedia = mockMatchMedia;
+  });
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  /**
+   * @param {string} key - A media query string.
+   * @param {boolean} newMedia - True if it's a new media query.
+   */
+  function simulateResize(key, newMedia) {
+    mediaQueryState[key] = newMedia;
+    if (listeners[key]) {
+      listeners[key]({ matches: newMedia });
+    }
+  }
+
+  it('initializes with default breakpoints and tracks matches', () => {
+    const mqs = new MediaQueryService();
+    const expectedBreakpoints = ['xs', 'sm', 'med', 'lg', 'xl'];
+
+    expect(Object.keys(mqs.matches)).toEqual(
+      expect.arrayContaining(expectedBreakpoints),
+    );
+  });
+
+  it('accepts custom breakpoints', () => {
+    const custom = {
+      mobile: { min: 0, max: 500 },
+      desktop: { min: 501 },
+    };
+
+    const mqs = new MediaQueryService(custom);
+
+    expect(Object.keys(mqs.matches)).toEqual(['mobile', 'desktop']);
+  });
+
+  it('fires a single change event when a match changes', (done) => {
+    const mqs = new MediaQueryService({
+      test: { min: 100 },
+    });
+
+    mqs.addEventListener('change', (event) => {
+      expect(event.detail.matches.test).toBe(true);
+      done();
+    });
+
+    simulateResize('(min-width: 100px)', true);
+  });
+
+  it('does not fire change if match does not actually change', () => {
+    const mqs = new MediaQueryService({
+      test: { min: 100 },
+    });
+
+    const mockHandler = jest.fn();
+    mqs.addEventListener('change', mockHandler);
+
+    simulateResize('(min-width: 100px)', false);
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+
+  it('updates matches correctly', () => {
+    const mqs = new MediaQueryService({
+      large: { min: 1000 },
+    });
+
+    expect(mqs.matches.large).toBe(false);
+    simulateResize('(min-width: 1000px)', true);
+    expect(mqs.matches.large).toBe(true);
+  });
+
+  it('destroy removes all listeners', () => {
+    const removeListenerMock = jest.fn();
+
+    window.matchMedia = jest.fn().mockImplementation((query) => {
+      return {
+        matches: false,
+        media: query,
+        addEventListener: jest.fn(),
+        removeEventListener: removeListenerMock,
+      };
+    });
+
+    const mqs = new MediaQueryService({
+      test: { min: 500 },
+    });
+
+    mqs.destroy();
+
+    expect(removeListenerMock).toHaveBeenCalled();
+  });
+});

package/src/elements/index.js

@@ -11,3 +11,4 @@ export * from './cfpb-tag-filter';
 export * from './cfpb-tag-topic';
 export * from './cfpb-tag-group';
 export * from './cfpb-multiselect';
+export * from './cfpb-pagination';

package/src/utilities/utilities.scss

@@ -245,29 +245,29 @@ $ba: Link underline active color.
   $ba: $link-underline-active
 ) {
   color: $c;
-  border-color: $bc;
+  text-decoration-color: $bc;
 
   &:visited,
   &.visited {
-    border-color: $bv;
+    text-decoration-color: $bv;
     color: $v;
   }
 
   &:hover,
   &.hover {
-    border-color: $bh;
+    text-decoration-color: $bh;
     color: $h;
   }
 
   &:focus,
   &.focus {
-    border-color: $bf;
+    text-decoration-color: $bf;
     color: $f;
   }
 
   &:active,
   &.active {
-    border-color: $ba;
+    text-decoration-color: $ba;
     color: $a;
   }
 }
@@ -275,19 +275,19 @@ $ba: Link underline active color.
 
 // Turn off the default bottom `border` on the default and `:hover` states.
 @mixin u-link-no-border() {
-  border-bottom-width: 0 !important;
+  text-decoration-line: none !important;
 }
 
 // Turn off the default bottom `border` on the default state,
 // but force a bottom border on the `:hover` state.
 @mixin u-link-hover-border() {
-  border-bottom-width: 0 !important;
+  text-decoration-line: none !important;
 
   &:hover,
   &.hover,
   &:focus,
   &.focus {
-    border-bottom-width: 1px !important;
+    text-decoration-line: underline !important;
   }
 }