nitro_sg 3.0.1 → 3.0.2

data/components/Milestones/milestones.scss

@@ -0,0 +1,19 @@
+@import "./milestones_variables";
+
+.milestones {
+  ul {
+    list-style: none;
+    position: relative;
+    padding: $space-small 0 0;
+    margin: $space-small 0 0;
+    text-align: center;
+
+    &::after {
+      content: '';
+      clear: both;
+      float: none;
+      display: block;
+      width: 100%;
+    }
+  }
+}

data/components/Milestones/milestones.scss.flow

@@ -0,0 +1,7 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'hidden-xxs': string;
+  +'milestones': string;
+  +'visible-xxs': string;
+|};

data/components/Milestones/milestones_item.scss

@@ -0,0 +1,157 @@
+@import "./milestones_variables";
+
+.milestone-item {
+  position: relative;
+  vertical-align: top;
+  display: inline-block;
+  text-align: center;
+  padding: 0 $space-larger;
+  height: $step-progress-li-height;
+  line-height: $step-progress-bubble-height;
+
+
+  .milestone-item-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: $opacity-5;
+    font-size: $font-small;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    font-size: $font-small;
+  }
+
+
+  &::before {
+    content: '';
+    display: block;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    font-family: $icon-font;
+    font-size: $font-small;
+    width: $step-progress-bubble-height;
+    height: $step-progress-bubble-height;
+    border: $step-progress-line-height solid $ink-lightest;
+    border-radius: $step-progress-bubble-height/2;
+    line-height: calc(#{$step-progress-bubble-height} - (#{$step-progress-line-height} * 2));
+    font-weight: $bold;
+    margin: 0 auto $space-smaller;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    width: calc(100% - (#{$step-progress-bubble-height} - #{$step-progress-line-height}));
+    height: $step-progress-line-height;
+    top: calc((#{$step-progress-bubble-height}/2) - (#{$step-progress-line-height}/2));
+    left: calc(-50% + (#{$step-progress-bubble-height}/2));
+    z-index: 0;
+  }
+  &:first-child {
+    &::after {
+      display: none;
+    }
+  }
+
+  &::before {
+    background: transparent;
+  }
+
+  &.status-{
+    &done {
+      &::before {
+        border-color: $power-green !important;
+      }
+      .icon {
+        color: $power-green !important;
+      }
+    }
+    &started {
+      .milestone-item-label {
+        opacity: 1;
+      }
+      &::before {
+        border-color: $power-blue !important;
+      }
+      .icon {
+        color: $power-blue !important;
+      }
+    }
+  }
+
+  &.background-dark {
+    .milestone-item-label {
+      color: $bg-dark-text;
+    }
+
+    &::before {
+      background: $bg-dark-color;
+      color: $bg-dark-text;
+    }
+    &::after {
+      background: $bg-dark-color;
+    }
+
+    &.status-{
+      &done {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-green;
+        }
+      }
+      &started {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-blue;
+        }
+      }
+    }
+  }
+
+  &.background-light {
+    .milestone-item-label {
+      color: $bg-light-text;
+    }
+
+    &::before {
+      background: $bg-light-color;
+      border-color: $bg-light-color;
+      color: $bg-light-text;
+    }
+    &::after {
+      background: $bg-light-color;
+    }
+
+    &.status-{
+      &done {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-green;
+        }
+      }
+      &started {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-blue;
+        }
+      }
+    }
+  }
+}

data/components/Milestones/milestones_item.scss.flow

@@ -0,0 +1,13 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'background-dark': string;
+  +'background-light': string;
+  +'hidden-xxs': string;
+  +'icon': string;
+  +'milestone-item': string;
+  +'milestone-item-label': string;
+  +'status-done': string;
+  +'status-started': string;
+  +'visible-xxs': string;
+|};

data/components/Milestones/milestones_variables.scss

@@ -0,0 +1,11 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+$step-progress-li-height: 70px;
+$step-progress-bubble-height: 34px;
+$step-progress-line-height: 4px;
+
+$bg-light-color: $sky;
+$bg-light-text: $ink;
+$bg-dark-color: $ink-lightest;
+$bg-dark-text: $white;

data/components/MonogramAvatar/MonogramAvatar.jsx

@@ -0,0 +1,91 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { isEmpty, map } from 'lodash'
+
+import styles from './monogram_avatar.scss'
+
+import Avatar from '../Avatar/Avatar'
+import type AvatarSize from '../Avatar/Avatar'
+
+type Props = {
+  border: boolean,
+  className: string,
+  personName: string,
+  size: AvatarSize,
+  url: string,
+}
+
+type State = {
+  showInitials: boolean
+}
+
+const initials = function(name: string): string {
+  if (!name) {
+    return <i className="fa fa-user" />
+  }
+  return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
+}
+
+class MonogramAvatar extends React.Component<Props, State> {
+  static defaultProps = {
+    border: true,
+    size: 'base'
+  }
+  constructor(props: Props) {
+    super(props)
+    this.state = { showInitials: false }
+  }
+
+  state: State
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ showInitials: isEmpty(nextProps.url) })
+  }
+
+  props: Props
+
+  handleImageLoadError = () => {
+    this.setState({ showInitials: true })
+  }
+
+  render() {
+    const {
+      url,
+      className,
+      personName,
+      size,
+      border,
+    } = this.props
+
+    const classes = [
+      className,
+      styles['monogram-avatar'],
+      (this.state.showInitials ? styles['initials'] : null),
+      (border ? styles['with-border'] : null),
+    ]
+
+    return (
+      <div className={classnames(classes, styles[`monogram-avatar-${size}`])}>
+        <Choose>
+          <When condition={!this.state.showInitials}>
+            <Avatar
+                alt={personName}
+                disableLink
+                onError={this.handleImageLoadError}
+                showPopover={false}
+                size={size}
+                thumb={url}
+            />
+          </When>
+          <Otherwise>
+            <p>{initials(personName)}</p>
+          </Otherwise>
+        </Choose>
+      </div>
+    )
+  }
+}
+
+export default MonogramAvatar

data/components/MonogramAvatar/monogram_avatar.scss

@@ -0,0 +1,54 @@
+@import "base-variables/_colors.scss";
+@import "base-variables/_typography.sass";
+
+.monogram-avatar {
+
+  @mixin monogram-avatar($size, $border-width, $font-scale-factor) {
+    color: $white;
+    display: inline-block;
+    font-size: $size * $font-scale-factor;
+    height: $size;
+    line-height: $size;
+    overflow: hidden;
+    width: $size;
+    img, p {
+      background: $ink-lightest;
+      text-align: center;
+      border-radius: $border-width;
+    }
+    &.with-border {
+      border-color: $white;
+      border-radius: $border-width;
+      border-style: solid;
+      border-width: $border-width;
+      line-height: $size - (2 * $border-width);
+      img, p {
+        border-radius: 0;
+      }
+      img {
+        margin-left: -$border-width;
+        margin-top: -$border-width;
+      }
+    }
+  }
+
+  &-smaller {
+    @include monogram-avatar(30px, 2px, 0.4);
+  }
+
+  &-small {
+    @include monogram-avatar(60px, 2px, 0.32);
+  }
+
+  &-base {
+    @include monogram-avatar(90px, 4px, 0.32)
+  }
+
+  &-large {
+    @include monogram-avatar(115px, 4px, 0.32)
+  }
+
+  &-larger {
+    @include monogram-avatar(197px, 6px, 0.32)
+  }
+}

data/components/MonogramAvatar/monogram_avatar.scss.flow

@@ -0,0 +1,10 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'monogram-avatar-base': string;
+  +'monogram-avatar-large': string;
+  +'monogram-avatar-larger': string;
+  +'monogram-avatar-small': string;
+  +'monogram-avatar-smaller': string;
+  +'with-border': string;
+|};

data/components/Panel/Panel.jsx

@@ -0,0 +1,159 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import { isEmpty } from 'lodash'
+import FontAwesome from 'react-fontawesome'
+import Text from '../Text/Text'
+
+type Props = {
+  bodyClass?: string,
+  children: Array<Component>,
+  className?: string,
+  collapsed?: boolean,
+  collapsible?: boolean,
+  headingLinks?: Array<Component>,
+  title?: string,
+  titleIcon?: string,
+  subTitle?: string,
+}
+
+import styles from './panel.scss'
+
+export default class Panel extends Component<Props> {
+  static defaultProps = {
+    className: "panel-default",
+    collapsed: false,
+    collapsible: false,
+  }
+
+  state = {
+    collapsed: false,
+  }
+
+  componentWillMount() {
+    this.setState({collapsed: this.props.collapsed})
+  }
+
+  props: Props
+
+  renderHeadingLinks() {
+    const {
+      headingLinks,
+    } = this.props
+    if(!headingLinks) return null
+    return (
+      <div className="panel-links">
+        {headingLinks.map()}
+      </div>
+    )
+  }
+
+  renderHeadingTitle() {
+    const {
+      title,
+      titleIcon,
+      subTitle,
+    } = this.props
+    return (
+      <h3 className={classnames("panel-title", styles["panel-title"])}>
+        <If condition={titleIcon}>
+          <FontAwesome
+              className={classnames("mr-3 ml-4", styles.icon)}
+              name={titleIcon}
+          />
+        </If>
+        <div>
+          <Text
+              bold
+              className={titleIcon ? styles[`${subTitle ? 'panel-title-main-subtitled' : 'panel-title-main'}`] : null}
+              size="large"
+          >
+            {title}
+          </Text>
+          <If condition={subTitle}>
+            <Text
+                className={classnames("clearfix", styles["panel-title-subtitle"])}
+                size="smallest"
+            >
+              {subTitle}
+            </Text>
+          </If>
+        </div>
+      </h3>
+    )
+  }
+
+  renderToggle() {
+    const {collapsed} = this.state
+    return (
+      <FontAwesome
+          className={styles.toggle}
+          name={`chevron-circle-${collapsed ? 'down' : 'up'}`}
+      />
+    )
+  }
+
+  renderBody() {
+    const {
+      children,
+      collapsible,
+      bodyClass,
+    } = this.props
+
+    if (collapsible && this.state.collapsed) return
+
+    return (
+      <div className={classnames("panel-body", bodyClass)}>
+        {children}
+      </div>
+    )
+  }
+
+  render() {
+    const {
+      className,
+      collapsible,
+      title,
+      headingLinks,
+    } = this.props
+
+    const {
+      collapsed,
+    } = this.state
+
+    const css = [
+      styles.panel,
+      "panel",
+      collapsed ? styles["panel-collapsed"] : null,
+      collapsible ? styles["panel-collapsible"] : null,
+      className,
+    ]
+
+    const toggleCollapsed = () => {
+      this.setState({collapsed: !this.state.collapsed})
+    }
+
+    return (
+      <div className={classnames(css)}>
+        <If condition={!isEmpty(title) || !isEmpty(headingLinks)}>
+          <div
+              className="panel-heading clearfix"
+              onClick={toggleCollapsed}
+          >
+            <div className={`p-0 ${collapsible ? 'col-xs-6 col-sm-6 col-md-6' : 'col-sm-12 col-md-12'}`}>
+              {this.renderHeadingLinks()}
+              {this.renderHeadingTitle()}
+            </div>
+            <If condition={collapsible}>
+              <div className="p-0 col-md-6 text-right">
+                {this.renderToggle()}
+              </div>
+            </If>
+          </div>
+        </If>
+        {this.renderBody()}
+      </div>
+    )
+  }
+}