playbook_ui 2.8.8 → 2.8.9

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import DashboardValue from "../_dashboard_value.jsx"
+
+function DashboardValueAlign() {
+  return (
+    <div>
+      <DashboardValue
+          stat_label={{label: "Top Title Value"}}
+          stat_value={{value: "1,428", unit: "appts"}}
+          stat_change={{change: "decrease", value: "26.1%"}} />
+
+      <br/><br/>
+
+      <DashboardValue
+          align="center"
+          stat_label={{label: "Top Title Value"}}
+          stat_value={{value: "1,428", unit: "appts"}}
+          stat_change={{change: "decrease", value: "26.1%"}} />
+
+      <br/><br/>
+
+      <DashboardValue
+          align="right"
+          stat_label={{label: "Top Title Value"}}
+          stat_value={{value: "1,428", unit: "appts"}}
+          stat_change={{change: "decrease", value: "26.1%"}} />
+    </div>
+  )
+}
+
+export default DashboardValueAlign;

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -3,7 +3,26 @@ import DashboardValue from "../_dashboard_value.jsx"
 
 function DashboardValueDefault() {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <div>
+      <DashboardValue
+          stat_label={{label: "Decreased Value"}}
+          stat_value={{value: "1,428", unit: "appts"}}
+          stat_change={{change: "decrease", value: "26.1%"}} />
+
+      <br/><br/>
+
+      <DashboardValue
+          stat_label={{label: "Increased Value"}}
+          stat_value={{value: "938", unit: "homes"}}
+          stat_change={{change: "increase", value: "26.1%"}} />
+
+      <br/><br/>
+
+      <DashboardValue
+          stat_label={{label: "Neutral Value"}}
+          stat_value={{value: "261", unit: "windows"}}
+          stat_change={{value: "26.1%"}} />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_dashboard_value/docs/example.yml

@@ -4,4 +4,5 @@ examples:
   - dashboard_value_default: Full Example
   - dashboard_value_align: Align
   react:
-  - dashboard_value_default: Default
+  - dashboard_value_default: Full Example
+  - dashboard_value_align: Align

data/app/pb_kits/playbook/pb_dashboard_value/docs/index.js

@@ -1 +1,2 @@
 export {default as DashboardValueDefault} from './_dashboard_value_default.jsx';
+export {default as DashboardValueAlign} from './_dashboard_value_align.jsx';

data/app/pb_kits/playbook/pb_date/date.rb

@@ -28,7 +28,14 @@ module Playbook
       end
 
       def display_value
-        size == "lg" ? display_value_lg : display_value_sm
+        case size
+        when "lg"
+          display_value_lg
+        when "sm"
+          display_value_sm
+        else
+          display_value_xs
+        end
       end
 
       def kit_class
@@ -67,7 +74,7 @@ module Playbook
       end
 
       def size
-        size_options = %w[lg sm]
+        size_options = %w[lg sm xs]
         one_of_value(configured_size, size_options, "sm")
       end
 
@@ -82,6 +89,13 @@ module Playbook
         end
       end
 
+      def display_value_xs
+        if is_set? configured_timestamp
+          pb_value = Playbook::PbTitle::Title.new(size: 4, text: text)
+          ApplicationController.renderer.render(partial: pb_value, as: :object)
+        end
+      end
+
       def display_value_sm
         if is_set? configured_timestamp
           pb_value = Playbook::PbTitle::Title.new(size: 4, text: icon + text)

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -8,3 +8,10 @@
 <%= pb_rails("date", props: {
   timestamp: "2012-08-02T15:49:29Z"
 }) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  timestamp: "2012-08-02T15:49:29Z",
+  size: "xs"
+}) %>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -1,21 +1,90 @@
-import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class Icon extends React.Component {
-  render() {
-    return (
-      <div className="pb_icon">
-        <span>ICON CONTENT</span>
-      </div>
-    )
-  }
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+type IconProps = {
+  aria?: Object,
+  border?: Boolean,
+  className?: String,
+  fixedWidth?: Boolean,
+  flip?: 'horizontal' | 'vertical' | 'both' | 'none',
+  icon: String,
+  id?: String,
+  inverse?: Boolean,
+  listItem?: Boolean,
+  pull?: 'left' | 'right' | 'none',
+  pulse?: Boolean,
+  rotation?: 90 | 180 | 270,
+  size?: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x',
+  spin?: Boolean
 }
 
-Icon.propTypes = propTypes;
+const Icon = (props: IconProps) => {
+  const {
+    aria,
+    border=false,
+    className,
+    fixedWidth=true,
+    flip=false,
+    icon,
+    id,
+    inverse=false,
+    listItem=false,
+    pull,
+    pulse=false,
+    rotation,
+    size,
+    spin=false
+  } = props
+
+  const hClass = "fa-flip-horizontal"
+  const vClass = "fa-flip-vertical"
+
+  const flipClass = (function(flip) {
+    switch(flip) {
+      case 'horizontal':
+        return hClass;
+      case 'vertical':
+        return vClass;
+      case 'both':
+        return `${vClass} ${hClass}`;
+      default:
+        return '';
+    }
+  })(flip)
+
+  const iconClass = icon !== '' && icon !== undefined ? `fa-${icon}` : ''
+  const borderClass = border ? 'fa-border' : ''
+  const fixedWidthClass = fixedWidth ? 'fa-fw' : ''
+  const inverseClass = inverse ? 'fa-inverse' : ''
+  const listItemClass = listItem ? 'fa-li' : ''
+  const pullClass = pull !== '' && pull !== undefined ? `fa-pull-${pull}` : ''
+  const pulseClass = pulse ? 'fa-pulse' : ''
+  const rotationClass = rotation !== '' && rotation !== undefined ? `fa-rotate-${rotation}` : ''
+  const sizeClass = size !== '' && size !== undefined ? `fa-${size}` : ''
+  const spinClass = spin ? 'fa-spin' : ''
+
+  const iconCss = classnames(
+    'pb_icon_kit',
+    'far',
+    iconClass,
+    borderClass,
+    fixedWidthClass,
+    flipClass,
+    inverseClass,
+    listItemClass,
+    pullClass,
+    pulseClass,
+    rotationClass,
+    sizeClass,
+    spinClass,
+    className
+  )
+
+  return (
+    <i id={id} className={iconCss}></i>
+  )
+}
 
-export default Icon;
+export default Icon

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconAnimate() {
+  return (
+    <div>
+      <p><Icon icon="spinner" size="2x" spin fixedWidth /> <span>Spin</span></p>
+      <br/>
+      <p><Icon icon="spinner" size="2x" pulse fixedWidth /> <span>Pulse</span></p>
+    </div>
+  )
+}
+
+export default IconAnimate;

data/app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconBorder() {
+  return (
+    <div>
+      <Icon icon="user" size="2x" border fixedWidth />
+    </div>
+  )
+}
+
+export default IconBorder;

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -4,7 +4,7 @@ import Icon from "../_icon.jsx"
 function IconDefault() {
   return (
     <div>
-      <h1>{`Coming Soon...`}</h1>
+      <Icon icon="user" fixedWidth />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconDefaultDark() {
+  return (
+    <div>
+      <Icon icon="user" fixedWidth />
+    </div>
+  )
+}
+
+export default IconDefaultDark;

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconFlip() {
+  return (
+    <div>
+      <Icon icon="question-circle" flip="horizontal" size="2x" fixedWidth />
+      <Icon icon="question-circle" flip="vertical" size="2x" fixedWidth />
+      <Icon icon="question-circle" flip="both" size="2x" fixedWidth />
+    </div>
+  )
+}
+
+export default IconFlip;

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx

@@ -0,0 +1,13 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconPull() {
+  return (
+    <div>
+      <Icon icon="arrow-left" pull="left" size="2x" fixedWidth />
+      <Icon icon="arrow-right" pull="right" size="2x" fixedWidth />
+    </div>
+  )
+}
+
+export default IconPull;

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconRotate() {
+  return (
+    <div>
+      <Icon icon="user" rotation={90} size="2x" fixedWidth />
+      <Icon icon="user" rotation={180} size="2x" fixedWidth />
+      <Icon icon="user" rotation={270} size="2x" fixedWidth />
+    </div>
+  )
+}
+
+export default IconRotate;

data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes.jsx

@@ -0,0 +1,27 @@
+import React from "react"
+import Icon from "../_icon.jsx"
+
+function IconSizes() {
+  return (
+    <div>
+      <p><Icon icon="user" size="lg" /> <span>Large</span></p>
+      <p><Icon icon="user" size="sm" /> <span>Small</span></p>
+      <p><Icon icon="user" size="xs" /> <span>XSmall</span></p>
+
+      <br/><br/>
+
+      <p><Icon icon="user" size="1x" /> <span>1x</span></p>
+      <p><Icon icon="user" size="2x" /> <span>2x</span></p>
+      <p><Icon icon="user" size="3x" /> <span>3x</span></p>
+      <p><Icon icon="user" size="4x" /> <span>4x</span></p>
+      <p><Icon icon="user" size="5x" /> <span>5x</span></p>
+      <p><Icon icon="user" size="6x" /> <span>6x</span></p>
+      <p><Icon icon="user" size="7x" /> <span>7x</span></p>
+      <p><Icon icon="user" size="8x" /> <span>8x</span></p>
+      <p><Icon icon="user" size="9x" /> <span>9x</span></p>
+      <p><Icon icon="user" size="10x" /> <span>10x</span></p>
+    </div>
+  )
+}
+
+export default IconSizes;

data/app/pb_kits/playbook/pb_icon/docs/example.yml

@@ -9,4 +9,11 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_default_dark: Icon Default Dark
   react:
-  - icon_default: Default
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_default_dark: Icon Default Dark

data/app/pb_kits/playbook/pb_icon/docs/index.js

@@ -1 +1,8 @@
 export {default as IconDefault} from './_icon_default.jsx';
+export {default as IconRotate} from './_icon_rotate.jsx';
+export {default as IconFlip} from './_icon_flip.jsx';
+export {default as IconAnimate} from './_icon_animate.jsx';
+export {default as IconPull} from './_icon_pull.jsx';
+export {default as IconBorder} from './_icon_border.jsx';
+export {default as IconSizes} from './_icon_sizes.jsx';
+export {default as IconDefaultDark} from './_icon_default_dark.jsx';

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -2,7 +2,9 @@
 /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
-import Body from '../pb_body/_body.jsx'
+
+import classnames from 'classnames'
+import Title from '../pb_title/_title.jsx'
 
 type PillProps = {
   className?: String,
@@ -11,17 +13,22 @@ type PillProps = {
   variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
 }
 
-const Pill = ({ className, id, text, variant }: PillProps) => (
-  <div className={`pb_pill_kit_${variant} ${className}`}>
-    <Body tag="span">
-      {text}
-    </Body>
-  </div>
-)
+const Pill = ({
+  className,
+  id,
+  text,
+  variant='neutral'
+}: PillProps) => {
+  const css = classnames([
+    `pb_pill_kit_${variant}`,
+    className,
+  ])
 
-Pill.defaultProps = {
-  className: "",
-  variant: "neutral"
-};
+  return (
+    <div className={css}>
+      <Title size={4} className="pb_pill_text" text={text} />
+    </div>
+  )
+}
 
 export default Pill

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -17,7 +17,7 @@ $pb_pill_height: 22px;
     &[class*=_#{$color_name}]  {
       background: rgba($color_value, $opacity-1);
 
-      [class^=pb_body_kit] {
+      .pb_pill_text {
         color: $color_value !important;
       }
     }

data/app/pb_kits/playbook/pb_pill/pill.rb

@@ -22,9 +22,7 @@ module Playbook
       end
 
       def display_text
-        pb_text = Playbook::PbBody::Body.new(tag: "span") do
-          text
-        end
+        pb_text = Playbook::PbTitle::Title.new(size: 4, text: text, classname: "pb_pill_text")
         ApplicationController.renderer.render(partial: pb_text, as: :object)
       end