playbook_ui 7.8.1 → 7.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f1b20f99582094b211e94e5de1f615e7e7948e8e618062e2b77a224d7ffb69b
-  data.tar.gz: 2d3195399d5eb4a17b30f9b9e26c1420ff7cb7263d95fc3e32c2a7800a3f9e58
+  metadata.gz: 2dded8961e6cc6308b1d07c4ddc00b8be69244d92b120ab3d1a370f566a7cd37
+  data.tar.gz: ac06d5ca306f7ba1103a2d68c7e179a8cabd2984e56c73d9a358a25ebb65213f
 SHA512:
-  metadata.gz: 264ab30755326f86f13566ff437797dc37775801c31bee01584c9fc2cc607656cc00f8fb045dea32bf89582b437f2e1efaca4f68c339be12c39b081351b94f8f
-  data.tar.gz: a8fa83550b31847d8739f1248e800305969ff698ea198a05becb7cd5299bc2e3057309ad30be2b3bd7120fec1a6e16c592d0169d281947a5b2bf79090b8ebb9f
+  metadata.gz: d726cb9073d2bf80830ed397990203f1faf674b7f2e04e8da01d70a7ac3ad590a111a373904d4b756ff964eb55ef7829454a10313f370f0310f690298c15a85a
+  data.tar.gz: d18d68afbb27818521cc240f52d6f05c025f0c23745bf3095a7ec1c848c97e73a784049e4db873ad51f874320b32e5d6dc93e441ce6df62025d23031cf1de5a4

data/app/helpers/playbook/pb_doc_helper.rb

@@ -25,6 +25,28 @@ module Playbook
       end
     end
 
+    def delete_dark_mode_cookie
+      cookies.delete :dark_mode
+    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 kit_path(kit)
       "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
     end
@@ -44,23 +66,24 @@ module Playbook
       read_file(filename)
     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 +102,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 +171,32 @@ module Playbook
       (!kit.nil? && @kit == link)
     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_sample_helper.rb

@@ -11,6 +11,12 @@ module Playbook
       end
     end
 
+    def kits_used(sample)
+      code = get_raw_code(sample, "rails")
+      kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
+      kits_array.uniq
+    end
+
     def pb_sample(sample: "", type: "rails")
       @type = type
       @sample = sample

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;

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -28,6 +28,13 @@ module Playbook
       prop :unit, type: Playbook::Props::String,
                   required: false
 
+      prop :emphasized, type: Playbook::Props::Boolean,
+                        default: true
+
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default light bold],
+                     default: "default"
+
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
 
@@ -61,6 +68,21 @@ module Playbook
         }
       end
 
+      def emphasized_class
+        emphasized ? "" : "_deemphasized"
+      end
+
+      def variant_class
+        return unless size == "sm"
+
+        case variant
+        when "light"
+          "_light"
+        when "bold"
+          "_bold"
+        end
+      end
+
     private
 
       def whole_value

data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.html.erb → _currency_alignment.html.erb}

@@ -1,13 +1,13 @@
 <%= pb_rails("currency", props: {
-  label: "Caption",
   amount: "2,000.50",
+  label: "Left",
   size: "sm",
 }) %>
 
 <%= pb_rails("currency", props: {
   align: "center",
   amount: "342",
-  label: "Caption",
+  label: "Center",
   size: "sm",
   symbol: "€",
 }) %>
@@ -15,7 +15,7 @@
 <%= pb_rails("currency", props: {
   align: "right",
   amount: "45",
-  label: "Caption",
+  label: "Right",
   unit: "/mo",
   size: "sm",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.jsx → _currency_alignment.jsx}

@@ -1,20 +1,20 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencySmall = (props) => {
+const CurrencyAlignment = (props) => {
   return (
     <>
       <Currency
           {...props}
           amount="2,000.50"
-          label="Caption"
+          label="Left"
           size="sm"
       />
       <Currency
           {...props}
           align="center"
           amount="342"
-          label="Caption"
+          label="Center"
           size="sm"
           symbol="€"
       />
@@ -22,7 +22,7 @@ const CurrencySmall = (props) => {
           {...props}
           align="right"
           amount="45"
-          label="Caption"
+          label="Right"
           size="sm"
           unit="/mo"
       />
@@ -30,4 +30,4 @@ const CurrencySmall = (props) => {
   )
 }
 
-export default CurrencySmall
+export default CurrencyAlignment

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: "309",
+  label: "Sales",
+  size: "md",
+  symbol: "",
+  unit: "/week"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Currency } from '../../'
+
+const CurrencyNoSymbol = (props) => {
+  return (
+    <Currency
+        {...props}
+        amount="309"
+        label="Sales"
+        size="md"
+        symbol=""
+        unit="/week"
+    />
+  )
+}
+
+export default CurrencyNoSymbol

data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.html.erb → _currency_size.html.erb}

@@ -1,20 +1,21 @@
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
-  size: "lg"
+  label: "Small",
+  margin_bottom: "md",
+  size: "sm",
 }) %>
 
 <%= pb_rails("currency", props: {
-  align: "center",
   amount: "342",
-  label: "Caption",
-  size: "lg",
+  label: "Medium",
+  margin_bottom: "md",
+  size: "md",
   symbol: "€",
 }) %>
 
 <%= pb_rails("currency", props: {
-  align: "right",
   amount: "45",
-  label: "Caption",
-  unit: "/mo",
+  label: "Large",
   size: "lg",
+  unit: "/mo",
 }) %>