playbook_ui 2.5.0

data/components/CircleButton/styles.scss

@@ -0,0 +1,33 @@
+$circleButtonSizes:
+  "md" 48px 16px,
+  "lg" 56px 20px;
+
+// @mixin config-sizes($prefix){
+//   @each $size in $circleButtonSizes($prefix) {
+//     .#{$prefix}-#{nth($size,1)} {
+//       text-align: center;
+//       border-radius: 100%;
+//       height: #{nth($size, 1)};
+//       width: #{nth($size, 1)};
+//       font-size: #{nth($size, 2)};
+//     }
+//   }
+// }
+//
+// @include config-sizes("circleButton");
+
+    .circleButton-md {
+      text-align: center;
+      border-radius: 100%;
+      height: 48px;
+      width: 48px;
+      font-size: 16px;
+    }
+
+    .circleButton-lg {
+      text-align: center;
+      border-radius: 100%;
+      height: 56px;
+      width: 56px;
+      font-size: 20px;
+    }

data/components/CircleButton/styles.scss.flow

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

data/components/CollapsibleCard/CollapsibleCard.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import classnames from 'classnames'
+import Card from '../Card/Card'
+import Icon from '../Icon/Icon'
+import AnimateHeight from 'react-animate-height'
+import { Button } from "react-bootstrap"
+
+
+export type CollapsibleCardProps = {
+  children: React.ChildrenArray<React.Element<typeof Main | Content >>,
+  className: string,
+}
+
+const CollapsibleCardMain = () => null;
+const CollapsibleCardContent = () => null;
+
+class CollapsibleCard extends React.Component<Props> {
+  static CollapsibleCardMain: Function
+  static CollapsibleCardContent: Function
+
+  static defaultProps = {
+    children: null,
+  }
+
+  props: Props
+
+  state = {
+    height: 0,
+  }
+
+  constructor() {
+    super()
+  }
+
+  toggleExpand() {
+    const { height } = this.state;
+
+    this.setState({
+      height: height === 0 ? 'auto' : 0,
+    })
+  }
+
+  renderTop() {
+    const { children } = this.props;
+    const content = React.Children.map(children, child => {
+      if (child.type.displayName === 'CollapsibleCardMain' || child.type.name === 'CollapsibleCardMain') {
+        return React.cloneElement(child)
+      }
+    });
+    return (
+      <div className="collapsible-card-top-content">{content.length > 0 ? content[0].props.children : '' }</div>
+    );
+  }
+
+  renderContent() {
+    const { children } = this.props;
+    const height = this.state.height;
+    const content = React.Children.map(children, child => {
+      if (child.type.displayName === 'CollapsibleCardContent' || child.type.name === 'CollapsibleCardContent') {
+        return React.cloneElement(child)
+      }
+    });
+    return (
+      <AnimateHeight
+        duration={ 500 }
+        height={ height }
+        className="collapsible-card-hidden"
+      >
+        <div className="collapsible-card-hidden-content">
+          {content.length > 0 ? content[0].props.children : '' }
+        </div>
+      </AnimateHeight>
+    );
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      main,
+    } = this.props
+    const { height } = this.state
+    const css = classnames([
+      "collapsible-card",
+      className
+    ])
+
+
+
+    return (
+      <Card className={css}>
+        {this.renderTop()}
+        <Button className={'btn-default btn-card-toggle'} onClick={() => this.toggleExpand()} >
+          <If condition={height === 0}>
+            <Icon name="chevron-down" />
+          <Else/>
+            <Icon name="chevron-up" />
+          </If>
+        </Button>
+        {this.renderContent()}
+      </Card>
+    )
+  }
+}
+
+CollapsibleCard.Main = CollapsibleCardMain
+CollapsibleCard.Content = CollapsibleCardContent
+export default CollapsibleCard

data/components/CollapsibleCard/CollapsibleCardStory.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import CollapsibleCard from "./CollapsibleCard"
+
+import { text } from "@storybook/addon-knobs"
+
+export default function CollapsibleCardStory(stories) {
+  stories.add("Collapsible Card", () => {
+    const props = {
+      className: text("className", ""),
+    }
+    return (
+      <CollapsibleCard {...props} >
+        <CollapsibleCard.Main>
+          <div className={'p-5'}>
+            {`I am a card. Now build something amazing!`}
+          </div>
+        </CollapsibleCard.Main>
+        <CollapsibleCard.Content>
+          <div className={'p-5'}>
+            {`I am some hidden content!`}
+          </div>
+        </CollapsibleCard.Content>
+      </CollapsibleCard>
+    )
+  })
+}

data/components/Color/Color.jsx

@@ -0,0 +1,55 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import _ from 'lodash'
+
+import Text from "../Text/Text"
+import styles from './styles.scss'
+import colors from '../../sass-mixins/base-variables/_colors-export.scss'
+
+type Props = {
+  children?: Array<React.Node>,
+  colors: Object,
+  className: string,
+}
+
+export default class Color extends React.Component<Props> {
+  static defaultProps = {
+    className: "",
+    colors: colors,
+  }
+  props: Props
+  render() {
+    const {
+      className,
+      colors,
+    } = this.props
+    const css = [
+      className,
+      styles['color-swatch'],
+    ]
+
+    const colorMap = new Map(Object.entries(colors));
+    let colorList = []
+    colorMap.forEach(function(value, key, map) {
+      colorList.push(
+        <div className="col-sm-2 text-center mb-5" key={value}>
+          <div className={classnames(css)} style={{backgroundColor: value }}></div>
+          <div className="color-name"><Text color="ink-lighter" size="small">{key}</Text></div>
+          <div className="color-value"><Text color="sky-dark" size="smaller">{value}</Text></div>
+
+        </div>
+      )
+    });
+
+    return (
+      <div className="container my-5">
+        <div className="row">
+          {colorList}
+        </div>
+      </div>
+    );
+
+  }
+}

data/components/Color/ColorStory.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import Color from "./Color"
+
+import { text, select, boolean } from "@storybook/addon-knobs"
+
+export default function ColorStory(stories) {
+  stories.add("Colors",
+    () => {
+      let props = {
+      }
+      return (
+        <Color {...props} />
+      )
+    }
+  )
+}

data/components/Color/styles.scss

@@ -0,0 +1,6 @@
+.color-swatch {
+  width: 80px;
+  height: 80px;
+  margin: auto;
+  border-radius: 1000px;
+}

data/components/Color/styles.scss.flow

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

data/components/ColorPickerInput/ColorPickerInput.jsx

@@ -0,0 +1,99 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import { ChromePicker } from 'react-color'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
+
+import styles from './colorPickerInput.scss'
+
+type Props = {
+  className: string,
+  color: string,
+  disableAlpha: boolean,
+  onChange: () => mixed,
+}
+
+export default class ColorPickerInput extends Component<Props> {
+  static defaultProps = {
+    color: '',
+    disableAlpha: true,
+    onChange: function() {},
+  }
+
+  state = {
+    showPicker: false,
+  }
+
+  props: Props
+
+  handleOnInputFocus = () => {
+    this.setState({
+      showPicker: true,
+    })
+  }
+
+  handleOnInputBlur = () => {
+    this.setState({
+      showPicker: false,
+    })
+  }
+
+  handleOnChange = (e) => {
+    this.props.onChange(e.target.value)
+  }
+
+  render() {
+    const {
+      className,
+      color,
+      disableAlpha,
+      onChange,
+    } = this.props
+
+    const css = classnames([
+      className,
+      styles['color-picker-input'],
+    ])
+
+    const cancelFocus = (e) => {
+      if(e.target.tagName === "INPUT") {
+        setTimeout(() => {
+          this.setState({showPicker: true})
+        }, 100)
+      }
+    }
+
+    const popover = (
+      <Popover
+          className={styles.popover}
+          placement="bottom"
+      >
+        <div onClick={cancelFocus}>
+          <ChromePicker
+              color={color}
+              disableAlpha={disableAlpha}
+              onChange={onChange}
+          />
+        </div>
+      </Popover>
+    )
+
+    return (
+      <div
+          className={css}
+      >
+      <If condition={this.state.showPicker}>
+        {popover}
+      </If>
+      <input
+          onBlur={this.handleOnInputBlur}
+          onChange={this.handleOnChange}
+          onFocus={this.handleOnInputFocus}
+          type="text"
+          value={color.hex || color}
+      />
+      </div>
+    )
+  }
+}

data/components/ColorPickerInput/ColorPickerInputStory.jsx

@@ -0,0 +1,37 @@
+import React from "react"
+import ColorPickerInput from './ColorPickerInput'
+
+class Wrapper extends React.Component {
+  state = {
+    color: '#000'
+  }
+
+  handleOnChange = (color) => {
+    this.setState({color})
+  }
+
+  render() {
+    const {
+      color,
+    } = this.state
+
+    const child = React.cloneElement(this.props.children, {
+      color,
+      onChange: this.handleOnChange,
+    })
+
+    return child
+  }
+}
+
+export default function ColorPickerStory(stories) {
+  stories.add("ColorPickerInput",
+    () => {
+      return (
+        <Wrapper>
+          <ColorPickerInput/>
+        </Wrapper>
+      )
+    }
+  )
+}

data/components/ColorPickerInput/colorPickerInput.scss

@@ -0,0 +1,10 @@
+@import "base-variables/_spacing.sass";
+
+.color-picker-input {
+  position: relative;
+  bottom: 0;
+}
+
+.popover {
+  top: $space-base * 3;
+}

data/components/ColorPickerInput/colorPickerInput.scss.flow

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

data/components/DOBInput/index.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import moment from "moment"
+import classnames from "classnames"
+import { DatePicker, Props as DatePickerProps } from "../"
+
+import styles from "./styles.scss"
+
+export type Props = {
+  ...DatePickerProps,
+  preventMinor: boolean,
+}
+
+const eighteenYearsAgo = moment().subtract(18, "years")
+const isNotMinor = (currentDate, selectedDate) =>
+  currentDate.isBefore(eighteenYearsAgo)
+
+const DOBInput = ({ className, preventMinor, isValidDate, viewDate, ...props }) => {
+  className = classnames(className, styles.dob)
+
+  if (preventMinor) {
+    props.viewDate = viewDate || eighteenYearsAgo
+    props.isValidDate = isValidDate || isNotMinor
+  }
+
+  return (
+    <DatePicker {...props} className={className} />
+  )
+}
+
+DOBInput.defaultProps = {
+  value: "",
+  preventMinor: false,
+}
+
+export default DOBInput