playbook_ui 2.5.0

data/components/PanelGroup/PanelGroup.scss.flow

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

data/components/PanelGroup/PanelGroupStory.jsx

@@ -0,0 +1,112 @@
+import React from "react"
+import Icon from "../Icon/Icon"
+import { boolean, text, select } from "@storybook/addon-knobs"
+
+import Text from "../Text/Text"
+import PanelGroup from "./PanelGroup"
+
+function ValidationComplete() {
+  return (
+    <span className="text-power-green text-small font-weight-normal">
+      {'Complete '}
+      <Icon name="check-circle" />
+    </span>
+  )
+}
+
+function ValidationIncomplete() {
+  return (
+    <span className="text-power-red text-small font-weight-normal">
+      {'Not Complete '}
+      <Icon name="exclamation-circle" />
+    </span>
+  )
+}
+
+const userIcon = (
+  <Icon name="user" />
+)
+
+const largeUserIcon = (
+  <Icon name="user-circle" size="2x" />
+)
+
+const phoneIcon = (
+  <Icon name="phone" />
+)
+
+const homeIcon = (
+  <Icon name="home" />
+)
+
+const dollarIcon = (
+  <Icon name="usd-circle" />
+)
+
+export default function PanelGroupStory(stories) {
+  stories.add("PanelGroup", () => {
+    const outerActivePanelOptions = {
+      ["main-applicant"]: "Main Applicant",
+      ["co-applicant"]: "Co-Applicant",
+    }
+
+    const innerActivePanelOptions = {
+      ["application-info"]: "Application Info",
+      ["contact-info"]: "Contact Information",
+      ["income-sources"]: "Income Source",
+      ["home-info"]: "Applicant Home Information",
+    }
+
+    const outerPanelGroupProps = {
+      activePanel: select("Active Outer Panel Group", outerActivePanelOptions, "main-applicant", "outer-active-panel")
+    }
+
+    const innerPanelGroupProps = {
+      activePanel: select("Active Inner Panel Group", innerActivePanelOptions, "", "outer-active-panel")
+    }
+
+    return (
+      <PanelGroup {...outerPanelGroupProps}>
+        <PanelGroup.Panel icon={largeUserIcon} name="main-applicant" title="Applicant Name" subtitle="Main Applicant" notification={ValidationIncomplete()}>
+          <PanelGroup inner {...innerPanelGroupProps}>
+            <PanelGroup.Panel icon={userIcon} name="application-info" title="Application Information" notification={ValidationIncomplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+
+            <PanelGroup.Panel icon={phoneIcon} name="contact-info" title="Contact Information" notification={ValidationIncomplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+
+            <PanelGroup.Panel icon={dollarIcon} name="income-sources" title="Income Sources" notification={ValidationComplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+
+            <PanelGroup.Panel icon={homeIcon} name="home-info" title="Applicant Home Information" notification={ValidationComplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+          </PanelGroup>
+        </PanelGroup.Panel>
+
+        <PanelGroup.Panel icon={largeUserIcon} name="co-applicant" title="Co-Applicant Name" subtitle="Co-Applicant" notification={ValidationIncomplete()}>
+          <PanelGroup inner {...innerPanelGroupProps}>
+            <PanelGroup.Panel icon={userIcon} name="application-info" title="Application Information" notification={ValidationIncomplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+
+            <PanelGroup.Panel icon={phoneIcon} name="contact-info" title="Contact Information" notification={ValidationIncomplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+
+            <PanelGroup.Panel icon={dollarIcon} name="income-sources" title="Income Sources" notification={ValidationComplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+
+            <PanelGroup.Panel icon={homeIcon} name="home-info" title="Applicant Home Information" notification={ValidationComplete()}>
+              <Text>Now you see me!</Text>
+            </PanelGroup.Panel>
+          </PanelGroup>
+        </PanelGroup.Panel>
+      </PanelGroup>
+    )
+  })
+}

data/components/SearchCollectionSelect/SearchCollectionSelect.jsx

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+
+import Select from 'react-select'
+
+type Props = {
+  multi?: boolean,
+  autosize?: boolean,
+  autoload?: boolean,
+  async?: boolean,
+  disabled?: boolean,
+}
+
+export default class SearchCollectionSelect extends Component<Props> {
+  static defaultProps = {
+    multi: true,
+    autosize: true,
+    autoload: true,
+    async: true,
+    disabled: false,
+  }
+  props: Props
+  render() {
+    if(this.props.async) {
+      return <Select.Async {...this.props}/>;
+    } else {
+      return <Select {...this.props}/>;
+    }
+  }
+}

data/components/SearchCollectionSelect/SearchCollectionSelectStory.jsx

@@ -0,0 +1,48 @@
+import React from "react"
+import SearchCollectionSelect from './SearchCollectionSelect'
+
+const options = [
+  {label: "Bob Hope", value: 1},
+  {label: "Drew Barrymore", value: 2},
+  {label: "Ozzy Ozborne", value: 3},
+  {label: "Donald Obama", value: 666},
+]
+
+class Wrapper extends React.Component {
+  state = {
+    value: [],
+  }
+  handleOnChange = (value) => {
+    this.setState({value})
+  }
+  render() {
+    const {children} = this.props
+    return (
+      <div className="container my-5">
+        <div className="col-sm-6">
+          {
+            React.cloneElement(children, {
+              onChange: this.handleOnChange,
+              value: this.state.value,
+            })
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default function SearchCollectionSelectStory(stories) {
+  stories.add("Search Collection Select",
+    () => {
+      return (
+        <Wrapper>
+          <SearchCollectionSelect
+              async={false}
+              options={options}
+          />
+        </Wrapper>
+      )
+    }
+  )
+}

data/components/SideModal/SideModalStory.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import classnames from 'classnames'
+import {select,boolean} from "@storybook/addon-knobs"
+import { Modal } from "react-bootstrap"
+
+
+export default function SideModalStory(stories) {
+  stories.add("SideModal",
+    () => {
+
+      const props = {
+
+        side: select("side",['left','right'], 'left'),
+        sizeOption: select("sizeOption",['xxs','xs','sm','md','lg','xl','full','600','1000'],'xs'),
+        collapseSize: select("collapseSize",['xs','sm','md','lg'],'xs'),
+        show: boolean("show", true),
+
+      }
+
+      const side = props.side + 'Modal'
+      const sizeOption = side +'-'+ props.sizeOption
+      const collapseSize = side +'-collapse-'+props.collapseSize
+
+      return   (<Modal {...props}
+          className={classnames(side, sizeOption, collapseSize)}
+
+                />)
+
+    }
+  )
+}

data/components/Spinner/Spinner.jsx

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

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

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

data/components/Spinner/spinner.scss.flow

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

data/components/StepMeter/StepMeter.jsx

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

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