Merge branch 'latest' of github.com:bbc/psammead into new-inline-link…

…-styling
BBC-archive · Jul 1, 2019 · 63067b4 · 63067b4
2 parents c908bff + bf5263f
commit 63067b4
Show file tree

Hide file tree

Showing 14 changed files with 398 additions and 130 deletions.
diff --git a/documentation/Spacing-Units.md b/documentation/Spacing-Units.md
@@ -0,0 +1,90 @@
+# 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 `<html>`). 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.
+
+```
+// 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)
+
+<hr/>
+
+## 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 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:
+
+```
+    <style>
+        .parent {
+            font-size: 16px;
+        }
+
+        h1 {
+            font-size: 2em;
+        }
+
+        .child {
+            font-size: 0.75em; /* 12px */
+            padding-bottom: 1em; /* 12px - confusing! because it's relative to the current font-size,
+            0.5em, which is 12px. */
+        }
+
+    </style>
+
+    <div class="parent">
+        <h1>I am a heading and I should be 32px</h1>
+        <div class="child">
+            I am the child and I should be 12px
+        </div>
+    </div>
+
+```
+
+## 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:
+
+<ul>
+    <li>https://developer.mozilla.org/en-US/docs/Web/CSS/length</li>
+    <li>https://engageinteractive.co.uk/blog/em-vs-rem-vs-px</li>
+    <li>https://zellwk.com/blog/rem-vs-em/</li>
+</ul>
+
+This spike arises from https://github.com/bbc/simorgh/issues/407.
diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 1.0.2   | [PR#722](https://github.com/bbc/psammead/pull/722) Fix hover cap on older browsers |
 | 1.0.1   | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/[email protected]` |
 | 1.0.0   | [PR#679](https://github.com/BBC-News/psammead/pull/679) Bump version number |
 | 0.2.1   | [PR#644](https://github.com/BBC-News/psammead/pull/644) Fixes for screenreader UX |

diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-indicator",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "description": "Provides a play icon and media duration for media page promos",
   "repository": {

diff --git a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -21,7 +21,7 @@ exports[`MediaIndicator should render audio correctly without duration details 1
 .c0 {
   padding: 0.5rem 0.25rem;
   background-color: #FFFFFF;
-  display: inline-block;
+  display: block;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-size: 0.75rem;
   line-height: 1rem;
@@ -92,7 +92,7 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
 .c0 {
   padding: 0.5rem 0.25rem;
   background-color: #FFFFFF;
-  display: inline-block;
+  display: block;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-size: 0.75rem;
   line-height: 1rem;
@@ -174,7 +174,7 @@ exports[`MediaIndicator should render video by default 1`] = `
 .c0 {
   padding: 0.5rem 0.25rem;
   background-color: #FFFFFF;
-  display: inline-block;
+  display: block;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-size: 0.75rem;
   line-height: 1rem;
@@ -242,7 +242,7 @@ exports[`MediaIndicator should render video correctly without duration details 1
 .c0 {
   padding: 0.5rem 0.25rem;
   background-color: #FFFFFF;
-  display: inline-block;
+  display: block;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-size: 0.75rem;
   line-height: 1rem;
@@ -310,7 +310,7 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
 .c0 {
   padding: 0.5rem 0.25rem;
   background-color: #FFFFFF;
-  display: inline-block;
+  display: block;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-size: 0.75rem;
   line-height: 1rem;

diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
@@ -10,7 +10,7 @@ import mediaIcons from './mediaIcons';
 const MediaIndicatorWrapper = styled.div`
   padding: ${GEL_SPACING} ${GEL_SPACING_HLF};
   background-color: ${C_WHITE};
-  display: inline-block;
+  display: block;
   font-family: ${GEL_FF_REITH_SANS};
   ${GEL_MINION};
   color: ${C_EBON};