nitro_sg 3.0.1 → 3.0.2

data/components/StepMeter/step_meter.scss

@@ -0,0 +1,120 @@
+@import "base-variables/_colors.scss";
+@import "base-variables/_spacing.sass";
+@import "base-variables/_border-radius.sass";
+@import "base-variables/_typography.sass";
+
+$step-size-sm: 10px;
+
+.step-meter {
+  list-style-type: none;
+  padding: 0 $space-base;
+  margin: 0;
+
+  li {
+    background: $sky;
+    border-radius: $border-rad-heavy*2;
+    color: $ink-light;
+    font-size: $font-smallest - 1;
+    font-weight: 400;
+    display: inline-block;
+    height: 18px;
+    line-height: 20px;
+    margin: 0 $space-small;
+    min-width: 75px;
+    padding: 0 $space-smallest;
+    position: relative;
+    text-align: center;
+    text-transform: uppercase;
+
+    &::before {
+      content: '';
+      background: $sky;
+      position: absolute;
+      height: 4px;
+      left: -14px;
+      right: 0;
+      top: calc(50% - 2px);
+      width: 14px;
+    }
+
+    &:first-child {
+      &::before {
+        display: none;
+      }
+    }
+
+    &.done,
+    &.done::before {
+      background: $power-blue;
+    }
+    &.started,
+    &.started::before {
+      background: $power-blue;
+    }
+    &.error,
+    &.error::before {
+      background: $power-red;
+    }
+
+    &.done,
+    &.started,
+    &.error {
+      color: white;
+    }
+
+    span {
+      &:first-child {
+        margin-right: $space-smallest/2;
+      }
+    }
+  }
+
+  &.type-simple {
+    width: 100%;
+    display: flex;
+
+    li {
+      min-width: auto;
+      height: 10px;
+      line-height: 10px;
+      flex-grow: 1;
+      margin: 0;
+      background: transparent !important;
+
+      span {
+        display: none;
+      }
+
+      &::before {
+        height: 2px;
+        top: calc(50% - 1px);
+        left: calc(-50% + 5px);
+        width: calc(100% - 10px);
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: calc(50% - 5px);
+        width: $step-size-sm;
+        height: $step-size-sm;
+        border-radius: $step-size-sm/2;
+        background-color: $sky;
+        border: 2px solid $sky;
+      }
+
+      &.done::after, &.done::before {
+        background: $online-green;
+        border-color: $online-green;
+      }
+      &.error::after, &.error::before {
+        background: $power-red;
+        border-color: $power-red;
+      }
+      &.started::after {
+        background: transparent;
+        border-color: $power-blue;
+      }
+    }
+  }
+}

data/components/StepMeter/step_meter.scss.flow

@@ -0,0 +1,9 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'done': string;
+  +'error': string;
+  +'started': string;
+  +'step-meter': string;
+  +'type-simple': string;
+|};

data/components/Survey/Survey.jsx

@@ -0,0 +1,190 @@
+/* @flow */
+
+import React from 'react'
+
+import classnames from 'classnames'
+import styles from './survey.scss'
+
+import {
+  Errors,
+  Spinner,
+} from '..'
+
+import { SurveyQuestions } from '../types'
+
+import {
+  Button,
+  Icon,
+  Panel,
+} from '../index'
+
+type Props = {
+  canSubmit?: boolean,
+  dismissable?: boolean,
+  errors: Array<string>,
+  loading?: boolean,
+  onChange: () => mixed,
+  onDismiss: () => mixed,
+  onSubmit: () => mixed,
+  questions: SurveyQuestions,
+  submitting: boolean,
+}
+
+export default class Survey extends React.Component<Props> {
+  static defaultProps = {
+    canSubmit: true,
+    dismissable: true,
+    errors: [],
+    loading: false,
+    modal: false,
+    onChange: function(){},
+    onDismiss: function(){},
+    onSubmit: function(){},
+    questions: [],
+    submitting: false,
+  }
+  props: Props
+
+  handleOnSubmit = (e) => {
+    e.preventDefault();
+    this.props.onSubmit();
+  }
+
+  handleOnChange(qaIdx) {
+    this.props.onChange(...qaIdx)
+  }
+
+  renderHeader() {
+    const {
+      errors,
+    } = this.props
+    return (
+      <div>
+        <If condition={errors && errors.length}>
+          <Errors messages={errors} />
+        </If>
+      </div>
+    )
+  }
+  renderBody() {
+    const {
+      questions,
+      submitting,
+    } = this.props
+    const css = classnames([
+      'panel-default',
+      styles.surveyQuestion,
+    ])
+
+    if(!questions.length) return null
+
+    return (
+      <ol className={styles['survey-question-list']}>
+        {questions.map((q, i) =>
+          (
+            <li
+                className={styles['survey-question']}
+                key={`question-li-${i}`}
+            >
+              <Panel
+                  className={css}
+                  flush
+                  key={`question-${i}`}
+                  title={q.question}
+              >
+                <ul className={styles['survey-question-answer-list']}>
+                  {q.answers.map((answer, x) => {
+                    let otherProps = {
+                      onChange: this.handleOnChange.bind(this, [i, x]),
+                    }
+                    if(submitting) otherProps.disabled = true
+                    if(answer.selected) otherProps.checked = true
+
+                    return (
+                      <li
+                          className={styles['survey-question-answer']}
+                          key={`question-${i}-answer-${x}-li`}
+                      >
+                        <label>
+                            <input
+                                name={`question-${i}-answer`}
+                                type="radio"
+                                defaultValue={answer.value}
+                                {...otherProps}
+                            />
+                            <span>
+                              {answer.label}
+                            </span>
+                        </label>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </Panel>
+            </li>
+          )
+        )}
+      </ol>
+    )
+  }
+  renderFooter() {
+    const {
+      canSubmit,
+      submitting,
+    } = this.props
+
+    let props = {
+      text: submitting ? "Submitting Answers" : "Submit Answers",
+      type: submitting ? "" : "submit",
+    }
+    if(!canSubmit || submitting) props.disabled = true
+    props.className = classnames([
+      "btn-primary",
+      styles.submit,
+    ])
+    if(submitting) {
+      props.icon = (
+        <Icon
+            className="mr-3 fa-spin"
+            name="spinner"
+            spin
+        />
+      )
+    }
+
+    return (
+      <Button {...props} />
+    )
+  }
+  renderLoading() {
+    return (
+      <div className={styles.overlay}>
+        <Spinner
+            position="centered"
+        />
+      </div>
+    )
+  }
+  render() {
+    const {
+      loading,
+      questions,
+    } = this.props
+
+    return (
+      <form
+          className={styles.survey}
+          onSubmit={this.handleOnSubmit}
+      >
+        <div>
+          <If condition={loading}>{this.renderLoading()}</If>
+          {this.renderHeader()}
+          <If condition={questions.length > 0}>
+            {this.renderBody()}
+            {this.renderFooter()}
+          </If>
+        </div>
+      </form>
+    )
+  }
+}

data/components/Survey/survey.scss

@@ -0,0 +1,75 @@
+@import "base-variables/_spacing.sass";
+@import "base-variables/_colors.scss";
+@import "base-variables/_typography.sass";
+
+.overlay {
+  background: transparent;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 10;
+  & > div {
+    & > span {
+      background: transparent;
+    }
+  }
+}
+
+.survey {
+  position: relative;
+  padding: $space-larger;
+  background: transparent;
+  &-question {
+    list-style: none;
+    counter-increment: step-counter;
+    display: flex;
+    flex: 5;
+    & > div {
+      flex: 20;
+    }
+    &::before {
+      content: counter(step-counter);
+      font-size: $font-largest;
+      flex: 1;
+      margin-top: $space-base;
+    }
+    &-answer {
+      list-style-type: none;
+      border-bottom: 1px solid $gray-2;
+      padding: $space-smaller $space-large 0 $space-large;
+      &:last-child {
+        border: none;
+      }
+      &-list {
+        margin: 0;
+        padding: 0;
+      }
+      label {
+        cursor: pointer;
+      }
+      input[type='radio'] {
+        & + span {
+          font-weight: $regular;
+          color: $ink-lightest;
+        }
+        &:checked {
+          & + span {
+            color: $ink;
+            font-weight: $bold;
+          }
+        }
+        margin-right: $space-base;
+      }
+    }
+    &-list {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+.submit {
+  margin-left: 5%;
+}

data/components/Survey/survey.scss.flow

@@ -0,0 +1,11 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'overlay': string;
+  +'submit': string;
+  +'survey': string;
+  +'survey-question': string;
+  +'survey-question-answer': string;
+  +'survey-question-answer-list': string;
+  +'survey-question-list': string;
+|};

data/components/Tab/Tab.jsx

@@ -0,0 +1,70 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+import Icon from '../Icon/Icon'
+
+export type TabType = {
+  active: boolean,
+  className?: string,
+  href?: string,
+  icon?: string,
+  onClick?: () => mixed,
+  target?: '_blank' | '_top',
+  text: string,
+}
+
+import styles from './tab.scss'
+
+export default class Tab extends Component<TabType> {
+  props: TabType
+
+  renderIcon() {
+    const { icon } = this.props
+    if (icon) return (<Icon name={icon} />)
+    return null
+  }
+
+  render() {
+    const {
+      active,
+      className,
+      href,
+      onClick,
+      target,
+      text,
+    } = this.props
+
+    const css = [
+      "tab",
+      styles.tab,
+      active ? styles[`tab-active`] : null,
+      className,
+    ]
+
+    return (
+      <Choose>
+        <When condition={href}>
+          <a
+              className={classnames(css)}
+              href={href}
+              target={target}
+          >
+            { this.renderIcon() }
+            {text}
+          </a>
+        </When>
+        <When condition={!href}>
+          <div
+              className={classnames(css)}
+              onClick={onClick}
+          >
+            { this.renderIcon() }
+            {text}
+          </div>
+        </When>
+      </Choose>
+    )
+  }
+}