playbook_ui 10.15.1 → 10.18.1

data/app/pb_kits/playbook/pb_list/list.rb

@@ -43,6 +43,7 @@ module Playbook
         dark ? "dark" : nil
       end
 
+      # rubocop:disable Style/CaseLikeIf
       def layout_class
         if layout == "right"
           "layout_right"
@@ -52,6 +53,7 @@ module Playbook
           ""
         end
       end
+      # rubocop:enable Style/CaseLikeIf
 
       def size_class
         size ? "large" : nil

data/app/pb_kits/playbook/pb_select/select.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/StringConcatenation
 require "action_view"
 
 module Playbook
@@ -72,3 +73,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/StringConcatenation

data/app/pb_kits/playbook/pb_source/source.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/SingleArgumentDig, Style/HashLikeCase
 module Playbook
   module PbSource
     class Source < Playbook::KitBase
@@ -59,3 +60,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/SingleArgumentDig, Style/HashLikeCase

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/SingleArgumentDig
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
@@ -86,3 +87,4 @@ module Playbook
     end
   end
 end
+# rubocop:enable Style/SingleArgumentDig

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -1,4 +1,7 @@
-<%= pb_rails("title", props: { text: "Default Title" }) %>
+<%= pb_rails("title", props: {
+})  do %>
+    Default Title
+<% end %>
 
 <br/>
 

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
+<%= content_tag(object.tag,
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) %>
+    class: object.classname) do %>
+        <%= content.presence || object.text %>
+<% end %>

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -10,25 +10,14 @@ import solidGauge from 'highcharts/modules/solid-gauge'
 pie(Highcharts)
 
 // Map Data Color String Props to our SCSS Variables
+
 const mapColors = (array) => {
+  const regex = /(data)\-[1-8]/ //eslint-disable-line
+
   const newArray = array.map((item) => {
-    return item == 'data-1'
-      ? `${colors.data_1}`
-      : item == 'data-2'
-        ? `${colors.data_2}`
-        : item == 'data-3'
-          ? `${colors.data_3}`
-          : item == 'data-4'
-            ? `${colors.data_4}`
-            : item == 'data-5'
-              ? `${colors.data_5}`
-              : item == 'data-6'
-                ? `${colors.data_6}`
-                : item == 'data-7'
-                  ? `${colors.data_7}`
-                  : item == 'data-8'
-                    ? `${colors.data_8}`
-                    : ''
+    return regex.test(item)
+      ? `${colors[`data_${item[item.length - 1]}`]}`
+      : item
   })
   return newArray
 }
@@ -72,13 +61,13 @@ class pbChart {
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart(options)
     } else if (this.options.type == 'gauge') {
-      this.setupGauge()
+      this.setupGauge(options)
     } else {
-      this.setupChart()
+      this.setupChart(options)
     }
   }
 
-  setupGauge() {
+  setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
     Highcharts.setOptions(highchartsTheme)
@@ -128,19 +117,21 @@ class pbChart {
         pointFormat: this.defaults.tooltipHtml,
         followPointer: true,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           animation: !this.defaults.disableAnimation,
         },
         solidgauge: {
+          borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
           dataLabels: {
             format: `<span class="prefix">${this.defaults.prefix}</span>` +
             '<span class="fix">{y:,f}</span>' +
             `<span class="suffix">${this.defaults.suffix}</span>`,
-          },
-        },
+          }        },
       },
-    })
+    },
+    )
     document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
     if (document.querySelector('.prefix')) {
       document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
@@ -155,6 +146,7 @@ class pbChart {
         text: this.defaults.title,
       },
       chart: {
+        height: this.defaults.height,
         type: this.defaults.type,
         events: {
           render: (event) => alignBlockElement(event),
@@ -172,7 +164,6 @@ class pbChart {
             format: this.defaults.dataLabelHtml,
           },
           showInLegend: this.defaults.showInLegend,
-
         },
       },
 
@@ -195,7 +186,7 @@ class pbChart {
     })
   }
 
-  setupChart() {
+  setupChart(options) {
     Highcharts.setOptions(highchartsTheme)
 
     const configOptions = {
@@ -222,6 +213,7 @@ class pbChart {
       legend: {
         enabled: this.defaults.legend,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -12,6 +12,7 @@ $red:                 #FF2229;
 $yellow:              #F9BB00;
 $green:               #00CA74;
 $orange:              #FD804C;
+$default:             #93a8b8;
 $colors: (
   royal:              $royal,
   purple:             $purple,
@@ -19,7 +20,8 @@ $colors: (
   red:                $red,
   yellow:             $yellow,
   green:              $green,
-  orange:             $orange
+  orange:             $orange,
+  default:            $default,
 );
 
 /* Specialty Gradient -----------------*/

data/app/pb_kits/playbook/utilities/_cursor.scss

@@ -0,0 +1,3 @@
+.cursor_pointer {
+  cursor: pointer;
+}

data/app/pb_kits/playbook/utilities/_display.scss

@@ -0,0 +1,23 @@
+.display_block {
+    display: block;
+}
+
+.display_inline_block {
+    display: inline-block;
+}
+
+.display_inline {
+    display: inline;
+}
+
+.display_flex {
+    display: flex;
+}
+
+.display_inline_flex {
+    display: inline-flex;
+}
+
+.display_hidden {
+    display: none;
+}

data/app/pb_kits/playbook/utilities/_shadow.scss

@@ -0,0 +1,11 @@
+@import "../tokens/exports/shadows";
+
+@mixin shadow-classes($shadows-list) {
+  @each $name, $shadow in $shadows-list {
+    .#{$name} {
+      box-shadow: $shadow;
+    }
+  }
+}
+@include shadow-classes($box_shadows);
+ 

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -57,10 +57,28 @@ const zIndexProps = ({ zIndex }) => {
   return css
 }
 
+const shadowProps = ({ shadow }) => {
+  let css = ''
+  css += shadow ? `shadow_${shadow} ` : ''
+  return css
+}
+
+const displayProps = ({ display }) => {
+  let css = ''
+  css += display ? `display_${display} ` : ''
+  return css
+}
+
+const cursorProps = ({ cursor }) => {
+  let css = ''
+  css += cursor ? `cursor_${cursor} ` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + displayProps(allProps) + cursorProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/lib/playbook/classnames.rb

@@ -16,6 +16,9 @@ module Playbook
         max_width_props,
         z_index_props,
         number_spacing_props,
+        shadow_props,
+        display_props,
+        cursor_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/cursor.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Cursor
+    def self.included(base)
+      base.prop :cursor
+    end
+
+    def cursor_props
+      selected_props = cursor_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        cursor_value = send(k)
+        "cursor_#{cursor_value}" if cursor_values.include? cursor_value
+      end.compact.join(" ")
+    end
+
+    def cursor_options
+      {
+        cursor: "cursor",
+      }
+    end
+
+    def cursor_values
+      %w[pointer]
+    end
+  end
+end

data/lib/playbook/display.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Display
+    def self.included(base)
+      base.prop :display
+    end
+
+    def display_props
+      selected_props = display_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        display_value = send(k)
+        "display_#{display_value}" if display_values.include? display_value
+      end.compact.join(" ")
+    end
+
+    def display_options
+      {
+        display: "display",
+      }
+    end
+
+    def display_values
+      %w[block inline_block inline flex inline_flex hidden]
+    end
+  end
+end

data/lib/playbook/engine.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "action_view/railtie"
-require "view_component/engine"
 require "webpacker/react"
 
 module Playbook

data/lib/playbook/kit_base.rb

@@ -4,6 +4,9 @@ require "playbook/classnames"
 require "playbook/spacing"
 require "playbook/z_index"
 require "playbook/number_spacing"
+require "playbook/shadow"
+require "playbook/display"
+require "playbook/cursor"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -13,6 +16,9 @@ module Playbook
     include Playbook::Spacing
     include Playbook::ZIndex
     include Playbook::NumberSpacing
+    include Playbook::Shadow
+    include Playbook::Display
+    include Playbook::Cursor
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/markdown/helper.rb

@@ -80,7 +80,7 @@ module Playbook
             loop do
               break unless @headers.include?(permalink)
 
-              permalink.gsub!(/\_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
+              permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
             end
           end
           @headers << permalink
@@ -121,7 +121,7 @@ module Playbook
         if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
           @element_items = []
           @list_items.each do |item, _index|
-            item.gsub(%r{\<li>(.*)\</li>}) do
+            item.gsub(%r{<li>(.*)</li>}) do
               @element_items.push(Regexp.last_match(1))
             end
           end

data/lib/playbook/pb_doc_helper.rb

@@ -26,6 +26,7 @@ module Playbook
     end
 
     # Deal with lists of kits, used in Playbook doc and Externally
+    # rubocop:disable Style/StringConcatenation
     def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
       display_kits = []
       kits = get_kits
@@ -40,6 +41,7 @@ module Playbook
       end
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
     end
+    # rubocop:enable Style/StringConcatenation
 
     # rubocop:disable Naming/AccessorMethodName
     def get_kits
@@ -48,12 +50,14 @@ module Playbook
     end
     # rubocop:enable Naming/AccessorMethodName
 
+    # rubocop:disable Style/OptionalBooleanParameter
     def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
       title = pb_doc_render_clickable_title(kit, type)
       ui = raw("<div class='pb--docItem-ui'>
           #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
       title + ui
     end
+  # rubocop:enable Style/OptionalBooleanParameter
 
   private
 

data/lib/playbook/props/base.rb

@@ -7,7 +7,7 @@ module Playbook
     class Base
       attr_reader :default, :deprecated, :required, :name, :kit
 
-      def initialize(default: nil, deprecated: false, required: false, name:, kit:)
+      def initialize(name:, kit:, default: nil, deprecated: false, required: false)
         @default = default
         @deprecated = deprecated
         @required = required
@@ -39,7 +39,7 @@ module Playbook
       end
 
       def log(message)
-        logger = ActiveSupport::Logger.new(STDOUT)
+        logger = ActiveSupport::Logger.new($stdout)
         @logger ||= ActiveSupport::TaggedLogging.new(logger)
         @logger.log(0, message)
       end

data/lib/playbook/shadow.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Shadow
+    def self.included(base)
+      base.prop :shadow
+    end
+
+    def shadow_props
+      selected_props = shadow_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        shadow_value = send(k)
+        "shadow_#{shadow_value}" if shadow_values.include? shadow_value
+      end.compact.join(" ")
+    end
+
+    def shadow_options
+      {
+        shadow: "shadow",
+      }
+    end
+
+    def shadow_values
+      %w[none deep deeper deepest]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.15.0"
-  VERSION = "10.15.1"
+  PREVIOUS_VERSION = "10.18.0"
+  VERSION = "10.18.1"
 end

data/lib/playbook.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "view_component"
+
 require "playbook/version"
 require "playbook/engine"
 require "playbook/props"
@@ -15,6 +17,7 @@ module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
 
   class ConflictingPropsError < StandardError; end
+
   class MissingPropError < StandardError; end
 
 module_function