playbook_ui 9.19.0.pre.alpha.pre.fonts2 → 9.19.0.pre.alphafonts

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

@@ -2,13 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Avatar from '../pb_avatar/_avatar'
-import Body from '../pb_body/_body'
-import Title from '../pb_title/_title'
+import { Avatar, Body, Title } from '../'
+import { globalProps } from '../utilities/globalProps.js'
 
 type UserProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import UserBadge from '../_user_badge'
+import { UserBadge } from '../../'
 
 const UserBadgeDefault = () => {
   return (

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import UserBadge from '../_user_badge'
+import { UserBadge } from '../../'
 
 const UserBadgeSize = () => {
   return (

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -5,8 +5,7 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import Caption from '../pb_caption/_caption'
-import Title from '../pb_title/_title'
+import { Caption, Title } from '../'
 
 import DateTime from '../pb_kit/dateTime.js'
 
@@ -23,8 +22,8 @@ type WeekdayStackedProps = {
   id?: string,
 }
 
-const getDayOfWeek = (value, compact) => {
-  const dateTime = new DateTime({ value })
+const getDayOfWeek = (date, compact) => {
+  const dateTime = new DateTime({ value: date })
   if (compact) {
     return dateTime.toDayAbbr()
   } else {
@@ -32,8 +31,8 @@ const getDayOfWeek = (value, compact) => {
   }
 }
 
-const getFormattedDate = (value, variant) => {
-  const dateTime = new DateTime({ value })
+const getFormattedDate = (date, variant) => {
+  const dateTime = new DateTime({ value: date })
   if (variant === 'day_only') {
     return dateTime.toDay()
   } else {

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-
-import WeekdayStacked from '../_weekday_stacked'
+import {
+  WeekdayStacked,
+} from '../../'
 
 const WeekdayStackedCompact = (props) => (
   <div>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-
-import WeekdayStacked from '../_weekday_stacked'
+import {
+  WeekdayStacked,
+} from '../../'
 
 const WeekdayStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-
-import WeekdayStacked from '../_weekday_stacked'
+import {
+  WeekdayStacked,
+} from '../../'
 
 const WeekdayStackedVariant = (props) => (
   <div>

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,13 +1,11 @@
 import Highcharts from 'highcharts'
 
-import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
+import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
 import colors from '../tokens/exports/_colors.scss'
 
-import pie from 'highcharts/modules/variable-pie'
-import highchartsMore from 'highcharts/highcharts-more'
-import solidGauge from 'highcharts/modules/solid-gauge'
-
-pie(Highcharts)
+require('highcharts/modules/variable-pie')(Highcharts)
+import highchartsMore from 'highcharts/highcharts-more.js'
+import solidGauge from 'highcharts/modules/solid-gauge.js'
 
 // Map Data Color String Props to our SCSS Variables
 const mapColors = (array) => {

data/app/pb_kits/playbook/react_rails_kits.js

@@ -0,0 +1,13 @@
+// React-Rendered Rails Kit Exports =====
+export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
+export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
+export { default as Legend } from './pb_legend/_legend.jsx'
+export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
+export { default as Passphrase } from './pb_passphrase/_passphrase.jsx'
+export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
+export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
+export { default as Dialog } from './pb_dialog/_dialog.jsx'
+export { default as DialogHeader } from './pb_dialog/child_kits/_dialog_header.jsx'
+export { default as DialogBody } from './pb_dialog/child_kits/_dialog_body.jsx'
+export { default as DialogFooter } from './pb_dialog/child_kits/_dialog_footer.jsx'
+export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'

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

@@ -243,10 +243,6 @@ $category_colors: (
 
 $transparent: transparent;
 
-@function tint($color, $percentage) {
-  @return mix($white, $color, $percentage);
-}
-
 @mixin gradient($start: $gradient_start, $end: $gradient_end) {
   background: $start;
   background: -moz-linear-gradient(-45deg,  $start 0%, $end 100%);

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

@@ -1,96 +1,110 @@
 @font-face {
-  src: url('fonts/ProximaNova-Regular.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Regular.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Regular.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 500;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-Light.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Light.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Light.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 400;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-Thin.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Thin.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Thin.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 100;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-Semibold.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Semibold.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Semibold.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 600;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-Bold.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Bold.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Bold.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 700;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-Extrabld.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Extrabld.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Extrabld.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 800;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-Black.woff2') format('woff2');
+  src: url('fonts/ProximaNova-Black.woff2') format('woff2'), 
+    url('fonts/ProximaNova-Black.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: normal;
     font-weight: 900;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-RegularIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-RegularIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-RegularIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 500;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-LightIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-LightIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-LightIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 400;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-ThinIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-ThinIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-ThinIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 100;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-SemiboldIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-SemiboldIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-SemiboldIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 600;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-BoldIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-BoldIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-BoldIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 700;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-ExtrabldIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-ExtrabldIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-ExtrabldIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 800;
     
 }
 @font-face {
-  src: url('fonts/ProximaNova-BlackIt.woff2') format('woff2');
+  src: url('fonts/ProximaNova-BlackIt.woff2') format('woff2'), 
+    url('fonts/ProximaNova-BlackIt.woff') format('woff');
     font-family: 'Proxima Nova';
     font-style: italic;
     font-weight: 900;

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

@@ -1,3 +1,7 @@
+@function tint($color, $percentage) {
+  @return mix($white, $color, $percentage);
+}
+
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }

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/{playbook-rails.js → vendor.js}

@@ -35,5 +35,9 @@ PbTextarea.start()
 
 import 'flatpickr'
 
+import 'trix'
+
 // React-Rendered Rails Kits =====
-import './playbook-rails-react-bindings'
+import WebpackerReact from 'webpacker-react'
+import * as ReactRailsPBKits from './react_rails_kits.js'
+WebpackerReact.setup({ ...ReactRailsPBKits })

data/dist/reset.css

@@ -1,2 +1 @@
 *{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
-

data/lib/playbook/engine.rb

@@ -1,8 +1,7 @@
 # frozen_string_literal: true
 
-require "action_view/railtie"
-require "view_component/engine"
-require "webpacker/react"
+require "sassc-rails"
+require "slim-rails"
 
 module Playbook
   class Engine < ::Rails::Engine
@@ -14,15 +13,26 @@ module Playbook
 
     config.view_component.render_monkey_patch_enabled = false
 
-    if config.respond_to?(:assets)
-      config.assets.paths ||= []
-      config.assets.paths << Playbook::Engine.root.join("fonts")
-      config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
-    end
+    config.assets.paths ||= []
+    config.assets.paths << Playbook::Engine.root.join("fonts")
+    config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
+
+    config.sass.load_paths ||= []
+    config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
+
+    initializer "webpacker.proxy" do |app|
+      insert_middleware = begin
+                          Playbook.webpacker.config.dev_server.present?
+                          rescue
+                            nil
+                        end
+      next unless insert_middleware
 
-    if config.respond_to?(:sass)
-      config.sass.load_paths ||= []
-      config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
+      app.middleware.insert_before(
+        0, Webpacker::DevServerProxy,
+        ssl_verify_none: true,
+        webpacker: Playbook.webpacker
+      )
     end
   end
 end

data/lib/playbook/props/nested_props.rb

@@ -4,7 +4,7 @@ module Playbook
   module Props
     class NestedProps < Playbook::Props::Base
       def initialize(nested_kit:, **kwargs)
-        super(**kwargs)
+        super **kwargs
         @nested_kit = nested_kit
       end
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "9.18.0"
-  VERSION = "9.19.0.pre.alpha-fonts2"
+  PREVIOUS_VERSION = "9.17.0"
+  VERSION = "9.19.0.pre.alphafonts"
 end

data/lib/playbook.rb

@@ -1,7 +1,13 @@
 # frozen_string_literal: true
 
+require "sassc-rails"
+require "slim-rails"
+require "webpacker"
+require "webpacker/react"
+require "view_component/engine"
+
 require "playbook/version"
-require "playbook/engine"
+
 require "playbook/props"
 require "playbook/forms"
 require "playbook/pb_forms_helper"
@@ -10,6 +16,7 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
+require "playbook/engine" if defined?(Rails)
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
@@ -19,6 +26,13 @@ module Playbook
 
 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