Breakpoints restructuring

packages/utilities/gel-foundations/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 4.0.1 | [PR#3127](https://github.com/bbc/psammead/pull/3127) Restructured breakpoints.js to pair the consts which use one another. |
 | 4.0.0 | [PR#3128](https://github.com/bbc/psammead/pull/3128) Update `GEL_GROUP_4_SCREEN_WIDTH_MAX` value |
 | 3.4.3 | [PR#2947](https://github.com/bbc/psammead/pull/2947) Added additional rem sizing for 40px - 58px spacing according to new MAP and OD Radio designs. |
 | 3.4.2 | [PR#2858](https://github.com/bbc/psammead/pull/2858) Update line heights for Tamil and Devanagari & Gurmukhi scripts (Long Primer and Body Copy types). |

packages/utilities/gel-foundations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/gel-foundations",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "sideEffects": false,
   "description": "A range of string constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.",
   "repository": {

packages/utilities/gel-foundations/src/breakpoints.js

@@ -1,13 +1,3 @@
-/* 
-   Screen sizes for GEL Typography
-   These namings are based on the GEL description. They are also known as group A, group B and group D
-   Link to relevant GEL docs: http://www.bbc.co.uk/gel/guidelines/typography#type-sizes
-*/
-export const GEL_GROUP_A_MAX_WIDTH = 19.9375; // 319px
-export const GEL_GROUP_B_MIN_WIDTH = 20; // 320px
-export const GEL_GROUP_B_MAX_WIDTH = 37.4375; // 599px
-export const GEL_GROUP_CD_MIN_WIDTH = 37.5; // 600px
-
 /*
     The following are breakpoints from GEL Grid
     Link to relevant GEL docs: https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes
@@ -30,9 +20,19 @@ export const GEL_GROUP_4_SCREEN_WIDTH_MAX = `79.9375rem`; // 1279px
 
 export const GEL_GROUP_5_SCREEN_WIDTH_MIN = `80rem`; // 1280px
 
+/* 
+   Screen sizes for GEL Typography
+   These namings are based on the GEL description. They are also known as group A, group B and group D
+   Link to relevant GEL docs: http://www.bbc.co.uk/gel/guidelines/typography#type-sizes
+*/
+export const GEL_GROUP_A_MAX_WIDTH = 19.9375; // 319px
+export const GEL_GROUP_B_MIN_WIDTH = 20; // 320px
+export const GEL_GROUP_B_MAX_WIDTH = 37.4375; // 599px
+export const GEL_GROUP_CD_MIN_WIDTH = 37.5; // 600px
+
 export const MEDIA_QUERY_TYPOGRAPHY = {
-  FEATURE_PHONE_ONLY: `@media (max-width: ${GEL_GROUP_A_MAX_WIDTH}rem)`,
-  SMART_PHONE_ONLY: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}rem) and (max-width: ${GEL_GROUP_B_MAX_WIDTH}rem)`,
-  SMART_PHONE_AND_LARGER: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}rem)`,
-  LAPTOP_AND_LARGER: `@media (min-width: ${GEL_GROUP_CD_MIN_WIDTH}rem)`,
+  FEATURE_PHONE_ONLY: `@media (max-width: ${GEL_GROUP_A_MAX_WIDTH}rem)`, // < 319px
+  SMART_PHONE_ONLY: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}rem) and (max-width: ${GEL_GROUP_B_MAX_WIDTH}rem)`, // 320px - 599px
+  SMART_PHONE_AND_LARGER: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}rem)`, // > 320px
+  LAPTOP_AND_LARGER: `@media (min-width: ${GEL_GROUP_CD_MIN_WIDTH}rem)`, // > 600px
 };