playbook_ui 7.16.0 → 8.0.0.pre.alpha1

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
-   

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import RichTextEditor from './_rich_text_editor'
+
+const testId = 'richtext-input1',
+  kitClass = 'pb_rich_text_editor_kit'
+
+test('returns namespaced class name', () => {
+  render(
+    <RichTextEditor data={{ testid: testId }} />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns "Simple" namespaced class name via prop', () => {
+  render(
+    <RichTextEditor
+        data={{ testid: testId }}
+        simple
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} simple`)
+})
+
+test('returns "Focus" namespaced class name via prop', () => {
+  render(
+    <RichTextEditor
+        data={{ testid: testId }}
+        focus
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} focus-editor-targets`)
+})
+
+test('returns "Sticky" namespaced class name via prop', () => {
+  render(
+    <RichTextEditor
+        data={{ testid: testId }}
+        sticky
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} sticky`)
+})
+
+test('returns "Dark" class name', () => {
+  render(
+    <RichTextEditor
+        dark
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})

data/app/pb_kits/playbook/pb_section_separator/{_section_separator.html.erb → section_separator.html.erb}

@@ -8,6 +8,6 @@
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>
-        <% end %>    
+        <% end %>
     <%end%>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSectionSeparator
-    class SectionSeparator
-      include Playbook::Props
-
-      partial "pb_section_separator/section_separator"
-
+    class SectionSeparator < Playbook::KitBase
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],

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

@@ -66,6 +66,10 @@
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
       text-shadow: 0 0 0 $text_dk_default;
+      padding-right: $space_xl;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
           background-color: tint($focus_input_dark, 5%);

data/app/pb_kits/playbook/pb_select/{_select.html.erb → select.html.erb}

@@ -8,8 +8,8 @@
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
-    <% if object.children %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(

data/app/pb_kits/playbook/pb_select/select.rb

@@ -4,13 +4,7 @@ require "action_view"
 
 module Playbook
   module PbSelect
-    class Select
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_select/select"
-
+    class Select < Playbook::KitBase
       prop :blank_selection
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error

data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.html.erb → selectable_card.html.erb}

@@ -25,18 +25,18 @@
           <% end %>
           <div class="separator"></div>
           <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
-            <% if object.children.nil? %>
+            <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>
-              <%= capture(&object.children) %>
+              <%= content %>
             <% end %>
           <% end %>
         <% end %>
       <% else %>
-        <% if object.children.nil? %>
+        <% if content.nil? %>
           <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
-          <%= capture(&object.children) %>
+          <%= content %>
         <% end %>
         <% if object.icon %>
           <div class="pb_selectable_card_circle">

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableCard
-    class SelectableCard
-      include Playbook::Props
-
-      partial "pb_selectable_card/selectable_card"
-
+    class SelectableCard < Playbook::KitBase
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableCardIcon
-    class SelectableCardIcon
-      include Playbook::Props
-
-      partial "pb_selectable_card_icon/selectable_card_icon"
-
+    class SelectableCardIcon < Playbook::KitBase
       # Icon and text props
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableIcon
-    class SelectableIcon
-      include Playbook::Props
-
-      partial "pb_selectable_icon/selectable_icon"
-
+    class SelectableIcon < Playbook::KitBase
       # Icon props
       prop :icon, type: Playbook::Props::String
       # Title text

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= pb_rails("list") do %>
+    <% object.items.each do |item| %>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableList
-      include Playbook::Props
-
-      partial "pb_selectable_list/selectable_list"
-
+    class SelectableList < Playbook::KitBase
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "checkbox"

data/app/pb_kits/playbook/pb_selectable_list/{_selectable_list_item.html.erb → selectable_list_item.html.erb}

@@ -3,16 +3,15 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-    <% puts object.variant %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
     <% end %>
   <% else %>
     <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -2,9 +2,7 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableListItem
-      include Playbook::Props
-
+    class SelectableListItem < Playbook::KitBase
       prop :tabindex
 
       prop :checked, type: Playbook::Props::Boolean,
@@ -18,8 +16,6 @@ module Playbook
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
-      partial "pb_selectable_list/selectable_list_item"
-
       def classname
         generate_classname("pb_selectable_list_item_kit")
       end

data/app/pb_kits/playbook/pb_source/source.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSource
-    class Source
-      include Playbook::Props
-
-      partial "pb_source/source"
-
+    class Source < Playbook::KitBase
       prop :hide_icon, type: Playbook::Props::Boolean,
                        default: false
       prop :source, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -52,17 +52,17 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <div className="pb_star_rating_number">
-        <If condition={!hideRating}>
+      <If condition={!hideRating}>
+        <div className="pb_star_rating_number">
           {rating}
-        </If>
-      </div>
+        </div>
+      </If>
 
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star"
                 key={index}
             />
@@ -70,7 +70,7 @@ const StarRating = ({
 
           <If condition={hasHalfStar()}>
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star-half"
             />
           </If>
@@ -78,23 +78,23 @@ const StarRating = ({
 
         <div className="pb_star_rating_base">
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
         </div>