Feat; add new breakpoint between tablet and desktop called laptop (lp)

GovConnex · Jun 19, 2024 · a27c307 · a27c307
1 parent fc18510
commit a27c307
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.186",
+  "version": "0.0.188",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -61,6 +61,7 @@ export interface ExtendedBoxProps extends BoxProps {
   // breakpoints
   sm?: customStyles;
   md?: customStyles;
+  lp?: customStyles;
   lg?: customStyles;
 
   direction?: "row" | "column" | "row-reverse" | "column-reverse";

diff --git a/src/core/styleFunctions/index.tsx b/src/core/styleFunctions/index.tsx
@@ -38,14 +38,16 @@ type ShorthandCSS = {
 type breakpoints = {
   sm?: CSS.Properties | ShorthandCSS;
   md?: CSS.Properties | ShorthandCSS;
+  lp?: CSS.Properties | ShorthandCSS;
   lg?: CSS.Properties | ShorthandCSS;
 };
 
-type keysTypes = "sm" | "md" | "lg";
+type keysTypes = "sm" | "md" | "lp" | "lg";
 
-const values: {sm: number; md: number; lg: number} = {
-  sm: 0, // tablet
-  md: 600, // small laptop
+const values: {sm: number; md: number; lp: number; lg: number} = {
+  sm: 0, // mobile
+  md: 600, // tablet
+  lp: 960, // small laptop
   lg: 1360, // desktop 1360
 };
 
@@ -106,7 +108,7 @@ const numberToSpacingMap = {
 export type customStyles = CSS.Properties | breakpoints | ShorthandCSS;
 
 const defaultBreakpoints = {
-  keys: ["sm", "md", "lg"],
+  keys: ["sm", "md", "lp", "lg"],
   up: (key: keysTypes) => `@media (min-width:${values[key]}px)`,
 };