playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -77,7 +77,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -52,8 +52,9 @@ const List = (props: ListProps) => {
       borderless: borderless,
       ordered: ordered,
       xpadding: xpadding,
-    }), className,
-    globalProps(props)
+    }),
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_list/_list_item.jsx

@@ -27,8 +27,9 @@ const ListItem = (props: ListItemProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_item_kit'), className,
-    globalProps(props)
+    buildCss('pb_item_kit'),
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -40,7 +40,11 @@ const Logistic = (props: LogisticProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
-  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_logistic_kit', { dark }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -39,7 +39,11 @@ const Message = (props: MessageProps) => {
     ? 'pb_message_kit_avatar'
     : 'pb_message_kit'
 
-  const classes = classnames(buildCss(baseClassName), className, globalProps(props))
+  const classes = classnames(
+    buildCss(baseClassName),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -36,8 +36,11 @@ const MultipleUsers = (props: MultipleUsersProps) => {
   const reverseClass = reverse === true ? 'reverse' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
-    className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_multiple_users_kit', reverseClass),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -40,8 +40,8 @@ const Nav = (props: NavProps) => {
     buildCss('pb_nav_list', variant, orientation, {
       highlight: highlight,
     }),
-    className,
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   return (

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_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_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_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

@@ -4,6 +4,7 @@ examples:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
+  - radio_options: With Options
 
   react:
   - radio_default: Default

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_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_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_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_text_input/_text_input.scss

@@ -13,17 +13,22 @@
     margin-bottom: $space_sm;
     display: block;
 
-    input::placeholder {
+    input::placeholder,
+    .text_input .placeholder {
       @include pb_body_light;
     }
 
-    input {
+    input,
+    .text_input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
     }
 
-    input:focus, input:-webkit-autofill:focus {
+    input:focus,
+    .text_input:focus,
+    input:-webkit-autofill:focus,
+    .text_input:-webkit-autofill:focus {
       @include pb_textarea_focus;
       -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
       transition: background-color 5000s ease-in-out 0s;
@@ -34,18 +39,22 @@
     .text_input_wrapper {
       margin-bottom: 1rem;
 
-      input::placeholder {
+      input::placeholder,
+      .text_input .placeholder {
         @include pb_body_light_dark;
       }
 
-      input {
+      input, .text_input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
         overflow: hidden;
       }
 
-      input:focus, input:-webkit-autofill:focus {
+      input:focus,
+      .text_input:focus,
+      input:-webkit-autofill:focus,
+      .text_input:-webkit-autofill:focus {
         @include pb_textarea_focus_dark;
         -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
         transition: background-color 5000s ease-in-out 0s;
@@ -54,7 +63,7 @@
 
     &.error {
       .text_input_wrapper {
-        input {
+        input, .text_input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +75,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      input {
+      input, .text_input {
         border-color: $error;
       }
     }

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', className, errorClass, resizeClass, globalProps(props))
+  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
 
   return (
     <div className={classes}>

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

@@ -2,32 +2,38 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <% if object.size == "lg" %>
-    <%= pb_rails("title", props: { tag: "span", text: object.format_time_string, size: 3 }) %>
-    <%= content_tag(:span) do %>
+    <%
+      # 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, size: "lg" }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
+    <% if object.show_timezone %>
       <%= content_tag(:span, class: "pb_time_timezone") do %>
         <%= object.pb_date_time.to_timezone.upcase %>
       <% end %>
     <% end %>
-  <% elsif object.size == "sm" %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
-      <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
-      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <%= 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 }) %>
       <% end %>
     <% end %>
-  <% else %>
-    <%= pb_rails("body", props: { 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 %>
         <%= content_tag(:span) do %>
           <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
-            <%= object.pb_date_time.to_timezone.upcase %>
+          <% if object.show_timezone %>
+            <%= content_tag(:span, class: "pb_time_timezone") do %>
+              <%= object.pb_date_time.to_timezone.upcase %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>