Central working v2 (#293)

* init central working

remove a few unused packages

update

padding update

update padding

update

update yarnlock

re-add raf

Brown -> Black, remove Fragment

* move case study components to common

* update snapshots, add silent to now github deployment

* update destructuring

* remove conditional display of case studies from render

* updated naming for normalise args

* design review updates

* left align outcome intro

* update alignment

* update github template

* remove GreyBodyPrimary

* make outcomes copy bold

* add CSS to place content on top of image

* trigger build

* trigger build

.github/pull_request_template.md

@@ -1,8 +1,14 @@
-## Description - [Trello ticket](put a link to the trello ticket here)
+## Description - [Trello ticket](link)
 
-put a short summary of what you did here
+Put a short summary of what you did here
 
-## Review template
+## Checklist
 
+- [ ] Updating or creating a new page? Consider any SEO requirements such as:
+  - [ ] Does the page have an `h1` tag?
+  - [ ] Does the page have a correctly formed meta title?
+  - [ ] Does the page have a correctly formed meta description?
+  - [ ] Does the page have a unique `og:image` tag (if required)?
 - [ ] checked that this PR resolves the spec provided from trello / this description
-- [ ] ensured that this PR does not introduce any obvious bugs
+
+If you're unsure how to check these SEO requirements please reach out to your colleagues for help!

README.md

@@ -30,7 +30,7 @@ You can now run:
   yarn develop
 ```
 
-We have some docs to make it easier to get you started:
+We have some docs to make it easier for you to get started:
 
 - [Scripts Overview](./docs/scripts.md)
 

now.json

@@ -4,7 +4,8 @@
   "alias": ["yld-storybook"],
   "version": 2,
   "github": {
-    "autoAlias": true
+    "autoAlias": true,
+    "silent": true
   },
   "builds": [
     {

package.json

@@ -4,7 +4,6 @@
   "version": "1.0.1",
   "author": "YLD <[email protected]>",
   "dependencies": {
-    "@rebass/grid": "^6.0.0-4",
     "@yldio/oss-stats": "^1.0.1",
     "airbnb-prop-types": "^2.13.2",
     "apr-reduce": "^3.0.3",

src/components/Common/BlackBackground.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export default styled.section`
+  /* I know text should not be used here but black: colorVariables.darkBlack...  */
+  background-color: ${({ theme }) => theme.colors.text};
+`

src/components/Common/BlueBackground.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
 export default styled.section`
-  background: ${props => props.theme.colors.blueBg};
-  color: ${props => props.theme.colors.white};
+  background: ${({ theme }) => theme.colors.blueBg};
+  color: ${({ theme }) => theme.colors.white};
 `

src/components/Common/CaseStudyCards/CaseStudyBlocks.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import remcalc from 'remcalc'
 import breakpoint from 'styled-components-breakpoint'
 
-import { Col } from '../../../components/grid'
+import { Col, Row } from '../../../components/grid'
 import { SectionTitle, BodyPrimary } from '../../../components/Typography'
 import Image from '../../../components/Common/Image'
 import VideoSection from '../../../components/Common/VideoSection'
@@ -183,7 +183,64 @@ const TextAndResizedImageBlock = ({ data: { text, image } }) => (
   </Fragment>
 )
 
+const BlockRow = styled(Row)`
+  flex-direction: ${({ columnReverse }) =>
+    `column${columnReverse ? '-reverse' : null}`};
+  align-items: ${({ alignCenter }) => (alignCenter ? 'center' : null)};
+  padding-top: ${({ theme, mobile }) =>
+    mobile && mobile.top ? theme.space[mobile.top] : null};
+  padding-bottom: ${({ theme, mobile }) =>
+    mobile && mobile.bottom ? theme.space[mobile.bottom] : null};
+  justify-content: ${({ spaced }) => spaced && 'space-evenly'};
+
+  ${breakpoint('phone')`
+    justify-content: ${({ spaced }) => spaced && 'space-between'};
+  `}
+
+  ${breakpoint('smallTablet')`
+    flex-direction: ${({ rowReverse }) => (rowReverse ? 'row-reverse' : 'row')};
+    padding-top: ${({ theme, smallTablet }) =>
+      smallTablet && smallTablet.top ? theme.space[smallTablet.top] : null};
+    padding-bottom: ${({ theme, smallTablet }) =>
+      smallTablet && smallTablet.bottom
+        ? theme.space[smallTablet.bottom]
+        : null};
+  `}
+
+  ${breakpoint('tablet')`
+    padding-top: ${({ theme, tablet }) =>
+      tablet && tablet.top ? theme.space[tablet.top] : null};
+    padding-bottom: ${({ theme, tablet }) =>
+      tablet && tablet.bottom ? theme.space[tablet.bottom] : null};
+  `}
+
+  ${breakpoint('desktop')`
+    padding-top: ${({ theme, desktop }) =>
+      desktop && desktop.top ? theme.space[desktop.top] : null};
+    padding-bottom: ${({ theme, desktop }) =>
+      desktop && desktop.bottom ? theme.space[desktop.bottom] : null};
+  `}
+`
+
+const getImage = (blockImages, index) => blockImages && blockImages[index]
+
+const normaliseAll = (genericBlocks = []) =>
+  genericBlocks.map(({ genericBlockText, genericBlockImages, ...props }) => ({
+    image: getImage(genericBlockImages, 0),
+    text: genericBlockText && genericBlockText.genericBlockText,
+    ...props
+  }))
+
+const normalise = (genericBlocks = [], index = 0) =>
+  normaliseAll(genericBlocks, index)[index]
+
+const getImages = data =>
+  data.genericBlockImages ? data.genericBlockImages : []
+
+const shouldRender = data => data && data.length
+
 export {
+  BlockRow,
   renderImage,
   renderText,
   MobileReverseOrderWrapper,
@@ -193,5 +250,10 @@ export {
   VideoBlock,
   ImagesBlock,
   TextAndImageBlock,
-  TextAndResizedImageBlock
+  TextAndResizedImageBlock,
+  shouldRender,
+  getImages,
+  getImage,
+  normalise,
+  normaliseAll
 }

src/components/Common/Head.js

@@ -58,6 +58,7 @@ const Head = ({ page }) => {
             {/* Twitter */}
             <meta name="twitter:card" content="summary" />
             <meta name="twitter:site" content="yldio" />
+            <meta name="twitter:img" content={imageUrl} />
 
             <link rel="image_src" type="image/png" href={imageUrl} />
           </Helmet>

src/components/Common/TanBackground.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export default styled.section`
+  background: ${({ theme }) => theme.colors.tanBg};
+`