playbook_ui 2.7.2 → 2.8.1

data/components/Badge/labels.scss

@@ -1,121 +0,0 @@
-//== Labels
-//
-//##
-
-//** Default label background color
-$label-default-bg:            $gray-light !default;
-//** Primary label background color
-$label-primary-bg:            $brand-primary !default;
-//** Success label background color
-$label-success-bg:            $brand-success !default;
-//** Info label background color
-$label-info-bg:               $brand-info !default;
-//** Warning label background color
-$label-warning-bg:            $brand-warning !default;
-//** Danger label background color
-$label-danger-bg:             $brand-danger !default;
-
-//** Default label text color
-$label-color:                 #fff !default;
-//** Default text color of a linked label
-$label-link-hover-color:      #fff !default;
-
-
-
-
-
-
-// Labels
-
-@mixin label-variant($color) {
-  background-color: $color;
-  @include text-color($color);
-  @if $color == $white {
-    border: 1px solid $border-color;
-  }
-
-  &[href] {
-    &:hover,
-    &:focus {
-      background-color: darken($color, 10%);
-    }
-  }
-}
-
-
-
-
-
-
-
-//
-// Labels
-// --------------------------------------------------
-
-.label {
-  display: inline;
-  padding: .15em .8em;
-  font-size: 75%;
-  font-weight: $bold;
-  @include smooth-font;
-  line-height: 1;
-  color: $label-color;
-  background: $label-default-bg;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
-
-  table & {
-    @include smooth-font-off;
-  }
-
-
-  // Colors
-  // Contextual variations (linked badges get darker on :hover)
-
-  &-default {
-    @include label-variant($white);
-  }
-  &-primary {
-    @include label-variant($power-royal);
-  }
-  &-success {
-    @include label-variant($power-green);
-  }
-  &-info {
-    @include label-variant($medium-teal);
-  }
-  &-warning {
-    @include label-variant($dark-orange);
-  }
-  &-danger {
-    @include label-variant($power-red);
-  }
-  &-inverse {
-    @include label-variant($ink);
-  }
-
-
-
-  // Empty labels collapse automatically (not available in IE8)
-  &:empty {
-    display: none;
-  }
-
-  // Quick fix for labels in buttons
-  .btn & {
-    position: relative;
-    top: -1px;
-  }
-}
-
-// Add hover effects, but only for links
-a.label {
-  &:hover,
-  &:focus {
-    color: $label-link-hover-color;
-    text-decoration: none;
-    cursor: pointer;
-  }
-}

data/components/Badge/styles.scss

@@ -1,4 +0,0 @@
-@import "base-mixins/_all.scss";
-@import "base-variables/_all.scss";
-@import "labels.scss";
-@import "badges.scss";

data/components/Badge/styles.scss.flow

@@ -1,38 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'active': string;
-  +'badge': string;
-  +'badge-bitter': string;
-  +'badge-danger': string;
-  +'badge-default': string;
-  +'badge-info': string;
-  +'badge-inverse': string;
-  +'badge-primary': string;
-  +'badge-success': string;
-  +'badge-warning': string;
-  +'btn': string;
-  +'btn-group-xs': string;
-  +'btn-xs': string;
-  +'hidden-xxs': string;
-  +'label': string;
-  +'label-danger': string;
-  +'label-default': string;
-  +'label-info': string;
-  +'label-inverse': string;
-  +'label-primary': string;
-  +'label-success': string;
-  +'label-warning': string;
-  +'list-group-item': string;
-  +'nav-pills': string;
-  +'pill': string;
-  +'pill-bitter': string;
-  +'pill-danger': string;
-  +'pill-default': string;
-  +'pill-info': string;
-  +'pill-inverse': string;
-  +'pill-primary': string;
-  +'pill-success': string;
-  +'pill-warning': string;
-  +'visible-xxs': string;
-|};

data/components/Banner/Banner.jsx

@@ -1,54 +0,0 @@
-/* @flow */
-
-import React from "react"
-import classnames from "classnames"
-
-import styles from "./styles.scss"
-
-export type BannerProps = {
-  closeable?: boolean,
-  children: string | React.Node | Array<React.Node>,
-  onClose: () => void,
-  position: "top" | "bottom",
-  show?: boolean,
-  style: "info" | "success" | "warning" | "danger",
-}
-
-const Banner = ({
-  closeable,
-  children,
-  onClose,
-  position,
-  show,
-  style,
-}: BannerProps) => {
-  const css = classnames([
-    styles[`banner-${style}`],
-    styles[show ? `show-${position}` : `hide-${position}`],
-  ])
-  return (
-    <div className={css}>
-
-      { children }
-
-      <If condition={closeable}>
-        <button
-            className={classnames(styles.close, "close")}
-            onClick={onClose}
-        >
-          {`×`}
-        </button>
-      </If>
-
-    </div>
-  )
-}
-
-Banner.defaultProps = {
-  closeable: true,
-  position: "top",
-  show: false,
-  style: "info",
-}
-
-export default Banner

data/components/Banner/BannerStory.jsx

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

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

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

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

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