playbook_ui 2.7.2 → 2.8.1

data/components/Spinner/Spinner.jsx

@@ -1,80 +0,0 @@
-import React from "react"
-import classnames from "classnames"
-
-import spinnerStyles from "./spinner.scss"
-
-type Props = {
-   position?: 'centered',
-   top?: number,
-   right?: number,
-   bottom?: number,
-   left?: number,
-   active?: boolean,
-}
-
-export default class Spinner extends React.Component<Props> {
-  static defaultProps = {
-    top: 90,
-    right: 15,
-    bottom: null,
-    left: null,
-    active: true,
-  }
-  props: Props
-  render() {
-    const {
-      active,
-      position,
-      top,
-      right,
-      bottom,
-      left
-    } = this.props
-
-    let styles
-    if(!position) styles = { top: top, right: right, bottom: bottom, left: left }
-
-    const css = classnames([
-      "Spinner",
-      active ? "visible" : "hidden",
-      position ? spinnerStyles[position] : null,
-    ])
-
-    return (
-      <div
-          className={css}
-          style={styles}
-      >
-        <span className="badge">
-          <svg
-              height="30px"
-              id="loader-1"
-              style={{ enableBackground: "new 0 0 50 50" }}
-              version="1.1"
-              viewBox="0 0 50 50"
-              width="30px"
-              x="0px"
-              xmlSpace="preserve"
-              y="0px"
-          >
-            <path
-                d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
-                fill="#004976"
-                transform="rotate(70 25 25)"
-            >
-              <animateTransform
-                  attributeName="transform"
-                  attributeType="xml"
-                  dur="0.6s"
-                  from="0 25 25"
-                  repeatCount="indefinite"
-                  to="360 25 25"
-                  type="rotate"
-              />
-            </path>
-          </svg>
-        </span>
-      </div>
-    )
-  }
-}

data/components/Spinner/SpinnerStory.jsx

@@ -1,21 +0,0 @@
-import React from "react"
-
-import Spinner from './Spinner'
-
-import { boolean, number, select } from "@storybook/addon-knobs"
-
-export default function SpinnerStory(stories) {
-  stories.add("Spinner",
-    () => {
-      const props = {
-        active: boolean("active", true),
-        position: select("position", [null, "centered"], null),
-        top: number("top", null),
-        right: number("right", null),
-        bottom: number("bottom", null),
-        left: number("left", null),
-      }
-      return <Spinner {...props} />
-    }
-  )
-}

data/components/Spinner/spinner.scss

@@ -1,6 +0,0 @@
-.centered {
-  position: absolute;
-  text-align: center;
-  bottom: 50%;
-  right: 50%;
-}

data/components/Spinner/spinner.scss.flow

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

data/components/StepMeter/StepMeter.jsx

@@ -1,75 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { map } from 'lodash'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
-import classnames from 'classnames'
-
-import Icon from '../Icon/Icon'
-import styles from './step_meter.scss'
-
-type States = 'done' | 'started' | 'none'
-
-type Step = {|
-  id: number,
-  name: string,
-  state: States,
-|}
-
-type Props = {
-  className: string,
-  steps: Array<Step>,
-  type: string,
-}
-
-const StepMeter = ({
-  steps,
-  type,
-  className
-}: Props) => {
-  const classes = [
-    className,
-    styles['step-meter'],
-    styles[`type-${type}`],
-  ]
-  return (
-    <ul className={classnames(classes)}>
-      {
-        map(steps, (step, idx) => (
-          <Choose>
-            <When condition={type == 'simple'}>
-              <OverlayTrigger
-                  key={idx}
-                  overlay={<Tooltip id={`tooltip-step.name`}>{step.name}</Tooltip>}
-                  placement="bottom"
-                  trigger={['hover', 'focus']}
-              >
-                <li
-                    className={`text-uppercase ${styles[step.state]}`}
-                />
-              </OverlayTrigger>
-            </When>
-            <Otherwise>
-              <li
-                  className={`text-uppercase ${styles[step.state]}`}
-                  key={idx}
-              >
-                <If condition={step.state == 'done'}>
-                  <Icon
-                      label=""
-                      name="check"
-                  />
-                </If>
-                <span>
-                  {step.name}
-                </span>
-              </li>
-            </Otherwise>
-          </Choose>
-        ))
-      }
-    </ul>
-  )
-}
-
-export default StepMeter

data/components/StepMeter/StepMeterStory.jsx

@@ -1,25 +0,0 @@
-import React from "react"
-import StepMeter from "./StepMeter"
-
-import { object, select } from "@storybook/addon-knobs"
-
-export default function StepMeterStory(stories) {
-  stories.add("StepMeter",
-    () => {
-      let props = {
-        type: select("Type", ["complex", "simple"], "complex"),
-        steps: object(
-          "steps",
-          [
-            { id: 1, name: 'Apply', state: 'done'},
-            { id: 2, name: 'Screen', state: 'done'},
-            { id: 3, name: 'Interview', state: 'started'},
-            { id: 4, name: 'Offer', state: 'none'},
-            { id: 5, name: 'Hired', state: 'none'},
-          ]
-        )
-      }
-      return <StepMeter {...props}/>
-    }
-  )
-}

data/components/StepMeter/step_meter.scss

@@ -1,120 +0,0 @@
-@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

@@ -1,9 +0,0 @@
-// @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

@@ -1,190 +0,0 @@
-/* @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>
-    )
-  }
-}