Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Brand should have max width of 80rem #649

Merged
merged 8 commits into from
Jun 19, 2019
Merged

Brand should have max width of 80rem #649

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b707f5
Give brand SVG max-width of 80rem
Jun 18, 2019
f2b4e92
Update snapshots.
Jun 18, 2019
d61bfb5
Update package.json, CHANGELOG.md
Jun 18, 2019
f08f5e1
Fix max-width not being applied to brand with link.
Jun 19, 2019
ac2a448
Update snapshots.
Jun 19, 2019
d631719
Merge branch 'latest' of github.com:bbc/psammead into 645-brand-shoul…
Jun 19, 2019
9ffdbc1
Update package-lock.json.
Jun 19, 2019
8f875cd
Merge branch 'latest' of github.com:bbc/psammead into 645-brand-shoul…
Jun 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/psammead-brand/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 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 |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-brand/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-brand",
"version": "4.0.1",
"version": "4.0.2",
"main": "dist/index.js",
"description": "Provides the BBC News logo (as SVG), nested a hardcoded link to https://www.bbc.co.uk/news",
"repository": {
Expand Down
147 changes: 87 additions & 60 deletions packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Brand should render correctly with link not provided 1`] = `
.c2 {
.c3 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
Expand All @@ -12,14 +12,19 @@ exports[`Brand should render correctly with link not provided 1`] = `
width: 1px;
}

.c1 {
max-width: 80rem;
margin: 0 auto;
}

.c0 {
background-color: #B80000;
height: 3.5rem;
width: 100%;
padding: 0 0.5rem;
}

.c1 {
.c2 {
box-sizing: content-box;
fill: #FFFFFF;
padding-top: 1rem;
Expand All @@ -29,8 +34,8 @@ exports[`Brand should render correctly with link not provided 1`] = `
min-width: 11.25rem;
}

.c3:hover .c1,
.c3:focus .c1 {
.c4:hover .c2,
.c4:focus .c2 {
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 0.25rem solid #FFFFFF;
Expand All @@ -44,39 +49,43 @@ exports[`Brand should render correctly with link not provided 1`] = `
}

@media (min-width:37.5rem) {
.c1 {
.c2 {
padding-top: 1.75rem;
padding-bottom: 1.5rem;
}
}

@media screen and (-ms-high-contrast:active),print {
.c1 {
.c2 {
fill: windowText;
}
}

<div
className="c0"
>
<svg
aria-hidden="true"
<div
className="c1"
focusable="false"
height={24}
viewBox="0 0 167.95 24"
xmlns="http://www.w3.org/2000/svg"
>
<g
fillrule="evenodd"
<svg
aria-hidden="true"
className="c2"
focusable="false"
height={24}
viewBox="0 0 167.95 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M84.32"
/>
</g>
</svg>
<g
fillrule="evenodd"
>
<path
d="M84.32"
/>
</g>
</svg>
</div>
<span
className="c2"
className="c3"
>
<span
lang="en-GB"
Expand All @@ -90,7 +99,7 @@ exports[`Brand should render correctly with link not provided 1`] = `
`;

exports[`Brand should render correctly with link provided 1`] = `
.c4 {
.c5 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
Expand All @@ -101,6 +110,11 @@ exports[`Brand should render correctly with link provided 1`] = `
width: 1px;
}

.c3 {
max-width: 80rem;
margin: 0 auto;
}

.c0 {
background-color: #B80000;
height: 3.5rem;
Expand All @@ -115,7 +129,7 @@ exports[`Brand should render correctly with link provided 1`] = `
min-width: 11.25rem;
}

.c3 {
.c4 {
box-sizing: content-box;
fill: #FFFFFF;
padding-top: 1rem;
Expand All @@ -125,8 +139,8 @@ exports[`Brand should render correctly with link provided 1`] = `
min-width: 11.25rem;
}

.c1:hover .c3,
.c1:focus .c3 {
.c1:hover .c4,
.c1:focus .c4 {
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 0.25rem solid #FFFFFF;
Expand All @@ -140,14 +154,14 @@ exports[`Brand should render correctly with link provided 1`] = `
}

@media (min-width:37.5rem) {
.c3 {
.c4 {
padding-top: 1.75rem;
padding-bottom: 1.5rem;
}
}

@media screen and (-ms-high-contrast:active),print {
.c3 {
.c4 {
fill: windowText;
}
}
Expand All @@ -159,24 +173,28 @@ exports[`Brand should render correctly with link provided 1`] = `
className="c1 c2"
href="https://www.bbc.co.uk/news"
>
<svg
aria-hidden="true"
<div
className="c3"
focusable="false"
height={24}
viewBox="0 0 167.95 24"
xmlns="http://www.w3.org/2000/svg"
>
<g
fillrule="evenodd"
<svg
aria-hidden="true"
className="c4"
focusable="false"
height={24}
viewBox="0 0 167.95 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M84.32"
/>
</g>
</svg>
<g
fillrule="evenodd"
>
<path
d="M84.32"
/>
</g>
</svg>
</div>
<span
className="c4"
className="c5"
>
<span
lang="en-GB"
Expand All @@ -191,7 +209,7 @@ exports[`Brand should render correctly with link provided 1`] = `
`;

exports[`Brand should render correctly with no service Localised Name 1`] = `
.c2 {
.c3 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
Expand All @@ -202,14 +220,19 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
width: 1px;
}

.c1 {
max-width: 80rem;
margin: 0 auto;
}

.c0 {
background-color: #B80000;
height: 3.5rem;
width: 100%;
padding: 0 0.5rem;
}

.c1 {
.c2 {
box-sizing: content-box;
fill: #FFFFFF;
padding-top: 1rem;
Expand All @@ -219,8 +242,8 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
min-width: 11.25rem;
}

.c3:hover .c1,
.c3:focus .c1 {
.c4:hover .c2,
.c4:focus .c2 {
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 0.25rem solid #FFFFFF;
Expand All @@ -234,39 +257,43 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
}

@media (min-width:37.5rem) {
.c1 {
.c2 {
padding-top: 1.75rem;
padding-bottom: 1.5rem;
}
}

@media screen and (-ms-high-contrast:active),print {
.c1 {
.c2 {
fill: windowText;
}
}

<div
className="c0"
>
<svg
aria-hidden="true"
<div
className="c1"
focusable="false"
height={24}
viewBox="0 0 167.95 24"
xmlns="http://www.w3.org/2000/svg"
>
<g
fillrule="evenodd"
<svg
aria-hidden="true"
className="c2"
focusable="false"
height={24}
viewBox="0 0 167.95 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M84.32"
/>
</g>
</svg>
<g
fillrule="evenodd"
>
<path
d="M84.32"
/>
</g>
</svg>
</div>
<span
className="c2"
className="c3"
>
BBC News
</span>
Expand Down
36 changes: 23 additions & 13 deletions packages/components/psammead-brand/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ import styled from 'styled-components';
import { string, number, node, shape } from 'prop-types';
import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
import {
GEL_GROUP_3_SCREEN_WIDTH_MIN,
GEL_GROUP_4_SCREEN_WIDTH_MAX,
} from '@bbc/gel-foundations/breakpoints';
import {
GEL_SPACING_HLF,
GEL_SPACING,
Expand All @@ -19,6 +22,11 @@ const PADDING_AROUND_SVG_BELOW_600PX = 32;
const conditionallyRenderHeight = (svgHeight, padding) =>
svgHeight ? `height: ${(svgHeight + padding) / 16}rem` : '';

const SvgWrapper = styled.div`
max-width: ${GEL_GROUP_4_SCREEN_WIDTH_MAX};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though they are the same value 🙈 Can you use GEL_GROUP_5_SCREEN_WIDTH_MIN here instead please :P Its what we used before :)

margin: 0 auto;
`;

const Banner = styled.div`
background-color: ${C_POSTBOX};
${({ svgHeight }) =>
Expand Down Expand Up @@ -100,18 +108,20 @@ const StyledBrand = ({
<Fragment>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this doesnt work when the svg is a link weirdly :P May need to move the wrapper up a bit

{svg && (
<Fragment>
<BrandSvg
height={svgHeight}
viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-hidden="true"
ratio={svg.ratio}
maxWidth={maxWidth}
minWidth={minWidth}
>
{svg.group}
</BrandSvg>
<SvgWrapper>
<BrandSvg
height={svgHeight}
viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-hidden="true"
ratio={svg.ratio}
maxWidth={maxWidth}
minWidth={minWidth}
>
{svg.group}
</BrandSvg>
</SvgWrapper>
<VisuallyHiddenText>
<LocalisedBrandName
product={product}
Expand Down