WIP: Users & Friends (#10)

* WIP * WIP * Standardizing package version across multiple YouVersion repos.
borozcod · Feb 8, 2018 · 8768052 · 8768052
1 parent 4bd0630
commit 8768052
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 22 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,7 @@
 {
   "plugins": [
-    "transform-class-properties"
+    "transform-class-properties",
+    "transform-object-assign"
   ],
   "presets": [
 		"env",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@youversion/melos",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Open source library of React components from the YouVersion Bible.com team",
   "main": "index.js",
   "scripts": {
@@ -20,17 +20,17 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@youversion/utils": "1.0.33",
+    "@youversion/utils": "^1.0.40",
     "glamor": "^2.20.40",
     "glamorous": "^4.11.0",
-    "immutable": "^3.8.2",
+    "immutable": "^3.8.1",
     "jest-glamor-react": "^1.2.0",
     "prop-types": "^15.6.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
     "react-router": "^3.0.5",
     "react-test-renderer": "^15.6.2",
-    "react-waypoint": "^7.3.1"
+    "react-waypoint": "^7.3.4"
   },
   "jest": {
     "verbose": true,
@@ -73,28 +73,29 @@
     "@storybook/addon-info": "^3.2.13",
     "@storybook/addon-links": "^3.2.13",
     "@storybook/react": "^3.2.13",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^19.0.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.0.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-env": "^1.6.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-env": "^1.5.2",
     "babel-preset-react": "^6.24.1",
-    "enzyme": "^2.9.1",
+    "enzyme": "^2.8.0",
     "enzyme-adapter-react-15": "^1.0.5",
     "eslint": "^3.14.1",
     "eslint-config-airbnb": "^14.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.9.0",
-    "jest": "^20.0.4",
+    "jest": "^19.0.2",
     "jest-cli": "^20.0.3",
     "jest-enzyme": "^3.0.0",
     "jsdom": "^9.12.0",
     "less": "^2.7.2",
-    "less-loader": "^3.0.0",
+    "less-loader": "^4.0.4",
     "react-storybook-addon-chapters": "^2.0.0",
-    "webpack": "^3.8.1"
+    "webpack": "^3.0.0"
   }
 }
diff --git a/src/components/layouts/SectionedLayout/index.js b/src/components/layouts/SectionedLayout/index.js
@@ -31,6 +31,7 @@ function SectionedLayout({ className, style, left, right, children }) {
       <Div
         position="absolute"
         right="0"
+        left="100%"
         display="flex"
         alignItems="center"
       >

diff --git a/src/components/layouts/VerticalSpace/index.js b/src/components/layouts/VerticalSpace/index.js
@@ -1,25 +1,53 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Div } from 'glamorous'
+import { smallOnly, mediumUp } from '../../../utils/mediaQueries'
 
 function VerticalSpace(props) {
-  const { space, children } = props
+  const { space, children, columns } = props
 
   const propsToPass = Object.assign({}, props)
   delete propsToPass.space
   delete propsToPass.children
+  delete propsToPass.columns
+
+  const columnWidth = `calc(${100 / columns}% - ${((columns - 1) * space) / columns}px)`
+
+  const colsOnLastRow = React.Children.count(children) % columns || columns
 
   return (
     <Div
       {...propsToPass}
       display="flex"
-      flexDirection="column"
+      flexWrap="wrap"
       css={{
-        '> *': {
-          marginBottom: `${space}px !important`
+        [mediumUp]: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          '> *': {
+            marginBottom: `${space}px !important`,
+            marginLeft: `${space / 2}px`,
+            marginRight: `${space / 2}px`,
+            width: `${columnWidth}`
+          },
+          [`> :nth-child(${columns}n)`]: {
+            marginRight: 0
+          },
+          [`> :nth-child(${columns}n+1)`]: {
+            marginLeft: 0
+          },
+          [`> :nth-last-child(-n+${colsOnLastRow})`]: {
+            marginBottom: 0
+          }
         },
-        '> :last-child': {
-          marginBottom: '0 !important'
+        [smallOnly]: {
+          display: 'block',
+          '> *': {
+            marginBottom: `${space}px !important`
+          },
+          '> :last-child': {
+            marginBottom: 0
+          }
         }
       }}
     >
@@ -30,11 +58,13 @@ function VerticalSpace(props) {
 
 VerticalSpace.propTypes = {
   space: PropTypes.number,
+  columns: PropTypes.number,
   children: PropTypes.node
 }
 
 VerticalSpace.defaultProps = {
   space: 30,
+  columns: 1,
   children: null
 }
 

diff --git a/src/components/user/Avatar/index.js b/src/components/user/Avatar/index.js
@@ -16,6 +16,7 @@ function Avatar(props) {
       alignItems="center"
       justifyContent="center"
       color="#777777"
+      backgroundColor="#f5f5f5"
     >
       {placeholderText}
     </Div>

diff --git a/src/components/user/User/index.js b/src/components/user/User/index.js
@@ -31,7 +31,8 @@ function User(props) {
           padding="0 10px"
           flexDirection="column"
           display="flex"
-          alignItems="center"
+          alignItems="start"
+          justifyContent="center"
         >
           {headingContent}
           {subHeadingContent}