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

Brand - High contrast colour in Firefox #787

Merged
merged 5 commits into from
Jul 8, 2019
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
110 changes: 55 additions & 55 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions packages/components/psammead-brand/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 4.1.5 | [PR#787](https://github.com/bbc/psammead/pull/787) Fix brand colour in Firefox high contrast mode |
| 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 |
Expand Down Expand Up @@ -30,3 +31,4 @@
| 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). |

8 changes: 4 additions & 4 deletions packages/components/psammead-brand/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/components/psammead-brand/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-brand",
"version": "4.1.4",
"version": "4.1.5",
"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 All @@ -22,7 +22,7 @@
"@bbc/psammead-visually-hidden-text": "^0.1.10"
},
"devDependencies": {
"@bbc/psammead-assets": "^0.1.9",
"@bbc/psammead-assets": "^1.0.2",
"@bbc/psammead-storybook-helpers": "^2.1.1",
"@bbc/psammead-test-helpers": "^0.3.3",
"react": "^16.8.6",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ exports[`Brand should render correctly with link not provided 1`] = `

.c2 {
box-sizing: content-box;
fill: #FFFFFF;
color: #FFFFFF;
fill: currentColor;
padding-top: 1rem;
padding-bottom: 0.75rem;
width: 100%;
Expand Down Expand Up @@ -132,7 +133,8 @@ exports[`Brand should render correctly with link provided 1`] = `

.c4 {
box-sizing: content-box;
fill: #FFFFFF;
color: #FFFFFF;
fill: currentColor;
padding-top: 1rem;
padding-bottom: 0.75rem;
width: 100%;
Expand Down Expand Up @@ -236,7 +238,8 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `

.c2 {
box-sizing: content-box;
fill: #FFFFFF;
color: #FFFFFF;
fill: currentColor;
padding-top: 1rem;
padding-bottom: 0.75rem;
width: 100%;
Expand Down Expand Up @@ -330,7 +333,8 @@ exports[`Brand should render correctly with transparent borders 1`] = `

.c2 {
box-sizing: content-box;
fill: #FFFFFF;
color: #FFFFFF;
fill: currentColor;
padding-top: 1rem;
padding-bottom: 0.75rem;
width: 100%;
Expand Down
4 changes: 3 additions & 1 deletion packages/components/psammead-brand/src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,11 @@ const StyledLink = styled.a`
${({ maxWidth, minWidth }) => brandWidth(minWidth, maxWidth)}
`;

// `currentColor` has been used to address high contrast mode in Firefox.
const BrandSvg = styled.svg`
box-sizing: content-box;
fill: ${C_WHITE};
color: ${C_WHITE};
fill: currentColor;
padding-top: ${GEL_SPACING_DBL};
padding-bottom: ${SVG_BOTTOM_OFFSET_BELOW_400PX};

Expand Down
1 change: 1 addition & 0 deletions packages/utilities/psammead-assets/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
|---------|-------------|
| 1.0.3 | [PR#787](https://github.com/bbc/psammead/pull/787) Fix brand stories in Firefox high contrast mode |
| 1.0.2 | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |
| 1.0.1 | [PR#704](https://github.com/bbc/psammead/pull/704) Remove `fill` from SVGs |
| 1.0.0 | [PR#679](https://github.com/bbc/psammead/pull/679) Bump version number |
Expand Down
2 changes: 1 addition & 1 deletion packages/utilities/psammead-assets/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/utilities/psammead-assets/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-assets",
"version": "1.0.2",
"version": "1.0.3",
"description": "A collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.",
"repository": {
"type": "git",
Expand Down
4 changes: 3 additions & 1 deletion packages/utilities/psammead-assets/src/svgs.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import { number as numberKnob, withKnobs } from '@storybook/addon-knobs';
import notes from '../README.md';
import * as svgs from './svgs';

// `currentColor` has been used to address high contrast mode in Firefox.
const Svg = styled.svg`
display: block;
fill: #fff;
color: #fff;
fill: currentColor;
`;

const Container = styled.div`
Expand Down