playbook_ui 2.9.7 → 2.9.8

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
+<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
+<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
+<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
+<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import {TextInput} from "../../"
+
+function TextInputDefault() {
+  return (
+    <div>
+      <TextInput label="First Name" placeholder="Enter first name" value="Timothy Wenhold" />
+      <TextInput label="Last Name" placeholder="Enter last name" />
+      <TextInput label="Phone Number" type="phone" placeholder="Enter phone number" />
+      <TextInput label="Email Address" type="email" placeholder="Enter email address" />
+      <TextInput label="Zip Code" type="number" placeholder="Enter zip code" />
+    </div>
+  )
+}
+
+export default TextInputDefault

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

@@ -0,0 +1,5 @@
+examples:
+  rails:
+  - text_input_default: Default
+  react:
+  - text_input_default: Default

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

@@ -0,0 +1 @@
+export {default as TextInputDefault} from './_text_input_default.jsx';

data/app/pb_kits/playbook/{pb_input/input.rb → pb_text_input/text_input.rb}

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Playbook
-  module PbInput
-    class Input
+  module PbTextInput
+    class TextInput
       include Playbook::Props
 
-      partial "pb_input/input"
+      partial "pb_text_input/text_input"
 
       prop :label
       prop :name
@@ -14,7 +14,7 @@ module Playbook
       prop :type, default: "text"
 
       def classname
-        generate_classname("pb_input_kit")
+        generate_classname("pb_text_input_kit")
       end
     end
   end

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -1,6 +1,36 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
-  <%= object.display_value %>
+    class: object.classname) do %>
+  <% if object.size == "lg" %>
+    <%= pb_rails("title", props: { tag: "span", text: object.format_time_string, size: 3 }) %>
+    <%= content_tag(:span) do %>
+      <%= content_tag(:span, class: "pb_time_timezone") do %>
+        <%= object.pb_date_time.to_timezone.upcase %>
+      <% end %>
+    <% end %>
+  <% elsif object.size == "sm" %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
+      <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
+        <%= content_tag(:span) do %>
+          <%= object.format_time_string %>
+          <%= content_tag(:span, class: "pb_time_timezone") do %>
+            <%= object.pb_date_time.to_timezone.upcase %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
+      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
+        <%= content_tag(:span) do %>
+          <%= object.format_time_string %>
+          <%= content_tag(:span, class: "pb_time_timezone") do %>
+            <%= object.pb_date_time.to_timezone.upcase %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_time/time.rb

@@ -2,133 +2,32 @@
 
 module Playbook
   module PbTime
-    class Time < Playbook::PbKit::Base
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
+    class Time
+      include Playbook::Props
 
-      PROPS = %i[configured_classname
-                 configured_data
-                 configured_id
-                 configured_size
-                 configured_time
-                 configured_timestamp
-                 configured_timezone].freeze
+      partial "pb_time/time"
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     size: default_configuration,
-                     time: default_configuration,
-                     timestamp: default_configuration,
-                     timezone: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_size = size
-        self.configured_time = time
-        self.configured_timestamp = timestamp
-        self.configured_timezone = timezone
-      end
-
-      def display_value
-        case size
-        when "lg"
-          display_value_lg
-        when "sm"
-          display_value_sm
-        else
-          display_value_xs
-        end
-      end
+      prop :time, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[lg sm xs],
+                  default: "sm"
+      prop :timezone, default: "America/New_York"
 
-      def kit_class
-        kit_options = [
-          "pb_time_kit",
-          size,
-        ]
-        kit_options.join("_")
-      end
-
-      def to_partial_path
-        "pb_time/time"
-      end
-
-    private
-
-      def timestamp
-        if is_set? configured_time
-          time = configured_time
-        else
-          time = configured_timestamp
-        end
-        Playbook::PbKit::PbDateTime.new(time, timezone_value)
-      end
-
-      def timezone_value
-        default_value(configured_timezone, "America/New_York")
+      def classname
+        generate_classname("pb_time_kit", size)
       end
 
       def format_time_string
-        "#{timestamp.to_hour}:#{timestamp.to_minutes}#{timestamp.to_meridian}"
-      end
-
-      def timezone
-        content_tag(:span, class: "pb_time_timezone") do
-          timestamp.to_timezone.upcase
-        end
-      end
-
-      def size
-        size_options = %w[lg sm xs]
-        one_of_value(configured_size, size_options, "sm")
-      end
-
-      def icon
-        pb_icon = Playbook::PbIcon::Icon.new(icon: "clock", fixed_width: true)
-        ApplicationController.renderer.render(partial: pb_icon, as: :object)
-      end
-
-      def text
-        content_tag(:time, datetime: timestamp.to_iso) do
-          content_tag(:span) do
-            format_time_string
-          end +
-            timezone
-        end
-      end
-
-      def display_value_xs
-        if is_set?(configured_timestamp) || is_set?(configured_time)
-          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) || is_set?(configured_time)
-          pb_value = Playbook::PbBody::Body.new(color: "default") do
-            icon +
-              text
-          end
-          ApplicationController.renderer.render(partial: pb_value, as: :object)
-        end
+        "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian}"
       end
 
-      def display_value_lg
-        if is_set?(configured_timestamp) || is_set?(configured_time)
-          pb_value_lg = Playbook::PbTitle::Title.new(size: 3, text: text)
-          ApplicationController.renderer.render(partial: pb_value_lg, as: :object)
-        end
+      def format_timezone_string
+        "#{pb_date_time.to_timezone}"
       end
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def pb_date_time
+        pb_date_time ||= Playbook::PbKit::PbDateTime.new(time, timezone)
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss

@@ -5,6 +5,4 @@
 @mixin pb_timestamp {
   margin: 0;
   line-height: $lh_tight;
-  color: $text_lt_lighter;
-  font-size: $text_smaller;
 }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= !object.children.nil? ? capture(&object.children) : object.text %>
+  <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
 <% end %>

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,11 @@
+@import "./opacity";
+
 //=====================================
 // Base colors should not be documented.
 // Only document color use.
 
 // Colors -----------------------------
-$royal:               #004DFF;
-$blue:                #0082FF;
+$royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
 $red:                 #FF2229;
@@ -13,7 +14,6 @@ $green:               #00CA74;
 $orange:              #FD804C;
 $colors: (
   royal:              $royal,
-  blue:               $blue,
   purple:             $purple,
   teal:               $teal,
   red:                $red,
@@ -40,8 +40,8 @@ $interface_colors: (
 
 // Main colors ------------------------
 $primary:             $royal;
-$secondary:           $blue;
-$tertiary:            $yellow;
+$secondary:           $yellow;
+$tertiary:            $purple;
 $main_colors: (
   primary:            $primary,
   secondary:          $secondary,
@@ -51,7 +51,7 @@ $main_colors: (
 
 // Background colors ------------------
 $bg_light:            $silver;
-$bg_dark:             $charcoal;
+$bg_dark:             #172257;
 $background_colors: (
   bg_light:           $bg_light,
   bg_dark:            $bg_dark
@@ -59,12 +59,14 @@ $background_colors: (
 
 // Card colors ------------------
 $card_light:          $white;
-$card_dark:           $charcoal;
+$card_dark:           rgba($white, $opacity_1);
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
 );
 
+$primary-action:      $primary;
+
 // Active colors ----------------------
 $active_light:        #E5F2FF;
 $active_dark:         #144075;
@@ -75,7 +77,7 @@ $active_colors: (
 
 // Hover colors -----------------------
 $hover_light:         darken($silver, 5%);
-$hover_dark:          lighten($charcoal, 5%);
+$hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
   hover_light:        $hover_light,
   hover_dark:         $hover_dark
@@ -83,15 +85,15 @@ $hover_colors: (
 
 // Border colors ----------------------
 $border_light:        #E4E8F0;
-$border_dark:         #363D5B;
+$border_dark:         rgba($white, $opacity_1);
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 
 // Shadow colors ----------------------
-$shadow_light:        rgba($blue, 0.1);
-$shadow_dark:         rgba($slate, 0.1);
+$shadow_light:        rgba($royal, $opacity_1);
+$shadow_dark:         rgba($slate, $opacity_1);
 $shadow_colors: (
   shadow_light:       $shadow_light,
   shadow_dark:        $shadow_dark
@@ -102,8 +104,8 @@ $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
 $text_dk_default:     $white;
-$text_dk_light:       rgba($white, 0.6);
-$text_dk_lighter:     rgba($white, 0.4);
+$text_dk_light:       rgba($white, $opacity_6);
+$text_dk_lighter:     rgba($white, $opacity_4);
 $text_colors: (
   text_lt_default:    $text_lt_default,
   text_lt_light:      $text_lt_light,
@@ -153,22 +155,17 @@ $status_color_text: (
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,
-  neutral:            darken($neutral, 10%)
+  neutral:            darken($neutral, 15%),
+  primary:            lighten($primary, 10%)
 );
 
 // Link colors ------------------------
 $primary_action:      $primary;
-$primary_action_dk:   $blue;
-$secondary_action:      $blue;
-$action_colors: (
-  primary_action:     $primary_action,
-  primary_action_dk:  $primary_action_dk
-);
 
 // Product colors ---------------------
 $windows:             $royal;
 $siding:              $yellow;
-$doors:               $blue;
+$doors:               $red;
 $solar:               $green;
 $roofs:               $teal;
 $gutters:             $purple;
@@ -191,7 +188,6 @@ $transparent: transparent;
     }
   }
   @include export-colors($product_colors);
-  @include export-colors($action_colors);
   @include export-colors($status_colors);
   @include export-colors($data_colors);
   @include export-colors($shadow_colors);

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -1,3 +1,15 @@
+@function tint($color, $percentage) {
+  @return mix($white, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix($charcoal, $color, $percentage);
+}
+
+@function dim($color, $percentage) {
+  @return mix($bg_dark, $color, $percentage);
+}
+
 @mixin background-color($colors-list) {
   @each $name, $color in $colors-list {
     .#{$name} {

data/app/pb_kits/playbook/utilities/text.js

@@ -0,0 +1,16 @@
+function titleize(sentence) {
+    if(!sentence.split) return sentence
+
+    const titleizedWord = function(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
+    }
+
+    let result = []
+    sentence.split(' ').forEach(function(w) {
+        result.push(titleizedWord(w))
+    })
+
+    return result.join(' ')
+}
+
+export { titleize }

data/app/views/layouts/playbook/_sidebar.html.slim

@@ -1,29 +1,28 @@
 br
-= pb_rails("vertical_nav", props: {title: "Principles", link: principles_path}) do
+= pb_rails("nav", props: {title: "Principles", link: principles_path}) do
   - principles_active = (controller_name == 'pages' && action_name == 'principles') ? true : false
   - guides_active = (controller_name == 'guides' && action_name == 'create_kit') ? true : false
   - use_nitro_active = (controller_name == 'guides' && action_name == 'use_nitro') ? true : false
-  = pb_rails("vertical_nav/item", props: { text: "Getting Started", link: principles_path, active: principles_active })
-  //= pb_rails("vertical_nav/item", props: { text: "Using in Nitro", link: guides_use_in_nitro_path, active: use_nitro_active })
-  = pb_rails("vertical_nav/item", props: { text: "Creating Kits", link: guides_path, active: guides_active })
+  = pb_rails("nav/item", props: { text: "Getting Started", link: principles_path, active: principles_active })
+  //= pb_rails("nav/item", props: { text: "Using in Nitro", link: guides_use_in_nitro_path, active: use_nitro_active })
+  = pb_rails("nav/item", props: { text: "Creating Kits", link: guides_path, active: guides_active })
 
 br
-= pb_rails("vertical_nav", props: {title: "Kits", link: kits_path}) do
+= pb_rails("nav", props: {title: "Kits", link: kits_path}) do
   - all_active = (controller_name == 'pages' && action_name == 'kits') ? true : false
-  = pb_rails("vertical_nav/item", props: { text: "All", link: kits_path, active: all_active })
+  = pb_rails("nav/item", props: { text: "All", link: kits_path, active: all_active })
 
   - MENU["kits"].sort.each do |link|
     - active = !@kit.nil? && @kit == link ? true : false
-    = pb_rails("vertical_nav/item", props: { text: pb_kit_title(link), link: kit_show_path(link), active: active })
+    = pb_rails("nav/item", props: { text: pb_kit_title(link), link: kit_show_path(link), active: active })
 
 br
 
-// TODO: Clean up after merge
-= pb_rails("vertical_nav", props: {title: "Tokens", link: utilities_path}) do
+= pb_rails("nav", props: {title: "Tokens", link: utilities_path}) do
   - color_active = (controller_name == 'pages' && action_name == 'utilities') ? true : false
-  = pb_rails("vertical_nav/item", props: { text: "Colors", link: utilities_path, active: color_active })
+  = pb_rails("nav/item", props: { text: "Colors", link: utilities_path, active: color_active })
   - spacing_active = (controller_name == 'pages' && action_name == 'tokens') ? true : false
-  = pb_rails("vertical_nav/item", props: { text: "Spacing", link: tokens_path, active: spacing_active })
+  = pb_rails("nav/item", props: { text: "Spacing", link: tokens_path, active: spacing_active })
 
 br
 br

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "2.9.7"
+  VERSION = "2.9.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 2.9.7
+  version: 2.9.8
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-11-07 00:00:00.000000000 Z
+date: 2019-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -401,7 +401,6 @@ files:
 - app/pb_kits/playbook/kits/pb_icon_circle.js
 - app/pb_kits/playbook/kits/pb_icon_value.js
 - app/pb_kits/playbook/kits/pb_image.js
-- app/pb_kits/playbook/kits/pb_input.js
 - app/pb_kits/playbook/kits/pb_label_pill.js
 - app/pb_kits/playbook/kits/pb_label_value.js
 - app/pb_kits/playbook/kits/pb_layout.js
@@ -409,6 +408,7 @@ files:
 - app/pb_kits/playbook/kits/pb_list.js
 - app/pb_kits/playbook/kits/pb_loading_inline.js
 - app/pb_kits/playbook/kits/pb_message.js
+- app/pb_kits/playbook/kits/pb_nav.js
 - app/pb_kits/playbook/kits/pb_online_status.js
 - app/pb_kits/playbook/kits/pb_person.js
 - app/pb_kits/playbook/kits/pb_person_contact.js
@@ -420,6 +420,7 @@ files:
 - app/pb_kits/playbook/kits/pb_stat_change.js
 - app/pb_kits/playbook/kits/pb_stat_value.js
 - app/pb_kits/playbook/kits/pb_table.js
+- app/pb_kits/playbook/kits/pb_text_input.js
 - app/pb_kits/playbook/kits/pb_time.js
 - app/pb_kits/playbook/kits/pb_timestamp.js
 - app/pb_kits/playbook/kits/pb_title.js
@@ -428,7 +429,6 @@ files:
 - app/pb_kits/playbook/kits/pb_toggle.js
 - app/pb_kits/playbook/kits/pb_user.js
 - app/pb_kits/playbook/kits/pb_user_badge.js
-- app/pb_kits/playbook/kits/pb_vertical_nav.js
 - app/pb_kits/playbook/packs/application.js
 - app/pb_kits/playbook/packs/examples.js
 - app/pb_kits/playbook/packs/kits.js
@@ -459,6 +459,8 @@ files:
 - app/pb_kits/playbook/pb_badge/badge.rb
 - app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb
 - app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx
+- app/pb_kits/playbook/pb_badge/docs/_badge_dark.html.erb
+- app/pb_kits/playbook/pb_badge/docs/_badge_dark.jsx
 - app/pb_kits/playbook/pb_badge/docs/_badge_default.html.erb
 - app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx
 - app/pb_kits/playbook/pb_badge/docs/_badge_rounded.html.erb
@@ -557,6 +559,8 @@ files:
 - app/pb_kits/playbook/pb_contact/contact.rb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
+- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
+- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx
 - app/pb_kits/playbook/pb_contact/docs/example.yml
 - app/pb_kits/playbook/pb_contact/docs/index.js
 - app/pb_kits/playbook/pb_currency/_currency.html.erb
@@ -628,6 +632,8 @@ files:
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
+- app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.html.erb
+- app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx
 - app/pb_kits/playbook/pb_hashtag/docs/example.yml
@@ -694,14 +700,6 @@ files:
 - app/pb_kits/playbook/pb_image/docs/example.yml
 - app/pb_kits/playbook/pb_image/docs/index.js
 - app/pb_kits/playbook/pb_image/image.rb
-- app/pb_kits/playbook/pb_input/_input.html.erb
-- app/pb_kits/playbook/pb_input/_input.jsx
-- app/pb_kits/playbook/pb_input/_input.scss
-- app/pb_kits/playbook/pb_input/docs/_input_default.html.erb
-- app/pb_kits/playbook/pb_input/docs/_input_default.jsx
-- app/pb_kits/playbook/pb_input/docs/example.yml
-- app/pb_kits/playbook/pb_input/docs/index.js
-- app/pb_kits/playbook/pb_input/input.rb
 - app/pb_kits/playbook/pb_kit/base.rb
 - app/pb_kits/playbook/pb_kit/dateTime.js
 - app/pb_kits/playbook/pb_kit/pb_date_time.rb
@@ -794,6 +792,22 @@ files:
 - app/pb_kits/playbook/pb_message/docs/example.yml
 - app/pb_kits/playbook/pb_message/docs/index.js
 - app/pb_kits/playbook/pb_message/message.rb
+- app/pb_kits/playbook/pb_nav/_horizontal_nav.scss
+- app/pb_kits/playbook/pb_nav/_item.html.erb
+- app/pb_kits/playbook/pb_nav/_item.jsx
+- app/pb_kits/playbook/pb_nav/_nav.html.erb
+- app/pb_kits/playbook/pb_nav/_nav.jsx
+- app/pb_kits/playbook/pb_nav/_nav.scss
+- app/pb_kits/playbook/pb_nav/_vertical_nav.scss
+- app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_block_no_title.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/example.yml
+- app/pb_kits/playbook/pb_nav/docs/index.js
+- app/pb_kits/playbook/pb_nav/item.rb
+- app/pb_kits/playbook/pb_nav/nav.rb
 - app/pb_kits/playbook/pb_online_status/_online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/_online_status.jsx
 - app/pb_kits/playbook/pb_online_status/_online_status.scss
@@ -816,10 +830,10 @@ files:
 - app/pb_kits/playbook/pb_person_contact/_person_contact.scss
 - app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.html.erb
 - app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx
-- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_single_person.html.erb
-- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_single_person.jsx
-- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_three_people.html.erb
-- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_three_people.jsx
+- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.html.erb
+- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx
+- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.html.erb
+- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx
 - app/pb_kits/playbook/pb_person_contact/docs/example.yml
 - app/pb_kits/playbook/pb_person_contact/docs/index.js
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
@@ -926,6 +940,14 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss
 - app/pb_kits/playbook/pb_table/styles/_variables.scss
 - app/pb_kits/playbook/pb_table/table.rb
+- app/pb_kits/playbook/pb_text_input/_text_input.html.erb
+- app/pb_kits/playbook/pb_text_input/_text_input.jsx
+- app/pb_kits/playbook/pb_text_input/_text_input.scss
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
+- app/pb_kits/playbook/pb_text_input/docs/example.yml
+- app/pb_kits/playbook/pb_text_input/docs/index.js
+- app/pb_kits/playbook/pb_text_input/text_input.rb
 - app/pb_kits/playbook/pb_time/_time.html.erb
 - app/pb_kits/playbook/pb_time/_time.jsx
 - app/pb_kits/playbook/pb_time/_time.scss
@@ -1008,19 +1030,6 @@ files:
 - app/pb_kits/playbook/pb_user_badge/docs/example.yml
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
 - app/pb_kits/playbook/pb_user_badge/user_badge.rb
-- app/pb_kits/playbook/pb_vertical_nav/_item.html.erb
-- app/pb_kits/playbook/pb_vertical_nav/_item.jsx
-- app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.html.erb
-- app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.jsx
-- app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.scss
-- app/pb_kits/playbook/pb_vertical_nav/docs/_block_nav.html.erb
-- app/pb_kits/playbook/pb_vertical_nav/docs/_block_no_title.html.erb
-- app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.html.erb
-- app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.jsx
-- app/pb_kits/playbook/pb_vertical_nav/docs/example.yml
-- app/pb_kits/playbook/pb_vertical_nav/docs/index.js
-- app/pb_kits/playbook/pb_vertical_nav/item.rb
-- app/pb_kits/playbook/pb_vertical_nav/vertical_nav.rb
 - app/pb_kits/playbook/plugins/pb_chart_plugin.js
 - app/pb_kits/playbook/props.rb
 - app/pb_kits/playbook/props/array.rb
@@ -1052,6 +1061,7 @@ files:
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/props.js
+- app/pb_kits/playbook/utilities/text.js
 - app/pb_kits/playbook/vendor.js
 - app/views/layouts/playbook/_nav.html.slim
 - app/views/layouts/playbook/_sidebar.html.slim

data/app/pb_kits/playbook/kits/pb_input.js

@@ -1,4 +0,0 @@
-import Input from "../pb_input/_input.jsx";
-import WebpackerReact from "webpacker-react";
-
-WebpackerReact.setup({ Input });

data/app/pb_kits/playbook/kits/pb_vertical_nav.js

@@ -1,4 +0,0 @@
-import VerticalNav from "../pb_vertical_nav/_vertical_nav.jsx";
-import WebpackerReact from "webpacker-react";
-
-WebpackerReact.setup({ VerticalNav });

data/app/pb_kits/playbook/pb_input/docs/_input_default.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
-<%= pb_rails("input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
-<%= pb_rails("input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
-<%= pb_rails("input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
-<%= pb_rails("input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>