playbook_ui 2.5.0

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/SurveyStory.jsx

@@ -0,0 +1,125 @@
+import React from "react"
+import Wip from '../Wip/Wip'
+import Survey from './Survey'
+
+import { boolean } from "@storybook/addon-knobs"
+
+class SurveyContainer extends React.Component {
+  state = {
+    loading: false,
+    questions: [
+      {
+        question: 'Do you like food?',
+        answers: [
+          {
+            label: 'Yes, I do!',
+            selected: true,
+            value: 1,
+          },
+          {
+            label: 'No, I don\'t!',
+            selected: false,
+            value: 0,
+          },
+          {
+            label: 'Kinda..',
+            selected: false,
+            value: 2,
+          }
+        ],
+      },
+      {
+        question: 'Do you like work?',
+        answers: [
+          {
+            label: 'Yes, I do!',
+            selected: true,
+            value: 1,
+          },
+          {
+            label: 'No, I don\'t!',
+            selected: false,
+            value: 0,
+          },
+          {
+            label: 'Kinda..',
+            selected: false,
+            value: 2,
+          }
+        ],
+      }
+    ],
+    submitting: false,
+  }
+  componentWillMount() {
+    this.setState({
+      canSubmit: false,
+      loading: true,
+    })
+    setTimeout(() => {
+      this.setState({
+        canSubmit: true,
+        loading: false,
+      })
+    }, 1500)
+  }
+  handleOnChange = (qIdx, aIdx) => {
+    const { questions } = this.state
+    for(let answer of questions[qIdx].answers) {
+      answer.selected = false
+    }
+    questions[qIdx].answers[aIdx].selected = true
+    this.setState({ questions })
+  }
+  handleOnSubmit = () => {
+    this.setState({
+      showErrors: false,
+      submitting: true,
+    })
+    setTimeout(() => {
+      this.setState({
+        showErrors: true,
+        submitting: false,
+      })
+    }, 1500)
+  }
+  render() {
+    const {
+      canSubmit,
+      loading,
+      questions,
+      submitting,
+    } = this.state
+
+    const showErrors = boolean("show errors", this.state.showErrors || false)
+
+    const props = {
+      canSubmit: boolean("canSubmit", canSubmit || true),
+      errors: showErrors ? ["Something wrong", "Something else not right"] : [],
+      loading: boolean("loading", loading || false),
+      onChange: this.handleOnChange,
+      onSubmit: this.handleOnSubmit,
+      questions,
+      submitting: boolean("submitting", submitting || false),
+    }
+    const child = React.cloneElement(this.props.children, props)
+    return (
+      <Wip
+          branch="feature/survey-modal"
+          prNumber={7}
+      >
+      {child}
+    </Wip>
+    )
+  }
+}
+
+export default function SurveyStory(stories) {
+  stories.add("Survey", () => {
+    return (
+      <SurveyContainer>
+        <Survey />
+      </SurveyContainer>
+    )
+  })
+}

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%;
+}