Merge pull request #201 from influitive/ps/alert+text-area

Porting in some old patternity components

src/alert/card.js

@@ -0,0 +1,42 @@
+import devboard from 'devboard';
+import React from 'react';
+import Alert from './index.js';
+
+const devcard = devboard.ns('alerts');
+
+devcard(
+  'Alerts',
+  `
+  Patternity Alerts
+
+  * success
+  * error
+  * info
+  * warning
+  `,
+  <div style={{ textAlign: 'center' }}>
+    <Alert type='success' showAlert={true}>Success</Alert>
+    <Alert type='error'>Error</Alert>
+    <Alert type='info'>Info</Alert>
+    <Alert type='warning'>Warning</Alert>
+  </div>
+);
+
+
+devcard(
+  'Alerts with close',
+  ' ',
+  <div style={{ textAlign: 'center' }}>
+    <Alert type='success' showAlert={true} closeable={true}>Closable</Alert>
+  </div>
+);
+
+
+devcard(
+  'Alerts with title and close',
+  ' ',
+  <div style={{ textAlign: 'center' }}>
+    <Alert type='success' showAlert={true} closeable={true} title='This is a title'>This is the body</Alert>
+  </div>
+);
+

src/alert/index.js

@@ -0,0 +1,116 @@
+import React, { PropTypes, Component } from 'react';
+import styles from './styles.css';
+import cn from 'classnames';
+import { Icon } from 'infl-icons';
+
+export default class Alert extends Component {
+  static propTypes = {
+    title:     PropTypes.string,
+    type:      PropTypes.oneOf(['success', 'error', 'info', 'warning']),
+    showIcon:  PropTypes.bool,
+    closeable: PropTypes.bool,
+    showAlert: PropTypes.bool,
+    onClose:   PropTypes.func,
+    hideIn:    PropTypes.number
+  };
+
+  static defaultProps = {
+    title:     '',
+    showIcon:  false,
+    closeable: false,
+    showAlert: true,
+    onClose() {},
+    hideIn:    0
+  }
+
+  hideInTimeout = null;
+
+  state = {
+    showAlert: this.props.showAlert,
+    closeable: this.props.closeable
+  };
+
+  componentWillReceiveProps = (newProps) => {
+    this.clearHideInTimeout();
+    this.setState({
+      showAlert: newProps.showAlert,
+      closeable: newProps.closeable
+    });
+  };
+
+  componentDidMount = () => {
+    this.hideAlert();
+  };
+
+  componentWillUpdate = (nextProps) => {
+    this.clearHideInTimeout();
+    this.hideAlert(nextProps.hideIn);
+  };
+
+  clearHideInTimeout = () =>{
+    window.clearTimeout(this.hideInTimeout);
+  };
+
+  hideAlert = () => {
+    const { hideIn } = this.props;
+    if (hideIn > 0) {
+      this.hideInTimeout = setTimeout(this.close, hideIn * 1000);
+    }
+  };
+
+  render = () => <div className={this.classes()}>
+    <div className={styles.text}>
+      {this.title()}
+      <div className={styles.alertBody}>
+        {this.props.children}
+      </div>
+    </div>
+    {this.closeable()}
+  </div>;
+
+  classes = () =>
+    cn(
+      styles.alertMsg,
+      {
+        [styles.hasIcon]: this.props.showIcon,
+        [styles.hide]: !this.props.showAlert,
+        [styles[this.props.type]]: this.props.type
+      }
+    );
+
+  title = () => {
+    if (this.props.title) {
+      return (
+        <h4 className={styles.alertTitle}>
+          {this.icon()}
+          <span>{this.props.title}</span>
+        </h4>
+      );
+    }
+    return null;
+  };
+
+  icon = () => {
+    const { showIcon } = this.props;
+
+    if (!showIcon)
+      return null;
+
+    return <span className={styles.alertIcon}>
+      <Icon icon={this.determineIconType()}/>
+    </span>;
+  };
+
+  close = () => {
+    this.setState({ showAlert: false });
+    this.props.onClose();
+  };
+
+  closeable = () => {
+    return this.state.closeable
+      ? <span className={styles.close} onClick={this.close}>
+        <Icon icon='close'/>
+      </span>
+    : null;
+  };
+}

src/alert/styles.css

@@ -0,0 +1,198 @@
+.alertMsg {
+  padding: 10px 20px;
+  border-radius: 2px;
+  background-color: lighten($info-color, 0.55);
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  color: $info-color;
+
+  &.hide {
+    display: none;
+  }
+
+  h4 {
+    margin: 0px;
+    line-height: 35px;
+    font-size: 16px;
+    text-align: left;
+
+    span {
+      vertical-align: middle;
+    }
+  }
+
+  .alertIcon {
+    margin-right: 10px;
+  }
+
+  .close {
+    padding: 10px;
+    position: absolute;
+    right: 5px;
+    top: 0px;
+    color: $info-color;
+    cursor: pointer;
+    font-weight: bold;
+    z-index: 3;
+
+    &:hover {
+      color: darken($info-color, 0.1);
+      transition: color 0.5s ease-out;
+    }
+  }
+
+  .alertBody {
+    overflow: hidden;
+    position: relative;
+    line-height: 1.2em;
+  }
+
+  &.hasIcon {
+    .alertBody {
+      padding-left: 26px;
+
+      .detailed {
+        margin-left: -26px;
+      }
+    }
+  }
+
+  &.warning {
+    background-color: lighten($warning-color, 0.45);
+    color: darken($warning-color, 0.1);
+
+    .close {
+      color: darken($warning-color, 0.1);
+
+      &:hover {
+        color: darken($warning-color, 0.15);
+      }
+    }
+
+    .alertAction {
+      button {
+        border-color: darken($warning-color, 0.1);
+        color: darken($warning-color, 0.1) !important;
+
+        &:hover {
+          border-color: darken($warning-color, 0.15);
+          color: darken($warning-color, 0.15) !important;
+        }
+      }
+    }
+  }
+
+  &.success {
+    background-color: lighten($success-color, 0.4);
+    color: darken($success-color, 0.15);
+
+    .close {
+      color: darken($success-color, 0.15);
+
+      &:hover {
+        color : darken($success-color, 0.1);
+      }
+    }
+
+    .alertAction {
+      button {
+        border-color: darken($success-color, 0.15);
+        color: darken($success-color, 0.15) !important;
+
+        &:hover {
+          border-color: darken($success-color, 0.1);
+          color: darken($success-color, 0.1) !important;
+        }
+      }
+    }
+  }
+
+  &.error {
+    background-color: lighten($error-color, 0.4);
+    color: $error-color;
+
+    .close {
+      color: $error-color;
+
+      &:hover {
+        color : darken($error-color, 0.1);
+      }
+    }
+
+    .alertAction {
+      button {
+        border-color: $error-color;
+        color: $error-color !important;
+
+        &:hover {
+          border-color: darken($error-color, 0.1);
+          color: darken($error-color, 0.1) !important;
+        }
+      }
+    }
+  }
+
+  .alertAction {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    z-index: 3;
+
+    button {
+      border-color: $info-color;
+      color: $info-color !important;
+
+      &:hover {
+        border-color: lighten($info-color, 0.02);
+        color: lighten($info-color, 0.02) !important;
+      }
+    }
+
+    & + .alertBody {
+      padding-right: 0.4;
+      min-height: 12px;
+    }
+  }
+
+  .alertDetailed {
+    background-color: #fff;
+    padding: 20px;
+    margin-top: 20px;
+    color: $darker-gray;
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+
+    h4 {
+        margin-bottom: 1.33em;
+    }
+
+    .alertDetailedAction {
+      position: absolute;
+      right: 20px;
+      top: 15px;
+    }
+
+    a {
+      text-decoration: none;
+      color: $info-color;
+    }
+  }
+}
+
+@media only screen and (max-width : 480px) {
+  .alertMsg {
+    .alertAction {
+      bottom: 15px;
+      left: 46px;
+      right: auto;
+      top: auto;
+
+      & + .alertBody {
+        padding-right: 0px;
+        padding-bottom: 50px;
+      }
+    }
+  }
+}