playbook_ui 7.14.0 → 7.16.0.pre.alpha3

data/app/pb_kits/playbook/pb_title_detail/title_detail.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTitleDetail
-    class TitleDetail
-      include Playbook::Props
-
-      partial "pb_title_detail/title_detail"
-
+    class TitleDetail < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    class: object.classname) do %>
+  <label class="pb_toggle_wrapper">
+    <%= content.presence || object.input %>
+    <div class="pb_toggle_control"></div>
+  </label>
+<% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -4,13 +4,7 @@ require "action_view"
 
 module Playbook
   module PbToggle
-    class Toggle
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_toggle/toggle"
-
+    class Toggle < Playbook::KitBase
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 

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

@@ -27,7 +27,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     display: block;
     opacity: 0;
     position: absolute;
-    left: -9999px;
+    left: $offscreen;
     top: 0;
     animation-name: fadeIn;
     animation-duration: 150ms;

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -0,0 +1,9 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
+    <%= content.presence %>
+    <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -2,10 +2,7 @@
 
 module Playbook
   module PbTooltip
-    class Tooltip
-      include Playbook::Props
-      partial "pb_tooltip/tooltip"
-
+    class Tooltip < Playbook::KitBase
       prop :position
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -23,8 +23,6 @@ const MultiValue = (props: Props) => {
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
-  const handleOnClick = removeProps.onClick
-
   return (
     <components.MultiValueContainer
         className="text_input_multivalue_container"
@@ -33,14 +31,14 @@ const MultiValue = (props: Props) => {
       <If condition={imageUrl}>
         <FormPill
             avatarUrl={imageUrl}
+            closeProps={removeProps}
             marginRight="xs"
             name={label}
-            onClick={handleOnClick}
         />
         <Else />
         <FormPill
+            closeProps={removeProps}
             marginRight="xs"
-            onClick={handleOnClick}
             text={label}
         />
       </If>

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -2,9 +2,7 @@
 
 module Playbook
   module PbTypeahead
-    class Typeahead
-      include Playbook::Props
-
+    class Typeahead < Playbook::KitBase
       prop :async, type: Playbook::Props::Boolean,
                     default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
@@ -23,8 +21,6 @@ module Playbook
       prop :search_debounce_timeout, default: 250
       prop :value
 
-      partial "pb_typeahead/typeahead"
-
       def classname
         generate_classname("pb_typeahead_kit")
       end

data/app/pb_kits/playbook/pb_user/user.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbUser
-    class User
-      include Playbook::Props
-
-      partial "pb_user/user"
-
+    class User < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

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

@@ -1,3 +1,2 @@
 export { default as UserBadgeDefault } from './_user_badge_default.jsx'
 export { default as UserBadgeSize } from './_user_badge_size.jsx'
-export { default as UserBadgeSizeDark } from './_user_badge_size_dark.jsx'

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
+<% end %>

data/app/pb_kits/playbook/pb_user_badge/user_badge.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbUserBadge
-    class UserBadge
-      include Playbook::Props
-
-      partial "pb_user_badge/user_badge"
-
+    class UserBadge < Playbook::KitBase
       prop :badge, type: Playbook::Props::Enum,
                    values: %w[million-dollar veteran],
                    default: "million-dollar"
@@ -19,7 +15,14 @@ module Playbook
       end
 
       def display_badge
-        "pb_user_badge/badges/#{badge}.svg"
+        @badge ||= begin
+          badge_path = File.join(
+            File.dirname(self.class.source_location),
+            "badges",
+            "#{badge}.svg"
+          )
+          File.read(badge_path).html_safe
+        end
       end
     end
   end

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb

@@ -2,20 +2,14 @@
 
 module Playbook
   module PbWeekdayStacked
-    class WeekdayStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_weekday_stacked/weekday_stacked"
-
+    class WeekdayStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
 
       prop :date, type: Playbook::Props::Date,
                   default: ::Date.current
-                  
+
       prop :compact, type: Playbook::Props::Boolean,
                      default: false
 

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

@@ -26,6 +26,8 @@ $z_layers: (
   "default": 0
 );
 
+$offscreen: -9999px;
+
 @function z_index_for($layer) {
   @if not map-has-key($z_layers, $layer) {
     @error "No layer found for `#{$layer}` in $z_layers map.";

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

@@ -0,0 +1,30 @@
+.z_index_1 {
+  z-index: 100;
+}
+.z_index_2 {
+  z-index: 200;
+}
+.z_index_3 {
+  z-index: 300;
+}
+.z_index_4 {
+  z-index: 400;
+}
+.z_index_5 {
+  z-index: 500;
+}
+.z_index_6 {
+  z-index: 600;
+}
+.z_index_7 {
+  z-index: 700;
+}
+.z_index_8 {
+  z-index: 800;
+}
+.z_index_9 {
+  z-index: 900;
+}
+.z_index_10 {
+  z-index: 1000;
+}

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

@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+
+import axe from 'axe-core'
+
+export const runAxe = function(include = '.pb--kit-example', ignore = ['.pb--kit-example :first-child']) {
+  axe
+    .run({
+      include: [include],
+      exclude: [ignore],
+    })
+    .then((results) => {
+      if (results.violations.length) {
+        console.warn('🚨 [axe-core] Accessibility issues found. See below for a list:')
+        console.dir(results.violations)
+      } else {
+        console.log('[axe-core] Yay! 🎉 No accessibility violations were found!')
+      }
+    })
+    .catch((err) => {
+      console.error('Something bad happened:', err.message)
+    })
+}

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

@@ -41,14 +41,20 @@ const darkProps = ({ dark }) => {
 
 const maxWidthProps = ({ maxWidth }) => {
   let css = ''
-  css += maxWidth  ? `max_width_${maxWidth } ` : ''
+  css += maxWidth ? `max_width_${maxWidth } ` : ''
+  return css
+}
+
+const zIndexProps = ({ zIndex }) => {
+  let css = ''
+  css += zIndex ? `z_index_${zIndex } ` : ''
   return css
 }
 
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/app/pb_kits/playbook/utilities/test-utils.js

@@ -1,9 +1,13 @@
 /* This file provides the base for tests */
 
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
+// Accessbility
+import { axe, toHaveNoViolations } from 'jest-axe'
+expect.extend(toHaveNoViolations)
+
 /*
   We can complicate this wrapper as needed.
   https://testing-library.com/docs/react-testing-library/setup
@@ -22,3 +26,16 @@ const customRender = (ui, options) =>
 
 export * from '@testing-library/react'
 export { customRender as render }
+
+export const renderKit = (Kit, props = {}, newProps = {}) => {
+  const kitProps = { ...props, ...newProps }
+  render(<Kit {...kitProps} />)
+  return screen.getByTestId(kitProps.data.testid)
+}
+
+export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
+  const kitProps = { ...props, ...newProps }
+  const render = () => <Kit {...kitProps} />
+  const html = render()
+  expect(await axe(html)).toHaveNoViolations()
+}

data/app/pb_kits/playbook/vendor.js

@@ -27,6 +27,9 @@ PbTypeahead.start()
 import PbTable from './pb_table'
 PbTable.start()
 
+import PbTextarea from './pb_textarea'
+PbTextarea.start()
+
 import 'flatpickr'
 
 import 'trix'

data/lib/playbook.rb

@@ -4,11 +4,14 @@ require "sassc-rails"
 require "slim-rails"
 require "webpacker"
 require "webpacker/react"
+require "view_component/engine"
 
 require "playbook/props"
 require "playbook/version"
-require "playbook/engine" if defined?(Rails)
+require "playbook/pb_kit_helper"
+require "playbook/kit_base"
 require "playbook/markdown/template_handler"
+require "playbook/engine" if defined?(Rails)
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))

data/lib/playbook/engine.rb

@@ -10,6 +10,8 @@ module Playbook
       g.test_framework :rspec
     end
 
+    config.view_component.render_monkey_patch_enabled = false
+
     config.assets.paths ||= []
     config.assets.paths << "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/fonts"
     config.assets.paths << "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook/pb_*"

data/lib/playbook/kit_base.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  class KitBase < ViewComponent::Base
+    include Playbook::Props
+    include Playbook::PbKitHelper
+
+    def object
+      self
+    end
+  end
+end

data/{app/helpers → lib}/playbook/pb_kit_helper.rb

@@ -6,7 +6,11 @@ module Playbook
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
       kit = build_view_model(kit.to_s, props, &block)
-      render(partial: kit, as: :object)
+      if kit.is_a?(Playbook::KitBase)
+        render_component kit, &block
+      else
+        render(partial: kit, as: :object)
+      end
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end

data/lib/playbook/props.rb

@@ -57,6 +57,16 @@ module Playbook
       end.compact.join(" ")
     end
 
+    def z_index_props
+      selected_index_props = z_index_options.keys.select { |sk| try(sk) }
+      return nil unless selected_index_props.present?
+
+      selected_index_props.map do |k|
+        index_value = send(k)
+        "z_index_#{index_value}" if z_index_values.include? index_value
+      end.compact.join(" ")
+    end
+
     def generate_classname(*name_parts, separator: "_")
       [
         name_parts.compact.join(separator),
@@ -64,6 +74,7 @@ module Playbook
         spacing_props,
         dark_props,
         max_width_props,
+        z_index_props,
       ].compact.join(" ")
     end
 
@@ -78,6 +89,8 @@ module Playbook
     private :values, :values=
 
     included do
+      class_attribute :props, default: {}
+
       prop :id
       prop :data, type: Playbook::Props::Hash, default: {}
       prop :classname
@@ -99,6 +112,7 @@ module Playbook
       prop :padding_x
       prop :padding_y
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :z_index
     end
 
     def spacing_options
@@ -130,23 +144,28 @@ module Playbook
       %w[sm md lg xl]
     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
+
     def spacing_values
       %w[none xs sm md lg xl]
     end
 
     class_methods do
-      def props
-        @props
-      end
-
       def clear_props
-        @props.keys.each { |prop_name| remove_method(prop_name) }
-        @props.clear
+        props.keys.each { |prop_name| remove_method(prop_name) }
+        props.clear
       end
 
       def prop(name, type: Playbook::Props::String, **options)
-        @props ||= {}
-        @props[name] = type.new(options.merge(name: name, kit: self))
+        self.props = self.props.merge(name => type.new(options.merge(name: name, kit: self)))
 
         define_method(name) { prop(name) }
       end