playbook_ui 2.7.2 → 2.8.1

data/components/Survey/SurveyStory.jsx

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

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

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

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

data/components/Tab/tab.scss

@@ -1,25 +0,0 @@
-@import "base-variables/_colors.scss";
-@import "base-variables/_spacing.sass";
-@import "base-variables/_typography.sass";
-
-@mixin tab($orient: "horizontal") {
-  color: $gray-4;
-  cursor: pointer;
-  display: inline-block;
-  font-weight: $bold;
-  padding: $space-base $space-larger;
-  &-active {
-    border-bottom: 6px solid $power-royal;
-    color: $ink-dark;
-  }
-  &:link, &:visited {
-    color: $gray-4;
-  }
-  &:hover {
-    color: $ink-dark;
-  }
-}
-
-.tab {
-  @include tab;
-}

data/components/Tab/tab.scss.flow

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

data/components/TabList/TabList.jsx

@@ -1,35 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react'
-import classnames from 'classnames'
-
-import { TabType } from '../Tab/Tab'
-
-type Props = {
-  className?: string,
-  children: Array<TabType>,
-}
-
-import styles from './tabList.scss'
-
-export default class TabList extends Component<Props> {
-  props: Props
-
-  render() {
-    const {
-      className,
-      children,
-    } = this.props
-
-    const css = [
-      className,
-      styles[`tabList`],
-    ]
-
-    return (
-      <div className={classnames(css)}>
-        {children}
-      </div>
-    )
-  }
-}

data/components/TabList/TabListStory.jsx

@@ -1,31 +0,0 @@
-import React from "react"
-import Tab from "../Tab/Tab"
-import TabList from "./TabList"
-
-export default function TabListStory(stories) {
-  stories.add("Tabbed List",
-    () => {
-      return (
-        <div className="container my-5">
-          <TabList>
-            <Tab
-                active={true}
-                text="Normal Tab"
-            />
-            <Tab
-                active={false}
-                target="_blank"
-                text="GitHub"
-                href="https://www.github.com"
-            />
-            <Tab
-                active={false}
-                onClick={function(){alert("Hey, who clicked me?!")}}
-                text="Click Tab"
-            />
-          </TabList>
-        </div>
-      )
-    }
-  )
-}

data/components/TabList/tabList.scss

@@ -1,5 +0,0 @@
-@import "base-variables/_colors.scss";
-
-.tabList {
-  border-bottom: 1px solid $gray-2;
-}

data/components/TabList/tabList.scss.flow

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

data/components/Text/Text.jsx

@@ -1,53 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import styles from './styles.scss'
-
-
-type Props = {
-  children?: Array<React.Node>,
-  color: "sky-lighter" | "sky-light" | "sky" | "sky-dark" | "ink-lightest" | "ink-lighter" | "ink-light"| "ink" | "ink-dark",
-  size: "base" | "large" | "larger" | "largest" | "small" | "smaller" | "smallest",
-  bold: boolean,
-  italic: boolean,
-  className: string,
-}
-
-export default class Text extends React.Component<Props> {
-  static defaultProps = {
-    children: <span/>,
-    size: "base",
-    color: "ink",
-    bold: false,
-    italic: false,
-    className: "",
-  }
-  props: Props
-  render() {
-    const {
-      children,
-      className,
-      bold,
-      italic,
-      size,
-      color,
-    } = this.props
-    const css = [
-      className,
-      styles.badge,
-      styles[`text-${color}`],
-      styles[`text-${size}`],
-      bold ? styles["font-weight-bold"] : null,
-      italic ? styles["font-italic"] : null,
-    ]
-    return (
-      <span
-          className={classnames(css)}
-      >
-        {children}
-      </span>
-    )
-  }
-}