From 3bdabb40866634a1ccdbd51abaf23fb4c0424d44 Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Thu, 19 Dec 2024 17:59:54 +0100
Subject: [PATCH] feat: rename exported breakpoint tokens in mediaQuery util

BREAKING CHANGE: tokens no longer start with `widthBreakpoint-`.
They're now simply `breakpoint-`
---
 .../src/utils/mediaQuery/README.md            | 10 ++++-----
 .../utils/mediaQuery/__tests__/index.test.ts  | 22 +++++++++----------
 .../src/utils/mediaQuery/index.ts             | 10 ++++-----
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/orbit-components/src/utils/mediaQuery/README.md b/packages/orbit-components/src/utils/mediaQuery/README.md
index 4f9ecff360..827348c38a 100644
--- 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
index f3f16563f0..f935069db4 100644
--- 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
index f08da67e59..907c518e90 100644
--- 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;