Pull latest and de-conflict

BBC-archive · Mar 12, 2019 · 85cb247 · 85cb247
2 parents 763c583 + 038ceb0
commit 85cb247
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ Psammead packages are split into:
 
 ## :gift: Getting Started
 
-### :airplane: Clone this repositry
+### :airplane: Clone this repository
 
 ```
 git clone [email protected]:bbc/psammead.git

diff --git a/packages/components/psammead-sitewide-links/CHANGELOG.md b/packages/components/psammead-sitewide-links/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 | Version | Description |
 |---------|-------------|
-| 0.3.1   | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url |
+| 0.3.2   | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url |
+| 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. |

diff --git a/packages/components/psammead-sitewide-links/package-lock.json b/packages/components/psammead-sitewide-links/package-lock.json
diff --git 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.1",
+  "version": "0.3.2",
   "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
@@ -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,52 +52,57 @@ 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);
   }
 }
 
 @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);
   }
 }
 
 @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);
   }
 }
 
 @media (min-width:80em) {
-  .c1 {
+  .c2 {
     grid-column-gap: 1rem;
     grid-template-columns: repeat(5,1fr);
     grid-template-rows: repeat(3,auto);
   }
 }
 
 @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`] = `
 <div
   className="c0"
 >
-  <ul
+  <div
     className="c1"
-    role="list"
   >
-    <li
+    <ul
       className="c2"
-      role="listitem"
+      role="list"
     >
+      <li
+        className="c3"
+        role="listitem"
+      >
+        <a
+          className="c4 c5"
+          href="https://www.bbc.co.uk/news"
+        >
+          <span
+            className="c6"
+          >
+            Link
+          </span>
+        </a>
+      </li>
+    </ul>
+    <p
+      className="c7"
+    >
+      Text here. 
       <a
-        className="c3 c4"
+        className="c4 c8"
         href="https://www.bbc.co.uk/news"
       >
         <span
-          className="c5"
+          className="c6"
         >
           Link
         </span>
       </a>
-    </li>
-  </ul>
-  <p
-    className="c6"
-  >
-    Text here. 
-    <a
-      className="c3 c7"
-      href="https://www.bbc.co.uk/news"
-    >
-      <span
-        className="c5"
-      >
-        Link
-      </span>
-    </a>
-  </p>
+    </p>
+  </div>
 </div>
 `;
diff --git 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 }) => (
   <SitewideLinksWrapper>
-    <List links={links} />
-    <StyledParagraph>
-      {copyrightText}
-      <Link text={externalLink.text} href={externalLink.href} inline />
-    </StyledParagraph>
+    <ConstrainedWrapper>
+      <List links={links} />
+      <StyledParagraph>
+        {copyrightText}
+        <Link text={externalLink.text} href={externalLink.href} inline />
+      </StyledParagraph>
+    </ConstrainedWrapper>
   </SitewideLinksWrapper>
 );