Fix skip to content link position

packages/components/psammead-brand/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 5.1.0-alpha.6 | [PR#2680](https://github.com/bbc/psammead/pull/2680) Export `SkipLink` from a separated folder and fix its position  | 
 | 5.1.0-alpha.5 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Brand Component for all breakpoints |
 | 5.1.0-alpha.4 | [PR#2564](https://github.com/bbc/psammead/pull/2564) Add skip to content link |
 | 5.1.0-alpha.3 | [PR#2539](https://github.com/bbc/psammead/pull/2539) Fix overlapping between `ScriptLink` and `Brand` |
@@ -30,44 +31,44 @@
 | 4.3.1 | [PR#1803](https://github.com/bbc/psammead/pull/1803/) Patches broken links on badges in documentation |
 | 4.3.0 | [PR#1794](https://github.com/bbc/psammead/pull/1794) Add david dependency badges |
 | 4.2.6 | [PR#1734](https://github.com/bbc/psammead/pull/1734) Talos - Bump Dependencies |
-| 4.2.5   | [PR#1685](https://github.com/bbc/psammead/pull/1685) Bump dependencies |
+| 4.2.5 | [PR#1685](https://github.com/bbc/psammead/pull/1685) Bump dependencies |
 | 4.2.4 | [PR#1682](https://github.com/bbc/psammead/pull/1682) Move all dev dependencies to top level package.json |
-| 4.2.3   | [PR#1599](https://github.com/bbc/psammead/pull/1599) Bump dependencies |
+| 4.2.3 | [PR#1599](https://github.com/bbc/psammead/pull/1599) Bump dependencies |
 | 4.2.2 | [PR#1518](https://github.com/bbc/psammead/pull/1518) Clear unit test warnings |
 | 4.2.1 | [PR#1365](https://github.com/bbc/psammead/pull/1365) Bump psammead-styles to 1.2.0 |
 | 4.2.0 | [PR#1233](https://github.com/bbc/psammead/pull/1233) Add ESM modules entry |
 | 4.1.12 | [PR#1181](https://github.com/bbc/psammead/pull/1181) Bump dependencies |
 | 4.1.11 | [PR#1082](https://github.com/bbc/psammead/pull/1082) Bump lodash security vulnerability |
-| 4.1.10   | [PR#1038](https://github.com/bbc/psammead/pull/1038) Bump dependencies |
-| 4.1.9   | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies |
+| 4.1.10 | [PR#1038](https://github.com/bbc/psammead/pull/1038) Bump dependencies |
+| 4.1.9 | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies |
 | 4.1.8 | [PR#783](https://github.com/bbc/psammead/pull/783) Update to latest psammead-test-helpers. Update snapshots. |
-| 4.1.7   | [PR#787](https://github.com/bbc/psammead/pull/787) Fix brand colour in Firefox high contrast mode |
-| 4.1.6   | [PR#789](https://github.com/bbc/psammead/pull/789) Use rem for the `BrandSvg` height |
-| 4.1.5   | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` |
-| 4.1.4   | [PR#747](https://github.com/bbc/psammead/pull/747) Add text role to avoid link fragmented on ios voiceover |
-| 4.1.3   | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |
-| 4.1.2   | [PR#684](https://github.com/bbc/psammead/pull/684) Update brand spacing breakpoint to kick in at 25rem |
-| 4.1.1   | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` |
-| 4.1.0   | [PR#647](https://github.com/bbc/psammead/pull/647) Add transparent borders with borderTop and borderBottom props |
-| 4.0.2   | [PR#649](https://github.com/bbc/psammead/pull/649) Update brand to have a max-width of 80rem |
-| 4.0.1   | [PR#642](https://github.com/bbc/psammead/pull/642) Add product and serviceLocalisedName knobs on storybook |
-| 4.0.0   | [PR#609](https://github.com/bbc/psammead/pull/609) Add lang attribute to brand component |
-| 3.0.0   | [PR#528](https://github.com/bbc/psammead/pull/528) Add link prop to allow dynamic link |
-| 2.0.0   | [PR#480](https://github.com/bbc/psammead/pull/480) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. |
-| 1.0.2   | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator |
-| 1.0.1   | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided |
-| 1.0.0   | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs |
-| 0.3.4   | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme |
-| 0.3.3   | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |
-| 0.3.2   | [PR#398](https://github.com/bbc/psammead/pull/398) Update dependencies. Using `rem` for media queries. |
-| 0.3.1   | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url |
-| 0.3.0   | [PR#338](https://github.com/BBC/psammead/pull/338) Limit banner svg to group 5 |
-| 0.2.3   | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge |
-| 0.2.2   | [PR#264](https://github.com/BBC/psammead/pull/319) Resolving package-lock issues. |
-| 0.2.1   | [PR#264](https://github.com/BBC/psammead/pull/264) Resolving package-lock issues. |
-| 0.2.0   | [PR#253](https://github.com/BBC-News/psammead/pull/253) Add support for high contrast mode and print |
-| 0.1.4   | [PR#245](https://github.com/BBC-News/psammead/pull/245) Ensures documentation consistent across component packages. |
-| 0.1.3   | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README |
-| 0.1.2   | [PR#227](https://github.com/BBC-News/psammead/pull/227) Replace @bbc/gel-constants and @bbc/gel-foundations-styled-component with [@bbc/gel-foundations in Psammead](https://github.com/BBC-News/psammead/issues/226). |
-| 0.1.1   | [PR#202](https://github.com/BBC-News/psammead/pull/202) Fixes a styling bug caused by an [incorrect constant import](https://github.com/BBC-News/psammead/issues/201). |
-| 0.1.0   | [PR#105](https://github.com/BBC-News/psammead/pull/105) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh).                         |
+| 4.1.7 | [PR#787](https://github.com/bbc/psammead/pull/787) Fix brand colour in Firefox high contrast mode |
+| 4.1.6 | [PR#789](https://github.com/bbc/psammead/pull/789) Use rem for the `BrandSvg` height |
+| 4.1.5 | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` |
+| 4.1.4 | [PR#747](https://github.com/bbc/psammead/pull/747) Add text role to avoid link fragmented on ios voiceover |
+| 4.1.3 | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |
+| 4.1.2 | [PR#684](https://github.com/bbc/psammead/pull/684) Update brand spacing breakpoint to kick in at 25rem |
+| 4.1.1 | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` |
+| 4.1.0 | [PR#647](https://github.com/bbc/psammead/pull/647) Add transparent borders with borderTop and borderBottom props |
+| 4.0.2 | [PR#649](https://github.com/bbc/psammead/pull/649) Update brand to have a max-width of 80rem |
+| 4.0.1 | [PR#642](https://github.com/bbc/psammead/pull/642) Add product and serviceLocalisedName knobs on storybook |
+| 4.0.0 | [PR#609](https://github.com/bbc/psammead/pull/609) Add lang attribute to brand component |
+| 3.0.0 | [PR#528](https://github.com/bbc/psammead/pull/528) Add link prop to allow dynamic link |
+| 2.0.0 | [PR#480](https://github.com/bbc/psammead/pull/480) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. |
+| 1.0.2 | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator |
+| 1.0.1 | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided |
+| 1.0.0 | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs |
+| 0.3.4 | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme |
+| 0.3.3 | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |
+| 0.3.2 | [PR#398](https://github.com/bbc/psammead/pull/398) Update dependencies. Using `rem` for media queries. |
+| 0.3.1 | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url |
+| 0.3.0 | [PR#338](https://github.com/BBC/psammead/pull/338) Limit banner svg to group 5 |
+| 0.2.3 | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge |
+| 0.2.2 | [PR#264](https://github.com/BBC/psammead/pull/319) Resolving package-lock issues. |
+| 0.2.1 | [PR#264](https://github.com/BBC/psammead/pull/264) Resolving package-lock issues. |
+| 0.2.0 | [PR#253](https://github.com/BBC-News/psammead/pull/253) Add support for high contrast mode and print |
+| 0.1.4 | [PR#245](https://github.com/BBC-News/psammead/pull/245) Ensures documentation consistent across component packages. |
+| 0.1.3 | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README |
+| 0.1.2 | [PR#227](https://github.com/BBC-News/psammead/pull/227) Replace @bbc/gel-constants and @bbc/gel-foundations-styled-component with [@bbc/gel-foundations in Psammead](https://github.com/BBC-News/psammead/issues/226). |
+| 0.1.1 | [PR#202](https://github.com/BBC-News/psammead/pull/202) Fixes a styling bug caused by an [incorrect constant import](https://github.com/BBC-News/psammead/issues/201). |
+| 0.1.0 | [PR#105](https://github.com/BBC-News/psammead/pull/105) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). |

packages/components/psammead-brand/README.md

@@ -26,6 +26,10 @@ The `url` value is the link that points to the frontpage of the service associat
 
 The `scriptLink` can be used to render [ScriptLink](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-script-link) component which is a link to the service variant.
 
+## Exports
+
+`/skip-link` - Use the skip link component to help keyboard-only users skip to the main content on the page.
+
 ## Installation
 
 `npm install @bbc/psammead-brand`
@@ -58,7 +62,8 @@ When using `Brand` in the header, you should ensure that `borderBottom` prop is
 `ScriptLink` component should be passed to `scriptLink` only when linking to a service variant.
 
 ```jsx
-import Brand, { SkipLink } from '@bbc/psammead-brand';
+import Brand from '@bbc/psammead-brand';
+import SkipLink from '@bbc/psammead-brand/skip-link';
 import { igbo } from '@bbc/psammead-assets/svgs';
 import ScriptLink from '@bbc/psammead-script-link';
 import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "5.1.0-alpha.5",
+  "version": "5.1.0-alpha.6",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "@bbc/psammead-visually-hidden-text": "^1.2.3"
   },
   "devDependencies": {
-    "@bbc/psammead-script-link": "^1.0.0-alpha.4",
+    "@bbc/psammead-script-link": "^1.0.0-alpha.9",
     "@bbc/psammead-styles": "^4.1.0"
   },
   "peerDependencies": {

packages/components/psammead-brand/skip-link/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@bbc/psammead-brand/skip-link",
+  "private": true,
+  "main": "../dist/SkipLink",
+  "module": "../esm/SkipLink",
+  "sideEffects": false
+}

packages/components/psammead-brand/src/SkipLink/index.jsx

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+import { oneOf } from 'prop-types';
+import { 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';
+
+const SKIP_LINK_COLOR = '#333';
+const SKIP_LINK_BORDER = '0.1875rem'; // 3px
+const TOP_BOTTOM_SPACING = '0.75rem'; // 12px
+
+const SkipLink = styled.a`
+  position: absolute;
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  padding: ${TOP_BOTTOM_SPACING} ${GEL_SPACING};
+  background-color: #ffffff;
+  border: ${SKIP_LINK_BORDER} solid #000;
+  color: ${SKIP_LINK_COLOR};
+  text-decoration: none;
+  ${({ script }) => script && getPica(script)};
+  ${({ service }) => service && getSansRegular(service)}
+
+  &:focus {
+    clip-path: none;
+    clip: auto;
+    height: auto;
+    width: auto;
+    top: ${GEL_SPACING};
+    ${({ dir }) => css`
+      &::after {
+        ${dir === 'ltr' ? 'left' : 'right'}: 0;
+      }
+    `}
+  }
+
+  @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
+    padding: ${GEL_SPACING};
+  }
+`;
+
+SkipLink.propTypes = {
+  dir: oneOf(['ltr', 'rtl']),
+};
+
+SkipLink.defaultProps = { dir: 'ltr' };
+
+export default SkipLink;

packages/components/psammead-brand/src/index.jsx

@@ -13,8 +13,6 @@ import {
   GEL_SPACING,
   GEL_SPACING_DBL,
 } from '@bbc/gel-foundations/spacings';
-import { getPica } from '@bbc/gel-foundations/typography';
-import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 
 const SVG_TOP_OFFSET_BELOW_400PX = '0.625rem'; // 10px
 const SVG_BOTTOM_OFFSET_BELOW_400PX = '0.375rem'; // 6px
@@ -120,34 +118,6 @@ const BrandSvg = styled.svg`
   /* stylelint-enable */
 `;
 
-/* Skip to content */
-const SKIP_LINK_COLOR = '#333';
-const SKIP_LINK_BORDER = '0.1875rem'; // 3px
-const TOP_BOTTOM_SPACING = '0.75rem'; // 12px
-
-export const SkipLink = styled.a`
-  position: absolute;
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  padding: ${TOP_BOTTOM_SPACING} ${GEL_SPACING};
-  background-color: #ffffff;
-  border: ${SKIP_LINK_BORDER} solid #000;
-  color: ${SKIP_LINK_COLOR};
-  text-decoration: none;
-  ${({ script }) => script && getPica(script)};
-  ${({ service }) => service && getSansRegular(service)}
-
-  &:focus {
-    clip-path: none;
-    clip: auto;
-    height: auto;
-    width: auto;
-  }
-`;
-
 const LocalisedBrandName = ({ product, serviceLocalisedName }) =>
   serviceLocalisedName ? (
     // eslint-disable-next-line jsx-a11y/aria-role

packages/components/psammead-brand/src/index.stories.jsx

@@ -15,8 +15,9 @@ import {
   buildRTLSubstories,
 } from '@bbc/psammead-storybook-helpers';
 import ScriptLink from '@bbc/psammead-script-link';
+import Brand from './index';
+import SkipLink from './SkipLink';
 import notes from '../README.md';
-import Brand, { SkipLink } from './index';
 
 const STORY_KIND = 'Components|Brand';
 const inputs = (service = 'news') => {
@@ -165,8 +166,18 @@ storiesOf(STORY_KIND, module)
     { notes },
   )
   .add(
-    'with skip to content link',
+    'with skip to content link and script link',
     ({ service, script }) => {
+      const scriptLink = (
+        <ScriptLink
+          script={script}
+          service={service}
+          href="https://www.bbc.com/serbian/lat"
+        >
+          Lat
+        </ScriptLink>
+      );
+
       const {
         productInput,
         serviceLocalisedNameInput,
@@ -178,10 +189,11 @@ storiesOf(STORY_KIND, module)
         borderTop,
         backgroundColour,
         logoColour,
+        dir,
       } = inputs();
 
       const skipLink = (
-        <SkipLink service={service} script={script} href="#content">
+        <SkipLink service={service} script={script} href="#content" dir={dir}>
           Skip to content
         </SkipLink>
       );
@@ -200,6 +212,7 @@ storiesOf(STORY_KIND, module)
           backgroundColour={backgroundColour}
           logoColour={logoColour}
           skipLink={skipLink}
+          scriptLink={scriptLink}
         />
       );
     },

packages/components/psammead-brand/src/index.test.jsx

@@ -4,7 +4,8 @@ import { render } from '@testing-library/react';
 import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
 import ScriptLink from '@bbc/psammead-script-link';
 import { latin } from '@bbc/gel-foundations/scripts';
-import Brand, { SkipLink } from '.';
+import Brand from '.';
+import SkipLink from './SkipLink';
 
 const svg = {
   group: (