Merge branch 'meeting-sprint-#121' of github.com:ParabolInc/action in…

…to meeting-sprint-#121

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

@@ -0,0 +1,102 @@
+import React, { Component, PropTypes } from 'react';
+import look, { StyleSheet } from 'react-look';
+// import FontAwesome from 'react-fontawesome';
+// import tinycolor from 'tinycolor2';
+import theme from 'universal/styles/theme';
+import Avatar from 'universal/components/Avatar/Avatar';
+import PushButton from '../../components/PushButton/PushButton';
+
+const combineStyles = StyleSheet.combineStyles;
+
+let styles = {};
+
+@look
+// eslint-disable-next-line react/prefer-stateless-function
+export default class Card extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    avatar: PropTypes.object, // avatar.name, avatar.image, avatar.badge
+    hasControls: PropTypes.bool,
+    label: PropTypes.string
+  };
+
+  render() {
+    const { active, avatar, hasControls, label } = this.props;
+
+    const cardActiveStyles = combineStyles(styles.card, styles.cardIsActive);
+    const cardBlurredStyles = combineStyles(styles.card, styles.cardIsBlurred);
+    const cardStyles = active ? cardActiveStyles : cardBlurredStyles;
+    const cardLabel = label || 'invited';
+    const nameActiveStyles = combineStyles(styles.cardName, styles.cardNameActive);
+    const nameStyles = active ? nameActiveStyles : styles.cardName;
+    let labelStyles = styles.cardLabel;
+
+    if (avatar.badge === 'present') {
+      labelStyles = combineStyles(styles.cardLabel, styles.cardLabelPresent);
+    }
+
+    return (
+      <div className={cardStyles}>
+        {/* NOTE: Not using the <Avatar /> label. Using card name styles. */}
+        <Avatar badge={avatar.badge} image={avatar.image} size="largest" />
+        <div className={nameStyles}>{avatar.name}</div>
+        <div className={labelStyles}>{cardLabel}</div>
+        {hasControls &&
+          <div className={styles.buttonsBlock}>
+            <PushButton size="large" />
+            <PushButton size="large" />
+          </div>
+        }
+      </div>
+    );
+  }
+}
+
+styles = StyleSheet.create({
+  card: {
+    border: `1px solid ${theme.palette.mid50l}`,
+    borderRadius: '.5rem',
+    margin: '0 .5rem',
+    padding: '3rem 1rem 1.5rem',
+    textAlign: 'center',
+    width: '18.75rem'
+  },
+
+  cardIsActive: {
+    borderColor: theme.palette.cool70l
+  },
+
+  cardIsBlurred: {
+    filter: 'blur(1.5px)',
+    opacity: '.65',
+    position: 'relative',
+    transform: 'scale(.75)'
+  },
+
+  cardName: {
+    fontSize: theme.typography.s6,
+    fontWeight: 400,
+    margin: '1rem 0 .5rem'
+  },
+
+  cardNameActive: {
+    color: theme.palette.cool
+  },
+
+  cardLabel: {
+    color: theme.palette.dark50l,
+    fontFamily: theme.typography.serif,
+    fontSize: theme.typography.s4,
+    fontStyle: 'italic',
+    fontWeight: 400,
+    margin: '.5rem 0 1rem'
+  },
+
+  cardLabelPresent: {
+    color: theme.palette.cool
+  },
+
+  buttonsBlock: {
+    display: 'inline-block'
+  }
+});

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

@@ -0,0 +1,53 @@
+import React, { Component, PropTypes } from 'react';
+import look, { StyleSheet } from 'react-look';
+import Card from '../../components/Card/Card';
+
+let styles = {};
+
+const demoUser = {
+  name: '@KittyKitterson',
+  image: 'https://placekitten.com/g/600/600',
+  badge: null, // absent || active || present
+  state: 'invited' // invited || not attending || fully present
+};
+
+@look
+// eslint-disable-next-line react/prefer-stateless-function
+export default class CardStage extends Component {
+  static propTypes = {
+    cards: PropTypes.array
+  };
+
+  // TODO: Set up to cycle through
+  //       previous, active, and next (LTR)
+  //       in a list of cards
+  //       Control with AdvanceLink or AvatarGroup > Avatar onClick
+
+  // getCurrentCardIndex(cards) {
+  //   let currentIndex;
+  //   cards.map((card, index) => {
+  //     if (card.isCurrent === true) {
+  //       currentIndex = index;
+  //     }
+  //     return currentIndex;
+  //   });
+  // }
+
+  render() {
+    return (
+      <div className={styles.base}>
+        <Card avatar={demoUser} label={demoUser.state} />
+        <Card active avatar={demoUser} hasControls label={demoUser.state} />
+        <Card avatar={demoUser} label={demoUser.state} />
+      </div>
+    );
+  }
+}
+
+styles = StyleSheet.create({
+  base: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%'
+  }
+});

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

@@ -0,0 +1,91 @@
+import React, { Component, PropTypes } from 'react';
+import look, { StyleSheet } from 'react-look';
+import theme from 'universal/styles/theme';
+
+const combineStyles = StyleSheet.combineStyles;
+
+let styles = {};
+
+@look
+// eslint-disable-next-line react/prefer-stateless-function
+export default class PushButton extends Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    keystroke: PropTypes.string,
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+    size: PropTypes.oneOf([
+      'default',
+      'large'
+    ])
+  }
+
+  render() {
+    const { disabled, keystroke, label, onClick, size } = this.props;
+    const buttonKeystroke = keystroke || 'D';
+    const buttonLabel = label || 'Delete everything!';
+    const largeStyles = combineStyles(styles.button, styles.buttonLarge);
+    const buttonStyles = size === 'large' ? largeStyles : styles.button;
+
+    return (
+      <div className={styles.block}>
+        <button disabled={disabled} className={buttonStyles} onClick={onClick}>
+          {buttonKeystroke}
+        </button>
+        <div className={styles.label}>{buttonLabel}</div>
+      </div>
+    );
+  }
+}
+
+styles = StyleSheet.create({
+  pushButtonGroup: {
+    textAlign: 'left'
+  },
+
+  block: {
+    display: 'block',
+    marginBottom: '.25rem'
+  },
+
+  button: {
+    backgroundColor: '#f0f1f4',
+    border: 0,
+    borderBottom: '2px solid #c3c5d1',
+    borderRadius: '.25rem',
+    color: theme.palette.warm,
+    cursor: 'pointer',
+    display: 'inline-block',
+    fontSize: theme.typography.s3,
+    fontWeight: 700,
+    lineHeight: 1,
+    marginRight: '.25rem',
+    padding: '.25rem',
+    textAlign: 'center',
+    textShadow: '0 1px 0 #fff',
+    verticalAlign: 'middle',
+    width: '1.5rem',
+
+    ':focus': {
+      backgroundColor: '#dcdbdf',
+      borderBottom: '0',
+      borderTop: '2px solid #a4a7b9',
+      outline: 'none'
+    }
+  },
+
+  buttonLarge: {
+    fontSize: theme.typography.s4,
+    padding: '.375rem',
+    width: '1.75rem'
+  },
+
+  label: {
+    display: 'inline-block',
+    fontFamily: theme.typography.serif,
+    fontSize: theme.typography.s3,
+    fontStyle: 'italic',
+    fontWeight: 400,
+    verticalAlign: 'middle'
+  }
+});