BBC-archive · amywalkerdev · Dec 23, 2019 · Dec 17, 2019 · Dec 17, 2019 · Dec 18, 2019
diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 5.1.0-alpha.9 | [PR#2833](https://github.com/bbc/psammead/pull/2833) Wrap `scriptLink` in a div to fix Read&Write issue in chrome |
 | 5.1.0-alpha.8 | [PR#2701](https://github.com/bbc/psammead/pull/2701) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 5.1.0-alpha.7 | [PR#2680](https://github.com/bbc/psammead/pull/2680) Export `SkipLink` from a separated folder and fix its position  | 
 | 5.1.0-alpha.6 | [PR#2697](https://github.com/bbc/psammead/pull/2697) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "5.1.0-alpha.7",
+  "version": "5.1.0-alpha.9",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
@@ -231,7 +231,7 @@ const Brand = props => {
           <StyledBrand {...props} />
         )}
         {skipLink}
-        {scriptLink}
+        {scriptLink && <div>{scriptLink}</div>}
       </SvgWrapper>
     </Banner>
   );

diff --git a/packages/components/psammead-script-link/CHANGELOG.md b/packages/components/psammead-script-link/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.0.0-alpha.14 | [PR#2833](https://github.com/bbc/psammead/pull/2833) Refactor to fix read&write issue on IE11 |
 | 1.0.0-alpha.13 | [PR#2786](https://github.com/bbc/psammead/pull/2786) Add `onClick` prop |
 | 1.0.0-alpha.12 | [PR#2750](https://github.com/bbc/psammead/pull/2750) Add ScriptLink touch area styles |
 | 1.0.0-alpha.11 | [PR#2701](https://github.com/bbc/psammead/pull/2701) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-script-link/package-lock.json b/packages/components/psammead-script-link/package-lock.json
diff --git a/packages/components/psammead-script-link/package.json b/packages/components/psammead-script-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-script-link",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap
@@ -7,28 +7,26 @@ exports[`ScriptLink should render correctly 1`] = `
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-weight: 400;
   font-style: normal;
-  position: relative;
   display: inline-block;
   color: #FFFFFF;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0 1rem;
-  height: 3rem;
+  height: 2.25rem;
+  border: 0.0625rem solid #FFFFFF;
+  margin: 0.25rem;
 }
 
-.c0::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 0.0625rem solid #FFFFFF;
+.c0 > span {
+  margin: 0.1875rem;
+  display: inline-block;
+  height: calc(100%);
+  padding: 0 1rem;
 }
 
-.c0:hover::before,
-.c0:focus::before {
-  border: 0.25rem solid #FFFFFF;
+.c0:hover span,
+.c0:focus span {
+  margin: 0;
+  border: 0.1875rem solid #FFFFFF;
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
@@ -45,56 +43,29 @@ exports[`ScriptLink should render correctly 1`] = `
   }
 }
 
-@media (max-width:24.9375rem) {
-  .c0 {
-    line-height: 2.5rem;
-    height: 2.5rem;
-    padding: 0 0.75rem;
-  }
-}
-
 @media (min-width:25rem) {
   .c0 {
-    line-height: 3rem;
-  }
-
-  .c0::after {
-    content: '';
-    position: absolute;
-    top: -0.25rem;
-    left: -0.25rem;
-    right: 0;
-    bottom: 0;
-    height: 2.75rem;
-    width: 2.75rem;
-    margin: 0 0.25rem;
+    line-height: calc(2.25rem - 0.5rem);
   }
 }
 
-@media (min-width:37.5rem) {
+@media (max-width:37.4375rem) {
   .c0 {
-    height: 2.25rem;
-    line-height: 2.25rem;
-    padding: 0 0.625rem;
+    height: 2.5rem;
   }
 
-  .c0::after {
-    content: '';
-    position: absolute;
-    top: -0.25rem;
-    left: -0.25rem;
-    right: 0;
-    bottom: 0;
-    height: 2.75rem;
-    width: 2.75rem;
-    margin: 0 0.25rem;
+  .c0 > span {
+    padding: 0 0.75rem;
+    line-height: calc(2.5rem - 0.5rem);
   }
 }
 
 <a
   class="c0"
   href="https://www.bbc.co.uk/news"
 >
-  Lat
+  <span>
+    Lat
+  </span>
 </a>
 `;
diff --git a/packages/components/psammead-script-link/src/index.jsx b/packages/components/psammead-script-link/src/index.jsx
@@ -1,70 +1,49 @@
 import React from 'react';
 import styled from 'styled-components';
-import { getPica } from '@bbc/gel-foundations/typography';
 import {
-  GEL_GROUP_1_SCREEN_WIDTH_MAX,
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
-  GEL_GROUP_3_SCREEN_WIDTH_MIN,
+  GEL_GROUP_2_SCREEN_WIDTH_MAX,
 } from '@bbc/gel-foundations/breakpoints';
-import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 import { C_WHITE } from '@bbc/psammead-styles/colours';
+import { getPica } from '@bbc/gel-foundations/typography';
+import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 import { string, shape, node, func } from 'prop-types';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 
-const touchAreaStyles = `
-&::after {
-  content: '';
-  position: absolute;
-  top: -0.25rem;
-  left: -0.25rem;
-  right: 0;
-  bottom: 0;
-  height: 2.75rem;
-  width: 2.75rem;
-  margin: 0 0.25rem;
-}`;
-
 const StyledLink = styled.a`
   ${({ script }) => script && getPica(script)}
   ${({ service }) => service && getSansRegular(service)}
-  position: relative;
   display: inline-block;
   color: ${C_WHITE};
   text-decoration: none;
-  padding: 0 1rem;
-  height: 3rem;
+  height: 2.25rem;
+  border: 0.0625rem solid ${C_WHITE};
+  margin: 0.25rem;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 0.0625rem solid ${C_WHITE};
+  > span {
+    margin: 0.1875rem;
+    display: inline-block;
+    height: calc(100%);
+    padding: 0 1rem;
   }
 
-  &:hover::before,
-  &:focus::before {
-    border: 0.25rem solid ${C_WHITE};
+  &:hover span,
+  &:focus span {
+    margin: 0;
+    border: 0.1875rem solid ${C_WHITE};
   }
 
-  @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
-    line-height: 2.5rem;
-    height: 2.5rem;
-    padding: 0 0.75rem;
-  }
   @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
-    line-height: 3rem;
-
-    ${touchAreaStyles}
+    line-height: calc(2.25rem - 0.5rem);
   }
-  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    height: 2.25rem;
-    line-height: 2.25rem;
-    padding: 0 0.625rem;
 
-    ${touchAreaStyles}
+  @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
+    height: 2.5rem;
+
+    > span {
+      padding: 0 0.75rem;
+      line-height: calc(2.5rem - 0.5rem);
+    }
   }
 `;
 
@@ -76,7 +55,7 @@ const ScriptLink = ({ children, script, service, href, variant, onClick }) => (
     data-variant={variant}
     onClick={onClick}
   >
-    {children}
+    <span>{children}</span>
   </StyledLink>
 );