playbook_ui 7.13.0 → 7.16.0.pre.alpha1

data/app/pb_kits/playbook/pb_typeahead/{_typeahead.html.erb → typeahead.html.erb}

@@ -26,4 +26,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

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
@@ -39,12 +35,13 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          dark: dark,
           defaultValue: default_options,
           id: id,
           isMulti: true,
           label: label,
           options: options,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
 
         base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?

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/_border_radius.scss

@@ -9,14 +9,28 @@ $border_rad_heavy:        5px;
 $border_rad_heavier:      6px;
 $border_rad_heaviest:     7px;
 $border_rad_mega:         1000px;
+$border_radius_xs:        4px;
+$border_radius_sm:        4px;
+$border_radius_md:        6px;
+$border_radius_lg:        8px;
+$border_radius_xl:        16px;
+$border_radius_rounded:   1000px;
+$border_radius_none:      0;
 $border_radius: (
-  lightest: $border_rad_lightest,
-  lighter: $border_rad_lighter,
-  light: $border_rad_light,
-  normal: $border_rad_normal,
-  heavy: $border_rad_heavy,
-  heavier: $border_rad_heavier,
-  heaviest: $border_rad_heaviest
+  lightest:              $border_rad_lightest,
+  lighter:               $border_rad_lighter,
+  light:                 $border_rad_light,
+  normal:                $border_rad_normal,
+  heavy:                 $border_rad_heavy,
+  heavier:               $border_rad_heavier,
+  heaviest:              $border_rad_heaviest,
+  border_radius_xs:      $border_radius_xs,
+  border_radius_sm:      $border_radius_sm,
+  border_radius_md:      $border_radius_md,
+  border_radius_lg:      $border_radius_lg,
+  border_radius_xl:      $border_radius_xl,
+  border_radius_none:    $border_radius_none,
+  border_radius_rounded: $border_radius_rounded
 );
 
 

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/_max_width.scss

@@ -0,0 +1,15 @@
+.max_width_sm {
+  max-width: 540px;
+}
+
+.max_width_md {
+  max-width: 720px;
+}
+
+.max_width_lg {
+  max-width: 960px;
+}
+
+.max_width_xl {
+  max-width: 1140px;
+}

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/_spacing.scss

@@ -1,28 +1,28 @@
 @import "../tokens/spacing";
 
-$space_classes: ( 
-	xs: $space_xs, 
-	sm: $space_sm, 
-	md: $space_md, 
-	lg: $space_lg, 
-	xl: $space_xl, 
+$space_classes: (
+	xs: $space_xs,
+	sm: $space_sm,
+	md: $space_md,
+	lg: $space_lg,
+	xl: $space_xl,
 	none: 0
 );
 
-$positions: ( 
-	m: "margin", 
-	mr: "margin-right", 
-	ml: "margin-left", 
-	mt: "margin-top", 
-	mb: "margin-bottom", 
-	mx: ("margin-left", "margin-right"), 
+$positions: (
+	m: "margin",
+	mr: "margin-right",
+	ml: "margin-left",
+	mt: "margin-top",
+	mb: "margin-bottom",
+	mx: ("margin-left", "margin-right"),
 	my: ("margin-top", "margin-bottom"),
-	p: "padding", 
-	pr: "padding-right", 
-	pl: "padding-left", 
-	pt: "padding-top", 
-	pb: "padding-bottom", 
-	px: ("padding-left", "padding-right"), 
+	p: "padding",
+	pr: "padding-right",
+	pl: "padding-left",
+	pt: "padding-top",
+	pb: "padding-bottom",
+	px: ("padding-left", "padding-right"),
 	py: ("padding-top", "padding-bottom")
 );
 
@@ -39,4 +39,4 @@ $positions: (
 			}
 		}
 	}
-}
+}

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

@@ -39,10 +39,22 @@ const darkProps = ({ dark }) => {
   return css
 }
 
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  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)
+  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,13 +4,27 @@ 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__, ".."))
+
   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
+  end
 end

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_*"
@@ -23,5 +25,20 @@ module Playbook
         append_view_path "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook/config"
       end
     end
+
+    initializer "webpacker.proxy" do |app|
+      insert_middleware = begin
+                          Playbook.webpacker.config.dev_server.present?
+                          rescue
+                            nil
+                        end
+      next unless insert_middleware
+
+      app.middleware.insert_before(
+        0, Webpacker::DevServerProxy,
+        ssl_verify_none: true,
+        webpacker: Playbook.webpacker
+      )
+    end
   end
 end

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