playbook_ui 2.8.7 → 2.8.8

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -4,7 +4,27 @@ import Pill from "../_pill.jsx"
 function PillDefault() {
   return (
     <div>
-      <Pill />
+      <Pill text="default" />
+
+      <br/><br/>
+
+      <Pill text="success" variant="success" />
+
+      <br/><br/>
+
+      <Pill text="error" variant="error" />
+
+      <br/><br/>
+
+      <Pill text="warning" variant="warning" />
+
+      <br/><br/>
+
+      <Pill text="info" variant="info" />
+
+      <br/><br/>
+
+      <Pill text="neutral" variant="neutral" />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

@@ -3,9 +3,7 @@ import ProgressSimple from "../_progress_simple.jsx"
 
 function ProgressSimpleDefault() {
   return (
-    <div>
-      <ProgressSimple />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_default.jsx

@@ -3,9 +3,7 @@ import SectionSeparator from "../_section_separator.jsx"
 
 function SectionSeparatorDefault() {
   return (
-    <div>
-      <SectionSeparator />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -3,9 +3,7 @@ import Source from "../_source.jsx"
 
 function SourceDefault() {
   return (
-    <div>
-      <Source />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -3,9 +3,7 @@ import StarRating from "../_star_rating.jsx"
 
 function StarRatingDefault() {
   return (
-    <div>
-      <StarRating />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -3,9 +3,7 @@ import StatChange from "../_stat_change.jsx"
 
 function StatChangeDefault() {
   return (
-    <div>
-      <StatChange />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -3,9 +3,7 @@ import StatValue from "../_stat_value.jsx"
 
 function StatValueDefault() {
   return (
-    <div>
-      <StatValue />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

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

@@ -9,13 +9,13 @@ examples:
     - table_single_line: Force Single Line
     - table_dark: Table Dark
     - table_container_dark: Table Container Dark
-  react:
-    - table_sm: Small
-    - table_md: Medium
-    - table_lg: Large
-    - table_container: Table Container
-    - table_disable_hover: Disable Hover
-    - table_multiline: Multi-line
-    - table_single_line: Force Single Line
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Dark
+  # react:
+  #   - table_sm: Small
+  #   - table_md: Medium
+  #   - table_lg: Large
+  #   - table_container: Table Container
+  #   - table_disable_hover: Disable Hover
+  #   - table_multiline: Multi-line
+  #   - table_single_line: Force Single Line
+  #   - table_dark: Table Dark
+  #   - table_container_dark: Table Container Dark

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -6,18 +6,13 @@
 <br>
 
 <%= pb_rails("time", props: {
-  timestamp: "2012-08-02T15:49:29Z"
-}) %>
-
-<br>
-
-<%= pb_rails("time", props: {
-  timestamp: DateTime.now
+  timestamp: "2012-08-02T15:49:29Z",
+  size: "sm"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  timestamp: DateTime.now,
-  timezone: "America/Chicago"
+  timestamp: "2012-08-02T15:49:29Z",
+  size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -3,9 +3,7 @@ import Time from "../_time.jsx"
 
 function TimeDefault() {
   return (
-    <div>
-      <Time />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("time", props: {
+  timestamp: "2012-08-02T15:49:29Z"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  timestamp: DateTime.now
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  timestamp: DateTime.now,
+  timezone: "America/Chicago"
+}) %>

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

@@ -1,9 +1,8 @@
 examples:
-  
+
   rails:
-  - time_default: Default
-  
-  
+  - time_default: Sizes
+  - time_timestamp: Timestamp Values
+
   react:
   - time_default: Default
-  

data/app/pb_kits/playbook/pb_time/time.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
@@ -85,7 +92,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
 
@@ -103,6 +110,15 @@ module Playbook
         end
       end
 
+      def display_value_xs
+        if is_set? configured_timestamp
+          pb_value = Playbook::PbBody::Body.new(color: "default") do
+            text
+          end
+          ApplicationController.renderer.render(partial: pb_value, as: :object)
+        end
+      end
+
       def display_value_sm
         if is_set? configured_timestamp
           pb_value = Playbook::PbBody::Body.new(color: "default") do
@@ -115,11 +131,7 @@ module Playbook
 
       def display_value_lg
         if is_set? configured_timestamp
-          title_props = {
-            size: 3,
-            text: text,
-          }
-          pb_value_lg = Playbook::PbTitle::Title.new(title_props)
+          pb_value_lg = Playbook::PbTitle::Title.new(size: 3, text: text)
           ApplicationController.renderer.render(partial: pb_value_lg, as: :object)
         end
       end

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -3,9 +3,7 @@ import Timestamp from "../_timestamp.jsx"
 
 function TimestampDefault() {
   return (
-    <div>
-      <Timestamp />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -1,33 +1,44 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-const propTypes = {
-  text: PropTypes.string.isRequired,
-  tag: PropTypes.string.isRequired,
-  size: PropTypes.oneOf([1, 2, 3, 4]).isRequired,
-  dark: PropTypes.bool
-};
-
-const defaultProps = {
-  text: "Hello World",
-  tag: "h1",
-  size: 1,
-  dark: false
-};
-
-class Title extends Component {
-  render() {
-    const Tag = `${this.props.tag}`;
-    const { size, dark, text } = this.props;
-    return (
-      <Tag className={`heading_${size}` + (dark === true ? "_dark" : "")}>
-        {text}
-      </Tag>
-    );
-  }
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+type TitleProps = {
+  className?: String,
+  children?: Array<React.ReactNode> | React.ReactNode,
+  dark?: Boolean,
+  size?: 1 | 2 | 3 | 4,
+  text?: String,
+  tag?: 'h1' | 'h2' | 'h3',
+}
+
+const tagCSS = ({
+  dark=false,
+  size=3,
+}) => {
+  let css = ''
+
+  css += `_${size}` 
+  css += dark === true ? '_dark' : ''
+
+  return css
 }
 
-Title.propTypes = propTypes;
-Title.defaultProps = defaultProps;
+const Title = (props: TitleProps) => {
+  const {
+    className,
+    children,
+    text,
+    tag='h3',
+  } = props
+
+  const Tag = `${tag}`
+  
+  return (
+    <Tag className={classnames(`pb_title_kit${tagCSS(props)}`, className)}>
+      { text || children }
+    </Tag>
+  )
+}
 
-export default Title;
+export default Title

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx

@@ -4,6 +4,7 @@ import Title from "../_title.jsx"
 function TitleLight() {
   return (
     <div>
+      <Title text="Default Title"/><br/>
       <Title size={4} tag="h4" text="Title 1" />
       <Title size={3} tag="h3" text="Title 2" />
       <Title size={2} tag="h2" text="Title 3" />

data/app/pb_kits/playbook/pb_title_count/_title_count.scss

@@ -6,8 +6,8 @@
   justify-content: flex-start;
   align-items: baseline;
 
-  & > [class^=pb_title_kit] {
-    margin-right: $space-xs;
+  & > .pb_title_count_text {
+    padding-right: $space-xs;
   }
 
   &[class*=_center] {

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -3,9 +3,7 @@ import TitleCount from "../_title_count.jsx"
 
 function TitleCountDefault() {
   return (
-    <div>
-      <TitleCount />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_title_count/title_count.rb

@@ -43,7 +43,7 @@ module Playbook
 
       def title
         if is_set? configured_title
-          pb_title = Playbook::PbTitle::Title.new(size: title_size, text: configured_title)
+          pb_title = Playbook::PbTitle::Title.new(size: title_size, text: configured_title, classname: "pb_title_count_text")
           ApplicationController.renderer.render(partial: pb_title, as: :object)
         end
       end

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -3,9 +3,7 @@ import TitleDetail from "../_title_detail.jsx"
 
 function TitleDetailDefault() {
   return (
-    <div>
-      <TitleDetail />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_toggle/_toggle.html.erb

@@ -1,12 +1,12 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
+    aria: object.aria,
     class: object.classname(object.kit_class),
     ) do %>
 
     <label class="pb_toggle_wrapper">
-      <input type="checkbox" <%= object.checked %> />
+      <input type="checkbox" <%= object.name %> <%= object.value %> <%= object.checked %> />
       <div class="pb_toggle_control"></div>
     </label>
-
 <% end %>

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -19,6 +19,7 @@ $toggle_sizes: (
 
       .pb_toggle_wrapper {
         .pb_toggle_control {
+          cursor: pointer;
           transition: $transition;
           width: $width;
           height: $height;

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -3,10 +3,7 @@ import Toggle from "../_toggle.jsx"
 
 function ToggleDefault() {
   return (
-    <div>
-      <Toggle size="sm"/>
-      <Toggle size="md"/>
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("title", props: { size: 4, text: "Which of the following vehicles do you own?" }) %>
+
+<br>
+
+<label>
+  <%= pb_rails("caption", props: { text: "Car" }) %>
+  <%= pb_rails("toggle", props: {
+    size: "sm",
+    checked: false,
+    name: "vehicle",
+    value: "car"
+  }) %>
+</label>
+
+<br>
+
+<label>
+  <%= pb_rails("caption", props: { text: "Bike" }) %>
+  <%= pb_rails("toggle", props: {
+    size: "sm",
+    checked: false,
+    name: "vehicle",
+    value: "bike"
+  }) %>
+</label>