diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index 75c5bd5cfc..dae0c2e9f3 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 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 | | 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 | @@ -31,44 +32,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). | diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 7ba6962e09..053137c8ec 100644 --- a/packages/components/psammead-brand/README.md +++ b/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'; diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index b797ff17dc..96c72210fc 100644 --- a/packages/components/psammead-brand/package-lock.json +++ b/packages/components/psammead-brand/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-brand", - "version": "5.1.0-alpha.6", + "version": "5.1.0-alpha.7", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -10,13 +10,13 @@ "integrity": "sha512-twwL0UcFrvq9w3O92PvkJRo+wThLqWLrxgFxxn8kwR1pni1wS6lhr3IwUPym4juS2hlTy/5C0/QiycB05IQhLg==" }, "@bbc/psammead-script-link": { - "version": "1.0.0-alpha.4", - "resolved": "https://registry.npmjs.org/@bbc/psammead-script-link/-/psammead-script-link-1.0.0-alpha.4.tgz", - "integrity": "sha512-mJ/q2x0/KZHTAmE/PxZYF9AxwC32ucOKr7urOsW6Tp5jWdsgGYaR4/4rJoLovwc8v5XbKDLfM/t87G9RMUUM8w==", + "version": "1.0.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bbc/psammead-script-link/-/psammead-script-link-1.0.0-alpha.9.tgz", + "integrity": "sha512-D6tHR2iDW/Rm4jJDZFdbY62w2C3nfw8mfpsDODmmkVUPCnBBFuvWVhsSYyU94b/DoZtq2nAPQtTxXuCTBJi3gA==", "dev": true, "requires": { - "@bbc/gel-foundations": "^3.4.0", - "@bbc/psammead-styles": "^4.0.3" + "@bbc/gel-foundations": "^3.4.1", + "@bbc/psammead-styles": "^4.1.0" } }, "@bbc/psammead-styles": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index af7deb0dcd..4bce0ef2ed 100644 --- 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.6", + "version": "5.1.0-alpha.7", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, @@ -23,8 +23,8 @@ "@bbc/psammead-visually-hidden-text": "^1.2.3" }, "devDependencies": { - "@bbc/psammead-script-link": "^1.0.0-alpha.4", - "@bbc/psammead-styles": "^4.1.1" + "@bbc/psammead-script-link": "^1.0.0-alpha.9", + "@bbc/psammead-styles": "^4.1.0" }, "peerDependencies": { "react": "^16.9.0", diff --git a/packages/components/psammead-brand/skip-link/package.json b/packages/components/psammead-brand/skip-link/package.json new file mode 100644 index 0000000000..ee8d762678 --- /dev/null +++ b/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 +} diff --git a/packages/components/psammead-brand/src/SkipLink/index.jsx b/packages/components/psammead-brand/src/SkipLink/index.jsx new file mode 100644 index 0000000000..eb5fb37b99 --- /dev/null +++ b/packages/components/psammead-brand/src/SkipLink/index.jsx @@ -0,0 +1,50 @@ +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_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: ${C_WHITE}; + 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` + ${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; diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index f16a1ade7d..f7996c7d44 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/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 diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 6c7da59d37..afd61579d8 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/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', - ({ service, script }) => { + 'with skip to content link and script link', + ({ service, script, dir }) => { + const scriptLink = ( + + Lat + + ); + const { productInput, serviceLocalisedNameInput, @@ -181,7 +192,7 @@ storiesOf(STORY_KIND, module) } = inputs(); const skipLink = ( - + Skip to content ); @@ -200,6 +211,7 @@ storiesOf(STORY_KIND, module) backgroundColour={backgroundColour} logoColour={logoColour} skipLink={skipLink} + scriptLink={scriptLink} /> ); }, diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx index 0b9ab88504..9df691019f 100644 --- a/packages/components/psammead-brand/src/index.test.jsx +++ b/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: (