Merge branch 'meeting-components' into meeting-sprint-#121

package.json

@@ -104,7 +104,7 @@
     "oy-vey": "^1.0.0-alpha",
     "piping": "1.0.0-rc.2",
     "react": "15.1.0",
-    "react-copy-to-clipboard": "^4.1.0",
+    "react-copy-to-clipboard": "^4.2.0",
     "react-css-modules": "^3.7.6",
     "react-dom": "15.1.0",
     "react-fontawesome": "^1.1.0",

src/universal/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,57 @@
+import React, {PropTypes} from 'react';
+import look, {StyleSheet} from 'react-look';
+import theme from 'universal/styles/theme';
+import Avatar from '../Avatar/Avatar';
+
+let s = {};
+
+const AvatarGroup = (props) => {
+  const { label, avatars } = props;
+
+  return (
+    <div className={s.root}>
+      <div className={s.label}>
+        {label}
+      </div>
+      {
+        avatars.map((avatar, index) =>
+          <div className={s.item} key={index}>
+            <Avatar {...avatar} />
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AvatarGroup.propTypes = {
+  label: PropTypes.string,
+  avatars: PropTypes.array
+};
+
+s = StyleSheet.create({
+  root: {
+    textAlign: 'center'
+  },
+
+  label: {
+    color: theme.palette.dark50l,
+    display: 'inline-block',
+    fontFamily: theme.typography.serif,
+    fontStyle: 'italic',
+    fontWeight: 700,
+    height: '2.75rem',
+    lineHeight: '2.75rem',
+    margin: '0 .75rem',
+    verticalAlign: 'middle'
+  },
+
+  item: {
+    display: 'inline-block',
+    margin: '0 .75rem',
+    position: 'relative',
+    verticalAlign: 'middle'
+  }
+});
+
+export default look(AvatarGroup);

src/universal/components/Button/Button.js

@@ -1,5 +1,5 @@
-import React, { PropTypes } from 'react';
-import look, { StyleSheet } from 'react-look';
+import React, {PropTypes} from 'react';
+import look, {StyleSheet} from 'react-look';
 import * as appTheme from 'universal/styles/theme';
 import tinycolor from 'tinycolor2';
 

src/universal/modules/meeting/components/Card/Card.js

@@ -3,7 +3,7 @@ import look, { StyleSheet } from 'react-look';
 // import FontAwesome from 'react-fontawesome';
 // import tinycolor from 'tinycolor2';
 import theme from 'universal/styles/theme';
-import Avatar from '../../components/Avatar/Avatar';
+import Avatar from 'universal/components/Avatar/Avatar';
 import PushButton from '../../components/PushButton/PushButton';
 
 const combineStyles = StyleSheet.combineStyles;

src/universal/modules/meeting/components/MeetingLayout/MeetingLayout.js

@@ -0,0 +1,23 @@
+import React, {PropTypes} from 'react';
+import look, {StyleSheet} from 'react-look';
+
+let styles = {};
+
+const MeetingLayout = (props) =>
+  <div className={styles.root}>
+    {props.children}
+  </div>;
+
+MeetingLayout.propTypes = {
+  children: PropTypes.any
+};
+
+styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#fff',
+    display: 'flex !important',
+    minHeight: '100vh'
+  }
+});
+
+export default look(MeetingLayout);

src/universal/modules/meeting/components/MeetingMain/MeetingMain.js

@@ -0,0 +1,24 @@
+import React, {PropTypes} from 'react';
+import look, {StyleSheet} from 'react-look';
+
+let styles = {};
+
+const MeetingMain = (props) =>
+  <div className={styles.root}>
+    {props.children}
+  </div>;
+
+MeetingMain.propTypes = {
+  children: PropTypes.any
+};
+
+styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#fff',
+    display: 'flex !important',
+    flex: 1,
+    flexDirection: 'column'
+  }
+});
+
+export default look(MeetingMain);

src/universal/modules/meeting/components/MeetingSection/MeetingSection.js

@@ -0,0 +1,55 @@
+import React, {PropTypes} from 'react';
+import look, {StyleSheet} from 'react-look';
+
+const combineStyles = StyleSheet.combineStyles;
+
+let s = {};
+
+const MeetingContent = (props) => {
+  const {
+    children,
+    flexToFill,
+    paddingBottom,
+    paddingTop
+  } = props;
+  const stylePadding = {
+    paddingBottom,
+    paddingTop
+  };
+  const flexStyles = combineStyles(s.root, s.flex);
+  const rootStyles = flexToFill ? flexStyles : s.root;
+  return (
+    <div className={rootStyles} style={stylePadding}>
+      {children}
+    </div>
+  );
+};
+
+MeetingContent.propTypes = {
+  children: PropTypes.any,
+  flexToFill: PropTypes.bool,
+  paddingBottom: PropTypes.string,
+  paddingTop: PropTypes.string
+};
+
+MeetingContent.defaultProps = {
+  paddingBottom: '0px',
+  paddingTop: '0px'
+};
+
+s = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    display: 'flex !important',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%'
+  },
+
+  flex: {
+    flex: 1
+  }
+});
+
+export default look(MeetingContent);

src/universal/modules/meeting/components/PlaceholderInput/PlaceholderInput.js

@@ -0,0 +1,84 @@
+import React, {PropTypes} from 'react';
+import look, {StyleSheet} from 'react-look';
+import theme from 'universal/styles/theme';
+
+let s = {};
+
+const PlaceholderInput = (props) => {
+  const {author, onChange, placeholder, value} = props;
+  return (
+    <div className={s.root}>
+      <input
+        className={s.input}
+        onChange={onChange}
+        placeholder={placeholder}
+        title="Placeholder input"
+        type="text"
+        value={value}
+      />
+      <div className={s.author}>{author}</div>
+    </div>
+  );
+};
+
+s = StyleSheet.create({
+  root: {
+    backgroundColor: 'transparent',
+    color: theme.palette.cool,
+    fontSize: theme.typography.s3,
+    padding: '.5rem .75rem .5rem 4rem',
+    position: 'relative',
+    width: '100%',
+
+    ':hover': {
+      backgroundColor: theme.palette.light
+    },
+    ':focus': {
+      backgroundColor: theme.palette.light
+    }
+  },
+
+  input: {
+    backgroundColor: 'transparent',
+    border: 0,
+    boxShadow: 'none',
+    display: 'block',
+    fontFamily: theme.typography.serif,
+    fontSize: theme.typography.s3,
+    fontStyle: 'italic',
+    fontWeight: 700,
+    margin: 0,
+    outline: 'none',
+    padding: 0,
+    width: '100%'
+  },
+
+  author: {
+    display: 'none', // TODO: Show on focus/active
+    fontWeight: 700,
+    right: '.75rem',
+    lineHeight: `${34 / 16}rem`,
+    paddingTop: '1px',
+    position: 'absolute',
+    textAlign: 'right',
+    top: 0
+  }
+});
+
+PlaceholderInput.propTypes = {
+  author: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  value: PropTypes.string
+};
+
+PlaceholderInput.defaultProps = {
+  author: 'MK',
+  onChange() {
+    console.log('PlaceholderInput onChange');
+  },
+  placeholder: 'kittens (press enter)',
+  value: ''
+};
+
+export default look(PlaceholderInput);