playbook_ui 2.5.0

data/components/Badge/Badge.jsx

@@ -0,0 +1,40 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import styles from './styles.scss'
+
+type Props = {
+  children?: Array<React.Node>,
+  style: "primary" | "default" | "success" | "danger" | "warning" | "info" | "inverse",
+  className: string,
+}
+
+export default class Badge extends React.Component<Props> {
+  static defaultProps = {
+    children: <span>{`UR Special`}</span>,
+    style: "default",
+    className: "",
+  }
+  props: Props
+  render() {
+    const {
+      children,
+      className,
+      style,
+    } = this.props
+    const css = [
+      className,
+      styles.badge,
+      styles[`badge-${style}`],
+    ]
+    return (
+      <span
+          className={classnames(css)}
+      >
+        {children}
+      </span>
+    )
+  }
+}

data/components/Badge/BadgeStory.jsx

@@ -0,0 +1,40 @@
+import React from "react"
+import Badge from "./Badge"
+
+import { text, select } from "@storybook/addon-knobs"
+
+export default function BadgeStory(stories) {
+  stories.add("Badge",
+    () => {
+      let props = {
+        className: text("className", ""),
+        style: select("style", ["primary", "default", "success", "danger", "warning", "info", "inverse"], "primary")
+      }
+      return (
+        <div className="row">
+          <div className="col-sm-1">
+            <Badge {...props}>Primary</Badge>
+          </div>
+          <div className="col-sm-1">
+            <Badge style="default">Default</Badge>
+          </div>
+          <div className="col-sm-1">
+            <Badge style="success">Success</Badge>
+          </div>
+          <div className="col-sm-1">
+            <Badge style="danger">Danger</Badge>
+          </div>
+          <div className="col-sm-1">
+            <Badge style="warning">Warning</Badge>
+          </div>
+          <div className="col-sm-1">
+            <Badge style="info">Info</Badge>
+          </div>
+          <div className="col-sm-1">
+            <Badge style="inverse">Inverse</Badge>
+          </div>
+        </div>
+      )
+    }
+  )
+}

data/components/Badge/badges.scss

@@ -0,0 +1,167 @@
+//== badges
+//
+//##
+
+//** Default badge background color
+$badge-default-bg:            $gray-light !default;
+//** Primary badge background color
+$badge-primary-bg:            $brand-primary !default;
+//** Success badge background color
+$badge-success-bg:            $brand-success !default;
+//** Info badge background color
+$badge-info-bg:               $brand-info !default;
+//** Warning badge background color
+$badge-warning-bg:            $brand-warning !default;
+//** Danger badge background color
+$badge-danger-bg:             $brand-danger !default;
+
+//** Default badge text color
+$badge-color:                 #fff !default;
+//** Default text color of a linked badge
+$badge-link-hover-color:      #fff !default;
+
+
+
+
+
+
+// badges
+
+@mixin badge-variant($color) {
+  background-color: $color;
+  @include text-color($color, $more_contrast: true);
+  @if $color == $white {
+    border: 1px solid $border-color;
+  }
+
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}
+
+
+
+
+
+
+
+//
+// badges
+// --------------------------------------------------
+
+
+
+.badge, .pill {
+  display: inline;
+  padding: .15em .8em;
+  font-size: 75%;
+  font-weight: $bold;
+  @include smooth-font;
+  line-height: 1;
+  color: $badge-color;
+  background: $badge-default-bg;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+  border: 1px solid transparent;
+
+  table & {
+    font-size: $font-smaller;
+  }
+
+  // [converter] extracted a& to a.badge
+
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn-xs &,
+  .btn-group-xs > .btn & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // [converter] extracted a& to a.badge
+
+  // Account for badges in navs
+  .list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    color: $white;
+    background-color: $black-opacity-4;
+  }
+
+  .list-group-item > & {
+    float: right;
+  }
+
+  .list-group-item > & + & {
+    margin-right: 5px;
+  }
+
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
+
+
+  // Colors
+  // Contextual variations (linked badges get darker on :hover)
+
+  &-default {
+    @include badge-variant($white);
+  }
+  &-primary {
+    @include badge-variant($power-royal);
+  }
+  &-success {
+    @include badge-variant($power-green);
+  }
+  &-info {
+    @include badge-variant($medium-teal);
+  }
+  &-warning, &-bitter {
+    @include badge-variant($dark-orange);
+  }
+  &-danger {
+    @include badge-variant($power-red);
+  }
+  &-inverse {
+    @include badge-variant($ink);
+  }
+
+}
+
+.pill {
+  border-radius: $border-rad-mega;
+  line-height: 1.6em;
+}
+
+// Add hover effects, but only for links
+a.badge, a.pill {
+  &:hover,
+  &:focus {
+    color: $badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}

data/components/Badge/labels.scss

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

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

data/components/Badge/styles.scss.flow

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

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