playbook_ui 7.8.4 → 7.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aacf4025dd00629a9fa896eb6135bc90214c051b47bdaca20246f2120f4b5716
-  data.tar.gz: 14aa4b946d4c5c154e2d2cfd323fd99fbcb59c7b67a00a362867ab12c7ce6bc2
+  metadata.gz: 750f900a7435e934c7fe3d2f382e04d1628fcf682514e62df328660c508f08a0
+  data.tar.gz: 7a01c079573dda9db0f8ca18009fcfbdeeba80df54c7cc89d1da00f1b141ef0c
 SHA512:
-  metadata.gz: 27d3d65a4b1edd271e0ffa90d1bde44f3a50d14e5c887c3e8de9818ac7f42e48629feae5f739c4763aab38819fd127f64df09c9d7b0a87e27aaec376845c8eb2
-  data.tar.gz: 26322de19165c686939370df7ba0fd7328f9e8b9d5b46100b9e916ec371cbe2efe3344f23c2ce970140801647fb1e0aea5aed5f14f28c9fb644d193d7b7dbd1d
+  metadata.gz: f914cdd6e7b1be3a8bb1304ac9d2bd9eefacfffae176aead556ecb4bedb0f0b6df476d5c84e4322d240ffa42982bf5c742df90e34472a0a51a262759d4533951
+  data.tar.gz: 4721bae1266b4ede5db496a9f765c3912e2306b8c9fb97155a95ac8d85486027ba11b9f6b139de4ae0b16de4c530a42fc0d4a36aa239329ea226bbb6a8e9d6c5

data/app/controllers/playbook/application_controller.rb

@@ -3,11 +3,13 @@
 module Playbook
   class ApplicationController < ActionController::Base
     helper Webpacker::Helper
-    helper Playbook::PbKitHelper
+    helper Playbook::ApplicationHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
-  end
 
-  
+    def delete_dark_mode_cookie
+      cookies.delete :dark_mode
+    end
+  end
 end

data/app/helpers/playbook/application_helper.rb

@@ -1,36 +1,30 @@
 # frozen_string_literal: true
 
-require "webpacker"
-require "webpacker/react/railtie" if defined?(Rails)
-require "webpacker/react/helpers"
-require "webpacker/react/component"
-
 module Playbook
   module ApplicationHelper
-    include ::Webpacker::Helper
     include ::Webpacker::React::Helpers
+    include ::Playbook::PbKitHelper
 
     def current_webpacker_instance
       Playbook.webpacker
     end
 
-    def dark_mode
-      if cookies[:dark_mode] == "true"
-        true
-      else
-        false
-      end
+    def pb_rails(kit, props: {}, &block)
+      super kit, props: dark_mode_props(props), &block
+    end
+
+    def pb_react(kit, props: {}, options: {})
+      react_component kit.camelize, dark_mode_props(props), options
     end
 
+  private
+
     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
+      (props || {}).merge(dark: dark_mode?)
     end
 
+    def dark_mode?
+      cookies[:dark_mode].eql? "true"
+    end
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -17,50 +17,40 @@ module Playbook
       end
     end
 
-    def read_file(filename)
-      if File.file?(filename)
-        File.read(filename)
-      else
-        ""
-      end
-    end
-
     def kit_path(kit)
       "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
     end
 
     def get_kit_description(kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
     end
 
     def get_per_sample_descriptions(kit, key)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
     end
 
     def get_kit_footer(kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
     end
 
-    def pb_kit(kit: "", type: "rails", show_code: true)
+    def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false)
       @type = type
       @kit_examples = get_kit_examples(kit, type)
+      @limit_examples = limit_examples
       @show_code = show_code
       render partial: "config/kit_example"
     end
 
-    def pb_kits(type: "rails")
+    def pb_kits(type: "rails", limit_examples: false)
       display_kits = []
       kits = get_kits
       kits.each do |kit|
         if kit.is_a?(Hash)
           nav_hash_array(kit).each do |sub_kit|
-            display_kits << render_pb_doc_kit(sub_kit, type, false)
+            display_kits << render_pb_doc_kit(sub_kit, type, false, limit_examples)
           end
         else
-          display_kits << render_pb_doc_kit(kit, type, false)
+          display_kits << render_pb_doc_kit(kit, type, false, limit_examples)
         end
       end
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
@@ -79,10 +69,10 @@ module Playbook
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
     end
 
-    def render_pb_doc_kit(kit, type, code = true)
+    def render_pb_doc_kit(kit, type, code = true, limit_examples)
       title = render_clickable_title(kit, type)
       ui = raw("<div class='pb--docItem-ui'>
-          #{pb_kit(kit: kit, type: type, show_code: code)}</div>")
+          #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples)}</div>")
       title + ui
     end
 
@@ -148,6 +138,37 @@ module Playbook
       (!kit.nil? && @kit == link)
     end
 
+    def read_source_file(*args)
+      path = Playbook::Engine.root.join(*args)
+      path.exist? ? path.read : ""
+    end
+
+    def format_search_hash(kit)
+      label_value_hash = {
+        label: kit.to_s.titleize,
+        value: @type == "react" || @type.nil? ? "/kits/#{kit}/react" : "/kits/#{kit}",
+      }
+      label_value_hash
+    end
+
+    def search_list
+      all_kits = []
+      formatted_kits = []
+      MENU["kits"].each do |kit|
+        if kit.is_a? Hash
+          kit.values[0].each do |sub_kit|
+            all_kits.push(sub_kit)
+          end
+        else
+          all_kits.push(kit)
+        end
+      end
+      all_kits.sort!.each do |sorted_kit|
+        formatted_kits.push(format_search_hash(sorted_kit))
+      end
+      formatted_kits
+    end
+
   private
 
     def get_kit_examples(kit, type)

data/app/helpers/playbook/pb_kit_helper.rb

@@ -1,41 +1,17 @@
 # frozen_string_literal: true
 
-require "webpacker/react/railtie" if defined?(Rails)
-require "webpacker/react/helpers"
-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, rails_props(props), &block)
+      kit = build_view_model(kit.to_s, props, &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    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/helpers/playbook/pb_sample_helper.rb

@@ -2,26 +2,10 @@
 
 module Playbook
   module PbSampleHelper
-    def has_sample_type?(sample, type)
-      type ||= "rails"
-      if type == "rails"
-        Dir["../../views/playbook/samples/#{sample}/*.html.erb"].empty?
-      elsif type == "react"
-        Dir["../../views/playbook/samples/#{sample}/*.jsx"].empty?
-      end
-    end
-
-    def pb_sample(sample: "", type: "rails")
-      @type = type
-      @sample = sample
-    end
-
-    def read_file(filename)
-      if File.file?(filename)
-        File.read(filename)
-      else
-        ""
-      end
+    def kits_used(sample)
+      code = get_raw_code(sample, "rails")
+      kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
+      kits_array.uniq
     end
 
     def get_raw_code(sample, type)
@@ -30,9 +14,8 @@ module Playbook
       elsif type == "react"
         ext = "jsx"
       end
-      filename = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.#{ext}"
-      contents = read_file(filename)
-      contents
+
+      read_source_file "app/views/playbook/samples", sample, "index.#{ext}"
     end
 
     def get_sample_code_content(sample, type)
@@ -45,6 +28,24 @@ module Playbook
       raw rouge(code, rouge_type)
     end
 
+    def get_samples(kit)
+      sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
+      all_samples = []
+
+      sample_yaml.each do |_category, sample|
+        all_samples.push(sample)
+      end
+
+      output = ""
+      samples_using_kit = []
+      all_samples[0].each do |sample|
+        filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
+        output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
+        samples_using_kit.push(sample) if output.chomp == filepath
+      end
+      samples_using_kit
+    end
+
     def render_sample_ui(sample, type)
       if type == "rails"
         render template: "playbook/samples/#{sample}/index.html.erb"

data/app/pb_kits/playbook/_playbook.scss

@@ -88,4 +88,4 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/spacing';
+@import './utilities/spacing';

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

@@ -1,8 +1,22 @@
 <%if !@kit_examples[:examples].nil? %>
-  <% @kit_examples[:examples].each do |kit_example| %>
-    <% kit_example.each do |key, item| %>
-    <%=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 } %>
+  <% if @limit_examples %>
+    <% @kit_examples[:examples].each_with_index do |kit_example, index| %>
+      <% kit_example.each do |key, item| %>
+        <% if index == 0 %>
+          <%= 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 } %>
+          <% end %>
+        <% elsif index > 0 %>
+          <% break %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <% @kit_examples[:examples].each do |kit_example| %>
+      <% kit_example.each do |key, item| %>
+        <%= 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 } %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>

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

@@ -18,24 +18,24 @@
   <br>
 </div>
 
-  <% if @show_code%>
-    <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">
-      <ul>
-        <li>
-          <a href="#" data-toggle="code_example">Code Example</a>
-        </li>
-      </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>
-      <% elsif type == "react" %>
-        <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
-      <% end %>
-    </div>
-  <% end %>
+<% if @show_code %>
+  <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">
+    <ul>
+      <li>
+        <a href="#" data-toggle="code_example">Code Example</a>
+      </li>
+    </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>
+    <% elsif type == "react" %>
+      <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
+    <% end %>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_currency/_currency.html.erb

@@ -6,7 +6,7 @@
 
   <%= pb_rails("caption", props: { text: object.label }) %>
 
-  <div class="pb_currency_wrapper">
+  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <%= pb_rails("body", props: object.currency_wrapper_props) do %>
       <%= object.symbol %>
     <% end %>

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -14,10 +14,12 @@ type CurrencyProps = {
   className?: string,
   dark?: boolean,
   data?: object,
+  emphasized?: boolean,
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
+  variant?: 'default' | 'light' | 'bold',
   unit?: string,
 }
 
@@ -33,15 +35,28 @@ const Currency = (props: CurrencyProps) => {
     aria = {},
     amount,
     data = {},
+    emphasized = true,
     id,
     unit,
     className,
     label = '',
     size = 'sm',
     symbol = '$',
+    variant = 'default',
     dark = false,
   } = props
 
+  const emphasizedClass = emphasized ? '' : '_deemphasized'
+
+  let variantClass
+  if (size === 'sm') {
+    if (variant === 'light') {
+      variantClass = '_light'
+    } else if (variant === 'bold') {
+      variantClass = '_bold'
+    }
+  }
+
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -60,7 +75,7 @@ const Currency = (props: CurrencyProps) => {
     >
       <Caption>{label}</Caption>
 
-      <div className="pb_currency_wrapper">
+      <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         <Body
             className="dollar_sign"
             color="light"

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -24,6 +24,28 @@
   [class^=pb_currency_wrapper] {
     display: flex;
 
+    &[class*=_deemphasized] [class^=pb_body_kit][class*=_light] {
+      color: $text_lt_default;
+    }
+
+    &[class*=_deemphasized] [class^=pb_title_kit][class*=_4] {
+      font-weight: $regular;
+    }
+
+    &[class*=_light] [class^=pb_body_kit][class*=_light] {
+      color: $text_lt_light;
+    }
+
+    &[class*=_light] [class^=pb_title_kit][class*=_4] {
+      color: $text_lt_light;
+      font-weight: $regular;
+    }
+
+    &[class*=_bold] [class^=pb_body_kit][class*=_light] {
+      color: $text_lt_default;
+      font-weight: $bolder;
+    }
+
     & > [class*=dollar_sign] {
       display: flex;
       align-items: flex-start;
@@ -45,7 +67,7 @@
     padding-left: $space_xs - 7px;
     padding-right: $space_xs - 7px;
   }
-  
+
   &[class*=_sm] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
     line-height: 1.4;
     padding-left: $space_xs - 7px;