From 70eba8e68f005a0d1eeab189c3fe41856d230b96 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 25 Jun 2019 10:48:52 +0100 Subject: [PATCH 01/11] Add REM vs EM document to Psammead --- documentation/Spacing-Units.md | 81 +++++++++++++++++++ .../utilities/gel-foundations/CHANGELOG.md | 1 + packages/utilities/gel-foundations/README.md | 5 +- .../gel-foundations/package-lock.json | 2 +- .../utilities/gel-foundations/package.json | 2 +- 5 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 documentation/Spacing-Units.md diff --git a/documentation/Spacing-Units.md b/documentation/Spacing-Units.md new file mode 100644 index 0000000000..df7d6d0ea3 --- /dev/null +++ b/documentation/Spacing-Units.md @@ -0,0 +1,81 @@ +# REMs vs EMs for spacing +REMs and EMs can be used for spacing (padding/margins/line height). We chose REMs on the basis of clarity and no perceptible difference in rendering. + +## REMs +The REM unit represents a size relative to the root element (e.g., the `font-size` of ``). Combined with the root element's font-size, a REM represents the root element's initial value. + +### Advantages +Spacing will be global across `Psammead`. + +Ease of understanding: When we create a constant expressed in REMs (e.g. `export const GEL_SPACING = '0.5rem'`) that value, or values based of that value, stay constant, which adds simplicity from a developer perspective. + +``` +// assumes the root font size is 16px, which is a common browser default + +export const GEL_SPACING = '0.5rem'; // 8px +export const GEL_SPACING_DBL = GEL_SPACING * 2; // 16px +export const GEL_SPACING_QUAD = GEL_SPACING * 4; // 32px +``` + +REMs offer an easy transition from our current code base's use of pixels for padding. + +### Disadvantages +REMs are not supported in IE8: https://caniuse.com/#search=REMs, but REMs are used on our production sites. IE8 is not a supported browser. However, spacing doesn't appear to break in IE8 when REMs are used: + +Pixels for padding: +![latest-px-win7-ie8](https://user-images.githubusercontent.com/916416/43953551-46638fea-9c91-11e8-851a-ef74c2cee458.PNG) + +REMs for padding +![rems-win7-ie8](https://user-images.githubusercontent.com/916416/43953553-46899366-9c91-11e8-8335-a0c833a4c5c9.PNG) + + +
+ +## EMs +"Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element."(MDN) + +### Advantages +EMs allow for more modularity of components, because spacing will be relative to local font-size. + +### Disadvantages +Potential complexity of understanding due to nesting components, depending on how font size is implemented. It's harder to immediately understand what the current font size is that the EM is relative to: +``` + + +
+

I am a heading and I should be 32px

+
+ I am the child and I should be 12px +
+
+ +``` + +## a11y +* Both are resizable. +* Both are used in production. +* Both require a default font-size set in a resizable unit. An example implementation would be `font-size: 100%` on the `html` element. If, as authors, we provide a resizable default font-size alongside using REMs/EMs for spacing, we give user agents the ability to resize spacing. + +## Further reading: + + +This spike arises from https://github.com/bbc/simorgh/issues/407. diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md index ec447acd04..6e3ba10a47 100644 --- a/packages/utilities/gel-foundations/CHANGELOG.md +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 3.1.0 | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Update README `rem` doc link | | 3.0.0 | [PR#586](https://github.com/bbc/psammead/pull/586) Update GEL Types values | | 2.0.0 | [PR#517](https://github.com/bbc/psammead/pull/517) Remove unused GEL Types | | 1.2.0 | [PR#431](https://github.com/bbc/psammead/pull/431) Add custom scripts propTypes | diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index c1d290f239..358879b4f0 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -41,7 +41,7 @@ const SomeStyledComponent = css` To allow the typography to be fully accessible and responsive, please note that you should apply a default font-size to the document root (e.g. `html { font-size: 100% }`). -Our typography uses `rem` for font-size and line-height. `rem` is relative to the document root, so we use that for font-size and line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](https://github.com/bbc/simorgh/blob/latest/docs/Spacing-Units.md) for more information. +Our typography uses `rem` for font-size and line-height. The `rem` unit represents a size relative to the document root, so we use that for font-size, line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](hhttps://github.com/bbc/psammead/tree/latest/documentation/Spacing-Units.md) for more information. ### Script support @@ -51,6 +51,7 @@ You can import the script doing `import { arabic } from '@bbc/gel-foundations/sc In addition to Latin script defaults, Psammead supports typography for a number of other scripts. We have grouped the scripts that share similiar features as follows: + | Group Name | Services | Rationale | | --------------------------- | -------- | --------------------------- | | latin-and-cyrillic | News, Hausa, Gahuza, Somali, Swahili, Igbo, Pidgin, Afaan Oromo, Yoruba, Azeri, Indonesia, Uzbek, Serbian, Russian, Ukrainian, Kyrgyz, Uzbek | The typography values for Latin and Cyrillic characters are identical | @@ -63,7 +64,7 @@ In addition to Latin script defaults, Psammead supports typography for a number | bengali | Bengali | Bespoke to the Bengal characters | | burmese | Burmese | Bespoke to the Burmese characters | | sinhalese | Sinhala | Bespoke to the Sinhalese characters | -| tamil | Tamil | Bespoke to the Tamil characters | +| tamil | Tamil | Bespoke to the Tamil characters | ## Contributing diff --git a/packages/utilities/gel-foundations/package-lock.json b/packages/utilities/gel-foundations/package-lock.json index 9f5fed77de..45117e0994 100644 --- a/packages/utilities/gel-foundations/package-lock.json +++ b/packages/utilities/gel-foundations/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations", - "version": "3.0.0", + "version": "3.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index b763a8385b..3b2d90ac2f 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations", - "version": "3.0.0", + "version": "3.1.0", "description": "A range of string constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.", "repository": { "type": "git", From 239a34f86b154e8e6a6c8dc9d5cc56716be44133 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 25 Jun 2019 10:58:24 +0100 Subject: [PATCH 02/11] Update PR number --- packages/utilities/gel-foundations/CHANGELOG.md | 2 +- packages/utilities/gel-foundations/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md index 6e3ba10a47..53d461b91d 100644 --- a/packages/utilities/gel-foundations/CHANGELOG.md +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 3.1.0 | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Update README `rem` doc link | +| 3.1.0 | [PR#701](https://github.com/bbc/psammead/pull/701) Update README `rem` doc link | | 3.0.0 | [PR#586](https://github.com/bbc/psammead/pull/586) Update GEL Types values | | 2.0.0 | [PR#517](https://github.com/bbc/psammead/pull/517) Remove unused GEL Types | | 1.2.0 | [PR#431](https://github.com/bbc/psammead/pull/431) Add custom scripts propTypes | diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index 358879b4f0..bb5ecaf890 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -41,7 +41,7 @@ const SomeStyledComponent = css` To allow the typography to be fully accessible and responsive, please note that you should apply a default font-size to the document root (e.g. `html { font-size: 100% }`). -Our typography uses `rem` for font-size and line-height. The `rem` unit represents a size relative to the document root, so we use that for font-size, line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](hhttps://github.com/bbc/psammead/tree/latest/documentation/Spacing-Units.md) for more information. +Our typography uses `rem` for font-size and line-height. The `rem` unit represents a size relative to the document root, so we use that for font-size, line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](https://github.com/bbc/psammead/tree/latest/documentation/Spacing-Units.md) for more information. ### Script support From 75db087dfd21f324bb5dba080b183ba2ae962995 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 25 Jun 2019 16:18:57 +0100 Subject: [PATCH 03/11] Bump to the right version --- packages/utilities/gel-foundations/CHANGELOG.md | 2 +- packages/utilities/gel-foundations/package-lock.json | 2 +- packages/utilities/gel-foundations/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md index 53d461b91d..31f7bdf21a 100644 --- a/packages/utilities/gel-foundations/CHANGELOG.md +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 3.1.0 | [PR#701](https://github.com/bbc/psammead/pull/701) Update README `rem` doc link | +| 3.0.1 | [PR#701](https://github.com/bbc/psammead/pull/701) Update README `rem` doc link | | 3.0.0 | [PR#586](https://github.com/bbc/psammead/pull/586) Update GEL Types values | | 2.0.0 | [PR#517](https://github.com/bbc/psammead/pull/517) Remove unused GEL Types | | 1.2.0 | [PR#431](https://github.com/bbc/psammead/pull/431) Add custom scripts propTypes | diff --git a/packages/utilities/gel-foundations/package-lock.json b/packages/utilities/gel-foundations/package-lock.json index 45117e0994..ea31368469 100644 --- a/packages/utilities/gel-foundations/package-lock.json +++ b/packages/utilities/gel-foundations/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations", - "version": "3.1.0", + "version": "3.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index 3b2d90ac2f..40ceb15575 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations", - "version": "3.1.0", + "version": "3.0.1", "description": "A range of string constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.", "repository": { "type": "git", From 80c4acf830f316c51dc8c1c57c71e864b878c4da Mon Sep 17 00:00:00 2001 From: Einstein Date: Wed, 26 Jun 2019 11:32:45 +0300 Subject: [PATCH 04/11] Update storypromo dependencies --- .../psammead-story-promo/package-lock.json | 305 ++++++++++++++---- .../psammead-story-promo/package.json | 16 +- 2 files changed, 250 insertions(+), 71 deletions(-) diff --git a/packages/components/psammead-story-promo/package-lock.json b/packages/components/psammead-story-promo/package-lock.json index b59f96509d..0c6d59a003 100644 --- a/packages/components/psammead-story-promo/package-lock.json +++ b/packages/components/psammead-story-promo/package-lock.json @@ -4,6 +4,36 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@babel/code-frame": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", + "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.0.0" + } + }, + "@babel/generator": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz", + "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==", + "dev": true, + "requires": { + "@babel/types": "^7.4.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.11", + "source-map": "^0.5.0", + "trim-right": "^1.0.1" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } + } + }, "@babel/helper-annotate-as-pure": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", @@ -13,6 +43,26 @@ "@babel/types": "^7.0.0" } }, + "@babel/helper-function-name": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", + "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.0.0", + "@babel/template": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz", + "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==", + "dev": true, + "requires": { + "@babel/types": "^7.0.0" + } + }, "@babel/helper-module-imports": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz", @@ -22,6 +72,60 @@ "@babel/types": "^7.0.0" } }, + "@babel/helper-split-export-declaration": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", + "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", + "dev": true, + "requires": { + "@babel/types": "^7.4.4" + } + }, + "@babel/highlight": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", + "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", + "dev": true, + "requires": { + "chalk": "^2.0.0", + "esutils": "^2.0.2", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz", + "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==", + "dev": true + }, + "@babel/template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", + "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@babel/parser": "^7.4.4", + "@babel/types": "^7.4.4" + } + }, + "@babel/traverse": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz", + "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@babel/generator": "^7.4.4", + "@babel/helper-function-name": "^7.1.0", + "@babel/helper-split-export-declaration": "^7.4.4", + "@babel/parser": "^7.4.5", + "@babel/types": "^7.4.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.11" + } + }, "@babel/types": { "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz", @@ -39,15 +143,15 @@ "integrity": "sha512-dHVZ+ig1P/crQtvAOP0bB0PAuuqT2R8hs15pZDsJsO1wvPtbvEe2TO6AxXUIODk9TZgod2j+9K6TB4WV/I2LDw==" }, "@bbc/psammead-image": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/@bbc/psammead-image/-/psammead-image-0.3.6.tgz", - "integrity": "sha512-+eOXrN9h8B6u72spHpfb7dWOlGWflWa1nAj03te9Sp1AcTsQrhbQMPZiemdO5j26hu5OWMjGTfixtOT+i8+YTg==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-image/-/psammead-image-1.0.0.tgz", + "integrity": "sha512-pu4TSfYAFav792lTKgnsNKN5G1yseQZzN3aF+7dHQ7B/2SiH9xL8ksais9atYJCCNTC+On3rQx0ickbdnRgGig==", "dev": true }, "@bbc/psammead-media-indicator": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@bbc/psammead-media-indicator/-/psammead-media-indicator-0.1.1.tgz", - "integrity": "sha512-Xae7ITG3CEK43YndJV7b9UpdojePf5Oj2Q4V1HSQAcO/I0zpVsmpzF2P+4kGZDRD41J5Y6ibCiwWS51pslZdhQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@bbc/psammead-media-indicator/-/psammead-media-indicator-1.0.1.tgz", + "integrity": "sha512-YnPiIDfR5IYNRnGJsQUYgOLNyYQmWVU7FQO6b20nzAFT3C40NQvFlDHFac3jOLIGrXOauANhr9wlZz5DoDaYiQ==", "dev": true, "requires": { "@bbc/gel-foundations": "^3.0.0", @@ -55,62 +159,46 @@ "@bbc/psammead-visually-hidden-text": "^0.1.12" }, "dependencies": { - "@bbc/gel-foundations": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.0.0.tgz", - "integrity": "sha512-dHVZ+ig1P/crQtvAOP0bB0PAuuqT2R8hs15pZDsJsO1wvPtbvEe2TO6AxXUIODk9TZgod2j+9K6TB4WV/I2LDw==", + "@bbc/psammead-styles": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.5.tgz", + "integrity": "sha512-55p7WnK8L8eUIgK8R6J1aKfQKXlpUrh2udoTekUqdwAamGLcGxyulf8nyNPQ78G880KDXv+HLyruzQ3/Q9G1+Q==", "dev": true } } }, "@bbc/psammead-storybook-helpers": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@bbc/psammead-storybook-helpers/-/psammead-storybook-helpers-2.1.1.tgz", - "integrity": "sha512-kKpeH97+PY439LoUkTceNtgJynjRbwU9AbmNjsZ18h+alVR2PbZ2j2uYXTo6ux1DiCN3L15aLZmu4K3VordLmw==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@bbc/psammead-storybook-helpers/-/psammead-storybook-helpers-2.1.2.tgz", + "integrity": "sha512-vB3G8W39EOvIgNOEHxftmr/v6tcwgAxtIdAgI42xg5Ad99fbFzoXCS8KB6+ezq/FzrCmbaMqoYTP86hVFuQROQ==", "dev": true, "requires": { "@bbc/gel-foundations": "^3.0.0", "react-helmet": "^5.2.0" - }, - "dependencies": { - "@bbc/gel-foundations": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.0.0.tgz", - "integrity": "sha512-dHVZ+ig1P/crQtvAOP0bB0PAuuqT2R8hs15pZDsJsO1wvPtbvEe2TO6AxXUIODk9TZgod2j+9K6TB4WV/I2LDw==", - "dev": true - } } }, "@bbc/psammead-styles": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.4.tgz", - "integrity": "sha512-qfVXS7d6hC3opkld0Qe6Ffya/O6Pwz3gD186obdXiP+lRaUt45LNSXZQB6eOLxwB7FxdQdxbBT8s7AMrYJ3w/A==" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-1.0.0.tgz", + "integrity": "sha512-4xPQJ0IXpG9FIXvwkzkygKE9GrzHh5/DiwSCCClJlIQVSjqFMSlyz2gEsz+/l+hLCvxa729AED88Ye6Iommhsw==" }, "@bbc/psammead-test-helpers": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-0.3.4.tgz", - "integrity": "sha512-dDFCigLdarSRM3tJk+yx3DLRVPYw5CXL/OBXwjUNUHDulmlRff9KaYdS+XpEySQHYp6Mo+vlqD/EDHbHAYdD5A==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-1.0.0.tgz", + "integrity": "sha512-YEx7bb9eFYUw1dpkgmHcuOYQBZjhvOCPM2fUWShfgtwpcaVNuOsKEIbVng3Au//t4arAbYmRs+Upn+ygriLEfw==", "dev": true, "requires": { "jest-styled-components": "^6.3.1", - "react-test-renderer": "^16.6.3" + "react-test-renderer": "^16.8.6" } }, "@bbc/psammead-timestamp": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@bbc/psammead-timestamp/-/psammead-timestamp-0.3.2.tgz", - "integrity": "sha512-CayEqjUCBj7vciKf26eisSZZOV5KX+tp5rIGaEoOKpY51R/Zyb2h1OfW1lA7lVrVQFhAVA/kUUGRW4DI3bH40Q==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@bbc/psammead-timestamp/-/psammead-timestamp-1.0.1.tgz", + "integrity": "sha512-oTt1ZlOhFwjGor/PR/FdTRUFJvHueMYGApw4Vxf3/1p+vbJQSbeZfdixBH7vDinvYau5qCefkspybFC8Xj0yPw==", "dev": true, "requires": { "@bbc/gel-foundations": "^3.0.0" - }, - "dependencies": { - "@bbc/gel-foundations": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.0.0.tgz", - "integrity": "sha512-dHVZ+ig1P/crQtvAOP0bB0PAuuqT2R8hs15pZDsJsO1wvPtbvEe2TO6AxXUIODk9TZgod2j+9K6TB4WV/I2LDw==", - "dev": true - } } }, "@bbc/psammead-visually-hidden-text": { @@ -120,26 +208,35 @@ "dev": true }, "@emotion/is-prop-valid": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", - "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz", + "integrity": "sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==", "dev": true, "requires": { - "@emotion/memoize": "0.7.1" + "@emotion/memoize": "0.7.2" } }, "@emotion/memoize": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", - "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.2.tgz", + "integrity": "sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==", "dev": true }, "@emotion/unitless": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", - "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==", + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz", + "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==", "dev": true }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, "atob": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", @@ -147,15 +244,15 @@ "dev": true }, "babel-plugin-styled-components": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", - "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.2.tgz", + "integrity": "sha512-gA67BkMbddFPkTjD2bBe7zE6NNEUNK/7A4uDxwSigA3h1+sL2b6mWhxPu9a5DKf+3TvmdoxvtJ4me2NE7k66Ng==", "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.0.0", "@babel/helper-module-imports": "^7.0.0", "babel-plugin-syntax-jsx": "^6.18.0", - "lodash": "^4.17.10" + "lodash": "^4.17.11" } }, "babel-plugin-syntax-jsx": { @@ -170,6 +267,32 @@ "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", "dev": true }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, "css": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", @@ -199,12 +322,27 @@ "postcss-value-parser": "^3.3.0" } }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", "dev": true }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", @@ -217,6 +355,12 @@ "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=", "dev": true }, + "globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -224,15 +368,21 @@ "dev": true }, "inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "is-what": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.2.3.tgz", + "integrity": "sha512-c4syLgFnjXTH5qd82Fp/qtUIeM0wA69xbI0KH1QpurMIvDaZFrS8UtAa4U52Dc2qSznaMxHit0gErMp6A/Qk1w==", "dev": true }, "jest-styled-components": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.1.tgz", - "integrity": "sha512-zie3ajvJbwlbHCAq8/Bv5jdbcYCz0ZMRNNX6adL7wSRpkCVPQtiJigv1140JN1ZOJIODPn8VKrjeFCN+jlPa7w==", + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.3.tgz", + "integrity": "sha512-RBMPZSJJSgPDTTJsuYzx5fsij/CULaqQNZOWkn8J/L++rX6P830o2vB9CXGzfQf/bVq9qGr1ZBNoivi+v6JPYg==", "dev": true, "requires": { "css": "^2.2.4" @@ -244,6 +394,12 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "dev": true }, + "jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true + }, "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", @@ -265,6 +421,21 @@ "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==", "dev": true }, + "merge-anything": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.2.5.tgz", + "integrity": "sha512-WgZGR7EQ1D8pyh57uKBbkPhUCJZLGdMzbDaxL4MDTJSGsvtpGdm8myr6DDtgJwT46xiFBlHqxbveDRpFBWlKWQ==", + "dev": true, + "requires": { + "is-what": "^3.2.3" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -394,17 +565,19 @@ "dev": true }, "styled-components": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", - "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.3.2.tgz", + "integrity": "sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==", "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", - "@emotion/is-prop-valid": "^0.7.3", + "@babel/traverse": "^7.0.0", + "@emotion/is-prop-valid": "^0.8.1", "@emotion/unitless": "^0.7.0", "babel-plugin-styled-components": ">= 1", "css-to-react-native": "^2.2.2", "memoize-one": "^5.0.0", + "merge-anything": "^2.2.4", "prop-types": "^15.5.4", "react-is": "^16.6.0", "stylis": "^3.5.0", @@ -439,6 +612,12 @@ "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", "dev": true }, + "trim-right": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", + "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", + "dev": true + }, "urix": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json index 5feacad62c..d69aa792ec 100644 --- a/packages/components/psammead-story-promo/package.json +++ b/packages/components/psammead-story-promo/package.json @@ -18,20 +18,20 @@ "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-story-promo/README.md", "dependencies": { "@bbc/gel-foundations": "^3.0.0", - "@bbc/psammead-styles": "^0.3.3" + "@bbc/psammead-styles": "^1.0.0" }, "devDependencies": { - "@bbc/psammead-image": "^0.3.5", - "@bbc/psammead-media-indicator": "^0.1.0", - "@bbc/psammead-storybook-helpers": "^2.0.0", - "@bbc/psammead-test-helpers": "^0.3.3", - "@bbc/psammead-timestamp": "^0.3.2", + "@bbc/psammead-image": "^1.0.0", + "@bbc/psammead-media-indicator": "^1.0.1", + "@bbc/psammead-storybook-helpers": "^2.1.2", + "@bbc/psammead-test-helpers": "^1.0.0", + "@bbc/psammead-timestamp": "^1.0.1", "react": "^16.8.6", - "styled-components": "^4.1.3" + "styled-components": "^4.3.2" }, "peerDependencies": { "react": "^16.8.6", - "styled-components": "^4.1.3", + "styled-components": "^4.3.2", "prop-types": "^15.7.2" }, "keywords": [ From dbf9133bcc77e31d6e37241f8c6c6061b8f6de06 Mon Sep 17 00:00:00 2001 From: Einstein Date: Wed, 26 Jun 2019 13:01:05 +0300 Subject: [PATCH 05/11] Update tests --- .../src/__snapshots__/index.test.jsx.snap | 76 +++++++++---------- .../psammead-story-promo/src/index.test.jsx | 6 +- 2 files changed, 39 insertions(+), 43 deletions(-) diff --git a/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap index 7a05fe37d9..3826582b43 100644 --- a/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap @@ -217,7 +217,7 @@ exports[`StoryPromo - Top Story should render correctly 1`] = ` `; exports[`StoryPromo - Top Story with Media Indicator should render correctly 1`] = ` -.c8 { +.c7 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -228,6 +228,12 @@ exports[`StoryPromo - Top Story with Media Indicator should render correctly 1`] width: 1px; } +.c6 { + vertical-align: middle; + margin: 0 0.25rem; + fill: #222222; +} + .c4 { padding: 0.5rem 0.25rem; background-color: #FFFFFF; @@ -236,6 +242,7 @@ exports[`StoryPromo - Top Story with Media Indicator should render correctly 1`] font-size: 0.75rem; line-height: 1rem; color: #222222; + height: 2rem; } .c5 { @@ -247,15 +254,10 @@ exports[`StoryPromo - Top Story with Media Indicator should render correctly 1`] -webkit-box-align: center; -ms-flex-align: center; align-items: center; + height: 100%; } -.c6 { - vertical-align: middle; - margin: 0 0.25rem; - fill: #222222; -} - -.c7 { +.c8 { vertical-align: middle; margin: 0 0.25rem; } @@ -457,13 +459,13 @@ exports[`StoryPromo - Top Story with Media Indicator should render correctly 1`] className="c3" > @@ -732,7 +730,7 @@ exports[`StoryPromo should render correctly 1`] = ` `; exports[`StoryPromo with Media Indicator should render correctly 1`] = ` -.c8 { +.c7 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -743,6 +741,12 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = ` width: 1px; } +.c6 { + vertical-align: middle; + margin: 0 0.25rem; + fill: #222222; +} + .c4 { padding: 0.5rem 0.25rem; background-color: #FFFFFF; @@ -751,6 +755,7 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = ` font-size: 0.75rem; line-height: 1rem; color: #222222; + height: 2rem; } .c5 { @@ -762,15 +767,10 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + height: 100%; } -.c6 { - vertical-align: middle; - margin: 0 0.25rem; - fill: #222222; -} - -.c7 { +.c8 { vertical-align: middle; margin: 0 0.25rem; } @@ -970,13 +970,13 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = ` className="c3" > diff --git a/packages/components/psammead-story-promo/src/index.test.jsx b/packages/components/psammead-story-promo/src/index.test.jsx index ab1bbbc885..aedefde65a 100644 --- a/packages/components/psammead-story-promo/src/index.test.jsx +++ b/packages/components/psammead-story-promo/src/index.test.jsx @@ -82,11 +82,11 @@ describe('assertions', () => { 'The summary of the promo', ); - const time = container.getElementsByTagName('time')[0]; - const spans = time.getElementsByTagName('span'); + const time = container.getElementsByTagName('time'); + const spans = container.getElementsByTagName('span'); expect(spans[0].innerHTML).toEqual('Video 2 minutes 15 seconds'); - expect(spans[1].innerHTML).toEqual('2:15'); + expect(time[0].innerHTML).toEqual('2:15'); const image = container.getElementsByTagName('img')[0]; From 8726ee82d0f61331a8be4318168ab347e2b2bc24 Mon Sep 17 00:00:00 2001 From: Einstein Date: Wed, 26 Jun 2019 15:04:38 +0300 Subject: [PATCH 06/11] Refactor test --- .../psammead-story-promo/src/index.test.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-story-promo/src/index.test.jsx b/packages/components/psammead-story-promo/src/index.test.jsx index aedefde65a..5f87aa5156 100644 --- a/packages/components/psammead-story-promo/src/index.test.jsx +++ b/packages/components/psammead-story-promo/src/index.test.jsx @@ -75,18 +75,18 @@ describe('assertions', () => { />, ); - expect(container.querySelectorAll('h3 a')[0].innerHTML).toEqual( + expect(container.querySelector('h3 a').textContent).toEqual( 'The headline of the promo', ); - expect(container.getElementsByTagName('p')[0].innerHTML).toEqual( + expect(container.querySelector('p').textContent).toEqual( 'The summary of the promo', ); - const time = container.getElementsByTagName('time'); - const spans = container.getElementsByTagName('span'); + const time = container.querySelector('time'); + const span = container.querySelector('span'); - expect(spans[0].innerHTML).toEqual('Video 2 minutes 15 seconds'); - expect(time[0].innerHTML).toEqual('2:15'); + expect(span.textContent).toEqual('Video 2 minutes 15 seconds'); + expect(time.textContent).toEqual('2:15'); const image = container.getElementsByTagName('img')[0]; From e7496eaa17b5395c9f9dc324325519ee83ce75b7 Mon Sep 17 00:00:00 2001 From: Einstein Date: Wed, 26 Jun 2019 16:28:00 +0300 Subject: [PATCH 07/11] Refactor --- packages/components/psammead-story-promo/src/index.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-story-promo/src/index.test.jsx b/packages/components/psammead-story-promo/src/index.test.jsx index 5f87aa5156..244a93ad63 100644 --- a/packages/components/psammead-story-promo/src/index.test.jsx +++ b/packages/components/psammead-story-promo/src/index.test.jsx @@ -88,7 +88,7 @@ describe('assertions', () => { expect(span.textContent).toEqual('Video 2 minutes 15 seconds'); expect(time.textContent).toEqual('2:15'); - const image = container.getElementsByTagName('img')[0]; + const image = container.querySelector('img'); expect(image.getAttribute('src')).toEqual('https://foobar.com/image.png'); expect(image.getAttribute('alt')).toEqual('Alt text'); From 828664f482846316cb13561b390be3c47702356a Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Thu, 27 Jun 2019 10:46:15 +0100 Subject: [PATCH 08/11] Update doc content --- documentation/Spacing-Units.md | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/documentation/Spacing-Units.md b/documentation/Spacing-Units.md index df7d6d0ea3..b86afb2642 100644 --- a/documentation/Spacing-Units.md +++ b/documentation/Spacing-Units.md @@ -1,10 +1,13 @@ # REMs vs EMs for spacing + REMs and EMs can be used for spacing (padding/margins/line height). We chose REMs on the basis of clarity and no perceptible difference in rendering. ## REMs -The REM unit represents a size relative to the root element (e.g., the `font-size` of ``). Combined with the root element's font-size, a REM represents the root element's initial value. + +The REM unit represents a size relative to the root element (e.g., the `font-size` of ``). Unlike the EM, which may be different for each element, the REM is constant throughout the document. ### Advantages + Spacing will be global across `Psammead`. Ease of understanding: When we create a constant expressed in REMs (e.g. `export const GEL_SPACING = '0.5rem'`) that value, or values based of that value, stay constant, which adds simplicity from a developer perspective. @@ -13,14 +16,15 @@ Ease of understanding: When we create a constant expressed in REMs (e.g. `export // assumes the root font size is 16px, which is a common browser default export const GEL_SPACING = '0.5rem'; // 8px -export const GEL_SPACING_DBL = GEL_SPACING * 2; // 16px +export const GEL_SPACING_DBL = GEL_SPACING * 2; // 16px export const GEL_SPACING_QUAD = GEL_SPACING * 4; // 32px ``` REMs offer an easy transition from our current code base's use of pixels for padding. ### Disadvantages -REMs are not supported in IE8: https://caniuse.com/#search=REMs, but REMs are used on our production sites. IE8 is not a supported browser. However, spacing doesn't appear to break in IE8 when REMs are used: + +REMs are not supported in IE8: https://caniuse.com/#search=REMs, but REMs are used on our production sites. IE8 is not a supported browser. However, spacing doesn't appear to break in IE8 when REMs are used: Pixels for padding: ![latest-px-win7-ie8](https://user-images.githubusercontent.com/916416/43953551-46638fea-9c91-11e8-851a-ef74c2cee458.PNG) @@ -28,17 +32,20 @@ Pixels for padding: REMs for padding ![rems-win7-ie8](https://user-images.githubusercontent.com/916416/43953553-46899366-9c91-11e8-8335-a0c833a4c5c9.PNG) -
## EMs + "Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element."(MDN) ### Advantages -EMs allow for more modularity of components, because spacing will be relative to local font-size. + +EMs are more flexible for sizing text and spacing in and around elements rather than pixels, because this unit is relative to the font size of its parent element. ### Disadvantages -Potential complexity of understanding due to nesting components, depending on how font size is implemented. It's harder to immediately understand what the current font size is that the EM is relative to: + +Potential complexity of understanding due to nesting components, depending on how font size is implemented. It's harder to immediately understand what the current font size is that the EM is relative to: + ```