playbook_ui 7.8.4 → 7.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aacf4025dd00629a9fa896eb6135bc90214c051b47bdaca20246f2120f4b5716
-  data.tar.gz: 14aa4b946d4c5c154e2d2cfd323fd99fbcb59c7b67a00a362867ab12c7ce6bc2
+  metadata.gz: cc6561ca5bb803c60af1b1e5b182b704c5c95e2407ad70794a87e98c00e2f419
+  data.tar.gz: 2415f722f6019ebb3fe19875c18413a06791ef6b8684b36800412872f8fad33f
 SHA512:
-  metadata.gz: 27d3d65a4b1edd271e0ffa90d1bde44f3a50d14e5c887c3e8de9818ac7f42e48629feae5f739c4763aab38819fd127f64df09c9d7b0a87e27aaec376845c8eb2
-  data.tar.gz: 26322de19165c686939370df7ba0fd7328f9e8b9d5b46100b9e916ec371cbe2efe3344f23c2ce970140801647fb1e0aea5aed5f14f28c9fb644d193d7b7dbd1d
+  metadata.gz: c9db1e69e91e3bb2d9fa51227aee7f7268e2eddfc54c40590718b2259140e74c09516cc285ef159fc8d700dc2c2dac8a5e7c36aa8ad154e9082619280654debb
+  data.tar.gz: a18d76a0c7e2e11eae5e2149e3823af3a2ad497812e4d0073f21ea03fb6ff77b4aa587eb0b87beeb09a7771b97b8bbc131e61e7ac03ea30eaa417e41c16ffb81

data/app/helpers/playbook/pb_doc_helper.rb

@@ -25,6 +25,24 @@ module Playbook
       end
     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 +62,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 +98,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
 

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/_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;

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",
 }) %>

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

@@ -1,27 +1,28 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyLarge = (props) => {
+const CurrencySize = (props) => {
   return (
     <>
       <Currency
           {...props}
           amount="2,000.50"
-          size="lg"
+          label="Small"
+          marginBottom="md"
+          size="sm"
       />
       <Currency
           {...props}
-          align="center"
           amount="342"
-          label="Caption"
-          size="lg"
+          label="Medium"
+          marginBottom="md"
+          size="md"
           symbol="€"
       />
       <Currency
           {...props}
-          align="right"
           amount="45"
-          label="Caption"
+          label="Large"
           size="lg"
           unit="/mo"
       />
@@ -29,4 +30,4 @@ const CurrencyLarge = (props) => {
   )
 }
 
-export default CurrencyLarge
+export default CurrencySize

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

@@ -0,0 +1,24 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  emphasized: false,
+  label: "Emphasized False",
+  margin_bottom: "md",
+  size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "342",
+  label: "Light",
+  margin_bottom: "md",
+  size: "sm",
+  symbol: "€",
+  variant: "light",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "45",
+  label: "Bold",
+  size: "sm",
+  unit: "/mo",
+  variant: "bold",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/{_currency_medium.jsx → _currency_variants.jsx}

@@ -1,33 +1,36 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyMedium = (props) => {
+const CurrencyVariants = (props) => {
   return (
     <>
       <Currency
           {...props}
           amount="2,000.50"
-          label="Caption"
-          size="md"
+          emphasized={false}
+          label="Emphasized False"
+          marginBottom="md"
+          size="sm"
       />
       <Currency
           {...props}
-          align="center"
           amount="342"
-          label="Caption"
-          size="md"
+          label="Light"
+          marginBottom="md"
+          size="sm"
           symbol="€"
+          variant="light"
       />
       <Currency
           {...props}
-          align="right"
           amount="45"
-          label="Caption"
-          size="md"
+          label="Bold"
+          size="sm"
           unit="/mo"
+          variant="bold"
       />
     </>
   )
 }
 
-export default CurrencyMedium
+export default CurrencyVariants

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

@@ -1,11 +1,13 @@
 examples:
 
   rails:
-  - currency_small: Small
-  - currency_medium: Medium
-  - currency_large: Large
+  - currency_variants: Variants
+  - currency_size: Size
+  - currency_alignment: Alignment
+  - currency_no_symbol: No Symbol
 
   react:
-  - currency_small: Small
-  - currency_medium: Medium
-  - currency_large: Large
+  - currency_variants: Variants
+  - currency_size: Size
+  - currency_alignment: Alignment
+  - currency_no_symbol: No Symbol

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

@@ -1,3 +1,4 @@
-export { default as CurrencySmall } from './_currency_small.jsx'
-export { default as CurrencyLarge } from './_currency_large.jsx'
-export { default as CurrencyMedium } from './_currency_medium.jsx'
+export { default as CurrencyVariants } from './_currency_variants.jsx'
+export { default as CurrencySize } from './_currency_size.jsx'
+export { default as CurrencyAlignment } from './_currency_alignment.jsx'
+export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.8.4
+  version: 7.9.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-27 00:00:00.000000000 Z
+date: 2020-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -664,12 +664,14 @@ files:
 - app/pb_kits/playbook/pb_currency/_currency.jsx
 - app/pb_kits/playbook/pb_currency/_currency.scss
 - app/pb_kits/playbook/pb_currency/currency.rb
-- app/pb_kits/playbook/pb_currency/docs/_currency_large.html.erb
-- app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx
-- app/pb_kits/playbook/pb_currency/docs/_currency_medium.html.erb
-- app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx
-- app/pb_kits/playbook/pb_currency/docs/_currency_small.html.erb
-- app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
 - app/pb_kits/playbook/pb_currency/docs/_description.md
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
@@ -2009,7 +2011,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System

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

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