From 9738086b58e07d7c1279dbbbbd067546112571dd Mon Sep 17 00:00:00 2001 From: Sareh Heidari Date: Mon, 11 Mar 2019 15:54:23 +0000 Subject: [PATCH 1/2] Constrain content width for SiteWideLinks --- .../psammead-sitewide-links/CHANGELOG.md | 1 + .../psammead-sitewide-links/package-lock.json | 2 +- .../psammead-sitewide-links/package.json | 2 +- .../src/__snapshots__/index.test.jsx.snap | 83 ++++++++++--------- .../psammead-sitewide-links/src/index.jsx | 22 +++-- 5 files changed, 65 insertions(+), 45 deletions(-) diff --git a/packages/components/psammead-sitewide-links/CHANGELOG.md b/packages/components/psammead-sitewide-links/CHANGELOG.md index 883c4dd19b..312f2e1d92 100644 --- a/packages/components/psammead-sitewide-links/CHANGELOG.md +++ b/packages/components/psammead-sitewide-links/CHANGELOG.md @@ -2,6 +2,7 @@ | Version | Description | |---------|-------------| +| 0.3.1 | [PR](https://github.com/BBC/psammead/pull/) Constrain content width to Group 5 min width. | | 0.3.0 | [PR#318](https://github.com/BBC/psammead/pull/318) Update to new font face and family. | | 0.2.1 | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge | | 0.2.0 | [PR#306](https://github.com/BBC/psammead/pull/306) Update background colour to Ebon & border colours to Shadow. | diff --git a/packages/components/psammead-sitewide-links/package-lock.json b/packages/components/psammead-sitewide-links/package-lock.json index 29f3ef1405..bac36aed59 100644 --- a/packages/components/psammead-sitewide-links/package-lock.json +++ b/packages/components/psammead-sitewide-links/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-sitewide-links", - "version": "0.3.0", + "version": "0.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-sitewide-links/package.json b/packages/components/psammead-sitewide-links/package.json index d747bc7375..b072759c92 100644 --- a/packages/components/psammead-sitewide-links/package.json +++ b/packages/components/psammead-sitewide-links/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-sitewide-links", - "version": "0.3.0", + "version": "0.3.1", "description": "React styled component for a sitewide-links", "main": "dist/index.js", "repository": { diff --git a/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap index c943ba3342..443b42d81d 100644 --- a/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SitewideLinks should render correctly 1`] = ` -.c4 { +.c5 { padding: 0.5rem 0 0.5rem; color: #FFFFFF; font-weight: 700; @@ -10,7 +10,7 @@ exports[`SitewideLinks should render correctly 1`] = ` display: block; } -.c7 { +.c8 { padding: 0.5rem 0 0.5rem; color: #FFFFFF; font-weight: 700; @@ -19,13 +19,13 @@ exports[`SitewideLinks should render correctly 1`] = ` display: inline; } -.c3:hover .c5, -.c3:focus .c5 { +.c4:hover .c6, +.c4:focus .c6 { padding-bottom: 2px; border-bottom: 2px solid #FFFFFF; } -.c1 { +.c2 { border-bottom: 1px solid #3F3F42; display: grid; grid-auto-flow: column; @@ -34,14 +34,14 @@ exports[`SitewideLinks should render correctly 1`] = ` padding: 0 0 0.5rem; } -.c1 > li:first-child { +.c2 > li:first-child { border-bottom: 1px solid #3F3F42; padding: 0.5rem 0; margin-bottom: 0.5rem; grid-column: 1/-1; } -.c2 { +.c3 { min-width: 50%; } @@ -52,14 +52,19 @@ exports[`SitewideLinks should render correctly 1`] = ` font-family: ReithSans,Helvetica,Arial,sans-serif; } -.c6 { +.c1 { + max-width: 80em; + margin: 0 auto; +} + +.c7 { color: #FFFFFF; margin: 0; padding: 1rem 0; } @media (max-width:37.4375em) { - .c1 { + .c2 { grid-column-gap: 0.5rem; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4,auto); @@ -67,7 +72,7 @@ exports[`SitewideLinks should render correctly 1`] = ` } @media (min-width:37.5em) and (max-width:62.9375em) { - .c1 { + .c2 { grid-column-gap: 1rem; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,auto); @@ -75,7 +80,7 @@ exports[`SitewideLinks should render correctly 1`] = ` } @media (min-width:63em) and (max-width:80em) { - .c1 { + .c2 { grid-column-gap: 1rem; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,auto); @@ -83,7 +88,7 @@ exports[`SitewideLinks should render correctly 1`] = ` } @media (min-width:80em) { - .c1 { + .c2 { grid-column-gap: 1rem; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(3,auto); @@ -91,13 +96,13 @@ exports[`SitewideLinks should render correctly 1`] = ` } @supports not (display:grid) { - .c1 > li:first-child { + .c2 > li:first-child { width: 100%; } } @supports not (display:grid) { - .c2 { + .c3 { display: inline-block; } } @@ -129,40 +134,44 @@ exports[`SitewideLinks should render correctly 1`] = `
- +

+ Text here. Link - - -

- Text here. - - - Link - - -

+

+
`; diff --git a/packages/components/psammead-sitewide-links/src/index.jsx b/packages/components/psammead-sitewide-links/src/index.jsx index c71eaac636..4c71bfd906 100644 --- a/packages/components/psammead-sitewide-links/src/index.jsx +++ b/packages/components/psammead-sitewide-links/src/index.jsx @@ -11,7 +11,10 @@ import { GEL_MARGIN_BELOW_400PX, GEL_MARGIN_ABOVE_400PX, } from '@bbc/gel-foundations/spacings'; -import { GEL_GROUP_2_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; +import { + GEL_GROUP_2_SCREEN_WIDTH_MIN, + GEL_GROUP_5_SCREEN_WIDTH_MIN, +} from '@bbc/gel-foundations/breakpoints'; import Link from './Link'; import List from './List'; @@ -31,6 +34,11 @@ const SitewideLinksWrapper = styled.div` font-family: ${GEL_FF_REITH_SANS}; `; +const ConstrainedWrapper = styled.div` + max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}; + margin: 0 auto; +`; + const StyledParagraph = styled.p` color: ${C_WHITE}; margin: 0; @@ -39,11 +47,13 @@ const StyledParagraph = styled.p` const SitewideLinks = ({ links, copyrightText, externalLink }) => ( - - - {copyrightText} - - + + + + {copyrightText} + + + ); From 84c2895b3ee0b2d588b0fa886191cc2e3c86f1a2 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 11 Mar 2019 16:09:30 +0000 Subject: [PATCH 2/2] Update CHANGELOG version Co-Authored-By: sareh --- packages/components/psammead-sitewide-links/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-sitewide-links/CHANGELOG.md b/packages/components/psammead-sitewide-links/CHANGELOG.md index 312f2e1d92..f6bbd2f381 100644 --- a/packages/components/psammead-sitewide-links/CHANGELOG.md +++ b/packages/components/psammead-sitewide-links/CHANGELOG.md @@ -2,7 +2,7 @@ | Version | Description | |---------|-------------| -| 0.3.1 | [PR](https://github.com/BBC/psammead/pull/) Constrain content width to Group 5 min width. | +| 0.3.1 | [PR#347](https://github.com/BBC/psammead/pull/347) Constrain content width to Group 5 min width. | | 0.3.0 | [PR#318](https://github.com/BBC/psammead/pull/318) Update to new font face and family. | | 0.2.1 | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge | | 0.2.0 | [PR#306](https://github.com/BBC/psammead/pull/306) Update background colour to Ebon & border colours to Shadow. |