playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

data/app/pb_kits/playbook/{pb_body/_body.html.erb → pb_caption/caption.html.erb}

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

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCaption
-    class Caption
-      include Playbook::Props
-
-      partial "pb_caption/caption"
-
+    class Caption < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -3,7 +3,6 @@
 
 [class^=pb_card_kit] {
   @include pb_card;
-  overflow: auto;
 
   &[class*=_selected] {
     @include pb_card_selected;

data/app/pb_kits/playbook/pb_card/{_card.html.erb → card.html.erb}

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <% if object.children %>
-    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
-  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+    <%= content %>
+  <% end if content.present? %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCard
-    class Card
-      include Playbook::Props
-
-      partial "pb_card/card"
-
+    class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
@@ -31,7 +27,7 @@ module Playbook
 
       def body_padding
         if padding.present?
-           ""
+          ""
         else
           "p_md"
         end
@@ -39,7 +35,6 @@ module Playbook
 
     private
 
-
       def selected_class
         selected ? "selected" : "deselected"
       end

data/app/pb_kits/playbook/pb_card/{child_kits/_card_header.html.erb → card_body.html.erb}

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

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCard
-    class CardBody
-      include Playbook::Props
-
-      partial "pb_card/child_kits/card_body"
-
+    class CardBody < Playbook::KitBase
       def classname
         generate_classname("pb_card_body_kit", padding, separator: " ")
       end

data/app/pb_kits/playbook/pb_card/{child_kits/_card_body.html.erb → card_header.html.erb}

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

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -2,11 +2,7 @@
 
 module Playbook
     module PbCard
-      class CardHeader
-        include Playbook::Props
-  
-        partial "pb_card/child_kits/card_header"
-  
+      class CardHeader < Playbook::KitBase
         prop :header_color, type: Playbook::Props::String,
                             default: "category_1"
 
@@ -16,4 +12,3 @@ module Playbook
       end
     end
   end
-  

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -10,55 +10,44 @@ import { globalProps } from '../utilities/globalProps.js'
 type CheckboxProps = {
   aria?: object,
   checked?: boolean,
+  children: Node,
   className?: string,
   dark?: boolean,
   data?: object,
   error?: boolean,
   id?: string,
-  indeterminate?: boolean,
   name: string,
+  onChange: (boolean) => void,
+  tabIndex: number,
   text: string,
   value: string,
-  children: Node,
-  onChange: (boolean) => void,
 }
 
 const Checkbox = (props: CheckboxProps) => {
   const {
     aria = {},
     checked = false,
+    children = null,
     className,
     dark = false,
     data = {},
     error = false,
     id,
-    indeterminate = false,
     name = '',
+    onChange = () => {},
+    tabIndex,
     text = '',
     value = '',
-    children = null,
-    onChange = () => {},
   } = props
 
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error, indeterminate }),
+    buildCss('pb_checkbox_kit', { checked, error }),
     globalProps(props),
     className
   )
 
-  const [ isChecked, toggleCheck ] = useState(checked)
-
-  useEffect(() => {
-    toggleCheck(checked)
-  }, [checked])
-
-  const handleClick = () => {
-    toggleCheck(!isChecked)
-    onChange(!isChecked)
-  }
-
   return (
     <label
         {...ariaProps}
@@ -70,34 +59,22 @@ const Checkbox = (props: CheckboxProps) => {
         {children}
         <Else />
         <input
-            checked={isChecked}
+            defaultChecked={checked}
             name={name}
             onChange={onChange}
-            onClick={handleClick}
+            tabIndex={tabIndex}
             type="checkbox"
             value={value}
         />
       </If>
-      <If condition={!indeterminate}>
-        <span className="pb_checkbox_checkmark">
-          <Icon
-              className="check_icon"
-              fixedWidth
-              icon="check"
-          />
-        </span>
-      </If>
-
-      <If condition={indeterminate && checked}>
-        <span className="pb_checkbox_indeterminate">
-          <Icon
-              className="indeterminate_icon"
-              fixedWidth
-              icon="minus"
-          />
-        </span>
-      </If>
 
+      <span className="pb_checkbox_checkmark">
+        <Icon
+            className="check_icon"
+            fixedWidth
+            icon="check"
+        />
+      </span>
       <Body
           className="pb_checkbox_label"
           dark={dark}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -1,9 +1,10 @@
 @import "../tokens/colors";
 @import "../tokens/transition";
+@import "../tokens/positioning";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
-  display: flex;
+  display: inline-flex;
   cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
@@ -11,30 +12,24 @@ $transition: $transition_cubic;
     font-size: $text_lt_default;
     user-select: none;
   }
-
-  .pb_checkbox_checkmark, .pb_checkbox_indeterminate {
-    align-items: center;
+  .pb_checkbox_checkmark {
+    position: relative;
+    height: 22px;
+    width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    height: 22px;
-    position: relative;
     transition: background $transition_default ease, border-color $transition_default ease;
-    width: 22px;
-    .check_icon,
-    .indeterminate_icon {
-      color: $white;
-      height: 16px;
-      left: 1px;
-      position: relative;
-      display: flex;
+    .check_icon {
       opacity: 0;
-      width: 16px;
-      &.hidden {
-        display: none;
-      }
+      position: relative;
+      top: -2px;
+      left: 1px;
+      height: 16px;
+      width:16px;
+      color: $white;
+
     }
   }
-
   @media (hover:hover) {
     &:hover input ~ .pb_checkbox_checkmark {
       border-color: $primary_action;
@@ -42,26 +37,29 @@ $transition: $transition_cubic;
   }
 
   input {
+    position: relative;
+    opacity: 0;
     cursor: pointer;
-    display: flex;
     height: 0;
-    opacity: 0;
-    position: relative;
     width: 0;
-    &:checked ~ .pb_checkbox_checkmark,
-    &:checked ~ .pb_checkbox_indeterminate {
+    left: $offscreen;
+    &:focus ~ .pb_checkbox_checkmark {
+      border-color: $primary_action;
+    }
+    &:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;
       border-color: $primary_action;
     }
     &:checked ~ .pb_checkbox_checkmark {
       display: inline-block;
-      .check_icon,
-      .indeterminate_icon {
+      .check_icon{
         opacity: $opacity_10;
       }
     }
   }
 
+
+
   &[class*=_dark] {
     input:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname) do %>
+  <%= content.presence || object.input %>
+  <span class="pb_checkbox_checkmark">
+    <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
+  </span>
+  <span class="pb_checkbox_label">
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+  </span>
+<% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -2,16 +2,9 @@
 
 module Playbook
   module PbCheckbox
-    class Checkbox
-      include Playbook::Props
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-
-      partial "pb_checkbox/checkbox"
-
+    class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -48,10 +41,6 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
-
-      def indeterminate_class
-        indeterminate ? "indeterminate" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx

@@ -24,6 +24,7 @@ const CheckboxCustom = (props) => {
               onChange={handleOnChange}
               type="checkbox"
               value="custom-value"
+              {...props}
           />
         </Checkbox>
       </div>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb

@@ -1,4 +1,6 @@
+
 <%= pb_rails("checkbox" , props: {
+  input_options: { tabindex: 0 },
   text: "Checkbox Label",
   value: "checkbox-value",
   name: "checkbox-name"

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -6,6 +6,7 @@ const CheckboxDefault = (props) => {
     <div>
       <Checkbox
           name="default name"
+          tabIndex={0}
           text="Checkbox label"
           value="default value"
           {...props}

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

@@ -5,11 +5,9 @@ examples:
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
-    - checkbox_indeterminate: Checkbox Indeterminate
 
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
-  - checkbox_indeterminate: Checkbox Indeterminate

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

@@ -2,4 +2,3 @@ export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
-export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_circle_chart/{_circle_chart.html.erb → circle_chart.html.erb}

@@ -8,15 +8,15 @@
       <%= javascript_tag do %>
         window.addEventListener('DOMContentLoaded', function() {
           new pbChart('.selector', <%= object.chart_options %>)
-      
+
         });
       <% end %>
     <% end %>
   <% end %>
 
-  <% if object.children %>
+  <% if content.present? %>
     <div class="pb-circle-chart-block">
-      <%= capture(&object.children) %>
+      <%= content %>
     </div>
   <% end %>
 </div>

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCircleChart
-    class CircleChart
-      include Playbook::Props
-
-      partial "pb_circle_chart/circle_chart"
-
+    class CircleChart < Playbook::KitBase
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
@@ -23,7 +19,7 @@ module Playbook
       prop :start_angle, type: Playbook::Props::Numeric
       prop :header_format
       prop :data_label_html, default: '<div>{point.name}</div>'
-      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span> 
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
                                       {point.name}: ' + '<b>{point.y}
                                     </b>'
       prop :use_html, type: Playbook::Props::Boolean, default: false