playbook_ui 7.16.0 → 8.0.1

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -2,12 +2,8 @@
 
 module Playbook
   module PbTimestamp
-    class Timestamp
+    class Timestamp < Playbook::KitBase
       include ActionView::Helpers::DateHelper
-      include Playbook::Props
-
-      partial "pb_timestamp/timestamp"
-
       prop :text
       prop :timestamp
 

data/app/pb_kits/playbook/pb_title/title.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTitle
-    class Title
-      include Playbook::Props
-
-      partial "pb_title/title"
-
+    class Title < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: [1, 2, 3, 4],
                   default: 3

data/app/pb_kits/playbook/pb_title_count/title_count.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTitleCount
-    class TitleCount
-      include Playbook::Props
-
-      partial "pb_title_count/title_count"
-
+    class TitleCount < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

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/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
@@ -44,6 +40,7 @@ module Playbook
           id: id,
           isMulti: true,
           label: label,
+          name: name,
           options: options,
           placeholder: placeholder,
         }

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/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/lib/playbook.rb

@@ -4,11 +4,16 @@ require "sassc-rails"
 require "slim-rails"
 require "webpacker"
 require "webpacker/react"
+require "view_component/engine"
 
 require "playbook/props"
 require "playbook/version"
+require "playbook/pb_kit_helper"
+require "playbook/pb_doc_helper"
+require "playbook/kit_base"
+require "playbook/kit_resolver"
+require "playbook/markdown"
 require "playbook/engine" if defined?(Rails)
-require "playbook/markdown/template_handler"
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
@@ -16,12 +21,16 @@ module Playbook
   class ConflictingPropsError < StandardError; end
   class MissingPropError < StandardError; end
 
-  class << self
-    def webpacker
-      @webpacker ||= ::Webpacker::Instance.new(
-        root_path: ROOT_PATH,
-        config_path: ROOT_PATH.join("config/webpacker.yml")
-      )
-    end
+module_function
+
+  def webpacker
+    @webpacker ||= ::Webpacker::Instance.new(
+      root_path: ROOT_PATH,
+      config_path: ROOT_PATH.join("config/webpacker.yml")
+    )
+  end
+
+  def kit_path(kit, *args)
+    Playbook::Engine.root.join("app/pb_kits/playbook/pb_#{kit}", *args)
   end
 end

data/lib/playbook/classnames.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Classnames
+    def self.included(base)
+      base.prop :classname
+      base.prop :dark, type: Playbook::Props::Boolean, default: false
+    end
+
+    def generate_classname(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+        spacing_props,
+        dark_props,
+        max_width_props,
+        z_index_props,
+      ].compact.join(" ")
+    end
+
+    def generate_classname_without_spacing(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+      ].compact.join(" ")
+    end
+
+  private
+
+    def dark_props
+      dark ? "dark" : nil
+    end
+  end
+end