playbook_ui 2.7.2 → 2.8.1

data/components/Text/TextStory.jsx

@@ -1,23 +0,0 @@
-import React from "react"
-import Text from "./Text"
-
-import { text, select, boolean } from "@storybook/addon-knobs"
-
-export default function TextStory(stories) {
-  stories.add("Text",
-    () => {
-      let props = {
-        className: text("className", ""),
-        color: select("color", ["sky-lighter", "sky-light", "sky", "sky-dark", "ink-lightest", "ink-lighter", "ink-light", "ink", "ink-dark"], "ink"),
-        size: select("size", ["base", "large", "larger", "largest", "small", "smaller", "smallest"], "base"),
-        bold: boolean("bold", false),
-        italic: boolean("italic", false),
-      }
-      return (
-        <Text {...props}>
-          {`She stared through the window at the stars.`}
-        </Text>
-      )
-    }
-  )
-}

data/components/Text/styles.scss

@@ -1,3 +0,0 @@
-@import "base-mixins/_all.scss";
-@import "base-variables/_all.scss";
-@import "text.scss";

data/components/Text/styles.scss.flow

@@ -1,123 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'font-italic': string;
-  +'font-weight-bold': string;
-  +'font-weight-normal': string;
-  +'hidden-xxs': string;
-  +'text-black': string;
-  +'text-black-opacity-1': string;
-  +'text-black-opacity-2': string;
-  +'text-black-opacity-3': string;
-  +'text-black-opacity-4': string;
-  +'text-black-opacity-5': string;
-  +'text-black-opacity-6': string;
-  +'text-black-opacity-7': string;
-  +'text-black-opacity-8': string;
-  +'text-black-opacity-9': string;
-  +'text-danger': string;
-  +'text-gray-1': string;
-  +'text-gray-2': string;
-  +'text-gray-3': string;
-  +'text-gray-4': string;
-  +'text-gray-5': string;
-  +'text-gray-6': string;
-  +'text-gray-7': string;
-  +'text-gray-8': string;
-  +'text-gray-9': string;
-  +'text-gray-dark': string;
-  +'text-info': string;
-  +'text-ink': string;
-  +'text-ink-dark': string;
-  +'text-ink-light': string;
-  +'text-ink-lighter': string;
-  +'text-ink-lightest': string;
-  +'text-jumbo': string;
-  +'text-large': string;
-  +'text-larger': string;
-  +'text-largest': string;
-  +'text-muted': string;
-  +'text-normal': string;
-  +'text-p-blue-opacity-1': string;
-  +'text-p-blue-opacity-2': string;
-  +'text-p-blue-opacity-3': string;
-  +'text-p-blue-opacity-4': string;
-  +'text-p-blue-opacity-5': string;
-  +'text-p-blue-opacity-6': string;
-  +'text-p-blue-opacity-7': string;
-  +'text-p-blue-opacity-8': string;
-  +'text-p-blue-opacity-9': string;
-  +'text-p-gold-opacity-1': string;
-  +'text-p-gold-opacity-2': string;
-  +'text-p-gold-opacity-3': string;
-  +'text-p-gold-opacity-4': string;
-  +'text-p-gold-opacity-5': string;
-  +'text-p-gold-opacity-6': string;
-  +'text-p-gold-opacity-7': string;
-  +'text-p-gold-opacity-8': string;
-  +'text-p-gold-opacity-9': string;
-  +'text-p-green-opacity-1': string;
-  +'text-p-green-opacity-2': string;
-  +'text-p-green-opacity-3': string;
-  +'text-p-green-opacity-4': string;
-  +'text-p-green-opacity-5': string;
-  +'text-p-green-opacity-6': string;
-  +'text-p-green-opacity-7': string;
-  +'text-p-green-opacity-8': string;
-  +'text-p-green-opacity-9': string;
-  +'text-p-navy-opacity-1': string;
-  +'text-p-navy-opacity-2': string;
-  +'text-p-navy-opacity-3': string;
-  +'text-p-navy-opacity-4': string;
-  +'text-p-navy-opacity-5': string;
-  +'text-p-navy-opacity-6': string;
-  +'text-p-navy-opacity-7': string;
-  +'text-p-navy-opacity-8': string;
-  +'text-p-navy-opacity-9': string;
-  +'text-p-red-opacity-1': string;
-  +'text-p-red-opacity-2': string;
-  +'text-p-red-opacity-3': string;
-  +'text-p-red-opacity-4': string;
-  +'text-p-red-opacity-5': string;
-  +'text-p-red-opacity-6': string;
-  +'text-p-red-opacity-7': string;
-  +'text-p-red-opacity-8': string;
-  +'text-p-red-opacity-9': string;
-  +'text-p-royal-opacity-1': string;
-  +'text-p-royal-opacity-2': string;
-  +'text-p-royal-opacity-3': string;
-  +'text-p-royal-opacity-4': string;
-  +'text-p-royal-opacity-5': string;
-  +'text-p-royal-opacity-6': string;
-  +'text-p-royal-opacity-7': string;
-  +'text-p-royal-opacity-8': string;
-  +'text-p-royal-opacity-9': string;
-  +'text-power-blue': string;
-  +'text-power-gold': string;
-  +'text-power-green': string;
-  +'text-power-navy': string;
-  +'text-power-navy-darker': string;
-  +'text-power-red': string;
-  +'text-power-royal': string;
-  +'text-primary': string;
-  +'text-sky': string;
-  +'text-sky-dark': string;
-  +'text-sky-light': string;
-  +'text-sky-lighter': string;
-  +'text-small': string;
-  +'text-smaller': string;
-  +'text-smallest': string;
-  +'text-success': string;
-  +'text-warning': string;
-  +'text-white': string;
-  +'text-white-opacity-1': string;
-  +'text-white-opacity-2': string;
-  +'text-white-opacity-3': string;
-  +'text-white-opacity-4': string;
-  +'text-white-opacity-5': string;
-  +'text-white-opacity-6': string;
-  +'text-white-opacity-7': string;
-  +'text-white-opacity-8': string;
-  +'text-white-opacity-9': string;
-  +'visible-xxs': string;
-|};

data/components/Text/text.scss

@@ -1,35 +0,0 @@
-@mixin text-color-classes($colors-list) {
-  @each $name, $color in $colors-list {
-    @include text-emphasis-variant(".text-#{$name}", $color);
-  }
-}
-
-@include text-color-classes($power-colors);
-@include text-color-classes($gray-colors);
-@include text-color-classes($opacity-colors);
-@include text-color-classes($interface-colors);
-
-// TEXT COLOR IN COLORS
-@include text-emphasis-variant('.text-muted', $gray-6);
-@include text-emphasis-variant('.text-primary', $brand-primary);
-@include text-emphasis-variant('.text-success', $brand-success);
-@include text-emphasis-variant('.text-info', $brand-info);
-@include text-emphasis-variant('.text-warning', $power-gold);
-@include text-emphasis-variant('.text-danger', $brand-danger);
-@include text-emphasis-variant('.text-gray-dark', $gray-8);
-
-
-// Text Size
-.text-jumbo { font-size: $font-jumbo }
-.text-largest { font-size: $font-largest }
-.text-larger { font-size: $font-larger }
-.text-large { font-size: $font-large }
-.text-normal {font-size: $font-base }
-.text-small { font-size: $font-small }
-.text-smaller { font-size: $font-smaller }
-.text-smallest { font-size: $font-smallest }
-
-// text decoration
-.font-weight-normal { font-weight: $regular; }
-.font-weight-bold   { font-weight: $bold; }
-.font-italic        { font-style: italic; }

data/components/TextInput/TextInput.jsx

@@ -1,95 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import ControlLabel from 'react-bootstrap/lib/ControlLabel'
-import FormGroup from 'react-bootstrap/lib/FormGroup'
-import FormControl from 'react-bootstrap/lib/FormControl'
-
-const isRequired = (boolean) => {
-  if (boolean) {
-    return "*"
-  }
-}
-
-/**
- * TextInput renders a bootstrapped text input field.
- *
- * @param {string} className the CSS class name(s) for the outermost returned div.
- * @param {string} controlId the CSS id name for the <input> tag.
- * @param {string} label the text to use as a label.
- * @param {string} name the text to use as a name.
- * @param {func} onChange the function to be called when the React onChange event is triggered.
- * @param {string} placeholder the text to use as a placeholder.
- * @param {string} value the text to use as a value.
- * @param {string} type the type of input (i.e. 'text', 'number'). Defaults to 'text'.
- * @param {string} validationState react-bootstrap validation state of the input, either 'success', 'warning' or 'error'.
- * @param {boolean} requiredField indicates of the input is a required field.
- * @returns {ReactElement} JSX.
- */
-
-type Props = {
-  className: string,
-  controlId: string,
-  inputClassName: string,
-  inputStyle: object,
-  label: string,
-  labelClassName: string,
-  name: string,
-  onChange: () => mixed,
-  placeholder: string,
-  requiredField: boolean,
-  type: string,
-  validationState: string,
-  value: string,
-}
-
-export default class TextInput extends React.Component<Props> {
-  static defaultProps = {
-    className: "",
-    inputClassName: "",
-    inputStyle: {},
-    labelClassName: "",
-    type: "text",
-    validationState: null,
-  }
-  props: Props
-  render() {
-    const {
-      label,
-      placeholder,
-      className,
-      labelClassName,
-      inputClassName,
-      inputStyle,
-      controlId,
-      value,
-      onChange,
-      name,
-      requiredField,
-      type,
-      validationState,
-    } = this.props
-
-    return (
-      <FormGroup
-          className={className}
-          controlId={controlId}
-          validationState={validationState}
-      >
-        <ControlLabel className={labelClassName}>
-          {label} <span>{isRequired(requiredField)}</span>
-        </ControlLabel>
-        {' '}
-        <FormControl
-            className={inputClassName}
-            defaultValue={value}
-            name={name}
-            onChange={onChange}
-            placeholder={placeholder}
-            style={inputStyle}
-            type={type}
-        />
-      </FormGroup>
-    )
-  }
-}

data/components/TextInput/TextInputStory.jsx

@@ -1,23 +0,0 @@
-import React from "react"
-import TextInput from "./TextInput"
-
-// import FormControl from 'react-bootstrap/lib/FormControl'
-
-import { text, select, boolean } from "@storybook/addon-knobs"
-
-export default function TextInputStory(stories) {
-  stories.add("Text Input",
-    () => {
-      let props = {
-        className: text("className", ""),
-        kind: select("kind", ["input", "select", "textarea"], "input"),
-        disabled: boolean("disabled", false),
-      }
-      return (
-        <div className="container my-5">
-          <TextInput {...props} />
-        </div>
-      )
-    }
-  )
-}

data/components/TextInput/form-control.scss

@@ -1,96 +0,0 @@
-// $input-border = $form-border-color
-// $form-border-color;
-
-
-// Form control focus state
-@mixin form-control-focus($color: $input-border-focus) {
-  $color-rgba: rgba(red($color), green($color), blue($color), .6);
-  &:focus {
-    outline: 0;
-    border-color: $power-navy;
-    box-shadow: inset 0 0 0 0.1rem $power-navy, inset 0 0.1rem 0.2rem 0 rgba($power-navy, $opacity-2);
-  }
-}
-
-@mixin style-placeholder {
-  &::-webkit-input-placeholder { @content; }
-  &:-moz-placeholder { @content; }
-  &::-moz-placeholder { @content; }
-  &:-ms-input-placeholder { @content; }
-}
-
-
-
-
-// select
-// textarea
-// input[type="text"]
-// input[type="password"]
-// input[type="datetime"]
-// input[type="datetime-local"]
-// input[type="date"]
-// input[type="month"]
-// input[type="time"]
-// input[type="week"]
-// input[type="number"]
-// input[type="email"]
-// input[type="url"]
-// input[type="search"]
-// input[type="tel"]
-// input[type="color"]
-
-.form-control {
-  display: block;
-  width: 100%;
-  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: $padding-base-vertical ($padding-base-horizontal/1.5);
-  font-size: $font-small;
-  font-weight: $bold;
-  line-height: $line-height-base;
-  color: $gray-9;
-  background-color: $input-bg;
-  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid $form-border-color;
-  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
-  box-shadow: none;
-  transition-property: border-color, box-shadow, color, background-color;
-	transition-duration: .24s;
-	transition-timing-function: $bezier;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  @include form-control-focus;
-
-  @include style-placeholder {
-    color: $gray-5;
-		font-style: italic;
-		font-weight: $regular;
-		@include smooth-font;
-	}
-  &[disabled],
-  fieldset[disabled] & {
-    background-color: $input-bg-disabled;
-    color: $sky-dark;
-    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
-  }
-
-  &[disabled],
-  fieldset[disabled] & {
-    cursor: $cursor-disabled;
-  }
-  &.clear {
-
-
-    // height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-    padding: $padding-base-vertical ($padding-base-horizontal/1.5);
-    // font-size: $font-small;
-    // font-weight: $bold;
-    // line-height: $line-height-base;
-    // color: $gray-9;
-    background-color: transparent;
-    background-image: none;
-    border: 0;
-
-  }
-}

data/components/TextInput/styles.scss

@@ -1,3 +0,0 @@
-@import "base-mixins/_all.scss";
-@import "base-variables/_all.scss";
-@import "form-control.scss";

data/components/TextInput/styles.scss.flow

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

data/components/TimePicker/TimePicker.jsx

@@ -1,218 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import moment from 'moment'
-
-import styles from './styles.scss'
-
-type Props = {
-  className: string,
-  clock: 24 | 12,
-  disabled: boolean | "disabled",
-  multiGroup: boolean,
-  labelInside: boolean,
-  defaultValue: string | Object,
-  onChange: () => mixed,
-  required: boolean,
-  minHour: number,
-  maxHour: number,
-}
-
-export default class TimePicker extends React.Component<Props> {
-
-  static defaultProps = {
-    clock: 12,
-    disabled: false,
-    multiGroup: true,
-    labelInside: true,
-    defaultValue: moment().hour(0).minute(0),
-    minHour: 0,
-    maxHour: 24,
-    onChange: () => {},
-  }
-
-  state = {
-    hour: '',
-    minute: '',
-  }
-
-  componentWillMount() {
-    const {defaultValue} = this.props
-    const t = moment(defaultValue)
-    const hour = t.format('HH')
-    const minute = t.format('mm')
-    if(t.isValid()) {
-      this.setState({
-        hour,
-        minute,
-      })
-      this.handleTimeChange(hour, minute)
-    }
-  }
-
-  props: Props
-
-  handleTimeChange(hour, minute) {
-    if (hour == '' && minute == '') {
-      this.props.onChange('')
-    } else {
-      this.props.onChange(`${hour}:${minute}`)
-    }
-  }
-
-  handleOnHourChange = (e) => {
-    const hour = e.target.value
-    let minute = this.state.minute
-    if (hour != '' && minute == '') {
-      minute = '00'
-    } else if (hour == '') {
-      minute = ''
-    }
-    this.setState({hour, minute})
-    this.handleTimeChange(hour, minute)
-  }
-
-  handleOnMinutesChange = (e) => {
-    let minute = e.target.value
-    const hour = this.state.hour
-    if (hour != '' && minute == '') {
-      minute = '00'
-    }
-    this.setState({minute})
-    this.handleTimeChange(hour, minute)
-  }
-
-  renderHoursSelect() {
-    let options;
-    const { minHour, maxHour } = this.props
-    options = [<option key="ts-hr-option-no"/>]
-
-    for(let i = minHour; i < maxHour; ++i) {
-      const h = moment().hour(i)
-      options.push(
-        <option
-            key={`ts-hr-option-${i}`}
-            value={h.format('HH')}
-        >
-          <Choose>
-            <When condition={this.props.clock == 12}>
-              {h.format('ha')}
-            </When>
-            <Otherwise>
-              {h.format('HH')}
-            </Otherwise>
-          </Choose>
-        </option>
-      )
-    }
-
-    let props = {
-      className: "form-control",
-      onChange: this.handleOnHourChange,
-      value: this.state.hour,
-    }
-
-    if(this.props.required) props.required = "required"
-    if(this.props.disabled) props.disabled = "disabled"
-
-    return (
-      <select
-          {...props}
-      >
-        {options}
-      </select>
-    )
-  }
-
-  renderMinsSelect() {
-    let minutes = [<option key="ts-min-option-no"/>]
-    for(let i = 0; i < 60; ++i) {
-      const m = moment().minutes(i)
-      const padMins = m.format('mm')
-      minutes.push(
-        <option
-            key={`ts-min-option-${i}`}
-            value={padMins}
-        >
-          {`:${padMins}`}
-        </option>)
-    }
-
-    let props = {
-      className: "form-control",
-      onChange: this.handleOnMinutesChange,
-      value: this.state.minute,
-      disabled: this.state.hour == ''
-    }
-    if(this.props.required) props.required = "required"
-    if(this.props.disabled) props.disabled = "disabled"
-
-    return (
-      <select
-          {...props}
-      >
-        {minutes}
-      </select>
-    )
-  }
-
-  render() {
-    const {
-      className,
-      multiGroup,
-      labelInside,
-      required
-    } = this.props;
-
-    const wrapperCSS = [
-      multiGroup ? "multi-input-group" : "form-group",
-      className,
-      styles.timePicker,
-    ]
-
-    const itemCSS = [
-      "multi-input-group-item",
-      labelInside ? "label-inside" : null
-    ]
-
-    return (
-      <div className={classnames(wrapperCSS)}>
-        <If condition={multiGroup}>
-          <div className={classnames(itemCSS)}>
-            <label>
-              <If condition={required}>{`* `}</If>
-              {`Hour`}
-            </label>
-            {this.renderHoursSelect()}
-          </div>
-          <div className={classnames(itemCSS)}>
-            <label>
-              <If condition={required}>{`* `}</If>
-              {`Minutes`}
-            </label>
-            {this.renderMinsSelect()}
-          </div>
-        <Else/>
-          <div className="col-md-6">
-            <div className="form-group">
-              <label>
-                <If condition={required}>{`* `}</If>
-                {`Hour`}
-              </label>
-              {this.renderHoursSelect()}
-            </div>
-          </div>
-          <div className="col-md-6">
-            <div className="form-group">
-              <label>
-                <If condition={required}>{`* `}</If>
-                {`Minutes`}
-              </label>
-              {this.renderMinsSelect()}
-            </div>
-          </div>
-        </If>
-      </div>
-    )
-  }
-}