playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown626

data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import classnames from 'classnames'
 import type { InputCallback } from '../types'
@@ -10,20 +8,20 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type Props = {
-  aria?: object,
+  aria?: { [key: string]: string },
   checked?: boolean,
-  children?: React.Node,
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
   value?: string,
-}
+} & GlobalProps
 
 const Toggle = ({
   aria = {},
@@ -33,7 +31,7 @@ const Toggle = ({
   data = {},
   id,
   name,
-  onChange = () => {},
+  onChange = () => { },
   size = 'sm',
   value,
   ...props
@@ -51,24 +49,24 @@ const Toggle = ({
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(css, globalProps(props), className)}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classnames(css, globalProps(props), className)}
+      id={id}
     >
       <label className="pb_toggle_wrapper">
-        <If condition={children}>
-          {children}
-          <Else />
+        {children && children}
+
+        {!children &&
           <input
-              {...props}
-              defaultChecked={checked}
-              name={name}
-              onChange={onChange}
-              type="checkbox"
-              value={value}
+            {...props}
+            defaultChecked={checked}
+            name={name}
+            onChange={onChange}
+            type="checkbox"
+            value={value}
           />
-        </If>
+        }
         <div className="pb_toggle_control" />
       </label>
     </div>

data/app/pb_kits/playbook/pb_toggle/toggle.test.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Toggle from './_toggle'
+
+const testId = 'toggle'
+const className = 'custom-class-name'
+
+const ToggleDefault = (props) => (
+    <>
+        <Toggle
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            id={testId}
+            {...props}
+        />
+    </>
+)
+
+test('should pass data prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass id prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should not be checked by default', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_off')
+})
+
+test('should pass checked prop', () => {
+    render(<ToggleDefault checked />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_on')
+})
+
+test('should have sm size by default', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_off')
+})
+
+test('should pass size prop', () => {
+    render(<ToggleDefault size='md' />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_md_off')
+})

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -88,13 +88,18 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     &.show {
       opacity: 1;
       margin-bottom: $space_sm;
-      background-color: $white;
+      color: $white;
+      background-color: rgba($black, $opacity_9);
       &.fade_out {
         animation-name: fadeOut;
         animation-duration: 150ms;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
       }
+      .arrow {
+        border-color: $black transparent transparent transparent;
+        opacity: $opacity_9;
+      }
     }
   }
 
@@ -109,12 +114,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
       //rails
       &.show {
-        color: $white;
-        background-color: rgba($black, $opacity_9);
+        color: $charcoal;
+        background-color: $white;
       }
-      .arrow {
-        border-color: $black transparent transparent transparent;
-        opacity: $opacity_9;
+      .arrow {        
+        border-color: $white transparent transparent transparent;
+        opacity: $opacity_10;
       }
       // react arrow
       .arrow_bg {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
   <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-1'>Hover here (Top)</span>
 
@@ -11,7 +11,7 @@
     <% end %>
   <% end %>
 
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+  <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-2'>Hover here (Bottom)</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#regular-tooltip-2",
@@ -22,7 +22,7 @@
     <% end %>
   <% end %>
 
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+  <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-3'>Hover here (Right)</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#regular-tooltip-3",
@@ -33,7 +33,7 @@
     <% end %>
   <% end %>
 
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+  <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-4'>Hover here (Left)</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#regular-tooltip-4",

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb

@@ -3,8 +3,7 @@
 <%= pb_rails("tooltip", props: {
   trigger_element_id: "result-1-sample-email-link",
   tooltip_id: "sample-email-tooltip-result-1",
-  position: "top",
-  dark: true
+  position: "top"
 }) do %>
   Send Email
 <% end %>

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
-  - tooltip_white: White
   - tooltip_with_icon_circle: Icon Circle Tooltip
 
   react:

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -49,7 +49,7 @@ const User = (props: UserProps) => {
   const classes = classnames(
     buildCss('pb_user_kit', align, orientation, size),
     globalProps(props),
-    className,
+    className
   )
 
   const avatarPresent = avatar || avatarUrl

data/lib/playbook/markdown/helper.rb

@@ -8,7 +8,17 @@ require "action_view"
 module Playbook
   module Markdown
     module Helper
-      def markdown(text)
+      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,
@@ -20,6 +30,8 @@ module Playbook
         }
 
         extensions = {
+          lax_spacing: true,
+          no_intra_emphasis: true,
           autolink: true,
           superscript: true,
           fenced_code_blocks: true,
@@ -33,9 +45,11 @@ module Playbook
         }
 
         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).html_safe
+        "#{markdown.render(text).inspect}.html_safe;"
       end
 
       def rouge(text, language)
@@ -44,6 +58,10 @@ module Playbook
         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,
@@ -65,88 +83,49 @@ module Playbook
       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 header(title, level)
-        if level == 7
-          @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
-          %(\n<a name="#{permalink}" class="markdown-header-anchor anchor" href="##{permalink}"><span class="fa fa-link anchor-icon"></span></a><h#{level} id=\"#{permalink}\">#{title}</h#{level}>\n)
-        else
-          %(\n<h#{level}>#{title}</h#{level}>\n)
-        end
-      end
 
-      def image(link, title, alt_text)
-        image_tag(link, title: title, alt: alt_text, class: "imageloader lazyload")
-      end
-
-      def preprocess(full_document)
-        full_document.gsub(/\[component (.*)\]/) do
-          @string = Regexp.last_match(1)
-          @default_height = "160"
-          @attr = ["", @default_height]
+      # def block_code(code, language)
+      #   "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
+      # end
 
-          # Set src from attributes
-          @string.gsub(/src="(.*?)"/) do
-            @attr[0] = Regexp.last_match(1)
-          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
 
-          # Set height from attributes
-          @string.gsub(/height="(.*?)"/) do
-            @attr[1] = (Regexp.last_match(1) || @default_height)
+      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
-
-          %(\n<div class="uix-component-frame"><iframe scrolling="no" id="component-preview" src="#{@attr[0]}" width="100%" height="#{@attr[1]}"></iframe><a href="#{@attr[0]}" target="_blank" class="uix-component-link">View component</a></div>\n)
         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 list(contents, _list_type)
-        @contents = contents
-        @list_items = contents.split("\n")
-
-        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
-              @element_items.push(Regexp.last_match(1))
-            end
-          end
-
-          # Doing both because we could have either/both
-          # clean up
-          @dont_items, @trash_items_dont = @element_items.partition { |x, _i| x.include? "[dont]" }
-          @do_items, @trash_items_do = @element_items.partition { |x, _i| x.include? "[do]" }
-
-          @do_list = []
-          @do_items.each do |item, _index|
-            @do_list.push("<li>#{item.sub('[do] ', '')}</li>")
-          end
-          @do_list = "<ul class='uix-ruleset do-list'>#{@do_list.join('')}</ul>"
-
-          @dont_list = []
-          @dont_items.each do |item, _index|
-            @dont_list.push("<li>#{item.sub('[dont] ', '')}</li>")
-          end
-          @dont_list = "<ul class='uix-ruleset dont-list'>#{@dont_list.join('')}</ul>"
+      def image(link, title, alt_text)
+        return nil if link.nil?
 
-          "<div class='row uix-ruleset-block'><div class='col-sm-6'>#{@do_list}</div><div class='col-sm-6'>#{@dont_list}</div></div>"
-        else
-          @contents
-        end
+        %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
       end
     end
   end

data/lib/playbook/markdown.rb

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

data/lib/playbook/number_spacing.rb

@@ -6,6 +6,16 @@ module Playbook
       base.prop :number_spacing
     end
 
+    def number_spacing_values
+      %w[tabular]
+    end
+
+    def number_spacing_options
+      {
+        number_spacing: "ns",
+      }
+    end
+
   private
 
     def number_spacing_props
@@ -17,15 +27,5 @@ module Playbook
         "ns_#{index_value}" if number_spacing_values.include? index_value
       end.compact.join(" ")
     end
-
-    def number_spacing_options
-      {
-        number_spacing: "ns",
-      }
-    end
-
-    def number_spacing_values
-      %w[tabular]
-    end
   end
 end

data/lib/playbook/position.rb

@@ -6,6 +6,16 @@ module Playbook
       base.prop :position
     end
 
+    def position_values
+      %w[relative absolute fixed sticky]
+    end
+
+    def position_options
+      {
+        position: "position",
+      }
+    end
+
   private
 
     def position_props
@@ -19,15 +29,5 @@ module Playbook
         "position_#{value}"
       end.compact.join(" ")
     end
-
-    def position_options
-      {
-        position: "position",
-      }
-    end
-
-    def position_values
-      %w[relative absolute fixed sticky]
-    end
   end
 end

data/lib/playbook/spacing.rb

@@ -20,6 +20,16 @@ module Playbook
       base.prop :padding_y
     end
 
+    def max_width_options
+      {
+        max_width: "mw",
+      }
+    end
+
+    def max_width_values
+      %w[xs sm md lg xl 0 none]
+    end
+
     def spacing_options
       {
         margin: "m",
@@ -62,15 +72,5 @@ module Playbook
         "max_width_#{width_value}" if max_width_values.include? width_value
       end.compact.join(" ")
     end
-
-    def max_width_options
-      {
-        max_width: "mw",
-      }
-    end
-
-    def max_width_values
-      %w[xs sm md lg xl 0 none]
-    end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.17.0"
-  VERSION = "12.17.1"
+  PREVIOUS_VERSION = "12.18.0"
+  VERSION = "12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown626"
 end

data/lib/playbook/z_index.rb

@@ -6,6 +6,16 @@ module Playbook
       base.prop :z_index
     end
 
+    def z_index_values
+      %w[1 2 3 4 5 6 7 8 9 10]
+    end
+
+    def z_index_options
+      {
+        z_index: "z-index",
+      }
+    end
+
   private
 
     def z_index_props
@@ -17,15 +27,5 @@ module Playbook
         "z_index_#{index_value}" if z_index_values.include? index_value
       end.compact.join(" ")
     end
-
-    def z_index_options
-      {
-        z_index: "z-index",
-      }
-    end
-
-    def z_index_values
-      %w[1 2 3 4 5 6 7 8 9 10]
-    end
   end
 end