playbook_ui 7.15.0 → 7.16.0.pre.alpha4

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb

@@ -2,14 +2,7 @@
 
 module Playbook
   module PbTimeStacked
-    class TimeStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-      include Playbook::Props
-
-      partial "pb_time_stacked/time_stacked"
-
+    class TimeStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_timeline/{_item.html.erb → item.html.erb}

@@ -2,11 +2,11 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-  
+
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>
-      <%= pb_rails("date_stacked", props: { 
-        date: object.date, 
+      <%= pb_rails("date_stacked", props: {
+        date: object.date,
         size: "sm",
         align: "center"
       }) %>
@@ -18,11 +18,11 @@
       icon: object.icon,
       variant: object.icon_color,
       size: "xs"
-    }) %> 
+    }) %>
     <div class="pb_timeline_item_connector"></div>
   </div>
+
   <div class="pb_timeline_item_right_block">
-    <%= capture(&object.children) %>
+    <%= content.presence %>
   </div>
-
 <% end %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTimeline
-    class Item
-      include Playbook::Props
-
-      partial "pb_timeline/item"
-
+    class Item < Playbook::KitBase
       prop :date
       prop :icon, type: Playbook::Props::String,
                   default: "user"

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTimeline
-    class Timeline
-      include Playbook::Props
-
-      partial "pb_timeline/timeline"
-
+    class Timeline < Playbook::KitBase
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"

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

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()
+}