playbook_ui 7.16.0.pre.alpha5 → 7.16.0

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -2,7 +2,12 @@
 
 module Playbook
   module PbNav
-    class Nav < Playbook::KitBase
+    class Nav
+      include ActionView::Helpers::TagHelper
+      include Playbook::Props
+
+      partial "pb_nav/nav"
+
       prop :link, default: "#"
       prop :title
       prop :orientation, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbOnlineStatus
-    class OnlineStatus < Playbook::KitBase
+    class OnlineStatus
+      include Playbook::Props
+
+      partial "pb_online_status/online_status"
+
       prop :status, type: Playbook::Props::Enum,
                     values: %w[online offline away],
                     default: "offline"

data/app/pb_kits/playbook/pb_person/_person.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      <%= pb_rails("body", props: { 
+        tag: "span", 
+        classname: "pb_person_first", 
+        children: -> { object.first_name 
+      } }) %>
+      <%= pb_rails("title", props: { 
+        text: object.last_name, 
+        size: 4 }) if object.last_name %>
+<% end %>

data/app/pb_kits/playbook/pb_person/person.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbPerson
-    class Person < Playbook::KitBase
+    class Person
+      include Playbook::Props
+
+      partial "pb_person/person"
+
       prop :first_name
       prop :last_name
 

data/app/pb_kits/playbook/pb_person_contact/person_contact.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbPersonContact
-    class PersonContact < Playbook::KitBase
+    class PersonContact
+      include Playbook::Props
+
+      partial "pb_person_contact/person_contact"
+
       prop :contacts, type: Playbook::Props::HashArray, default: []
       prop :first_name
       prop :last_name

data/app/pb_kits/playbook/pb_pill/pill.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbPill
-    class Pill < Playbook::KitBase
+    class Pill
+      include Playbook::Props
+
+      partial "pb_pill/pill"
+
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[success warning error info neutral primary],

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id) do %>
+    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+      <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+        <%= capture(&object.children) %>
+      </div>
+    </div>
+<% end %>

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -2,7 +2,10 @@
 
 module Playbook
   module PbPopover
-    class Popover < Playbook::KitBase
+    class Popover
+      include Playbook::Props
+      partial "pb_popover/popover"
+
       prop :position, type: Playbook::Props::Enum,
                       values: %w[top bottom left right],
                       default: "left"

data/app/pb_kits/playbook/pb_progress_pills/{progress_pills.html.erb → _progress_pills.html.erb}

@@ -16,5 +16,5 @@
         <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
-
+    
 <% end %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbProgressPills
-    class ProgressPills < Playbook::KitBase
+    class ProgressPills
+      include Playbook::Props
+
+      partial "pb_progress_pills/progress_pills"
+
       prop :active, type: Playbook::Props::Number,
                     default: 0
       prop :value

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -2,9 +2,13 @@
 
 module Playbook
   module PbProgressSimple
-    class ProgressSimple < Playbook::KitBase
+    class ProgressSimple
+      include Playbook::Props
+
       class ProgressError < StandardError; end
 
+      partial "pb_progress_simple/progress_simple"
+
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_progress_step/{progress_step.html.erb → _progress_step.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= content.presence %>
+    <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:li,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+    <div class="box">
+      <div class="circle">
+        <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
+      </div>
+      <div class="content">
+        <%= capture(&object.children) %>
+      <div>
+    </div>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -17,14 +17,11 @@ const ProgressStepItem = ({
   status = 'inactive',
   children,
   icon = 'check',
-}: ProgressStepItemProps, ref: React.ElementRef<"li">) => {
+}: ProgressStepItemProps) => {
   const progressStepItem = buildCss('pb_progress_step_item', status)
 
   return (
-    <li
-        className={classnames(progressStepItem, className)}
-        ref={ref}
-    >
+    <li className={classnames(progressStepItem, className)}>
       <div className="box">
         <div className="circle">
           <Icon icon={icon} />

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbProgressStep
-    class ProgressStep < Playbook::KitBase
+    class ProgressStep
+      include Playbook::Props
+
+      partial "pb_progress_step/progress_step"
+
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbProgressStep
-    class ProgressStepItem < Playbook::KitBase
+    class ProgressStepItem
+      include Playbook::Props
+
+      partial "pb_progress_step/progress_step_item"
+
       prop :status, type: Playbook::Props::Enum,
                     values: %w[complete active inactive hidden],
                     default: "inactive"

data/app/pb_kits/playbook/pb_radio/{radio.html.erb → _radio.html.erb}

@@ -6,8 +6,8 @@
     id: object.id,
     value: object.value) do %>
 
-    <% if content.present? %>
-      <%= content %>
+    <% if object.children %>
+      <%= capture(&object.children) %>
     <% else %>
       <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
     <% end %>

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

@@ -1,6 +1,5 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
-@import "../tokens/positioning";
 @import "../pb_body/body";
 @import "../tokens/transition";
 
@@ -22,39 +21,29 @@
   }
 
   @media (hover:hover) {
-    &:hover, &:focus {
-      .pb_radio_button {
-        border-color: $primary_action;
-      }
+    &:hover .pb_radio_button {
+      border-color: $primary_action;
     }
   }
 
   input {
     position: relative;
-    left: $offscreen;
-    &:checked, &:focus {
-      & ~ .pb_radio_button {
-        border: 6px solid $primary;
-      }
+    display: none;
+    &:checked ~ .pb_radio_button {
+      border: 6px solid $primary;
     }
   }
   &.dark {
     .pb_radio_button {
       border-color: $border_dark;
     }
-    input {
-      &:checked, &:focus {
-        & ~ .pb_radio_button {
-          border: 6px solid $primary;
-        }
-      }
+    input:checked ~ .pb_radio_button {
+      border: 6px solid $primary;
     }
 
     @media (hover:hover) {
-      &:hover, &:focus {
-        .pb_radio_button {
-          border-color: $primary_action;
-        }
+      &:hover .pb_radio_button {
+        border-color: $primary_action;
       }
     }
     &.error {

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

@@ -1,8 +1,5 @@
 <%= pb_rails("radio", props: {
   text: "Power",
-  input_options: {
-    tabindex: 0
-  },
   name: "group 1",
   value: "Power"
 }) %>
@@ -12,7 +9,8 @@
 <%= pb_rails("radio", props: {
   text: "Nitro",
   name: "group 1",
-  value: "Nitro"
+  value: "Nitro",
+  checked: true
 }) %>
 
 <br>

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

@@ -7,10 +7,10 @@ const RadioDefault = () => {
   return (
     <div>
       <Radio
+          defaultChecked
           label="Power"
           name="Group2"
           ref={ref}
-          tabIndex={0}
           value="Power"
       />
       <br />

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

@@ -4,7 +4,13 @@ require "action_view"
 
 module Playbook
   module PbRadio
-    class Radio < Playbook::KitBase
+    class Radio
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Context
+      include Playbook::Props
+
+      partial "pb_radio/radio"
+
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :error, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.html.erb

@@ -0,0 +1 @@
+<%= react_component('RichTextEditor', object.rich_text_options) %>

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

@@ -5,15 +5,11 @@ import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
 import { globalProps } from '../utilities/globalProps.js'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type RichTextEditorProps = {
-  aria?: object,
   className?: string,
-  data?: object,
   focus?: boolean,
   id?: string,
-  name?: string,
   onChange: (string) => void,
   placeholder?: string,
   simple?: boolean,
@@ -24,12 +20,9 @@ type RichTextEditorProps = {
 
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
-    aria = {},
     className,
-    data = {},
     focus = false,
     id,
-    name,
     onChange,
     placeholder,
     simple = false,
@@ -38,8 +31,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     value = '',
   } = props
   const trixRef = useRef()
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
 
   useEffect(() => {
     Trix.config.textAttributes.inlineCode = {
@@ -107,8 +98,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
         className={classnames(
         RichTextEditorClass,
         SimpleClass,
@@ -119,13 +108,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     >
       <input
           id={id}
-          name={name}
           type="hidden"
           value={value}
       />
       <trix-editor
           input={id}
-          name={name}
           placeholder={placeholder}
           ref={trixRef}
       />

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
@@ -12,7 +11,6 @@ examples:
   react:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates

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

@@ -1,6 +1,5 @@
 export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
 export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
-export { default as RichTextEditorAttributes } from './_rich_text_editor_attributes.jsx'
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -2,16 +2,20 @@
 
 module Playbook
   module PbRichTextEditor
-    class RichTextEditor < Playbook::KitBase
+    class RichTextEditor
+      include Playbook::Props
+      partial "pb_rich_text_editor/rich_text_editor"
+
+
       prop :focus, type: Playbook::Props::Boolean,
                    default: false
-
+ 
       prop :simple, type: Playbook::Props::Boolean,
                     default: false
 
       prop :sticky, type: Playbook::Props::Boolean,
                    default: false
-
+      
       prop :value
       prop :template
       prop :placeholder
@@ -30,7 +34,7 @@ module Playbook
 
       def sticky_class
         sticky ? "sticky" : nil
-      end
+      end 
 
       def rich_text_options
         {
@@ -44,6 +48,8 @@ module Playbook
           placeholder: placeholder
         }
       end
+
     end
   end
 end
+