playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorText = (props) => {
+const SectionSeparatorText = () => {
   return (
     <SectionSeparator
-        {...props}
         text="Title Separator"
     />
   )

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorTextBackground = (props) => {
+const SectionSeparatorTextBackground = () => {
   return (
     <SectionSeparator
-        {...props}
         text="Title Separator"
         variant="background"
     />

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, FlexItem, SectionSeparator } from '../../'
 
-const SectionSeparatorVertical = (props) => {
+const SectionSeparatorVertical = () => {
   return (
     <Flex
         inline="flex-container"
@@ -10,17 +10,11 @@ const SectionSeparatorVertical = (props) => {
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>
-      <SectionSeparator
-          {...props}
-          orientation="vertical"
-      />
+      <SectionSeparator orientation="vertical" />
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>
-      <SectionSeparator
-          {...props}
-          orientation="vertical"
-      />
+      <SectionSeparator orientation="vertical" />
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>

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

@@ -18,7 +18,7 @@ module Playbook
                   default: false
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation)
+        generate_classname("pb_section_separator_kit", variant, orientation, dark_class)
       end
 
     private

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

@@ -11,7 +11,7 @@
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    padding-right: $space_xl;
+    padding-right: $space_lg;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb

@@ -4,9 +4,9 @@
   class: object.classname) do %>
 
   <% if object.multi %>
-    <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
+    <%= check_box_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
   <% else %>
-    <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
+    <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
   <% end %>
 
   <label for="<%= object.input_id_present %>">
@@ -17,9 +17,9 @@
     <% end %>
     <% if object.icon %>
       <div class="pb_selectable_card_circle">
-        <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "check", fixed_width: true}) %>
       </div>
     <% end %>
   </label>
 
-<% end %>
+<% end %>

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

@@ -1,12 +1,11 @@
 examples:
-
+  
   rails:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_options: With Options
-
 
+  
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select

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

@@ -8,21 +8,21 @@ module Playbook
       partial "pb_selectable_card/selectable_card"
 
       prop :checked, type: Playbook::Props::Boolean,
-                     default: false
+                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
+                  default: false
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :multi, type: Playbook::Props::Boolean,
-                   default: true
+                  default: true
       prop :input_id, type: Playbook::Props::String
-
-      prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
       prop :name
       prop :text
       prop :value
 
+      
+      
+
       def classname
         generate_classname("pb_selectable_card_kit", checked_class, enable_disabled_class)
       end
@@ -31,17 +31,10 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
-      def additional_input_options
-        input_options.merge(
-          id: input_id_present,
-          disabled: disabled
-        )
-      end
-
     private
-
+      
       def checked_class
-        checked ? "checked" : nil
+        checked ? "checked" : nil 
       end
 
       def enable_disabled_class
@@ -49,4 +42,4 @@ module Playbook
       end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     data: object.data,
     class: object.classname) do %>
-
+  
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,
     name: object.name,
@@ -10,8 +10,7 @@
     disabled: object.disabled,
     icon: object.checkmark,
     multi: object.multi,
-    dark: object.dark,
-    input_options: object.input_options
+    dark: object.dark
   }) do %>
 
     <%= pb_rails("selectable_icon", props: {

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

@@ -1,13 +1,12 @@
 examples:
-
+  
   rails:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_options: With Options
-
-
 
+  
+  
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark

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

@@ -25,9 +25,6 @@ module Playbook
                        default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
-
       def classname
         generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)
       end

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb

@@ -4,15 +4,15 @@
     class: object.classname) do %>
 
     <% if object.inputs == "disabled" %>
-
+    
       <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
 
     <% else %>
       <% if object.multi %>
-        <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
+        <%= check_box_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
       <% else %>
-        <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
+        <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
       <% end %>
 
       <label for="<%= object.input_id_present %>">

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

@@ -1,11 +1,10 @@
 examples:
-
+  
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_options: With Options
-
 
+  
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select

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

@@ -23,9 +23,6 @@ module Playbook
                       default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
-
       # Conditional rendering for input field
       prop :inputs, type: Playbook::Props::String,
                     default: "enabled"
@@ -38,13 +35,6 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
-      def additional_input_options
-        input_options.merge(
-          id: input_id_present,
-          disabled: disabled
-        )
-      end
-
     private
 
       def checked_class

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -33,9 +33,9 @@ const StatChange = (props: StatChangeProps) => {
     <If condition={value}>
       <div
           className={classnames(
+          className,
           buildCss('pb_stat_change_kit', status),
-          globalProps(props),
-          className
+          globalProps(props)
         )}
           id={id}
       >

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -21,11 +21,11 @@ const StatValue = (props: StatValueProps) => {
   } = props
 
   const displayValue = function(value) {
-    if (value || value === 0) {
+    if (value) {
       return (
         <Title
             size={1}
-            text={`${value}`}
+            text={value}
         />
       )
     }
@@ -44,7 +44,7 @@ const StatValue = (props: StatValueProps) => {
 
   return (
     <div
-        className={classnames('pb_stat_value_kit', globalProps(props), className)}
+        className={classnames('pb_stat_value_kit', className, globalProps(props))}
         id={id}
     >
       <div className="pb_stat_value_wrapper">

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -3,12 +3,7 @@ import { StatValue } from '../../'
 
 const StatValueDefault = () => {
   return (
-    <>
-      <StatValue value={1048} />
-      <br />
-      <br />
-      <StatValue value={0} />
-    </>
+    <StatValue value={1048} />
   )
 }
 

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -44,6 +44,7 @@ const Table = (props: TableProps) => {
         {...ariaProps}
         {...dataProps}
         className={classnames(
+        className,
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
@@ -54,8 +55,7 @@ const Table = (props: TableProps) => {
           'single-line': singleLine,
           'no-hover': disableHover,
         },
-        globalProps(props),
-        className
+        globalProps(props)
       )}
         id={id}
     >

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

@@ -10,12 +10,6 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_one_action: Table with 1 Action
-    - table_two_actions: Table with 2 Actions
-    - table_two_plus_actions: Table with 2+ Actions
-    - table_action_middle: Table with Actions in the Middle
-    - table_icon_buttons: Table with Icon Buttons
-
  
   react:
     - table_sm: Small
@@ -28,9 +22,3 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_one_action: Table with 1 Action
-    - table_two_actions: Table with 2 Actions
-    - table_two_plus_actions: Table with 2+ Actions
-    - table_action_middle: Table with Actions in the Middle
-    - table_icon_buttons: Table with Icon Buttons
-

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

@@ -8,9 +8,3 @@ export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'
-export { default as TableOneAction } from './_table_one_action.jsx'
-export { default as TableTwoActions } from './_table_two_actions.jsx'
-export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
-export { default as TableActionMiddle } from './_table_action_middle.jsx'
-export { default as TableIconButtons } from './_table_icon_buttons.jsx'
-

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -50,9 +50,9 @@ const TextInput = (props: TextInputProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames([
     'pb_text_input_kit',
+    className,
     error ? 'error' : null,
     globalProps(props),
-    className,
   ])
 
   return (

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -42,7 +42,7 @@ const Textarea = ({
 }: TextareaProps) => {
   const errorClass = error ? 'error' : null
   const resizeClass = `resize_${resize}`
-  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
+  const classes = classnames('pb_textarea_kit', className, errorClass, resizeClass, globalProps(props))
 
   return (
     <div className={classes}>

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -2,36 +2,39 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%
-    # convert deprecated prop values
-    size = object.size
-    size = "sm" if object.size == "xs"
-    size = "md" if object.size == "lg"
-  %>
+    <%
+      # convert deprecated prop values
+      size = object.size
+      size = "sm" if object.size == "xs"
+      size = "md" if object.size == "lg"
+    %>
   <% if size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
+    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
     <% if object.show_timezone %>
-      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
+      <%= content_tag(:span, class: "pb_time_timezone") do %>
+        <%= object.pb_date_time.to_timezone.upcase %>
+      <% end %>
     <% end %>
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    
-    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= object.format_time_string %>
-        <% if object.show_timezone %>
-          <span class="pb_time_timezone">
-            <%= object.pb_date_time.to_timezone.upcase %>
-          </span>
+        <%= content_tag(:span) do %>
+          <%= object.format_time_string %>
+          <% if object.show_timezone %>
+            <%= content_tag(:span, class: "pb_time_timezone") do %>
+              <%= object.pb_date_time.to_timezone.upcase %>
+            <% end %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>