Merge pull request #2946 from bbc/skip-link-top

Move skip link top so it fits within brand banner
BBC-archive · Jan 22, 2020 · d4096a4 · d4096a4
2 parents 43d6b31 + 55dca4f
commit d4096a4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
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.7 | [PR#2946](https://github.com/bbc/psammead/pull/2946) Move skip to content link top to stay within brand banner height |
 | 5.1.6 | [PR#2982](https://github.com/bbc/psammead/pull/2982) Talos - Bump Dependencies - @bbc/psammead-script-link |
 | 5.1.5 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations, @bbc/psammead-script-link |
 | 5.1.4 | [PR#2973](https://github.com/bbc/psammead/pull/2973) 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.6",
+  "version": "5.1.7",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-brand/src/SkipLink/index.jsx b/packages/components/psammead-brand/src/SkipLink/index.jsx
@@ -1,7 +1,10 @@
 import styled, { css } from 'styled-components';
 import { oneOf } from 'prop-types';
 import { C_WHITE } from '@bbc/psammead-styles/colours';
-import { GEL_GROUP_2_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints';
+import {
+  GEL_GROUP_2_SCREEN_WIDTH_MIN,
+  GEL_GROUP_2_SCREEN_WIDTH_MAX,
+} from '@bbc/gel-foundations/breakpoints';
 import { GEL_SPACING } from '@bbc/gel-foundations/spacings';
 import { getPica } from '@bbc/gel-foundations/typography';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
@@ -30,10 +33,14 @@ const SkipLink = styled.a`
     clip: auto;
     height: auto;
     width: auto;
-    top: ${GEL_SPACING};
+    top: 0;
     ${({ dir }) => css`
       ${dir === 'ltr' ? 'left' : 'right'}: 0;
     `}
+
+    @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
+      top: ${GEL_SPACING};
+    }
   }
 
   @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {