Add hooks to detect lessContrast + highContrast preferences (#681)

Co-authored-by: kendallgassner <[email protected]>

Author: kendallgassner

packages/hooks/src/__tests__/usePrefersHighContrast.test.tsx

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { usePrefersHighContrast } from '../usePrefersHighContrast';
+
+test('it detect if prefers contrast more is set', () => {
+  // @ts-ignore
+  jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
+    matches: true,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  }));
+
+  const { result } = renderHook(() => usePrefersHighContrast());
+  expect(result.current).toBe(true);
+});
+
+test('it detect if prefers contrast less  is set', () => {
+  const addListener = jest.fn();
+  const removeListener = jest.fn();
+  // @ts-ignore
+  jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
+    matches: false,
+    addListener,
+    removeListener,
+  }));
+
+  const { result, unmount } = renderHook(() => usePrefersHighContrast());
+
+  expect(result.current).toBe(false);
+  unmount();
+  expect(removeListener).toHaveBeenCalled();
+});

packages/hooks/src/__tests__/usePrefersLessContrast.test.tsx

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { usePrefersLessContrast } from '../usePrefersLessContrast';
+
+test('it detect if prefers contrast more is set', () => {
+  // @ts-ignore
+  jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
+    matches: false,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  }));
+
+  const { result } = renderHook(() => usePrefersLessContrast());
+  expect(result.current).toBe(false);
+});
+
+test('it detect if prefers contrast less  is set', () => {
+  const addListener = jest.fn();
+  const removeListener = jest.fn();
+  // @ts-ignore
+  jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
+    matches: true,
+    addListener,
+    removeListener,
+  }));
+
+  const { result, unmount } = renderHook(() => usePrefersLessContrast());
+
+  expect(result.current).toBe(true);
+  unmount();
+  expect(removeListener).toHaveBeenCalled();
+});

packages/hooks/src/index.tsx

@@ -1,10 +1,12 @@
-export * from "./useClickOutside";
-export * from "./useConditionalAnimation";
-export * from "./useDarkMode";
-export * from "./useKeyboardNavigation";
-export * from "./useLocale";
-export * from "./useMatchMedia";
-export * from "./useOverflowing";
-export * from "./usePopper";
-export * from "./useReducedMotion";
-export * from "./useStickyState";
+export * from './useClickOutside';
+export * from './useConditionalAnimation';
+export * from './useDarkMode';
+export * from './useKeyboardNavigation';
+export * from './useLocale';
+export * from './useMatchMedia';
+export * from './useOverflowing';
+export * from './usePopper';
+export * from './useReducedMotion';
+export * from './usePrefersHighContrast';
+export * from './usePrefersLessContrast';
+export * from './useStickyState';

packages/hooks/src/usePrefersHighContrast.tsx

@@ -0,0 +1,17 @@
+import { useMatchMedia } from './useMatchMedia';
+
+/**
+ * Determine if the user has "prefers-contrast: more" enabled in their browser.
+ *
+ * @example
+ * const Example = () => {
+ * const isPrefersHighContrast = usePrefersHighContrast();
+ *
+ * return (
+ *   <div className={makeClass(!isPrefersHighContrast && styles.highContrast)}>Content</div>
+ * );
+ * };
+ */
+export const usePrefersHighContrast = () => {
+  return useMatchMedia('(prefers-contrast: more)');
+};

packages/hooks/src/usePrefersLessContrast.tsx

@@ -0,0 +1,17 @@
+import { useMatchMedia } from './useMatchMedia';
+
+/**
+ * Determine if the user has "prefers-contrast: less" enabled in their browser.
+ *
+ * @example
+ * const Example = () => {
+ * const isPrefersLessContrast = usePrefersLessContrast();
+ *
+ * return (
+ *   <div className={makeClass(!isPrefersLessContrast && styles.highContrast)}>Content</div>
+ * );
+ * };
+ */
+export const usePrefersLessContrast = () => {
+  return useMatchMedia('(prefers-contrast: less)');
+};