playbook_ui 7.15.1 → 7.16.0.pre.alpha1

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

@@ -0,0 +1,12 @@
+<%= 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" }) { 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,11 +2,7 @@
 
 module Playbook
   module PbPerson
-    class Person
-      include Playbook::Props
-
-      partial "pb_person/person"
-
+    class Person < Playbook::KitBase
       prop :first_name
       prop :last_name
 

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

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

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbPill
-    class Pill
-      include Playbook::Props
-
-      partial "pb_pill/pill"
-
+    class Pill < Playbook::KitBase
       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 %>">
+      <%= content.presence %>
+    </div>
+  </div>
+<% end %>

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

@@ -2,10 +2,7 @@
 
 module Playbook
   module PbPopover
-    class Popover
-      include Playbook::Props
-      partial "pb_popover/popover"
-
+    class Popover < Playbook::KitBase
       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,11 +2,7 @@
 
 module Playbook
   module PbProgressPills
-    class ProgressPills
-      include Playbook::Props
-
-      partial "pb_progress_pills/progress_pills"
-
+    class ProgressPills < Playbook::KitBase
       prop :active, type: Playbook::Props::Number,
                     default: 0
       prop :value

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

@@ -2,13 +2,9 @@
 
 module Playbook
   module PbProgressSimple
-    class ProgressSimple
-      include Playbook::Props
-
+    class ProgressSimple < Playbook::KitBase
       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 %>
-    <%= capture(&object.children) %>
+  <%= content.presence %>
 <% end %>

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

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

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">
+      <%= content.presence %>
+    <div>
+  </div>
+<% end %>

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

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

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

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

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

@@ -1,5 +1,8 @@
 <%= pb_rails("radio", props: {
   text: "Power",
+  input_options: {
+    tabindex: 0
+  },
   name: "group 1",
   value: "Power"
 }) %>
@@ -9,8 +12,7 @@
 <%= pb_rails("radio", props: {
   text: "Nitro",
   name: "group 1",
-  value: "Nitro",
-  checked: true
+  value: "Nitro"
 }) %>
 
 <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.html.erb → radio.html.erb}

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

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

@@ -4,13 +4,7 @@ require "action_view"
 
 module Playbook
   module PbRadio
-    class Radio
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_radio/radio"
-
+    class Radio < Playbook::KitBase
       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.jsx

@@ -5,11 +5,15 @@ 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,
@@ -20,9 +24,12 @@ type RichTextEditorProps = {
 
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
+    aria = {},
     className,
+    data = {},
     focus = false,
     id,
+    name,
     onChange,
     placeholder,
     simple = false,
@@ -31,6 +38,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     value = '',
   } = props
   const trixRef = useRef()
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
   useEffect(() => {
     Trix.config.textAttributes.inlineCode = {
@@ -98,6 +107,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
+        {...ariaProps}
+        {...dataProps}
         className={classnames(
         RichTextEditorClass,
         SimpleClass,
@@ -108,11 +119,13 @@ 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/_rich_text_editor_attributes.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("rich_text_editor", props: {
+  aria: { label: "rich-textarea" },
+  data: { key: "value", key2: "value2" },
+  name: "textarea-label",
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorAttributes = (props) => (
+  <div>
+    <RichTextEditor
+        aria={{ label: 'rich textarea' }}
+        data={{ key: 'value', key2: 'value2' }}
+        name="name-attribute"
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorAttributes

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

@@ -3,6 +3,7 @@ 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
@@ -11,6 +12,7 @@ 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,5 +1,6 @@
 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.html.erb

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

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

@@ -2,20 +2,16 @@
 
 module Playbook
   module PbRichTextEditor
-    class RichTextEditor
-      include Playbook::Props
-      partial "pb_rich_text_editor/rich_text_editor"
-
-
+    class RichTextEditor < Playbook::KitBase
       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
@@ -34,7 +30,7 @@ module Playbook
 
       def sticky_class
         sticky ? "sticky" : nil
-      end 
+      end
 
       def rich_text_options
         {
@@ -48,8 +44,6 @@ module Playbook
           placeholder: placeholder
         }
       end
-
     end
   end
 end
-