diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index 0c77900625..995be379b0 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.1 | [PR#2474](https://github.com/bbc/psammead/pull/2474) Add scriptLink prop to render `ScriptLink` used for linking to service variants | | 5.0.11 | [PR#2466](https://github.com/bbc/psammead/pull/2466) create rtl substories | | 5.0.10 | [PR#2488](https://github.com/bbc/psammead/pull/2488) Talos - Bump Dependencies - @bbc/gel-foundations | | 5.0.9 | [PR#2477](https://github.com/bbc/psammead/pull/2477) Talos - Bump Dependencies - @bbc/psammead-styles | diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 68c00ea3ff..8f11261eb6 100644 --- a/packages/components/psammead-brand/README.md +++ b/packages/components/psammead-brand/README.md @@ -1,3 +1,7 @@ +# ⛔️ This is an alpha component ⛔️ + +This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed. + # psammead-brand - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-brand)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-brand) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-brand)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-brand&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/brand--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-brand.svg)](https://www.npmjs.com/package/@bbc/psammead-brand) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) ## Description @@ -6,9 +10,9 @@ The `Brand` component provides the BBC service logo (as SVG), nested inside a st `Brand` takes a `product`, `svgHeight`, `minWidth`, `maxWidth`, `url`, `serviceLocalisedName`, `backgroundColour`, `logoColour` and `svg` as props. -The `product` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand. +The `product` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-visually-hidden-text) component, nested inside Brand. -The `serviceLocalisedName` is an optional prop referring to the local name of a service eg `Yoruba`. It is also passed to [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) inside the Brand component. +The `serviceLocalisedName` is an optional prop referring to the local name of a service eg `Yoruba`. It is also passed to [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-visually-hidden-text) inside the Brand component. The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element. Examples of the `svg` object can be found in [@bbc/psammead-assets](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs). @@ -16,10 +20,12 @@ The `minWidth` and `maxWidth` values are required to allow the ability for the ` The `svgHeight` value acts as a placeholder for the `svg` element meaning the overall banner height does not change with the dynamic scaling, also the `height` allows the contents of the `svg` element to remain vertically centred within the banner at all times. -The `backgroundColour` is the background colour and `logoColour` is the colour of the SVG and the underline when hovering/focusing on the brand. +The `backgroundColour` is the background colour and `logoColour` is the colour of the SVG and the underline when hovering/focusing on the brand. The `url` value is the link that points to the frontpage of the service associated with the `svg`. +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. + ## Installation `npm install @bbc/psammead-brand` @@ -34,12 +40,14 @@ The `url` value is the link that points to the frontpage of the service associat | minWidth | Number | yes | N/A | `240` | | maxWidth | Number | yes | N/A | `380` | | svg | Object | yes | N/A | { group: `()`, viewbox: { height: 24, width: 167.95 }, ratio: 6.9979 } | -| backgroundColour | string | yes | N/A | `${C_POSTBOX}` or relevant string hex code | -| logoColour | string | yes | N/A | `${C_WHITE}` or relevant string hex code | +| backgroundColour | String | yes | N/A | `${C_POSTBOX}` or relevant string hex code | +| logoColour | String | yes | N/A | `${C_WHITE}` or relevant string hex code | | url | String | no | N/A | `https://www.bbc.co.uk/news` | | serviceLocalisedName | String | no | N/A | `'Yoruba'` | -| borderTop | bool | no | `false` | `true` | -| borderBottom | bool | no | `false` | `true` | +| borderTop | Boolean | no | `false` | `true` | +| borderBottom | Boolean | no | `false` | `true` | +| scriptLink | Node | no | `null` | ` Lat ` | +| dir | string | No | `'ltr' | One of `'rtl'` `'ltr' | ## Usage @@ -47,11 +55,24 @@ The typical use-case of this component is at the top of pages in a [`header` ele When using `Brand` in the header, you should ensure that `borderBottom` prop is set to true. Similarly, when using brand on the footer you should set `borderTop` to true. This ensures when in High Contrast Mode on PC and when the user changes colour preferences in FireFox that the top/bottom of the `Brand` component is visible. +`ScriptLink` component should be passed to `scriptLink` only when linking to a service variant. + ```jsx import Brand from '@bbc/psammead-brand'; import { igbo } from '@bbc/psammead-assets/svgs'; +import ScriptLink from '@bbc/psammead-script-link'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; +const scriptLink = ( + + Lat + +); + const Header = (product, serviceName) => (
( backgroundColour={backgroundColour} logoColour={logoColour} borderBottom + scriptLink={scriptLink} + dir="ltr" />
); diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index 024c5d498d..22772c8dce 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.0.11", + "version": "5.1.0-alpha.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -9,6 +9,16 @@ "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.4.1.tgz", "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==", + "dev": true, + "requires": { + "@bbc/gel-foundations": "^3.4.0", + "@bbc/psammead-styles": "^4.0.3" + } + }, "@bbc/psammead-styles": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-4.0.4.tgz", diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index adab4fa5c4..80b6de0006 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.0.11", + "version": "5.1.0-alpha.1", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, @@ -23,6 +23,7 @@ "@bbc/psammead-visually-hidden-text": "^1.2.3" }, "devDependencies": { + "@bbc/psammead-script-link": "^1.0.0-alpha.4", "@bbc/psammead-styles": "^4.0.4" }, "peerDependencies": { @@ -33,5 +34,8 @@ "bbc", "brand", "logo" - ] + ], + "publishConfig": { + "tag": "alpha" + } } diff --git a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap index 2c6c10c726..d3a27d46f6 100644 --- a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap @@ -14,6 +14,7 @@ exports[`Brand should render correctly with link not provided 1`] = ` } .c1 { + position: relative; max-width: 80rem; margin: 0 auto; } @@ -51,6 +52,12 @@ exports[`Brand should render correctly with link not provided 1`] = ` } } +@media (max-width:14.9375rem) { + .c0 { + min-height: 6.5rem; + } +} + @media (min-width:25rem) { .c2 { padding-top: 1.75rem; @@ -116,6 +123,7 @@ exports[`Brand should render correctly with link provided 1`] = ` } .c1 { + position: relative; max-width: 80rem; margin: 0 auto; } @@ -160,6 +168,12 @@ exports[`Brand should render correctly with link provided 1`] = ` } } +@media (max-width:14.9375rem) { + .c0 { + min-height: 6.5rem; + } +} + @media (min-width:25rem) { .c4 { padding-top: 1.75rem; @@ -230,6 +244,7 @@ exports[`Brand should render correctly with no service Localised Name 1`] = ` } .c1 { + position: relative; max-width: 80rem; margin: 0 auto; } @@ -267,6 +282,12 @@ exports[`Brand should render correctly with no service Localised Name 1`] = ` } } +@media (max-width:14.9375rem) { + .c0 { + min-height: 6.5rem; + } +} + @media (min-width:25rem) { .c2 { padding-top: 1.75rem; @@ -325,6 +346,7 @@ exports[`Brand should render correctly with transparent borders 1`] = ` } .c1 { + position: relative; max-width: 80rem; margin: 0 auto; } @@ -364,6 +386,12 @@ exports[`Brand should render correctly with transparent borders 1`] = ` } } +@media (max-width:14.9375rem) { + .c0 { + min-height: 6.5rem; + } +} + @media (min-width:25rem) { .c2 { padding-top: 1.75rem; diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index 7698bb38b8..649ee004dd 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -1,10 +1,12 @@ import React from 'react'; import styled from 'styled-components'; -import { string, number, node, shape, bool } from 'prop-types'; +import { string, number, node, shape, bool, oneOf } from 'prop-types'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { GEL_GROUP_2_SCREEN_WIDTH_MIN, GEL_GROUP_5_SCREEN_WIDTH_MIN, + GEL_GROUP_0_SCREEN_WIDTH_MAX, + GEL_GROUP_1_SCREEN_WIDTH_MAX, } from '@bbc/gel-foundations/breakpoints'; import { GEL_SPACING_HLF, @@ -24,6 +26,7 @@ const conditionallyRenderHeight = (svgHeight, padding) => const TRANSPARENT_BORDER = `0.0625rem solid transparent`; const SvgWrapper = styled.div` + position: relative; max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}; margin: 0 auto; `; @@ -40,6 +43,11 @@ const Banner = styled.div` conditionallyRenderHeight(svgHeight, PADDING_AROUND_SVG_ABOVE_400PX)} padding: 0 ${GEL_SPACING_DBL}; } + + @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) { + min-height: ${({ svgHeight }) => svgHeight / 16 + 5}rem; + } + border-top: ${({ borderTop }) => borderTop && TRANSPARENT_BORDER}; border-bottom: ${({ borderBottom }) => borderBottom && TRANSPARENT_BORDER}; `; @@ -83,7 +91,7 @@ const BrandSvg = styled.svg` border-bottom: ${GEL_SPACING_HLF} solid ${props => props.logoColour}; } /* stylelint-enable */ -`; + `; const LocalisedBrandName = ({ product, serviceLocalisedName }) => serviceLocalisedName ? ( @@ -164,6 +172,30 @@ StyledBrand.defaultProps = { serviceLocalisedName: null, }; +const ScriptLinkWrapper = styled.div` + display: inline-block; + @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) { + padding-top: 0; + position: relative; + right: 0; + display: block; + } + + @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) { + top: calc(50% - 1.25rem); + } + position: absolute; + ${({ dir }) => (dir === 'ltr' ? 'right: 0' : 'left: 0')}; + top: calc(50% - 1.5rem); +`; + +const renderScriptLink = (scriptLink, dir, svgHeight) => + scriptLink && ( + + {scriptLink} + + ); + const Brand = props => { const { svgHeight, @@ -174,9 +206,13 @@ const Brand = props => { borderBottom, backgroundColour, logoColour, + scriptLink, + dir, ...rest } = props; + const scriptLinkComponent = renderScriptLink(scriptLink, dir, svgHeight); + return ( { + {scriptLinkComponent} ) : ( + {scriptLinkComponent} )} @@ -206,6 +244,8 @@ Brand.defaultProps = { serviceLocalisedName: null, borderTop: false, borderBottom: false, + scriptLink: null, + dir: 'ltr', }; Brand.propTypes = { @@ -214,6 +254,8 @@ Brand.propTypes = { serviceLocalisedName: string, borderTop: bool, borderBottom: bool, + scriptLink: node, + dir: oneOf(['rtl', 'ltr']), }; export default Brand; diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 217ebedd62..4faf5c4eea 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -14,6 +14,7 @@ import { withServicesKnob, buildRTLSubstories, } from '@bbc/psammead-storybook-helpers'; +import ScriptLink from '@bbc/psammead-script-link'; import notes from '../README.md'; import Brand from './index'; @@ -117,6 +118,52 @@ storiesOf(STORY_KIND, module) ); }, { notes }, + ) + .add( + 'with script link', + ({ service, dir, script }) => { + const scriptLink = ( + + Lat + + ); + + const { + productInput, + serviceLocalisedNameInput, + svgHeightInput, + minWidthInput, + maxWidthInput, + svgChoice, + borderBottom, + borderTop, + backgroundColour, + logoColour, + } = inputs(); + + return ( + + ); + }, + { notes }, ); buildRTLSubstories(STORY_KIND, { include: ['with brand link'] }); diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx index b5dec9c900..d0e18f00b8 100644 --- a/packages/components/psammead-brand/src/index.test.jsx +++ b/packages/components/psammead-brand/src/index.test.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; 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 from '.'; const svg = { @@ -132,5 +134,39 @@ describe('Brand', () => { 'header', ); }); + it('should render script link', () => { + const scriptLinkComponent = ( + + Lat + + ); + const { container } = render( + , + ); + + const links = container.querySelectorAll('a'); + expect(links).toHaveLength(2); + + const scriptLink = links[1]; + expect(scriptLink.getAttribute('href')).toEqual( + 'https://www.bbc.com/serbian/lat', + ); + expect(scriptLink.textContent).toEqual('Lat'); + }); }); });