playbook_ui 4.1.2 → 4.2.0

data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("nav", props: {variant: "subtle", highlight: false}) do %>
+  <%= pb_rails("nav/item", props: { text: "Dashboard", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Statistics", link: "#", active: true  }) %>
+  <%= pb_rails("nav/item", props: { text: "Pages", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const SubtleNoHighlightNav = () => {
+  return (
+    <Nav
+        highlight={false}
+        variant="subtle"
+    >
+      <NavItem
+          link="#"
+          text="Dashboard"
+      />
+      <NavItem
+          active
+          link="#"
+          text="Statistics"
+      />
+      <NavItem
+          link="#"
+          text="Pages"
+      />
+    </Nav>
+  )
+}
+
+export default SubtleNoHighlightNav

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("nav", props: {variant: "subtle"}) do %>
+  <%= pb_rails("nav/item", props: { icon_left: "city", text: "City", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "user-friends", text: "People", link: "#", icon_right: "angle-down" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "user-tie", text: "Business", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "theater-masks", text: "Entertainment", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "salad", text: "Food", link: "#", icon_right: "angle-down" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "sunglasses", text: "Style", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "child", text: "Childern", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const SubtleWithIconsNav = () => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          iconLeft="city"
+          link="#"
+          text="City"
+      />
+      <NavItem
+          iconLeft="user-friends"
+          iconRight="angle-down"
+          link="#"
+          text="People"
+      />
+      <NavItem
+          active
+          iconLeft="user-tie"
+          link="#"
+          text="Business"
+      />
+      <NavItem
+          iconLeft="theater-masks"
+          link="#"
+          text="Entertainment"
+      />
+      <NavItem
+          iconLeft="salad"
+          iconRight="angle-down"
+          link="#"
+          text="Food"
+      />
+      <NavItem
+          iconLeft="sunglasses"
+          link="#"
+          text="Style"
+      />
+      <NavItem
+          iconLeft="child"
+          link="#"
+          text="Childern"
+      />
+    </Nav>
+  )
+}
+
+export default SubtleWithIconsNav

data/app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { icon_left: "newspaper", text: "News Feed"  }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "comments-alt", link: "#", text: "Messages", active: true }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "calendar-check", icon_right: "angle-down", link: "#", text: "Events" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "users", link: "#", text: "Friends" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "users-class", icon_right: "angle-down", link: "#", text: "Groups" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const WithIconsNav = () => {
+  return (
+    <Nav
+        link="#"
+        title="Browse"
+    >
+      <NavItem
+          iconLeft="newspaper"
+          text="News Feed"
+      />
+      <NavItem
+          active
+          iconLeft="comments-alt"
+          link="#"
+          text="Messages"
+      />
+      <NavItem
+          iconLeft="calendar-check"
+          iconRight="angle-down"
+          link="#"
+          text="Events"
+      />
+      <NavItem
+          iconLeft="users"
+          link="#"
+          text="Friends"
+      />
+      <NavItem
+          iconLeft="users-class"
+          iconRight="angle-down"
+          link="#"
+          text="Groups"
+      />
+    </Nav>
+  )
+}
+
+export default WithIconsNav

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

@@ -1,12 +1,21 @@
 examples:
   rails:
   - default_nav: Default
+  - with_icons_nav: With Icons
+  - no_highlight_nav: No Highlight
+  - subtle_nav: Subtle Variant
+  - subtle_with_icons_nav: Subtle With Icons
+  - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
   react:
   - default_nav: Default
+  - with_icons_nav: With Icons
+  - no_highlight_nav: No Highlight
+  - subtle_nav: Subtle Variant
+  - subtle_with_icons_nav: Subtle With Icons
+  - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
-  - block_nav: Block Nav
+  - block_nav: Block
   - block_no_title_nav: Without Title
-  

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

@@ -2,3 +2,8 @@ export { default as DefaultNav } from './_default_nav.jsx'
 export { default as HorizontalNav } from './_horizontal_nav.jsx'
 export { default as BlockNav } from './_block_nav.jsx'
 export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
+export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
+export { default as SubtleNav } from './_subtle_nav.jsx'
+export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
+export { default as WithIconsNav } from './_with_icons_nav.jsx'
+export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -8,11 +8,29 @@ module Playbook
       partial "pb_nav/item"
 
       prop :active, type: Playbook::Props::Boolean, default: false
-      prop :link, default: "#"
+      prop :link
       prop :text
+      prop :icon_left
+      prop :icon_right
 
       def classname
-        generate_classname("pb_nav_list_border_item", active_class)
+        generate_classname("pb_nav_list_kit_item", active_class)
+      end
+
+      def tag
+        link ? "a" : "div"
+      end
+
+      def options
+        {
+          class: "pb_nav_list_item_link",
+        }.compact
+      end
+
+      def link_options
+        options.merge(
+          href: link
+        )
       end
 
     private

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -11,17 +11,20 @@ module Playbook
       prop :link, default: "#"
       prop :title
       prop :orientation, type: Playbook::Props::Enum,
-                    values: ["vertical", "horizontal"],
-                    default: "vertical"
+                         values: %w[vertical horizontal],
+                         default: "vertical"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[normal subtle],
+                     default: "normal"
+      prop :highlight, type: Playbook::Props::Boolean, default: true
 
       def classname
-        [
-          "pb_nav_list",
-          orientation
-        ].compact.join("_")
+        generate_classname("pb_nav_list", variant, orientation, highlight_class)
       end
 
-
+      def highlight_class
+        highlight ? "highlight" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -1,8 +1,11 @@
+@import "../tokens/positioning";
+
 [class^="pb_popover_kit"] {
   .popover_tooltip {
     display: none;
     &.show {
       display: block;
+      z-index: $z_9;
     }
   }
 }

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

@@ -71,7 +71,7 @@ $action_colors: (
 );
 
 // Active colors ----------------------
-$active_light:        #E5F2FF;
+$active_light:        lighten(#E5F2FF, 3.5%);
 $active_dark:         #144075;
 $active_colors: (
   active_light:       $active_light,

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

@@ -4,3 +4,6 @@
       = image_tag("pb.logo.svg")
     |  
     = pb_rails("caption", props: { tag: "span", text: Playbook::VERSION })
+- flash.each do |name, msg|
+  - name = "success" if name == "notice"
+  = pb_rails("fixed_confirmation_toast", props: { text: msg, status: name })

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

@@ -0,0 +1,36 @@
+<br>
+<%= pb_rails("nav", props: {title: "Kits", link: kits_path, variant: "subtle"}) do %>
+  <% all_active = (controller_name == 'pages' && action_name == 'kits') ? true : false %>
+  <% pb_rails("nav/item", props: { text: "All", link: kits_path, active: all_active }) %>
+
+  <% MENU["kits"].each do |link| %>
+    <% active = !@kit.nil? && @kit == link ? true : false %>
+    <% if link.is_a?(Hash) %>
+      <div class="category_section">
+        <% active = !@category.nil? && @category == nav_hash_category(link) ? true : false %>
+        <%= pb_rails("nav/item", props: { active: active, classname: "category", icon_right: "angle-down", link: kit_category_show_path(nav_hash_category(link)) }) do %>
+          <%= pb_kit_title(nav_hash_category(link)) %>
+        <% end %>
+        <%= pb_rails("nav", props: { variant: "subtle", classname: "sub_category"}) do %>
+          <% nav_hash_array(link).each do |sub_link| %>
+            <% sub_active = !@kit.nil? && @kit == sub_link ? true : false %>
+            <%= pb_rails("nav/item", props: { text: pb_kit_title(sub_link), link: kit_show_path(sub_link), active: sub_active }) %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("nav/item", props: { text: pb_kit_title(link), link: kit_show_path(link), active: active }) %>
+    <% end %>
+  <% end %>
+<% end %>
+<br>
+<%= pb_rails("section_separator") %>
+<br>
+<%= pb_rails("nav", props: {title: "Tokens", link: utilities_path}) do %>
+  <% color_active = (controller_name == 'pages' && action_name == 'utilities') ? true : false %>
+  <%= 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("nav/item", props: { text: "Spacing", link: tokens_path, active: spacing_active }) %>
+<% end %>
+<br>
+<br>

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

@@ -8,8 +8,8 @@ html
 
   body
     = render 'layouts/playbook/nav'
-    = pb_rails("layout", props: {full: true})
-      = pb_rails("layout/sidebar")
+    = pb_rails("layout", props: {classname: "pb--page--content"})
+      = pb_rails("layout/sidebar", props: { classname: "pb--page--sideNav" })
         = render 'layouts/playbook/sidebar'
       = pb_rails("layout/body")
         .pb--page--content--main

data/app/views/playbook/pages/kit_category_show.html.slim

@@ -0,0 +1,10 @@
+.pb--kits
+  = pb_rails("title", props: { text: pb_kit_title(@category), tag: "h1", size: 1 })
+
+  .pb--kit-type-nav
+    a href="#{kit_category_show_path(@category, type: 'rails')}" class="#{'active' if @type == 'rails'}" Rails
+    a href="#{kit_category_show_path(@category, type: 'react')}" class="#{'active' if @type == 'react'}" React
+
+  br
+
+  == pb_category_kits(category_kits: @category_kits, type: @type)

data/lib/generators/kit/kit_generator.rb

@@ -38,7 +38,7 @@ class KitGenerator < Rails::Generators::NamedBase
       return
     else
       # Add kit to Playbook menu ==========================
-      open("config/data/menu.yml", "a") do |f|
+      open("app/pb_kits/playbook/data/menu.yml", "a") do |f|
         f.puts "  - #{@kit_name_underscore}"
       end
       say_status  "complete",

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.1.2
+  version: 4.2.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-30 00:00:00.000000000 Z
+date: 2020-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -85,6 +85,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 0.9.2
+- !ruby/object:Gem::Dependency
+  name: react-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.0
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
@@ -395,79 +409,82 @@ files:
 - app/helpers/playbook/pb_kit_helper.rb
 - app/helpers/playbook/redcarpet_helper.rb
 - app/pb_kits/playbook/_playbook.scss
+- app/pb_kits/playbook/config/_kit_example.html.erb
 - app/pb_kits/playbook/config/_kit_example.html.slim
 - app/pb_kits/playbook/config/_kit_ui.html.slim
 - app/pb_kits/playbook/config/_pb_kit_api.html.erb
+- app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
-- app/pb_kits/playbook/kits/pb_avatar.js
-- app/pb_kits/playbook/kits/pb_badge.js
-- app/pb_kits/playbook/kits/pb_bar_graph.js
-- app/pb_kits/playbook/kits/pb_body.js
-- app/pb_kits/playbook/kits/pb_button.js
-- app/pb_kits/playbook/kits/pb_caption.js
-- app/pb_kits/playbook/kits/pb_card.js
-- app/pb_kits/playbook/kits/pb_checkbox.js
-- app/pb_kits/playbook/kits/pb_circle_icon_button.js
-- app/pb_kits/playbook/kits/pb_contact.js
-- app/pb_kits/playbook/kits/pb_currency.js
-- app/pb_kits/playbook/kits/pb_dashboard_value.js
-- app/pb_kits/playbook/kits/pb_date.js
-- app/pb_kits/playbook/kits/pb_date_range_inline.js
-- app/pb_kits/playbook/kits/pb_date_stacked.js
-- app/pb_kits/playbook/kits/pb_date_year_stacked.js
-- app/pb_kits/playbook/kits/pb_distribution_bar.js
-- app/pb_kits/playbook/kits/pb_fixed_confirmation_toast.js
-- app/pb_kits/playbook/kits/pb_hashtag.js
-- app/pb_kits/playbook/kits/pb_home_address_street.js
-- app/pb_kits/playbook/kits/pb_icon.js
-- 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_label_pill.js
-- app/pb_kits/playbook/kits/pb_label_value.js
-- app/pb_kits/playbook/kits/pb_layout.js
-- app/pb_kits/playbook/kits/pb_legend.js
-- app/pb_kits/playbook/kits/pb_line_graph.js
-- 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_multiple_users.js
-- app/pb_kits/playbook/kits/pb_multiple_users_stacked.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
-- app/pb_kits/playbook/kits/pb_pill.js
-- app/pb_kits/playbook/kits/pb_progress_pills.js
-- app/pb_kits/playbook/kits/pb_progress_simple.js
-- app/pb_kits/playbook/kits/pb_radio.js
-- app/pb_kits/playbook/kits/pb_section_separator.js
-- app/pb_kits/playbook/kits/pb_select.js
-- app/pb_kits/playbook/kits/pb_selectable_card.js
-- app/pb_kits/playbook/kits/pb_source.js
-- app/pb_kits/playbook/kits/pb_star_rating.js
-- 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_textarea.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
-- app/pb_kits/playbook/kits/pb_title_count.js
-- app/pb_kits/playbook/kits/pb_title_detail.js
-- 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/packs/application.js
 - app/pb_kits/playbook/packs/examples.js
-- app/pb_kits/playbook/packs/kits.js
+- app/pb_kits/playbook/packs/kits/pb_avatar.js
+- app/pb_kits/playbook/packs/kits/pb_badge.js
+- app/pb_kits/playbook/packs/kits/pb_bar_graph.js
+- app/pb_kits/playbook/packs/kits/pb_body.js
+- app/pb_kits/playbook/packs/kits/pb_button.js
+- app/pb_kits/playbook/packs/kits/pb_caption.js
+- app/pb_kits/playbook/packs/kits/pb_card.js
+- app/pb_kits/playbook/packs/kits/pb_checkbox.js
+- app/pb_kits/playbook/packs/kits/pb_circle_icon_button.js
+- app/pb_kits/playbook/packs/kits/pb_contact.js
+- app/pb_kits/playbook/packs/kits/pb_currency.js
+- app/pb_kits/playbook/packs/kits/pb_dashboard_value.js
+- app/pb_kits/playbook/packs/kits/pb_date.js
+- app/pb_kits/playbook/packs/kits/pb_date_range_inline.js
+- app/pb_kits/playbook/packs/kits/pb_date_stacked.js
+- app/pb_kits/playbook/packs/kits/pb_date_year_stacked.js
+- app/pb_kits/playbook/packs/kits/pb_distribution_bar.js
+- app/pb_kits/playbook/packs/kits/pb_fixed_confirmation_toast.js
+- app/pb_kits/playbook/packs/kits/pb_flex.js
+- app/pb_kits/playbook/packs/kits/pb_hashtag.js
+- app/pb_kits/playbook/packs/kits/pb_home_address_street.js
+- app/pb_kits/playbook/packs/kits/pb_icon.js
+- app/pb_kits/playbook/packs/kits/pb_icon_circle.js
+- app/pb_kits/playbook/packs/kits/pb_icon_value.js
+- app/pb_kits/playbook/packs/kits/pb_image.js
+- app/pb_kits/playbook/packs/kits/pb_label_pill.js
+- app/pb_kits/playbook/packs/kits/pb_label_value.js
+- app/pb_kits/playbook/packs/kits/pb_layout.js
+- app/pb_kits/playbook/packs/kits/pb_legend.js
+- app/pb_kits/playbook/packs/kits/pb_line_graph.js
+- app/pb_kits/playbook/packs/kits/pb_list.js
+- app/pb_kits/playbook/packs/kits/pb_loading_inline.js
+- app/pb_kits/playbook/packs/kits/pb_message.js
+- app/pb_kits/playbook/packs/kits/pb_multiple_users.js
+- app/pb_kits/playbook/packs/kits/pb_multiple_users_stacked.js
+- app/pb_kits/playbook/packs/kits/pb_nav.js
+- app/pb_kits/playbook/packs/kits/pb_online_status.js
+- app/pb_kits/playbook/packs/kits/pb_person.js
+- app/pb_kits/playbook/packs/kits/pb_person_contact.js
+- app/pb_kits/playbook/packs/kits/pb_pill.js
+- app/pb_kits/playbook/packs/kits/pb_progress_pills.js
+- app/pb_kits/playbook/packs/kits/pb_progress_simple.js
+- app/pb_kits/playbook/packs/kits/pb_radio.js
+- app/pb_kits/playbook/packs/kits/pb_section_separator.js
+- app/pb_kits/playbook/packs/kits/pb_select.js
+- app/pb_kits/playbook/packs/kits/pb_selectable_card.js
+- app/pb_kits/playbook/packs/kits/pb_source.js
+- app/pb_kits/playbook/packs/kits/pb_star_rating.js
+- app/pb_kits/playbook/packs/kits/pb_stat_change.js
+- app/pb_kits/playbook/packs/kits/pb_stat_value.js
+- app/pb_kits/playbook/packs/kits/pb_table.js
+- app/pb_kits/playbook/packs/kits/pb_text_input.js
+- app/pb_kits/playbook/packs/kits/pb_textarea.js
+- app/pb_kits/playbook/packs/kits/pb_time.js
+- app/pb_kits/playbook/packs/kits/pb_timestamp.js
+- app/pb_kits/playbook/packs/kits/pb_title.js
+- app/pb_kits/playbook/packs/kits/pb_title_count.js
+- app/pb_kits/playbook/packs/kits/pb_title_detail.js
+- app/pb_kits/playbook/packs/kits/pb_toggle.js
+- app/pb_kits/playbook/packs/kits/pb_user.js
+- app/pb_kits/playbook/packs/kits/pb_user_badge.js
 - app/pb_kits/playbook/packs/main.scss
 - app/pb_kits/playbook/packs/site_styles/_scaffold.scss
 - app/pb_kits/playbook/packs/site_styles/_site-style.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_all.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss
+- app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss
@@ -701,6 +718,30 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
+- app/pb_kits/playbook/pb_flex/_flex.html.erb
+- app/pb_kits/playbook/pb_flex/_flex.jsx
+- app/pb_kits/playbook/pb_flex/_flex.scss
+- app/pb_kits/playbook/pb_flex/_flex_item.html.erb
+- app/pb_kits/playbook/pb_flex/_flex_item.jsx
+- app/pb_kits/playbook/pb_flex/_flex_item.scss
+- app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_vertical.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_wrap.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx
+- app/pb_kits/playbook/pb_flex/docs/example.yml
+- app/pb_kits/playbook/pb_flex/docs/index.js
+- app/pb_kits/playbook/pb_flex/flex.rb
+- app/pb_kits/playbook/pb_flex/flex_item.rb
 - app/pb_kits/playbook/pb_form/_form.scss
 - app/pb_kits/playbook/pb_form/_form_form_with.html.erb
 - app/pb_kits/playbook/pb_form/_form_simple_form.html.erb
@@ -928,6 +969,16 @@ files:
 - 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/_horizontal_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx
 - 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
@@ -1309,7 +1360,7 @@ files:
 - 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
+- app/views/layouts/playbook/_sidebar.html.erb
 - app/views/layouts/playbook/application.html.slim
 - app/views/layouts/playbook/fullscreen.html.slim
 - app/views/layouts/playbook/grid.html.slim
@@ -1329,6 +1380,7 @@ files:
 - app/views/playbook/pages/fullscreen.html.slim
 - app/views/playbook/pages/grid.html.slim
 - app/views/playbook/pages/home.html.slim
+- app/views/playbook/pages/kit_category_show.html.slim
 - app/views/playbook/pages/kit_show.html.slim
 - app/views/playbook/pages/kits.html.slim
 - app/views/playbook/pages/principals/_getting_started.html.md