From 69072624e47d2fc606d8c3c90a0f3ff54a64ff95 Mon Sep 17 00:00:00 2001 From: sadickisaac Date: Tue, 22 Oct 2019 21:09:19 +0300 Subject: [PATCH] Add scripLink prop to render `ScriptLink` component --- .../components/psammead-brand/CHANGELOG.md | 1 + packages/components/psammead-brand/README.md | 35 +++++++++++--- .../psammead-brand/package-lock.json | 12 ++++- .../components/psammead-brand/package.json | 8 +++- .../src/__snapshots__/index.test.jsx.snap | 28 +++++++++++ .../components/psammead-brand/src/index.jsx | 46 +++++++++++++++++- .../psammead-brand/src/index.stories.jsx | 47 +++++++++++++++++++ .../psammead-brand/src/index.test.jsx | 36 ++++++++++++++ 8 files changed, 202 insertions(+), 11 deletions(-) diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index e71f7837d9..be84ab015d 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#???](https://github.com/bbc/psammead/pull/???) Add scriptLink prop to render `ScriptLink` used for linking to service variants | | 5.0.8 | [PR#2440](https://github.com/bbc/psammead/pull/2440) Talos - Bump Dependencies - @bbc/psammead-visually-hidden-text, @bbc/psammead-styles | | 5.0.7 | [PR#2404](https://github.com/bbc/psammead/pull/2404) replace inputProvider and dirDecorator with withServicesInput | | 5.0.6 | [PR#2377](https://github.com/bbc/psammead/pull/2377) Spread extra props to the component | diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 68c00ea3ff..808b5c2374 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,7 +10,7 @@ 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. @@ -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 880a197bd9..019a7ec648 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.8", + "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.0.tgz", "integrity": "sha512-WuewciWzvSb/WKhUGSvIoighqCdXGN2PsVQbZbUo5/eWi5+o3O8uoojUpeQeRZMYWLsLVELPHr6qJDuqKghXKA==" }, + "@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.3", "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-4.0.3.tgz", diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index aea87144a3..54a98cf402 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.8", + "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.3" }, "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 9cfca14ccb..aa2c05a865 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -11,6 +11,7 @@ import { storiesOf } from '@storybook/react'; import * as svgs from '@bbc/psammead-assets/svgs'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; +import ScriptLink from '@bbc/psammead-script-link'; import notes from '../README.md'; import Brand from './index'; @@ -117,4 +118,50 @@ storiesOf('Components|Brand', 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 }, ); 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'); + }); }); });