feat: rename exported breakpoint tokens in mediaQuery util

BREAKING CHANGE: tokens no longer start with `widthBreakpoint-`. They're now simply `breakpoint-`
kiwicom · Jan 3, 2025 · 3bdabb4 · 3bdabb4
1 parent 7c01c8b
commit 3bdabb4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/packages/orbit-components/src/utils/mediaQuery/README.md b/packages/orbit-components/src/utils/mediaQuery/README.md
@@ -32,11 +32,11 @@ The `TOKEN` object contains the breakpoints as keys, associated with the corresp
 
 ```ts
 export const TOKEN = {
-  mediumMobile: "widthBreakpointMediumMobile",
-  largeMobile: "widthBreakpointLargeMobile",
-  tablet: "widthBreakpointTablet",
-  desktop: "widthBreakpointDesktop",
-  largeDesktop: "widthBreakpointLargeDesktop",
+  mediumMobile: "breakpointMediumMobile",
+  largeMobile: "breakpointLargeMobile",
+  tablet: "breakpointTablet",
+  desktop: "breakpointDesktop",
+  largeDesktop: "breakpointLargeDesktop",
 } as const;
 ```
 

diff --git a/packages/orbit-components/src/utils/mediaQuery/__tests__/index.test.ts b/packages/orbit-components/src/utils/mediaQuery/__tests__/index.test.ts
@@ -6,35 +6,33 @@ describe("getBreakpointWidth", () => {
 
   it("should return correct value as string for each query", () => {
     expect(getBreakpointWidth(QUERIES.MEDIUMMOBILE, theme)).toBe(
-      `(min-width: ${theme.orbit.widthBreakpointMediumMobile}px)`,
+      `(min-width: ${theme.orbit.breakpointMediumMobile}px)`,
     );
     expect(getBreakpointWidth(QUERIES.LARGEMOBILE, theme)).toBe(
-      `(min-width: ${theme.orbit.widthBreakpointLargeMobile}px)`,
+      `(min-width: ${theme.orbit.breakpointLargeMobile}px)`,
     );
     expect(getBreakpointWidth(QUERIES.TABLET, theme)).toBe(
-      `(min-width: ${theme.orbit.widthBreakpointTablet}px)`,
+      `(min-width: ${theme.orbit.breakpointTablet}px)`,
     );
     expect(getBreakpointWidth(QUERIES.DESKTOP, theme)).toBe(
-      `(min-width: ${theme.orbit.widthBreakpointDesktop}px)`,
+      `(min-width: ${theme.orbit.breakpointDesktop}px)`,
     );
     expect(getBreakpointWidth(QUERIES.LARGEDESKTOP, theme)).toBe(
-      `(min-width: ${theme.orbit.widthBreakpointLargeDesktop}px)`,
+      `(min-width: ${theme.orbit.breakpointLargeDesktop}px)`,
     );
   });
 
   it("should return correct value for each query when pure is true", () => {
     expect(getBreakpointWidth(QUERIES.MEDIUMMOBILE, theme, true)).toBe(
-      theme.orbit.widthBreakpointMediumMobile,
+      theme.orbit.breakpointMediumMobile,
     );
     expect(getBreakpointWidth(QUERIES.LARGEMOBILE, theme, true)).toBe(
-      theme.orbit.widthBreakpointLargeMobile,
-    );
-    expect(getBreakpointWidth(QUERIES.TABLET, theme, true)).toBe(theme.orbit.widthBreakpointTablet);
-    expect(getBreakpointWidth(QUERIES.DESKTOP, theme, true)).toBe(
-      theme.orbit.widthBreakpointDesktop,
+      theme.orbit.breakpointLargeMobile,
     );
+    expect(getBreakpointWidth(QUERIES.TABLET, theme, true)).toBe(theme.orbit.breakpointTablet);
+    expect(getBreakpointWidth(QUERIES.DESKTOP, theme, true)).toBe(theme.orbit.breakpointDesktop);
     expect(getBreakpointWidth(QUERIES.LARGEDESKTOP, theme, true)).toBe(
-      theme.orbit.widthBreakpointLargeDesktop,
+      theme.orbit.breakpointLargeDesktop,
     );
   });
 });
diff --git a/packages/orbit-components/src/utils/mediaQuery/index.ts b/packages/orbit-components/src/utils/mediaQuery/index.ts
@@ -17,11 +17,11 @@ export enum QUERIES {
 }
 
 export const TOKEN = {
-  mediumMobile: "widthBreakpointMediumMobile",
-  largeMobile: "widthBreakpointLargeMobile",
-  tablet: "widthBreakpointTablet",
-  desktop: "widthBreakpointDesktop",
-  largeDesktop: "widthBreakpointLargeDesktop",
+  mediumMobile: "breakpointMediumMobile",
+  largeMobile: "breakpointLargeMobile",
+  tablet: "breakpointTablet",
+  desktop: "breakpointDesktop",
+  largeDesktop: "breakpointLargeDesktop",
 } as const;
 
 export function getBreakpointWidth(name: keyof typeof TOKEN, theme: Theme): string;