playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,6 @@
+export { default as WalkthroughDefault } from './_walkthrough_default.jsx'
+export { default as WalkthroughContinuous } from './_walkthrough_continuous.jsx'
+export { default as WalkthroughNoBeacon } from './_walkthrough_no_beacon.jsx'
+export { default as WalkthroughMultiBeacon } from './_walkthrough_multi_beacon.jsx'
+export { default as WalkthroughNoOverlay } from './_walkthrough_no_overlay.jsx'
+export { default as WalkthroughStyled } from './_walkthrough_styled.jsx'

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked", props: {variant: "expanded", compact: true}) %>
+<%= pb_rails("weekday_stacked", props: { variant: "day_only" , compact: true, align: "center"}) %>
+<%= pb_rails("weekday_stacked", props: { variant: "month_day", compact: true, align: "right" }) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import WeekdayStacked from '../_weekday_stacked'
+
+const WeekdayStackedCompact = (props) => (
+  <div>
+    <WeekdayStacked
+        compact
+        variant="day_only"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        compact
+        variant="month_day"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        compact
+        variant="expanded"
+        {...props}
+    />
+  </div>
+)
+
+export default WeekdayStackedCompact

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked") %>
+<%= pb_rails("weekday_stacked", props: {align: 'center'}) %>
+<%= pb_rails("weekday_stacked", props: {align: 'right'}) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import WeekdayStacked from '../_weekday_stacked'
+
+const WeekdayStackedDefault = (props) => (
+  <div>
+    <WeekdayStacked
+        className="test"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        {...props}
+    />
+  </div>
+)
+
+export default WeekdayStackedDefault

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked", props: {variant: "expanded", }) %>
+<%= pb_rails("weekday_stacked", props: { variant: "day_only", align: "center" }) %>
+<%= pb_rails("weekday_stacked", props: { variant: "month_day", align: "right" }) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import WeekdayStacked from '../_weekday_stacked'
+
+const WeekdayStackedVariant = (props) => (
+  <div>
+    <WeekdayStacked
+        variant="day_only"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        variant="month_day"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        variant="expanded"
+        {...props}
+    />
+  </div>
+)
+
+export default WeekdayStackedVariant

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - weekday_stacked_default: Default
+  - weekday_stacked_compact: Compact
+  - weekday_stacked_variant: Variant
+  
+  
+  react:
+  - weekday_stacked_default: Default
+  - weekday_stacked_compact: Compact
+  - weekday_stacked_variant: Variant

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

@@ -0,0 +1,3 @@
+export { default as WeekdayStackedDefault } from './_weekday_stacked_default.jsx'
+export { default as WeekdayStackedVariant } from './_weekday_stacked_variant.jsx'
+export { default as WeekdayStackedCompact } from './_weekday_stacked_compact.jsx'

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

@@ -48,3 +48,17 @@
 .z_index_10 {
   z-index: 1000;
 }
+
+$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+    
+@each $size, $size_value in $breakpoints_grid {
+  @each $zIndex_value in $zIndex_values {
+      $min_size: map-get($size_value, "min");
+      $max_size: map-get($size_value, "max");
+      .z_index_#{$size}_#{$zIndex_value} {
+        @include break_on($min_size, $max_size) {
+          z-index: #{$zIndex_value * 100} !important;
+        }
+      }
+  }
+}

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

@@ -113,9 +113,11 @@ type Shadow = {
 
 type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
 
+type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
-}
+  zIndex?: ZIndexType,
+} | ZIndexResponsiveType
 
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
@@ -178,9 +180,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${maxWidth } ` : ''
     return css
   },
-  zIndexProps: ({ zIndex }: ZIndex) => {
+  zIndexProps: (zIndex: ZIndex) => {
     let css = ''
-    css += zIndex ? `z_index_${zIndex } ` : ''
+    Object.entries(zIndex).forEach((zIndexEntry) => {
+      if (zIndexEntry[0] == "zIndex") {
+        if (typeof zIndexEntry[1] == "number") {
+          css += `z_index_${zIndexEntry[1]} `
+        } else if (typeof zIndexEntry[1] == "object") {
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          })
+        }
+      }
+    })
     return css
   },
   shadowProps: ({ shadow }: Shadow) => {

data/dist/menu.yml

@@ -0,0 +1,110 @@
+kits:
+  - avatars:
+    - avatar
+    - avatar_action_button
+    - multiple_users
+    - multiple_users_stacked
+    - user
+  - background
+  - bread_crumbs
+  - buttons:
+    - button
+    - button_toolbar
+    - circle_icon_button
+  - card
+  - collapsible
+  - charts_and_graphs:
+    - bar_graph
+    - circle_chart
+    - distribution_bar
+    - gauge
+    - legend
+    - line_graph
+    - treemap_chart
+  - dialog
+  - filter
+  - fixed_confirmation_toast
+  - forms:
+    - checkbox
+    - date_picker
+    - file_upload
+    - form
+    - form_group
+    - form_pill
+    - passphrase
+    - phone_number_input
+    - radio
+    - rich_text_editor
+    - select
+    - selectable_card
+    - selectable_card_icon
+    - selectable_icon
+    - selectable_list
+    - text_input
+    - textarea
+    - toggle
+    - typeahead
+  - highlight
+  - icon
+  - icon_circle
+  - icon_stat_value
+  - icon_value
+  - image
+  - layouts:
+    - flex
+    - layout
+  - lightbox
+  - list
+  - loading_inline
+  - map
+  - multi_level_select
+  - nav
+  - tags:
+    - badge
+    - hashtag
+    - pill
+  - pagination
+  - popover
+  - progress:
+    - progress_pills
+    - progress_simple
+    - progress_step
+  - section_separator
+  - star_rating
+  - table
+  - timeline
+  - time_and_date:
+    - date
+    - date_range_inline
+    - date_range_stacked
+    - date_stacked
+    - date_time
+    - date_time_stacked
+    - date_year_stacked
+    - time
+    - time_range_inline
+    - time_stacked
+    - timestamp
+    - weekday_stacked
+  - tooltip
+  - typography:
+    - body
+    - caption
+    - title
+  - typography_patterns:
+    - contact
+    - currency
+    - dashboard_value
+    - home_address_street
+    - label_pill
+    - label_value
+    - message
+    - person
+    - person_contact
+    - source
+    - stat_change
+    - stat_value
+    - title_count
+    - title_detail
+  - user_badge
+  - walkthrough

data/lib/playbook/markdown/helper.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+require "redcarpet"
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "action_view"
+
+module Playbook
+  module Markdown
+    module Helper
+      def self.call(template, _source)
+        markdown(template.source)
+      end
+
+      def render_markdown(text)
+        # rubocop:disable Security/Eval
+        eval(Playbook::Markdown::Helper.markdown(text))
+        # rubocop:enable Security/Eval
+      end
+
+      def self.markdown(text)
+        options = {
+          filter_html: false,
+          hard_wrap: true,
+          link_attributes: { rel: "nofollow", target: "_blank" },
+          space_after_headers: true,
+          fenced_code_blocks: true,
+          no_styles: false,
+          safe_links_only: true,
+        }
+
+        extensions = {
+          lax_spacing: true,
+          no_intra_emphasis: true,
+          autolink: true,
+          superscript: true,
+          fenced_code_blocks: true,
+          tables: true,
+          disable_indented_code_blocks: false,
+          strikethrough: true,
+          underline: true,
+          highlight: true,
+          footnotes: true,
+          with_toc_data: true,
+        }
+
+        renderer = HTMLBlockCode.new(options)
+        # toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
+        # @TOC = Redcarpet::Markdown.new(toc_renderer)
+        # puts "TOC: #{@TOC.inspect}"
+        markdown = Redcarpet::Markdown.new(renderer, extensions)
+        "#{markdown.render(text).inspect}.html_safe;"
+      end
+
+      def rouge(text, language)
+        formatter = Rouge::Formatters::HTML.new(scope: ".highlight")
+        lexer = Rouge::Lexer.find(language)
+        formatter.format(lexer.lex(text))
+      end
+
+      class HTML < Redcarpet::Render::HTML
+        include Rouge::Plugins::Redcarpet
+      end
+
+      def rouge_markdown(text)
+        render_options = {
+          filter_html: true,
+          hard_wrap: true,
+          link_attributes: { rel: "nofollow" },
+        }
+        renderer = HTML.new(render_options)
+
+        extensions = {
+          autolink: true,
+          fenced_code_blocks: true,
+          lax_spacing: true,
+          no_intra_emphasis: true,
+          strikethrough: true,
+          superscript: true,
+        }
+        markdown = Redcarpet::Markdown.new(renderer, extensions)
+        markdown.render(text)
+      end
+    end
+
+    class HTMLWithPants < Redcarpet::Render::HTML
+      include Redcarpet::Render::SmartyPants
+    end
+
+    class HTML < Redcarpet::Render::HTML
+      include Rouge::Plugins::Redcarpet
+    end
+
+    class HTMLBlockCode < Redcarpet::Render::HTML
+      include ActionView::Helpers::AssetTagHelper
+
+      # def block_code(code, language)
+      #   "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
+      # end
+
+      def table(header, body)
+        "<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
+          "<thead>#{header}</thead>" \
+          "<tbody>#{body}</tbody>" \
+        "</table>"
+      end
+
+      def header(title, level)
+        @headers ||= []
+        permalink = title.gsub(/\W+/, "-")
+        if @headers.include?(permalink)
+          permalink += "_1"
+          loop do
+            break unless @headers.include?(permalink)
+
+            permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
+          end
+        end
+        @headers << permalink
+        permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
+        permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
+        %(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
+      end
+
+      def image(link, title, alt_text)
+        return nil if link.nil?
+
+        %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
+      end
+    end
+  end
+end

data/lib/playbook/markdown.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "playbook/markdown/helper"

data/lib/playbook/pb_doc_helper.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDocHelper
+    def pb_kit_title(title)
+      title.remove("pb_").titleize.tr("_", " ")
+    end
+
+    def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false, dark_mode: false)
+      examples = pb_doc_kit_examples(kit, type)
+      examples = examples.first(1) if limit_examples
+      examples.map do |example|
+        pb_rails "docs/kit_example", props: {
+          kit: kit,
+          example_title: example.values.first,
+          example_key: example.keys.first,
+          show_code: show_code,
+          type: type,
+          dark: dark_mode,
+        }
+      end.join.yield_self(&method(:raw))
+    end
+
+    def nav_hash_array(link)
+      link.first.last
+    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, method: get_kits)
+      display_kits = []
+      kits = method
+      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, limit_examples, false, dark_mode)
+          end
+        else
+          display_kits << render_pb_doc_kit(kit, type, limit_examples, false, dark_mode)
+        end
+      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
+      menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
+      menu["kits"]
+    end
+
+    def get_kits_pb_website
+      menu = YAML.load_file(Rails.root.join("config/menu.yml"))
+      menu["kits"]
+    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
+
+    def pb_doc_kit_path(kit, *args)
+      Playbook.kit_path(kit, "docs", *args)
+    end
+
+    def pb_doc_kit_examples(kit, type)
+      example_file = pb_doc_kit_path(kit, "example.yml")
+      if File.exist?(example_file)
+        examples_list = YAML.load_file(example_file)
+                            .inject({}) { |item, (k, v)| item[k.to_sym] = v; item }
+        examples_list.dig(:examples, type) || []
+      else
+        []
+      end
+    end
+
+    def pb_doc_render_clickable_title(kit, type)
+      url = "#"
+      begin
+        url = if type == "react"
+                kit_show_reacts_path(kit)
+              else
+                kit_show_path(kit)
+              end
+      # FIXME: this is here because this helper generates a link for playbook website,
+      #       but shouldn't do anything when used elsewhere
+      rescue
+        puts "Kit Path Not Avaliable"
+      end
+      render inline: "<a href='#{url}'>#{pb_rails(:title, props: { text: pb_kit_title(kit), tag: 'h3', size: 2 })}</a>"
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.19.0"
-  VERSION = "12.19.0.pre.alpha.movemarkdown639"
+  PREVIOUS_VERSION = "12.20.0"
+  VERSION = "12.20.0.pre.alpha.title2665"
 end

data/lib/playbook/z_index.rb

@@ -16,16 +16,29 @@ module Playbook
       }
     end
 
-  private
+    def screen_size_values
+      %w[xs sm md lg xl]
+    end
 
     def z_index_props
-      selected_index_props = z_index_options.keys.select { |sk| try(sk) }
-      return nil unless selected_index_props.present?
+      selected_props = z_index_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      responsive = selected_props.present? && try(:z_index).is_a?(::Hash)
+      css = ""
+      if responsive
+        z_index_value = send(:z_index)
+        z_index_value.each do |key, value|
+          css += "z_index_#{key}_#{value} " if screen_size_values.include?(key.to_s) && z_index_values.include?(value.to_s)
+        end
+      else
+        selected_props.each do |k|
+          z_index_value = send(k)
+          css += "z_index_#{z_index_value} " if z_index_values.include? z_index_value
+        end
+      end
 
-      selected_index_props.map do |k|
-        index_value = send(k)
-        "z_index_#{index_value}" if z_index_values.include? index_value
-      end.compact.join(" ")
+      css unless css.blank?
     end
   end
 end

data/lib/playbook.rb

@@ -8,8 +8,10 @@ require "playbook/props"
 require "playbook/forms"
 require "playbook/pb_forms_helper"
 require "playbook/pb_kit_helper"
+require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
+require "playbook/markdown"
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))