playbook_ui 9.17.0.pre.decouple.website2 → 9.17.0

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -1,5 +1,4 @@
-@import "../../tokens/titles";
-
+@import "../../pb_title/title_mixin";
 // Header Styles
 .flatpickr-months {
   border-bottom: solid 1px $border_light;

data/app/pb_kits/playbook/pb_enhanced_element/index.js

@@ -26,12 +26,11 @@ export default class PbEnhancedElement {
   }
 
   static addMatch(element) {
-    if (element._pbEnhanced || this.elements.has(element)) return
+    if (this.elements.has(element)) return
 
     const enhansedElement = new this(element)
     enhansedElement.connect()
     this.elements.set(element, enhansedElement)
-    element._pbEnhanced = enhansedElement
   }
 
   static removeMatch(element) {

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -3,8 +3,8 @@
 @import "../tokens/border_radius";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
-@import "../tokens/titles";
 @import "../pb_body/body_mixins";
+@import "../pb_title/title_mixin";
 @import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
@@ -134,7 +134,7 @@ $selector: ".pb_nav_list";
       border-bottom: 0;
     }
   }
-
+  
 }
 
 //Image Wrapper

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -2,18 +2,11 @@
 
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import useFocus from './useFocus'
-import { globalProps } from '../utilities/globalProps'
+import useFocus from './useFocus.js'
+import Trix from 'trix'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
-try {
-  const Trix = require('trix')
-  Trix.config.textAttributes.inlineCode = {
-    tagName: 'code',
-    inheritable: true,
-  }
-} catch (_e) { /* do nothing */ }
-
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -53,6 +46,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const dataProps = buildDataProps(data)
 
   useEffect(() => {
+    Trix.config.textAttributes.inlineCode = {
+      tagName: 'code',
+      inheritable: true,
+    }
+
     trixRef.current.addEventListener('trix-initialize', (event) => {
       const element = event.target
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,6 +1,6 @@
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
-@import "../tokens/titles";
+@import "../pb_title/title_mixin";
 @import "../tokens/colors";
 
 [class^=pb_select] {

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,5 +1,5 @@
 @import "../pb_textarea/textarea_mixin";
-@import "../tokens/titles";
+@import "../pb_title/title_mixin";
 @import "../tokens/colors";
 
 

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -1,11 +1,11 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
+@import "../pb_title/title_mixin";
 @import "../tokens/spacing";
-@import "../tokens/titles";
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
-
+  
   [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
@@ -28,7 +28,7 @@
   .pb_text_area_kit:hover {
     background-color: rgba($focus_input_light,$opacity_5);
   }
-
+  
   &.resize_both > textarea {
     resize: both;
     overflow: auto;

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,4 +1,4 @@
-@import "../tokens/titles";
+@import "title_mixin";
 @import "../tokens/colors";
 
 [class^=pb_title_kit]{

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -1 +1,40 @@
-@import "../tokens/titles";
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/line_height";
+
+@mixin pb_title(
+    $fontSize: $heading_1,
+    $fontWeight: $lighter,
+    $lineHeight: $lh_tighter
+){
+  font-size: $fontSize;
+  letter-spacing: $lspace_tight;
+  font-weight: $fontWeight;
+  color: $text_lt_default;
+  margin: 0;
+  line-height: $lineHeight;
+  font-family: $font_family_base;
+}
+
+@mixin pb_title_1 {
+  @include pb_title($heading_1);
+  letter-spacing: -0.03em;
+}
+
+@mixin pb_title_2 {
+  @include pb_title($heading_2, $lighter, 0.96);
+}
+
+@mixin pb_title_3 {
+  @include pb_title($heading_3);
+}
+
+@mixin pb_title_4 {
+  @include pb_title($heading_4, $bolder);
+}
+
+@mixin pb_title_dark {
+  color: $text_dk_default;
+}
+
+

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
-import { get, isString, uniqueId } from 'lodash'
+import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
@@ -26,24 +26,23 @@ import { noop } from '../utilities/props'
  * @prop {string} label - the text for the optional typeahead input label
  */
 
-type TypeaheadProps = {
-  id?: string,
+type Props = {
   async?: boolean,
   createable?: boolean,
   dark?: boolean,
   label?: string,
-  loadOptions?: string,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  loadOptions?: noop | string,
+  getOptionLabel?: () => any,
+  getOptionValue?: () => any,
   name?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
- * @param {TypeaheadProps} props - props as described at https://react-select.com/props
+ * @param {Props} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
+const Typeahead = (props: Props) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -57,11 +56,8 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
       Placeholder,
       ValueContainer,
     },
-    loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
-    getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
-    getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
-    id: id || uniqueId(),
+    id: 'react-select-input',
     inline: false,
     isClearable: true,
     isSearchable: true,
@@ -72,9 +68,14 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
     ...props,
   }
 
-  const Tag = createable ? CreateableSelect : (async ? AsyncSelect : Select)
+  if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
+  if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
+  if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  const handleOnChange = (_data, { action, option, removedValue }) => {
+  let Tag = props.async ? AsyncSelect : Select
+  if (props.createable) Tag = CreateableSelect
+
+  const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })

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/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/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

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

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "9.16.0"
-  VERSION = "9.17.0.pre.decouple.website2"
+  VERSION = "9.17.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.17.0.pre.decouple.website2
+  version: 9.17.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-25 00:00:00.000000000 Z
+date: 2021-06-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -113,6 +113,48 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.15'
+- !ruby/object:Gem::Dependency
+  name: sassc-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: slim-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: sprockets-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.3'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -127,6 +169,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.23'
+- !ruby/object:Gem::Dependency
+  name: webpacker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -141,6 +197,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.3.2
+- !ruby/object:Gem::Dependency
+  name: better_errors
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.5.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.5.1
+- !ruby/object:Gem::Dependency
+  name: binding_of_caller
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.8.0
 - !ruby/object:Gem::Dependency
   name: byebug
   requirement: !ruby/object:Gem::Requirement
@@ -184,25 +268,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 0.49.0
 - !ruby/object:Gem::Dependency
-  name: rails
+  name: rainbow
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 5.2.4.5
-    - - "<"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: 2.2.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 5.2.4.5
-    - - "<"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: 2.2.2
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -293,6 +371,34 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.2018.9
+- !ruby/object:Gem::Dependency
+  name: uglifier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 4.1.20
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 4.1.20
+- !ruby/object:Gem::Dependency
+  name: web-console
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 3.7.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 3.7.0
 description: Playbook Design System. Built for Nitro, but powering all.
 email:
 - nitroux@powerhrg.com
@@ -303,8 +409,18 @@ extra_rdoc_files: []
 files:
 - README.md
 - Rakefile
+- app/assets/images/clark.jpg
+- app/assets/images/full_page_samples.svg
+- app/assets/images/giant.jpg
+- app/assets/images/github-brands.svg
+- app/assets/images/landing-background.svg
+- app/assets/images/landing-image.svg
+- app/assets/images/pb-caret.svg
+- app/assets/images/pb-check.svg
+- app/assets/images/pb-logo.svg
+- app/assets/images/pb-white-logo.svg
+- app/assets/images/pb.logo.svg
 - app/pb_kits/playbook/_playbook.scss
-- app/pb_kits/playbook/_reset.scss
 - app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
 - app/pb_kits/playbook/pb_avatar/_avatar.jsx
@@ -1961,10 +2077,8 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb
-- app/pb_kits/playbook/playbook-doc.js
-- app/pb_kits/playbook/playbook-rails-react-bindings.js
-- app/pb_kits/playbook/playbook-rails.js
 - app/pb_kits/playbook/plugins/pb_chart.js
+- app/pb_kits/playbook/react_rails_kits.js
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
@@ -1975,7 +2089,6 @@ files:
 - app/pb_kits/playbook/tokens/_screen_sizes.scss
 - app/pb_kits/playbook/tokens/_shadows.scss
 - app/pb_kits/playbook/tokens/_spacing.scss
-- app/pb_kits/playbook/tokens/_titles.scss
 - app/pb_kits/playbook/tokens/_transition.scss
 - app/pb_kits/playbook/tokens/_typography.scss
 - app/pb_kits/playbook/tokens/exports/_border_radius.scss
@@ -1994,10 +2107,12 @@ files:
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
+- app/pb_kits/playbook/utilities/accessibility.js
 - app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/props.js
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/text.js
+- app/pb_kits/playbook/vendor.js
 - dist/reset.css
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
@@ -2055,9 +2170,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project:
 rubygems_version: 2.7.3