playbook_ui 2.5.0

data/components/DOBInput/story.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import moment from "moment"
+import DOBInput from "./"
+
+import { boolean, text } from "@storybook/addon-knobs"
+
+import 'react-datetime/css/react-datetime.css'
+
+export default function Story(stories) {
+  stories.add("DOBInput", () => {
+    const props = {
+      preventMinor: boolean("Prevent Minor", true),
+      viewDate: text("Default Calendar Date", moment("2000-01-01"))
+    }
+
+    return (
+      <DOBInput {...props} />
+    )
+  })
+}

data/components/DOBInput/styles.scss

@@ -0,0 +1,11 @@
+@import "base-mixins/all";
+@import "base-variables/all";
+
+.dob {
+  :global {
+    .rdtDisabled {
+      color: $gray-1 !important;
+      cursor: not-allowed !important;
+    }
+  }
+}

data/components/DOBInput/styles.scss.flow

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

data/components/DatePicker/DatePicker.jsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import classnames from 'classnames'
+import Icon from '../Icon/Icon'
+import {
+  FormControl,
+  ControlLabel,
+  FormGroup,
+  InputGroup,
+  HelpBlock,
+} from 'react-bootstrap'
+
+import moment from 'moment'
+require('moment-timezone')
+
+import Datetime from 'react-datetime'
+
+import style from './styles.scss'
+
+export type Props = {
+  className: string,
+  errorMessage?: ?string,
+  inputProps: Object<{ type: "text" }>,
+  isValidDate: () => boolean,
+  labelInside: boolean,
+  labelText: string,
+  multiInput: boolean,
+  onChange: (any) => void,
+  dateFormat: string,
+  timeFormat: string,
+  closeOnSelect: boolean,
+  timeZone: string,
+  required: boolean,
+  floatAbove: boolean,
+  value: string,
+};
+
+export default class DatePicker extends React.Component<Props> {
+
+  static defaultProps = {
+    className: "",
+    errorMessage: null,
+    inputProps: {
+      type: "text",
+    },
+    onChange: function() {},
+    labelInside: true,
+    multiInput: false,
+    dateFormat: "MM/DD/YYYY",
+    closeOnSelect: true,
+    timeZone: null,
+  }
+
+  state = {
+    valid: true,
+  }
+  props: Props
+
+  fieldFormat = () => {
+    const { timeFormat, dateFormat } = this.props
+    return timeFormat && timeFormat !== "" ? "YYYY-MM-DDTHH:mm:00Z" : dateFormat
+  }
+
+  handleOnChange = (dateTime) => {
+    const { timeZone, onChange } = this.props
+
+    if(dateTime.isValid()) {
+      this.setState({ valid: true })
+      const date = timeZone ? moment.tz(dateTime) : dateTime
+      onChange(date.format(this.fieldFormat()))
+    } else {
+      this.setState({ valid: false })
+      onChange("")
+    }
+  }
+
+  renderInput = (inputProps, openCalendar) => {
+    const {
+      labelText,
+      required,
+      labelInside,
+      errorMessage,
+      multiInput,
+    } = this.props
+
+    return (
+      <FormGroup
+          className={classnames({ 'label-inside': labelInside })}
+          validationState={!this.state.valid || errorMessage ? 'error' : undefined}
+      >
+        <ControlLabel>
+          <If condition={required}>{`* `}</If>
+          {labelText}
+        </ControlLabel>
+        <InputGroup>
+          <FormControl {...inputProps}/>
+          <span
+              className={classnames('input-group-addon', { multi: multiInput })}
+              onClick={openCalendar}
+          >
+            <Icon name="calendar"/>
+          </span>
+        </InputGroup>
+        <If condition={errorMessage}>
+          <HelpBlock>{errorMessage}</HelpBlock>
+        </If>
+      </FormGroup>
+    )
+  }
+
+  dateTimeProps = () => {
+    const {
+      className,
+      dateFormat,
+      timeFormat,
+      closeOnSelect,
+      timeZone,
+      required,
+      multiInput,
+      floatAbove,
+      ...props
+    } = this.props
+
+    const inputProps = this.props.inputProps
+    if (required) inputProps.required = "required"
+
+    return {
+      className: classnames(
+        className, "react-datetime",
+         { 'multi-input-group-item': multiInput, [style.above]: floatAbove }
+      ),
+      closeOnSelect,
+      dateFormat,
+      inputProps,
+      onChange: this.handleOnChange,
+      renderInput: this.renderInput,
+      timeFormat,
+      timeZone,
+      value: this.formattedValue(),
+      ...props,
+    }
+  }
+
+  formattedValue = () => {
+    const { value } = this.props
+    if (!value) {
+      return ''
+    }
+    return moment(value).format(this.fieldFormat())
+  }
+
+  render() {
+    return (
+      <Datetime {...this.dateTimeProps()}/>
+    )
+  }
+}

data/components/DatePicker/DatePickerStory.jsx

@@ -0,0 +1,22 @@
+import React from "react"
+import DatePicker from "./DatePicker"
+
+import { text, boolean } from "@storybook/addon-knobs"
+
+export default function DatePickerStory(stories) {
+  stories.add("DatePicker",
+    () => {
+      const props = {
+        labelText: text("Label", "Date"),
+        disabled: boolean("Disabled", false),
+        floatAbove: boolean("Float Above", false),
+        timeFormat: text("Time Format", undefined),
+        errorMessage: text("Error Message", undefined),
+        onChange: () => {},
+      }
+      return (
+        <DatePicker {...props}/>
+      )
+    }
+  )
+}

data/components/DatePicker/styles.scss

@@ -0,0 +1,6 @@
+.above {
+  :global .rdtPicker {
+      top: auto;
+      bottom: 100%;
+  }
+}

data/components/DatePicker/styles.scss.flow

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

data/components/DateTimePicker/DateTimePicker.jsx

@@ -0,0 +1,109 @@
+import React from "react"
+import classnames from "classnames"
+import moment from "moment"
+
+import DatePicker from "../DatePicker/DatePicker"
+import TimePicker from "../TimePicker/TimePicker"
+
+import styles from './styles.scss'
+
+type Props = {
+  className: string,
+  datePickerProps: Object<{
+    disabled: boolean | "disabled",
+    dateFormat: string,
+    timeFormat: string,
+  }>,
+  defaultValue: string | Object,
+  onChange: () => mixed,
+  timePickerProps: Object<{
+    clock: 12 | 24,
+    disabled: boolean | "disabled",
+    multiGroup: boolean,
+    labelInside: boolean,
+  }>
+}
+
+export default class DateTimePicker extends React.Component<Props> {
+
+  static defaultProps = {
+    className: "",
+    datePickerProps: {
+      disabled: false,
+      dateFormat: "MM/DD/YYYY",
+      timeFormat: "",
+    },
+    defaultValue: null,
+    timePickerProps: {
+      clock: 12,
+      disabled: false,
+      multiGroup: true,
+      labelInside: true,
+    }
+  }
+
+  state = {
+    date: null,
+    time: null,
+  }
+
+  props: Props
+
+  formatDateTime = (date, time) => (
+    `${date.format(this.props.datePickerProps.dateFormat || "MM/DD/YYYY")} ${time}`
+  )
+
+  handleOnDateChanged = (date) => {
+    const {time} = this.state
+    this.setState({date})
+    if(!time) return
+    this.props.onChange(this.formatDateTime(date, time))
+  }
+
+  handleOnTimeChanged = (time) => {
+    const {date} = this.state
+    this.setState({time})
+    if(!date) return
+    this.props.onChange(this.formatDateTime(date, time))
+  }
+
+  render() {
+    const {
+      className,
+      datePickerProps,
+      defaultValue,
+      timePickerProps,
+    } = this.props
+
+    const defaultDate = moment(defaultValue)
+    let defaultDateValue
+    if (defaultValue) {
+      defaultDateValue = defaultDate.isValid() ? defaultDate.format(datePickerProps.dateFormat || "MM/DD/YYYY") : null
+    }
+
+    const css = [
+      className,
+      styles.dateTimePicker,
+    ]
+
+    return (
+      <div className={classnames(css)}>
+        <div className="multi-input-group full form-group">
+          <DatePicker
+              defaultValue={defaultDateValue}
+              multiInput
+              onChange={this.handleOnDateChanged}
+              {...datePickerProps}
+          />
+          <div className="form-group multi-input-group-item">
+            <TimePicker
+                defaultValue={defaultValue}
+                onChange={this.handleOnTimeChanged}
+                {...timePickerProps}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

data/components/DateTimePicker/DateTimePickerStory.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import DateTimePicker from "./DateTimePicker"
+
+import { select, boolean, number } from "@storybook/addon-knobs"
+
+import styles from './story-styles.scss'
+
+export default function DateTimePickerStory(stories) {
+  stories.add("DateTimePicker",
+    () => {
+      const props = {
+        datePickerProps: {
+          labelText: "Date",
+          disabled: boolean("datePickerProps.disabled", false),
+          timeFormat: ""
+        },
+        timePickerProps: {
+          clock: select("timePickerProps.clock", [12, 24], 12),
+          disabled: boolean("timePickerProps.disabled", false),
+          minHour: number('timePickerProps.minHour', 0, { range: true, min: 0, max: 24, step: 1}),
+          maxHour: number('timePickerProps.maxHour', 24, { range: true, min: 0, max: 24, step: 1}),
+        },
+        onChange: () => {},
+        className: styles.root,
+      }
+      return (
+        <DateTimePicker {...props}/>
+      )
+    }
+  )
+}

data/components/DateTimePicker/story-styles.scss

@@ -0,0 +1,3 @@
+.root {
+  margin-top: 250px;
+}

data/components/DateTimePicker/story-styles.scss.flow

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

data/components/DateTimePicker/styles.scss

@@ -0,0 +1 @@
+.dateTimePicker {}

data/components/DateTimePicker/styles.scss.flow

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

data/components/Errors/Errors.jsx

@@ -0,0 +1,38 @@
+/* @flow */
+
+import React from 'react'
+import { uniqueId } from 'lodash'
+import { Alert } from 'react-bootstrap'
+
+/**
+* Errors
+* Displays the given {@messages} in a list format, inside a red alert box.
+*
+* @param {Array<String>} props.messages The error messages to be displayed
+*/
+
+type Props = {
+  messages: Array<string>,
+}
+
+export default class Errors extends React.Component<Props> {
+  static defaultProps = {
+    messages: ["Something went wong"]
+  }
+  props: Props
+  render() {
+    const { messages } = this.props
+    return (
+      <Alert
+          bsStyle="danger"
+          className="errors"
+      >
+        <ul>
+          {messages.map(m => (
+            <li key={uniqueId()}>{m}</li>
+          ))}
+        </ul>
+      </Alert>
+    )
+  }
+}

data/components/FileCard/FileCard.jsx

@@ -0,0 +1,183 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+import Icon from '../Icon/Icon'
+import Panel from '../Panel/Panel'
+import Text from '../Text/Text'
+
+import { Popover, OverlayTrigger } from 'react-bootstrap'
+
+import styles from './styles.scss'
+
+type FileType = 'file-excel' | 'file-pdf' | 'file-word' | 'file-image' | 'file-powerpoint' | 'file-video' | 'file-text' | 'file-zip' | 'file-code' | 'file-sound' | 'file'
+
+type Props = {
+  className: string,
+  description: string,
+  displayName: string,
+  downloadUrl: string,
+  layout: string,
+  openNewTab: boolean,
+  type: FileType,
+  hasProtection: boolean,
+  hasAccess: boolean,
+  children: Array<Component>
+}
+
+export default class FileCard extends React.Component<Props> {
+  static defaultProps = {
+    className: '',
+    layout: 'vertical',
+    openNewTab: false,
+    type: 'file',
+    hasProtection: false,
+    hasAccess: true,
+  }
+  props: Props
+
+  renderIcon() {
+    const {
+      downloadUrl,
+      openNewTab,
+      displayName,
+      type,
+      hasAccess,
+    } = this.props
+    const IconComponent = (
+      <Icon
+          className={styles[`icon-large`]}
+          label=''
+          name={`${type}`}
+          size='lg'
+          title={displayName}
+      />
+    )
+    return (
+      <If condition={downloadUrl && hasAccess}>
+        <a
+            href={downloadUrl}
+            target={openNewTab ? '_blank' : '_parent'}
+        >
+          {IconComponent}
+        </a>
+      <Else/>
+        {IconComponent}
+      </If>
+    )
+  }
+
+  renderDisplayName() {
+    const {
+      displayName,
+      downloadUrl,
+      openNewTab
+    } = this.props
+    const DisplayNameComponent = (
+      <Text
+          bold='true'
+          color={'ink-light'}
+      >{displayName}</Text>
+    )
+    return (
+      <h5 className='m-0'>
+        <If condition={downloadUrl}>
+          <a
+              href={downloadUrl}
+              target={openNewTab ? '_blank' : '_parent'}
+          >
+            {DisplayNameComponent}
+          </a>
+        <Else/>
+          {DisplayNameComponent}
+        </If>
+      </h5>
+    )
+  }
+
+  renderDescription() {
+    const {
+      description
+    } = this.props
+    return (
+      <p className='m-0'>
+        <Text color={'ink-lighter'}>{description}</Text>
+      </p>
+    )
+  }
+
+  renderLockIcon() {
+    const { hasAccess, hasProtection } = this.props
+    const lock = hasAccess ? 'unlock' : 'lock'
+
+    if (!hasProtection) {
+      return null
+    }
+
+    const popoverPrivacy = (
+      <Popover id="privacy-protected">
+        {'Privacy Protected'}
+      </Popover>
+    );
+
+    if (hasAccess) {
+      return (
+        <div>
+          <Icon
+              name={lock}
+              size={'lg'}
+          />
+        </div>
+      )
+    } else {
+      return (
+        <OverlayTrigger
+            overlay={popoverPrivacy}
+            placement="top"
+            trigger={['hover', 'focus']}
+        >
+          <div>
+            <Icon
+                name={lock}
+                size={'lg'}
+            />
+          </div>
+        </OverlayTrigger>
+      )
+    }
+
+  }
+
+  render() {
+    const {
+      className,
+      description,
+      displayName,
+      layout,
+      children
+    } = this.props
+    const css = [
+      className,
+      styles['file-card'],
+      styles[`layout-${layout}`],
+    ]
+    return (
+      <Panel bodyClass={'p-0'}>
+        <div className={classnames(css)}>
+          <div className={styles['lock']}>
+            {this.renderLockIcon()}
+          </div>
+          <div className={styles['file-type-box']}>
+            {this.renderIcon()}
+          </div>
+          <div className={styles['file-content-box']}>
+            <If condition={displayName}>{this.renderDisplayName()}</If>
+            <If condition={description}>{this.renderDescription()}</If>
+            <If condition={children}>{children}</If>
+          </div>
+        </div>
+      </Panel>
+    )
+  }
+}