playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha11

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -1,17 +1,26 @@
 import React from 'react'
 import { OnlineStatus } from '../../'
 
-const OnlineStatusDefault = () => (
+const OnlineStatusDefault = (props) => (
   <>
-    <OnlineStatus status="offline" />
+    <OnlineStatus
+        status="offline"
+        {...props}
+    />
 
     <br />
 
-    <OnlineStatus status="online" />
+    <OnlineStatus
+        status="online"
+        {...props}
+    />
 
     <br />
 
-    <OnlineStatus status="away" />
+    <OnlineStatus
+        status="away"
+        {...props}
+    />
 
   </>
 )

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

@@ -2,8 +2,7 @@ examples:
 
   rails:
   - online_status_default: Default
-  - online_status_dark: Dark
+
 
   react:
   - online_status_default: Default
-  - online_status_dark: Dark

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

@@ -1,2 +1 @@
 export { default as OnlineStatusDefault } from './_online_status_default.jsx'
-export { default as OnlineStatusDark } from './_online_status_dark.jsx'

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -32,7 +32,11 @@ const Person = (props: PersonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_person_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_person_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -43,7 +43,11 @@ const PersonContact = (props: PersonContactProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_person_contact_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_person_contact_kit'),
+    globalProps(props),
+    className
+  )
 
   const wrongContacts = () => (
     contacts.filter((contactObject) => (

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

@@ -2,10 +2,8 @@ examples:
   
   rails:
   - pill_default: Default
-  - pill_dark: Dark
+ 
   
   
   react:
   - pill_default: Default
-  - pill_dark: Dark
-  

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

@@ -1,2 +1 @@
 export { default as PillDefault } from './_pill_default.jsx'
-export { default as PillDark } from './_pill_dark.jsx'

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -78,7 +78,11 @@ const Popover = (props: PbPopoverProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_popover_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_popover_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <Popper

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

@@ -3,12 +3,9 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_dark: Dark
-  - progress_pills_status_dark: Status Dark
+
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_dark: Dark
-  - progress_pills_status_dark: Status Dark

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

@@ -1,4 +1,2 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
-export { default as ProgressPillsDark } from './_progress_pills_dark.jsx'
-export { default as ProgressPillsStatusDark } from './_progress_pills_status_dark.jsx'

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -41,14 +41,14 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   }
 
   const wrapperClass = classnames(
-    className,
     buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const kitClass = classnames(
-    className,
-    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
+    buildCss('pb_progress_simple_kit', { muted }, variantStyle, align),
+    className
   )
 
   return (

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

@@ -32,7 +32,7 @@ const ProgressStep = (props: ProgressStepProps) => {
   )
 
   return (
-    <ul className={classnames(progressStepCss, className, globalProps(props))}>
+    <ul className={classnames(progressStepCss, globalProps(props), className)}>
       {children}
     </ul>
   )

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

@@ -2,12 +2,10 @@ examples:
   rails:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
-  - progress_step_dark: Dark
   - progress_step_tracker: Tracker
   
   
   react:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
-  - progress_step_dark: Dark
   - progress_step_tracker: Tracker

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

@@ -1,4 +1,3 @@
 export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
-export { default as ProgressStepDark } from './_progress_step_dark.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'

data/app/pb_kits/playbook/pb_radio/_radio.html.erb

@@ -9,7 +9,7 @@
     <% if object.children %>
       <%= capture(&object.children) %>
     <% else %>
-      <%= radio_button_tag object.name, object.value, object.selected %>
+      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
     <% end %>
 
     <span class="pb_radio_button"></span>

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

@@ -0,0 +1,9 @@
+<%= pb_rails("radio", props: {
+  text: "Radio with Options",
+  input_options: {
+    id: "radio-id",
+    name: "radio-name",
+    value: "radio-value",
+    class: "radio-class",
+  }
+}) %>

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

@@ -2,14 +2,11 @@ examples:
 
   rails:
   - radio_default: Default
-  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_dark_error: With Error
+  - radio_options: With Options
 
   react:
   - radio_default: Default
-  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_dark_error: Dark With Error

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

@@ -1,5 +1,2 @@
 export { default as RadioDefault } from './_radio_default.jsx'
-export { default as RadioDark } from './_radio_dark.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
-export { default as RadioError } from './_radio_error.jsx'
-export { default as RadioDarkError } from './_radio_dark_error.jsx'

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

@@ -15,6 +15,8 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"
       prop :text, type: Playbook::Props::String,
@@ -26,10 +28,6 @@ module Playbook
         generate_classname("pb_radio_kit") + error_class
       end
 
-      def input
-        check_box_tag(name, value, checked)
-      end
-
       def selected
         "checked" if checked == true
       end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -30,7 +30,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), globalProps(props), className)
 
   return (
 

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

@@ -5,11 +5,10 @@ examples:
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-  - section_separator_dark: Dark
+
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-  - section_separator_dark: Dark

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

@@ -2,4 +2,3 @@ export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
-export { default as SectionSeparatorDark } from './_section_separator_dark.jsx'

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_lg;
+    padding-right: $space_xl;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;

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

@@ -8,9 +8,8 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_dark: Dark Select
   - select_error: Select w/ Error
-  - select_dark_error: Select Dark w/ Error
+
 
 
   react:
@@ -21,6 +20,4 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_dark: Dark Select
   - select_error: Select w/ Error
-  - select_dark_error: Select Dark w/ Error

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

@@ -1,5 +1,4 @@
 export { default as SelectDefault } from './_select_default.jsx'
-export { default as SelectDark } from './_select_dark.jsx'
 export { default as SelectBlank } from './_select_blank.jsx'
 export { default as SelectDisabledOptions } from './_select_disabled_options.jsx'
 export { default as SelectDisabled } from './_select_disabled.jsx'
@@ -7,4 +6,3 @@ export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
-export { default as SelectDarkError } from './_select_dark_error.jsx'

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

@@ -4,10 +4,9 @@ examples:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_dark: Dark
+
   
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_dark: Dark

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

@@ -1,4 +1,3 @@
 export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
 export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
-export { default as SelectableCardDark } from './_selectable_card_dark.jsx'
 export { default as SelectableCardBlock } from './_selectable_card_block.jsx'

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

@@ -4,13 +4,10 @@ examples:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_dark: Dark
+
   
   
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_dark: Dark
-
-  

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

@@ -1,4 +1,3 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
-export { default as SelectableCardIconDark } from './_selectable_card_icon_dark.jsx'

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

@@ -3,10 +3,8 @@ examples:
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_dark: Dark
+
   
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_dark: Dark
-  

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

@@ -1,3 +1,2 @@
 export { default as SelectableIconDefault } from './_selectable_icon_default.jsx'
 export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx'
-export { default as SelectableIconDark } from './_selectable_icon_dark.jsx'

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

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

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

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

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

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

@@ -10,8 +10,7 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Off Dark
+ 
   react:
     - table_sm: Small
     - table_md: Medium
@@ -23,5 +22,3 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Off Dark