playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_button/_variations.json

@@ -1,15 +0,0 @@
-{
-  "variations": [
-    {
-      "name": "primary",
-      "props": {
-        "type": "primary",
-        "dark": false,
-        "text": "Default Button"
-      }
-    },
-    {
-      "name": "danger"
-    }
-  ]
-}

data/app/pb_kits/playbook/pb_button/docs/_button_dark.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("button", props: { type: "primary" }) %>
-<%= pb_rails("button", props: { type: "danger" }) %>
-<%= pb_rails("button", props: { type: "dashed" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_light.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("button", props: { type: "primary" }) %>
-<%= pb_rails("button", props: { type: "danger" }) %>
-<%= pb_rails("button", props: { type: "dashed" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_sizes.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("button", props: { type: "primary", size: "small" }) %>
-<%= pb_rails("button", props: { type: "primary", size: "medium" }) %>
-<%= pb_rails("button", props: { type: "primary", size: "large" }) %>

data/app/pb_kits/playbook/pb_caption/_caption_lg.scss

@@ -1,5 +0,0 @@
-@import "caption_mixin";
-
-.caption_lg {
-  @include caption_lg;
-}

data/app/pb_kits/playbook/tokens/_border_radius.sass

@@ -1,27 +0,0 @@
-// Border Radius
-
-$border_rad_lightest:     1px
-$border_rad_lighter:      2px
-$border_rad_light:        4px
-$border_rad_normal:       0
-$border_rad_heavy:        5px
-$border_rad_heavier:      6px
-$border_rad_heaviest:     7px
-$border_rad_mega:         1000px
-
-
-// Bootstrap
-$border_radius_base:      $border_rad_light
-$border_radius_large:     $border_rad_heavy
-$border_radius_small:     $border_rad_lighter
-$border_radius:           $border_rad_light
-$border_radius_lg:        $border_rad_heavy
-$border_radius_sm:        $border_rad_lighter
-
-
-$panel_border_radius:     $border_rad_light
-
-
-
-// Change to borders
-$border_color: $sky

data/components/Avatar/Avatar.jsx

@@ -1,96 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames/bind'
-
-import {OverlayTrigger, Popover} from 'react-bootstrap'
-
-import styles from './styles.scss'
-
-export type AvatarSize = "smaller" | "small" | "base" | "large" | "larger"
-
-type Props = {
-  alt: string,
-  disableLink: boolean,
-  showPopover: boolean,
-  size: "smaller" | "small" | "base" | "large" | "larger",
-  thumb: string,
-  url: string,
-  onError: () => void,
-}
-
-/**
- * Avatar renders a user avatar thumbnail image. Upon click, it opens the orinal
- * image on a new tab.
- *
- * @param {string} alt the text to display when hovering over the image.
- * @param {bool} disableLink whether to disable the anchor link
- * @param {bool} showPopover whether to show the popover image on hover
- * @param {string} size the pre-defined avatar size.
- * @param {string} thumb the avatar thumbnail image URL.
- * @param {string} url the avatar original image URL.
- * @returns {ReactElement} JSX.
- */
-export default class Avatar extends React.Component<Props> {
-  static defaultProps = {
-    alt: 'Avatar Image',
-    size: 'base',
-    showPopover: true,
-  }
-  props: Props
-  render() {
-    const {
-      alt,
-      disableLink,
-      showPopover,
-      size,
-      thumb,
-      url,
-      onError,
-    } = this.props
-    const imgCSS = [
-      "avatar",
-      styles[`avatar-${size}`],
-    ]
-    const popover = (
-      <Popover>
-        <img
-            className={classnames(imgCSS)}
-            src={url}
-        />
-      </Popover>
-    )
-    const image = (
-      <img alt={alt}
-          className={classnames(imgCSS, styles[`avatar-${size}-thumb`])}
-          onError={onError}
-          src={thumb}
-      />
-    )
-    const imgThumb = (
-      <If condition={disableLink}>
-        {image}
-      <Else/>
-        <a href={disableLink ? "javascript:void(0)" : url}
-            style={{maxHeight: 56}}
-            target="_blank"
-        >
-          {image}
-        </a>
-      </If>
-    )
-    if(showPopover) {
-      return (
-        <OverlayTrigger
-            overlay={popover}
-            placement="right"
-            trigger={['hover']}
-        >
-          {imgThumb}
-        </OverlayTrigger>
-      )
-    } else {
-      return imgThumb
-    }
-  }
-}

data/components/Avatar/AvatarStory.jsx

@@ -1,19 +0,0 @@
-import React from "react"
-import Avatar from "./Avatar"
-
-import { select, text, boolean } from "@storybook/addon-knobs"
-
-export default function AvatarStory(stories) {
-  stories.add("Avatar",
-    () => {
-      let props = {
-        disableLink: boolean("disableLink", false),
-        showPopover: boolean("showPopover", true),
-        size: select("size", ["smaller", "small", "base", "large", "larger"], "base"),
-        thumb: text("url", "https://i.giphy.com/l46CjoMYO5n2hQnWE.gif"),
-        url: text("url", "https://i.giphy.com/l46CjoMYO5n2hQnWE.gif"),
-      }
-      return <Avatar {...props}/>
-    }
-  )
-}

data/components/Avatar/styles.scss

@@ -1,54 +0,0 @@
-// @import "base-variables/_spacing.sass";
-
-.avatar {
-  &-smaller {
-    width: 90px;
-    height: 90px;
-    object-fit: cover;
-    &-thumb {
-      width: 30px;
-      height: 30px;
-      object-fit: cover;
-    }
-  }
-  &-small {
-    width: 140px;
-    height: 140px;
-    object-fit: cover;
-    &-thumb {
-      width: 60px;
-      height: 60px;
-      object-fit: cover;
-    }
-  }
-  &-base {
-    width: 200px;
-    height: 200px;
-    object-fit: cover;
-    &-thumb {
-      width: 90px;
-      height: 90px;
-      object-fit: cover;
-    }
-  }
-  &-large {
-    width: 270px;
-    height: 270px;
-    object-fit: cover;
-    &-thumb {
-      width: 115px;
-      height: 115px;
-      object-fit: cover;
-    }
-  }
-  &-larger {
-    width: 420px;
-    height: 420px;
-    object-fit: cover;
-    &-thumb {
-      width: 197px;
-      height: 197px;
-      object-fit: cover;
-    }
-  }
-}

data/components/Avatar/styles.scss.flow

@@ -1,14 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'avatar-base': string;
-  +'avatar-base-thumb': string;
-  +'avatar-large': string;
-  +'avatar-large-thumb': string;
-  +'avatar-larger': string;
-  +'avatar-larger-thumb': string;
-  +'avatar-small': string;
-  +'avatar-small-thumb': string;
-  +'avatar-smaller': string;
-  +'avatar-smaller-thumb': string;
-|};

data/components/Badge/Badge.jsx

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

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

@@ -1,167 +0,0 @@
-//== 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;
-  }
-}