playbook_ui 2.5.0

data/components/Banner/BannerStory.jsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+import { boolean, select } from "@storybook/addon-knobs"
+
+import Banner from "./Banner"
+
+export default function BannerStory(stories) {
+  const props = {
+    position: select("position", ["top", "bottom"], "top"),
+    show: boolean("show", 1),
+    style: select("style", ["info", "success", "warning", "danger"], "success"),
+  }
+  stories.add("Banner", () => {
+    return (
+      <Banner
+          {...props}
+      >
+        {`You are a success!`}
+      </Banner>
+    )
+  })
+}

data/components/Banner/styles.scss

@@ -0,0 +1,75 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+$notifyHeight: 64px;
+
+@mixin banner {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  text-align: center;
+  height: $notifyHeight;
+  padding: $space-base * 1.5 $space-base * 2;
+  color: $sky-lighter;
+  font-size: $font-large;
+  @include transition-property(top, bottom);
+  @include transition-duration(.5s);
+  @include transition-timing-function(ease);
+
+  @include tablet-and-below {
+    font-size: $font-base;
+    padding: $space-base * 2;
+    &-close {
+      font-size: $font-small;
+    }
+  }
+
+  a {
+    color: $sky-lighter;
+    text-decoration: underline;
+  }
+}
+
+.banner {
+  &-info {
+    @include banner;
+    background: $power-blue;
+  }
+  &-success {
+    @include banner;
+    background: $power-green;
+  }
+  &-warning {
+    @include banner;
+    background: $dark-orange;
+  }
+  &-danger {
+    @include banner;
+    background: $power-red;
+  }
+}
+
+.close {
+  color: $sky-lighter;
+  opacity: 1;
+  font-size: $font-largest;
+  font-weight: 300;
+}
+
+.show {
+  &-top {
+    top: 0;
+  }
+  &-bottom {
+    bottom: 0;
+  }
+}
+.hide {
+  &-top {
+    top: -$notifyHeight;
+  }
+  &-bottom {
+    bottom: -$notifyHeight;
+  }
+}

data/components/Banner/styles.scss.flow

@@ -0,0 +1,19 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'banner-danger': string;
+  +'banner-danger-close': string;
+  +'banner-info': string;
+  +'banner-info-close': string;
+  +'banner-success': string;
+  +'banner-success-close': string;
+  +'banner-warning': string;
+  +'banner-warning-close': string;
+  +'close': string;
+  +'hidden-xxs': string;
+  +'hide-bottom': string;
+  +'hide-top': string;
+  +'show-bottom': string;
+  +'show-top': string;
+  +'visible-xxs': string;
+|};

data/components/Button/Button.jsx

@@ -0,0 +1,75 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { IconType } from "../types"
+
+type Props = {
+  className: string,
+  disabled: boolean,
+  icon: IconType,
+  onClick: () => mixed,
+  text: string,
+  type: "anchor" | "button" | "submit" | "",
+}
+
+export default class Button extends React.Component<Props> {
+  static defaultProps = {
+    text: "button",
+  }
+  props: Props
+  createElementTag = () => {
+    const {
+      className,
+      disabled,
+      icon,
+      onClick,
+      text,
+      type
+    } = this.props
+    let tag
+    let props = {}
+    switch(type) {
+      case "anchor":
+        tag = "a"
+      break
+      case "button":
+        tag = "input"
+        props.type = "button"
+        props.value = text
+      break
+      case "submit":
+        tag = "input"
+        props.type = "submit"
+        props.value = text
+      break
+      default:
+        tag = "span"
+      break
+    }
+    const css = [
+      "btn",
+      className,
+
+    ]
+    props.onClick = onClick
+    props.className = classnames(css)
+    if(disabled) props.disabled = true
+
+    const element = React.createElement(tag, props)
+
+    if(tag === "input") {
+      return <element.type {...element.props} />
+    } else {
+      return (
+        <element.type {...element.props}>
+          <If condition={icon}>{icon}</If>
+          {text}
+        </element.type>
+      )
+    }
+  }
+  render() {
+    return this.createElementTag()
+  }
+}

data/components/Button/ButtonStory.jsx

@@ -0,0 +1,94 @@
+import React from "react"
+import classnames from 'classnames'
+import { Button } from "react-bootstrap"
+import Icon from "../Icon/Icon"
+import { text, select } from "@storybook/addon-knobs"
+
+
+
+export default function ButtonStory(stories) {
+  stories.add("Solid Buttons",
+    () => {
+      let props = {
+        className: text("className", "btn-default"),
+        text: text("text", "Click Me"),
+        type: select("type", ["anchor", "button", "submit", ""], "button"),
+        cap: select("cap",["left", "right", "top", "bottom","none"],"none"),
+      }
+
+      const cap = `cap-${props.cap}`
+
+
+      return (
+        <div className="container my-5">
+          <div className="row">
+            <div className="col-sm-2">
+              <Button {...props} className={classnames(cap,props.className)}>Default</Button>
+            </div>
+            <div className="col-sm-2">
+              <Button className="btn-primary" type="button">Power Royal</Button>
+            </div>
+            <div className="col-sm-2">
+              <Button className="btn-success" type="button">Power Green</Button>
+            </div>
+            <div className="col-sm-2">
+              <Button className="btn-danger" type="button">Power Red</Button>
+            </div>
+            <div className="col-sm-2">
+              <Button className="btn-link" type="button">Link Button</Button>
+            </div>
+          </div>
+        </div>
+      )
+    }
+  )
+
+  stories.add("Ghost Buttons",
+    () => {
+      const props = {
+        className: text("className", "btn-ghost-power-royal"),
+      }
+
+      const cap = `cap-${props.cap}`
+
+      return (
+        <div className="row">
+          <div className="col-sm-3">
+            <Button {...props}>
+            Power Royal
+            </Button>
+          </div>
+          <div className="col-sm-3">
+            <Button className="btn-ghost-power-green">
+              Power Green
+            </Button>
+          </div>
+          <div className="col-sm-3">
+            <Button className="btn-ghost-power-red">
+            Power Red
+            </Button>
+          </div>
+        </div>
+      )
+    }
+  )
+
+
+
+  stories.add("Card Toggle Buttons",
+    () => {
+      const props = {
+        className: text("className", "btn-card-toggle"),
+        type: select("type", ["anchor", "button", "submit", ""], "button")
+      }
+
+      return (
+          <Button {...props}>
+            <Icon name="chevron-down" />
+          </Button>
+      )
+    }
+  )
+
+
+}

data/components/Capping/CappingStory.jsx

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

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

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

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

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