playbook_ui 7.8.3 → 7.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5edc6bf656e6d1e7aa9e67313cccebd45847f9573ad987747db8ab5400229cd
-  data.tar.gz: 7a99d92a2b485d89e6ea294820012ac5d7719ab82cd85a7e36676520e3522973
+  metadata.gz: 7c5a4821bfce0e6bc6e695a4ff74d9872e3277dca2731cc3e729bb0c6d1975e0
+  data.tar.gz: '08f1d6bf254d950192ace6ce03f12db92a93ad9408550187a79d7dba119bd85a'
 SHA512:
-  metadata.gz: 8df37ff76c9e25cde1b16ec5e292f54248b18f1aa0493fb3771dde68440dba1132647ea136be5ba47f07c3aa457fb3d76b3dc2296cd39bc1d8832909e0b36a2c
-  data.tar.gz: 8d3e71da8e414e6806da81a7cdd70e5744afa26f9a387745d1c1f8c3a55e783416df85e4eaca2012dce1c3b2d5eec447ce2da8221802dbb4e8e760f38f4b25a8
+  metadata.gz: 16975af2a287902b301e43d4d071e5d290fa1e7650416cb01609e7b28e2b5c409c681fa449cba9be6d0471284574da665bd10e004852d5c41f5f654cc0bcb811
+  data.tar.gz: 42086dc050de63c48bac1d86fa4358320e6f7481162ad5791ca821bffefd8a8755032a55cf5cceb8617c78c39a11eeb717243618959bb21c47d3de858529df05

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

@@ -89,4 +89,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-@import "trix";

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;