playbook_ui 2.7.2 → 2.8.1

data/components/Capping/CappingStory.jsx

@@ -1,21 +0,0 @@
-import React from "react"
-import { text, select} from "@storybook/addon-knobs"
-import Button from "../Button/Button"
-import classnames from 'classnames'
-
-export default function CappingStory(stories) {
-  stories.add("Capping",
-    () => {
-      let props = {
-        className: text("className", "btn-primary"),
-        cap: select("cap",["left", "right", "top", "bottom","none"],"left"),
-      }
-
-      const cap = `cap-${props.cap}`
-
-      return <Button {...props} className={classnames(cap,props.className)} />
-
-
-    }
-  )
-}

data/components/Card/Card.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-
-export type CardProps = {
-  children: string | React.Node | Array<React.Node>,
-  shadow?: Boolean,
-  shadowShallow?: Boolean,
-  shadowDeep?: Boolean,
-  shadowDeeper?: Boolean,
-  shadowDeepest?: Boolean,
-}
-
-export default class Card extends React.Component<Props> {
-  static defaultProps = {
-    children: null,
-    shadow: false,
-    shadowShallow: false,
-    shadowDeep: false,
-    shadowDeeper: false,
-    shadowDeepest: false,
-  }
-  props: Props
-  render() {
-    const {
-      children,
-      className,
-      shadow,
-      shadowShallow,
-      shadowDeep,
-      shadowDeeper,
-      shadowDeepest,
-    } = this.props
-    const css = classnames([
-      "card",
-      className,
-    ])
-    return (
-      <div className={css}>
-        { children }
-      </div>
-    )
-  }
-}

data/components/Card/CardStory.jsx

@@ -1,19 +0,0 @@
-import React from "react"
-import Card from "./Card"
-
-import { text, boolean } from "@storybook/addon-knobs"
-
-export default function CardStory(stories) {
-  stories.add("Card", () => {
-    const props = {
-      className: text("className", "p-5"),
-    }
-    return (
-      <Card
-          {...props}
-      >
-        {`I am a card. Now build something amazing!`}
-      </Card>
-    )
-  })
-}

data/components/CircleButton/CircleButton.jsx

@@ -1,51 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import Icon from '../Icon/Icon.jsx'
-import classnames from 'classnames'
-
-type Props = {
-  className:string,
-  iconName:string,
-  size:string,
-  color: string,
-  iconColor:string,
-  name:string,
-
-}
-
-export default class CircleButton extends React.Component<Props> {
-  static defaultProps = {
-    color:"",
-    size:"",
-    textColor:"",
-    iconName:"",
-    className:"circlebutton",
-
-
-  }
-  props: Props
-
-  render() {
-
-    const {
-      size,
-      color,
-      iconName,
-      iconColor,
-      className,
-    } = this.props
-
-
-
-    return (
-
-        <div>
-          <button className={`${classnames(color,iconColor,className)} circlebutton-${size} border-0 shadow-default`}>
-            <Icon name={iconName}/>
-          </button>
-        </div>
-    )
-
-  }
-}

data/components/CircleButton/CircleButtonStory.jsx

@@ -1,25 +0,0 @@
-import React from "react"
-import CircleButton from "./CircleButton"
-import { text, select,} from "@storybook/addon-knobs"
-
-
-
-
-export default function CircleButtonStory(stories) {
-  stories.add("Circle Button",
-    () => {
-      const props = {
-        className: text("className", "circlebutton"),
-        size: select("sizeOption",['md','lg',],'md'),
-        iconColor:text("iconColor","text-white"),
-        iconName: text("iconName","plus"),
-        color:text("color","bg-power-green"),
-      }
-
-
-
-      return (<CircleButton {...props}/>
-      )
-    }
-  )
-}

data/components/CircleButton/styles.scss

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

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

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

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

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

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

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

data/components/Color/styles.scss.flow

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

data/components/ColorPickerInput/ColorPickerInput.jsx

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