playbook_ui 6.5.2 → 6.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 189a578c049c4d3de980ed42c9f15390a0c2e75eb001a30ef49952c0bdcfb708
-  data.tar.gz: 5e13504ed89a6452cf39ce141d2f9a2859b4e3c5a56b545c64e72b10d156f61c
+  metadata.gz: 6bc146e07206b69308c1316fa9ff3dcd6b3193f6721e035234b4a9a41aae65f1
+  data.tar.gz: 48cd02b771de4e7c839819d2c73697f0be832ec14d36165dc48e607e0bd6b36e
 SHA512:
-  metadata.gz: 9cb88a7b04c68efa695d9794036ce648beebd22802437f6663cbb6e102589000ce24827fde7eb93fc0faa61b9a9c4a93dba77a4fe7c1c8b6d035954d4d11d23f
-  data.tar.gz: 1c6118da84bc1ab07fc64c9b19f60370ff59ea45aa636bb46ae02c770d15b519b3c609fa443ec535cef6ac162a90fa9550efeb2482264b5cc0d1f9f53f32778c
+  metadata.gz: 9d681d12080be950d2359c67549fb911a4c8a0b9fb0cfb83999b2f10486385ae2110394431c052a8ef6ee7dd0819a785492e684bff69aeb72395a3dd74b07f83
+  data.tar.gz: bd02ad9656c149765e11620539559d311b02d9aec99038663282756109bf98e191aed834e2f6171aaac7725b475a4310d9559c58e4341e81207e10fb11769a33

data/README.md

@@ -35,10 +35,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +62,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/controllers/playbook/application_controller.rb

@@ -3,11 +3,13 @@
 module Playbook
   class ApplicationController < ActionController::Base
     protect_from_forgery with: :exception
-
+ 
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
+
+  
 end

data/app/controllers/playbook/pages_controller.rb

@@ -8,6 +8,26 @@ module Playbook
     before_action :set_kit, only: %i[kit_show_rails kit_show_react]
     before_action :ensure_kit_type_exists, only: %i[kit_show_rails kit_show_react]
     before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
+    before_action :set_playbook
+    
+    def set_playbook
+      @playbook = true
+    end  
+
+    def enable_dark_mode
+      cookies[:dark_mode] = {
+        value: "true"
+      }
+      redirect_back(fallback_location: root_path)
+    end
+
+    def disable_dark_mode
+       cookies[:dark_mode] = {
+        value: "false"
+      }
+      redirect_back(fallback_location: root_path)
+    end
+
 
     def home; end
 
@@ -27,7 +47,7 @@ module Playbook
     end
 
     def kit_show_rails
-      render template: "playbook/pages/kit_show"
+      render "playbook/pages/kit_show"
     end
 
     def kit_show_react

data/app/helpers/playbook/application_helper.rb

@@ -13,5 +13,24 @@ module Playbook
     def current_webpacker_instance
       Playbook.webpacker
     end
+
+    def dark_mode
+      if cookies[:dark_mode] == "true"
+        true
+      else
+        false
+      end
+    end
+
+    def dark_mode_props(props)
+      if cookies[:dark_mode] == "true"
+        props.merge(dark: dark_mode)
+      elsif cookies[:dark_mode] == "false"
+        props.merge(dark: dark_mode)
+      else
+        props
+      end
+    end
+
   end
 end

data/app/helpers/playbook/pb_kit_helper.rb

@@ -6,20 +6,36 @@ require "webpacker/react/component"
 
 module Playbook
   module PbKitHelper
+
     def pb_rails(kit, props: {}, &block)
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
-      kit = build_view_model(kit.to_s, props, &block)
+      kit = build_view_model(kit.to_s, rails_props(props), &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    def pb_react(kit, props: {}, options: {})
+    def pb_react(kit, props:{dark: react_props}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end
 
   private
+    def rails_props(props)
+      if @playbook.nil?
+        props
+      else
+        dark_mode_props(props)
+      end
+    end  
+
+    def react_props
+      if @playbook.nil?
+        false
+      else
+        dark_mode
+      end
+    end 
 
     def is_subkit?(kit)
       kit.match(%r{[/\\]})

data/app/pb_kits/playbook/config/_kit_example.html.erb

@@ -1,9 +1,9 @@
 <%if !@kit_examples[:examples].nil? %>
   <% @kit_examples[:examples].each do |kit_example| %>
     <% kit_example.each do |key, item| %>
-      <div class="pb--doc <%=key.include?('_dark') ? 'dark_ui' : 'light_ui'%>">
+    <%=pb_rails("card", props:{classname: "pb--doc", padding:"none"})do%>
         <%= render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code } %>
-      </div>
+      <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -19,7 +19,7 @@
 </div>
 
   <% if @show_code%>
-    <div class="markdown pb--kit-example-markdown">
+    <div class="markdown pb--kit-example-markdown <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
       <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
     </div>
     <div class="pb--codeControls">
@@ -30,6 +30,7 @@
       </ul>
     </div>
     <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
+      <%= pb_rails("section_separator")%>
       <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
       <% if type == "rails" %>
         <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>

data/app/pb_kits/playbook/config/_pb_kit_api.html.erb

@@ -1,18 +1,16 @@
 <% if defined?(@kit_api) && @kit_api.present? %>
+
   <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-    <table class="pb--propsTable--table">
-      <thead>
-        <tr>
-          <th>Available Props</th>
-        </tr>
-      </thead>
-      <tbody>
+  <%= pb_rails("title", props:{text: "Available Props", size:3, margin_bottom:"sm"}) %>
+    <%= pb_rails("card",props:{padding:"none"})do%>
+      <%= pb_rails("list",props: {xpadding:true})do%>
         <% @kit_api.each_with_index do |(key,value),index| %>
-          <tr>
-            <td><%= key %></td>
-          </tr>
+            <%= pb_rails("list/item") do %>
+              <%= key %>
+            <% end %>
         <% end %>
-      </tbody>
-    </table>
+      <% end %>
+    <% end %>
   </div>
+  
 <% end %>

data/app/pb_kits/playbook/index.js

@@ -9,6 +9,7 @@ export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
+export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
@@ -80,6 +81,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -23,6 +23,7 @@ import * as ButtonToolbar from 'pb_button_toolbar/docs'
 import * as Caption from 'pb_caption/docs'
 import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
+import * as CircleChart from 'pb_circle_chart/docs'
 import * as CircleIconButton from 'pb_circle_icon_button/docs'
 import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
@@ -88,6 +89,7 @@ import * as TimeRangeInline from 'pb_time_range_inline/docs'
 import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
+import * as Typeahead from 'pb_typeahead/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -104,6 +106,7 @@ WebpackerReact.setup({
   ...Caption,
   ...Card,
   ...Checkbox,
+  ...CircleChart,
   ...CircleIconButton,
   ...Contact,
   ...Currency,
@@ -169,6 +172,7 @@ WebpackerReact.setup({
   ...Title,
   ...TitleCount,
   ...TitleDetail,
+  ...Typeahead,
   ...Toggle,
   ...User,
   ...UserBadge,

data/app/pb_kits/playbook/packs/site_styles/_site-style.scss

@@ -13,7 +13,6 @@ body {
 .pb--page {
   &--topNav {
     flex: 0 0;
-    border-bottom: 1px solid $border_light;
     padding: 20px 30px;
     background: $white;
     h1 {
@@ -23,11 +22,15 @@ body {
         display: flex;
       }
     }
+    &.dark{
+    background: tint(#0a0527, 10);
+    }
   }
+
   &--content {
     min-height: calc(100vh - 89px);
     @include break_at(breakpoint("lg")) {
-      grid-template-columns: auto auto !important;
+      grid-template-columns: auto !important;
     }
     &--main {
       flex-grow: 1;
@@ -37,6 +40,9 @@ body {
       @include break_at(breakpoint("lg")) {
         padding: $space-lg $space-xl;
       }
+      &.dark{
+        background: #0a0527;
+      }
     }
   }
   &--hamburger, &--checkbox {
@@ -66,7 +72,6 @@ body {
         top: 100px;
         right: 0;
         width: auto !important;
-        padding: $space-xl;
         z-index: 1000;
       }
     }
@@ -89,9 +94,15 @@ body {
         padding-left: $space_md;
       }
     }
+    &[class*=dark]{
+      border-color:$border_dark;
+    }
   }
 }
-
+#toggle-modes{
+    display: flex;
+    margin-right: 80px;
+}
 // Nav Tabs switch between Rails and React
 .pb--kit-type-nav {
   margin: 20px 0 30px;

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -1,8 +1,7 @@
 @import "../../../tokens/colors";
-
+@import "../../../tokens/spacing";
 .pb--doc {
   margin-bottom: 20px;
-  border: 1px solid $border-light;
   border-radius: 6px;
   box-shadow: 0 4px 10px $shadow;
   background: $white;
@@ -37,20 +36,37 @@
   }
 
   .pb--kit-example, .pb--kit-example-markdown {
+    &.dark {
+      color: $text_dk_light;
+      a {
+        color: $teal;
+      }
+    }
     padding: calc(2rem + 4px) 2rem 1rem;
   }
 
   .pb--kit-example {
     position: relative;
 
-    &::after {
-      content: '';
-      width: 100%;
-      height: 4px;
-      background: $border-light;
-      position: absolute;
-      top: 0;
-      left: 0;
+    // &::after {
+    //   content: '';
+    //   width: 100%;
+    //   height: 4px;
+    //   background: $border-light;
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    // }
+    // &.dark{
+    //   &::after {
+    //     display: none;
+    //   }
+    // }
+
+    code {
+      background-color: rgba($text_lt_lighter, 0.35);
+      border-radius: 5px;
+      padding: 2px;
     }
   }
 
@@ -101,24 +117,17 @@
   }
 
   .pb--codeCopy {
-    padding: 20px 40px;
-    background: $bg_dark;
+    background: none;
     position: relative;
-    border-top: 1px solid $border-light;
     display: none;
     overflow-x: auto;
     border-radius: 0 0 6px 6px;
+    background:tint($bg_dark,10);
   }
 
   &.dark_ui {
-    background: $bg_dark;
+    background: none;
 
-    .pb--kit-example {
-
-      &::after {
-        background: $border-dark;
-      }
-    }
     .pb--codeCopy {
       border-color: $border-dark;
     }
@@ -134,56 +143,6 @@
   }
 }
 
-.pb--propsTable {
-  position: relative;
-  margin: 40px 0 0;
-  background: $card_light;
-  color: #faf6e4;
-  padding: 10px 30px 10px 30px;
-  border: 1px solid $border-light;
-
-  &--table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 10px;
-
-    tr {
-      padding: 10px;
-
-      th {
-        text-align: left;
-        padding: 10px 10px 5px 10px;
-        color: $text_lt_light;
-        opacity: 0.7;
-        font-size: 12px;
-        text-transform: uppercase;
-      }
-
-      td {
-        border-bottom: 1px solid $border-light;
-        padding: 5px 10px;
-        font-size: 14px;
-        color: $text_lt_light;
-        font-weight: 600;
-      }
-
-      &:last-child {
-        td {
-          border-bottom-width: 0;
-        }
-      }
-    }
-
-    &--notset {
-      font-size: 12px;
-      opacity: 0.4;
-      font-style: italic;
-      position: relative;
-      font-weight: 400;
-
-      &:after {
-        content: "not set";
-      }
-    }
-  }
+pre.highlight {
+  padding: $space_xl;
 }