diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md index 538ae70f17..d22bea99aa 100644 --- a/packages/utilities/gel-foundations/CHANGELOG.md +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -3,6 +3,7 @@ | 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). | diff --git a/packages/utilities/gel-foundations/package-lock.json b/packages/utilities/gel-foundations/package-lock.json index 4221ea0f9f..2a52ef0ae7 100644 --- a/packages/utilities/gel-foundations/package-lock.json +++ b/packages/utilities/gel-foundations/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/gel-foundations", - "version": "4.0.0", + "version": "4.0.1", "lockfileVersion": 1 } diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index 30eace4269..9002a72f16 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/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": { diff --git a/packages/utilities/gel-foundations/src/breakpoints.js b/packages/utilities/gel-foundations/src/breakpoints.js index 372ba696a2..1209366b1c 100644 --- a/packages/utilities/gel-foundations/src/breakpoints.js +++ b/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 };