playbook_ui 9.15.0.pre.decouple.website1 → 9.15.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_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_radio/_radio.jsx

@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
   aria?: object,
+  alignment?: String,
   checked?: Boolean,
   children?: Node,
   className?: String,
@@ -25,6 +26,7 @@ type RadioProps = {
 
 const Radio = ({
   aria = {},
+  alignment = '',
   children,
   className,
   dark = false,
@@ -40,7 +42,7 @@ const Radio = ({
 }: RadioProps, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
+  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
 
   return (
     <label

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -38,6 +38,16 @@
       }
     }
   }
+
+  &.vertical {
+    flex-direction: column;
+    align-items: center;
+    .pb_radio_button {
+      margin-right: 0px;
+      margin-bottom: $space_xs;
+    }
+  }
+
   &.dark {
     .pb_radio_button {
       border-color: $border_dark;

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("radio", props: {
+    alignment: "vertical",
+    text: "Power",
+    input_options: {
+      tabindex: 0
+    },
+    margin_right: "sm",
+    name: "group 1",
+    value: "Power"
+  }) %>
+
+  <%= pb_rails("radio", props: {
+    alignment: "vertical",
+    text: "Nitro",
+    margin_right: "sm",
+    name: "group 1",
+    value: "Nitro"
+  }) %>
+
+  <%= pb_rails("radio", props: {
+    alignment: "vertical",
+    text: "Google",
+    name: "group 1",
+    value: "Google"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Flex, Radio } from '../../'
+
+const RadioAlignment = () => {
+  return (
+    <Flex>
+      <Radio
+          alignment="vertical"
+          label="Power"
+          marginRight="sm"
+          name="Group2"
+          tabIndex={0}
+          value="Power"
+      />
+      <br />
+      <Radio
+          alignment="vertical"
+          defaultChecked={false}
+          label="Nitro"
+          marginRight="sm"
+          name="Group2"
+          value="Nitro"
+      />
+      <br />
+      <Radio
+          alignment="vertical"
+          defaultChecked={false}
+          label="Google"
+          name="Group2"
+          value="Google"
+      />
+    </Flex>
+  )
+}
+
+export default RadioAlignment

data/app/pb_kits/playbook/pb_radio/docs/example.yml

@@ -5,8 +5,10 @@ examples:
   - radio_custom: Custom
   - radio_error: With Error
   - radio_options: With Options
+  - radio_alignment: Alignment
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
+  - radio_alignment: Alignment

data/app/pb_kits/playbook/pb_radio/docs/index.js

@@ -1,3 +1,4 @@
 export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
+export { default as RadioAlignment } from './_radio_alignment.jsx'

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -5,6 +5,8 @@ require "action_view"
 module Playbook
   module PbRadio
     class Radio < Playbook::KitBase
+      prop :alignment, type: Playbook::Props::String,
+                       default: ""
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :error, type: Playbook::Props::Boolean,
@@ -19,7 +21,7 @@ module Playbook
                    default: "radio_text"
 
       def classname
-        generate_classname("pb_radio_kit") + error_class
+        generate_classname("pb_radio_kit") + error_class + alignment_class
       end
 
       def selected
@@ -35,6 +37,10 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
+
+      def alignment_class
+        alignment == "vertical" ? " vertical" : ""
+      end
     end
   end
 end

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/{tokens/_titles.scss → pb_title/_title_mixin.scss}

@@ -1,6 +1,6 @@
-@import "./colors";
-@import "./typography";
-@import "./line_height";
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/line_height";
 
 @mixin pb_title(
     $fontSize: $heading_1,
@@ -36,3 +36,5 @@
 @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}

@@ -38,4 +38,6 @@ import 'flatpickr'
 import 'trix'
 
 // React-Rendered Rails Kits =====
-import './playbook-rails-react-bindings.js'
+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