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

Shrink brand before wrap #2889

Merged
merged 18 commits into from
Jan 16, 2020
Merged

Shrink brand before wrap #2889

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8cf6827
Shrink brand svg before wrapping script link
AlistairGempf Jan 9, 2020
184847e
Update package.json - still needs npm i for latest script link
AlistairGempf Jan 9, 2020
57812a9
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 9, 2020
9c9a1aa
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 9, 2020
daf954b
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 9, 2020
7a18756
Update changelog
AlistairGempf Jan 9, 2020
e411482
Update package lock
AlistairGempf Jan 9, 2020
554026f
Prevent IE bug with shrinking before wrapping
AlistairGempf Jan 9, 2020
0c02be7
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 9, 2020
4074011
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 10, 2020
d2eb8b4
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 10, 2020
e14ceee
Merge branch 'latest' into shrink-brand-before-wrap
sareh Jan 10, 2020
eb267db
Merge branch 'latest' of https://github.com/bbc/psammead into shrink-…
AlistairGempf Jan 13, 2020
a6d963b
Update script link dependency
AlistairGempf Jan 13, 2020
56f0525
Merge branch 'latest' of https://github.com/bbc/psammead into shrink-…
AlistairGempf Jan 14, 2020
b0afe14
Merge branch 'latest' into shrink-brand-before-wrap
tochwill Jan 16, 2020
c25fc13
Merge branch 'latest' into shrink-brand-before-wrap
tochwill Jan 16, 2020
e00ba1c
Merge branch 'latest' into shrink-brand-before-wrap
AlistairGempf Jan 16, 2020
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 |
| ------- | ----------- |
| 5.1.0-alpha.11 | [PR#2889](https://github.com/bbc/psammead/pull/2889) Shrink brand svg before wrapping the script link |
| 5.1.0-alpha.10 | [PR#2863](https://github.com/bbc/psammead/pull/2863) Talos - Bump Dependencies - @bbc/psammead-script-link |
| 5.1.0-alpha.9 | [PR#2833](https://github.com/bbc/psammead/pull/2833) Wrap `scriptLink` in a div to fix Read&Write issue in chrome |
| 5.1.0-alpha.8 | [PR#2701](https://github.com/bbc/psammead/pull/2701) Talos - Bump Dependencies - @bbc/psammead-styles |
Expand Down
8 changes: 4 additions & 4 deletions packages/components/psammead-brand/package-lock.json
View file
Open in desktop

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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-brand",
"version": "5.1.0-alpha.10",
"version": "5.1.0-alpha.11",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand All @@ -23,7 +23,7 @@
"@bbc/psammead-visually-hidden-text": "^1.2.3"
},
"devDependencies": {
"@bbc/psammead-script-link": "^1.0.0",
"@bbc/psammead-script-link": "^1.0.1",
"@bbc/psammead-styles": "^4.1.2"
},
"peerDependencies": {
Expand Down
20 changes: 20 additions & 0 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
Expand Up @@ -51,6 +51,10 @@ exports[`Brand should render correctly with link not provided 1`] = `
width: 100%;
max-width: 17.5rem;
min-width: 11.25rem;
-webkit-flex: 1 1 11.25rem;
-ms-flex: 1 1 11.25rem;
flex: 1 1 11.25rem;
-ms-flex-preferred-size: 17.5rem;
}

.c4:hover .c2,
Expand Down Expand Up @@ -178,6 +182,10 @@ exports[`Brand should render correctly with link provided 1`] = `
width: 100%;
max-width: 17.5rem;
min-width: 11.25rem;
-webkit-flex: 1 1 11.25rem;
-ms-flex: 1 1 11.25rem;
flex: 1 1 11.25rem;
-ms-flex-preferred-size: 17.5rem;
}

.c4 {
Expand All @@ -190,6 +198,10 @@ exports[`Brand should render correctly with link provided 1`] = `
width: 100%;
max-width: 17.5rem;
min-width: 11.25rem;
-webkit-flex: 1 1 11.25rem;
-ms-flex: 1 1 11.25rem;
flex: 1 1 11.25rem;
-ms-flex-preferred-size: 17.5rem;
}

.c2:hover .c4,
Expand Down Expand Up @@ -333,6 +345,10 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
width: 100%;
max-width: 17.5rem;
min-width: 11.25rem;
-webkit-flex: 1 1 11.25rem;
-ms-flex: 1 1 11.25rem;
flex: 1 1 11.25rem;
-ms-flex-preferred-size: 17.5rem;
}

.c4:hover .c2,
Expand Down Expand Up @@ -460,6 +476,10 @@ exports[`Brand should render correctly with transparent borders 1`] = `
width: 100%;
max-width: 17.5rem;
min-width: 11.25rem;
-webkit-flex: 1 1 11.25rem;
-ms-flex: 1 1 11.25rem;
flex: 1 1 11.25rem;
-ms-flex-preferred-size: 17.5rem;
}

.c4:hover .c2,
Expand Down
2 changes: 2 additions & 0 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 @@ -71,6 +71,8 @@ const brandWidth = (minWidth, maxWidth) => `
width: 100%;
max-width: ${maxWidth / 16}rem;
min-width: ${minWidth / 16}rem;
flex: 1 1 ${minWidth / 16}rem;
-ms-flex-preferred-size: ${maxWidth / 16}rem;
Copy link
Contributor

Choose a reason for hiding this comment

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

The update to flex works well on supported browsers.
For -ms-flex-preferred-size, I looked on Browserstack with IE11 and removed this style and did not see any change in behaviour. Am I missing something here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

image

This is what I see with -ms-flex-preferred-size turned off on IE11 - the script switch is off the edge of the screen.

Copy link
Contributor

Choose a reason for hiding this comment

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

Seems like I had an issue with the changes in the browserstack dev tools not applying correctly. When I made changes locally I see the same as your screenshot.
So, I'm happy with the change made!

`;

const StyledLink = styled.a`
Expand Down