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

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,16 +24,8 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox,
-    data: { field1: "value1", field2: "value2" },
-    props: { text: "Example Checkbox", label: true },
-    checked_value: "yes",
-    unchecked_value: "no",
-    id: "checkbox-id",
-    name: "checkbox-name",
-    class: "checkbox-class" 
-  %>
-  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
+  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -28,7 +28,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field,
-    :example_date_picker_field_1
+    :example_checkbox_field
+    :example_date_picker_field1
 
 
     def self.model_name
@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field,
-    :example_date_picker_field_2
+    :example_checkbox_field
+    :example_date_picker_field2
 
 
     def self.model_name
@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb

@@ -4,18 +4,13 @@ module Playbook
   module PbForm
     module FormBuilder
       module CheckboxField
-        def check_box(name, props: {}, **options)
+        def check_box(name, props: {}, **options, &block)
           label_text = @template.label(@object_name, name) if props[:label] == true
           options[:required] = true if props[:required]
           props[:margin_bottom] = "sm"
           props[:form_spacing] = true
 
-          checked_value = options[:checked_value]
-          unchecked_value = options[:unchecked_value]
-          options.delete(:checked_value)
-          options.delete(:unchecked_value)
-
-          input = super(name, options, checked_value, unchecked_value)
+          input = super(name, **options, &block)
 
           if props[:label]
             @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -8,7 +8,6 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
-          props[:label] = @template.label(@object_name, name) if props[:label] == true
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -18,9 +18,8 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
-    globalProps(props),
-    className
+    [`pb_form_pill_kit_${'primary'}`, className],
+    globalProps(props)
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -101,7 +101,7 @@ const Gauge = (props: GaugeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props), className)}
+        className={classnames(css, className, globalProps(props))}
         id={id}
     />
   )

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(globalProps(props), className)}
+        highlightClassName={classnames(className, globalProps(props))}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -40,12 +40,12 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
 
   const classes = (className, dark) =>
     classnames(
+      className,
       {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props),
-      className
+      globalProps(props)
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -56,6 +56,7 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
   const classes = classnames(
+    className,
     flipMap[flip],
     'pb_icon_kit',
     'far',
@@ -71,8 +72,7 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    globalProps(props),
-    className
+    globalProps(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -32,11 +32,7 @@ const IconValue = (props: IconValueProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_icon_value_kit', align),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_icon_value_kit', align), className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -25,11 +25,7 @@ const Image = (props: ImageProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(
-    buildCss('pb_image lazyload blur_up'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
   const dataProps = buildDataProps(data)
 
   return (

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -30,11 +30,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(
-    'pb_label_pill_kit',
-    globalProps(props),
-    className
-  )
+  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', globalProps(props), className)}>
+    <div className={classnames('layout_sidebar', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', globalProps(props), className)}>
+    <div className={classnames('layout_body', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', globalProps(props), className)}>
+    <div className={classnames('layout_header', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', globalProps(props), className)}>
+    <div className={classnames('layout_footer', className, globalProps(props))}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb

@@ -1 +1,13 @@
-<%= react_component('LineGraph', object.chart_options) %>
+<%= content_tag(:div, "",
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname
+    ) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    window.addEventListener('DOMContentLoaded', function() {
+      new pbChart('.selector', <%= object.chart_options %>)
+    })
+  <% end %>
+<% end %>

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(globalProps(this.props), className)}
+          className={classnames(className, globalProps(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }
+        }.to_json.html_safe
       end
 
       def classname

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

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

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

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

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

@@ -40,11 +40,7 @@ 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 }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, globalProps(props))
 
   return (
     <div

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

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

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

@@ -36,11 +36,8 @@ 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),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
+    className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_nav/_item.html.erb

@@ -5,9 +5,6 @@
   id: object.id) do %>
   <%= content_tag(object.tag,
     object.link ? object.link_options : object.options) do %>
-    <% if object.image_url %>
-      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
-    <% end %>
     <% if object.icon_left %>
       <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>

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

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Icon, Image } from '../'
+import { Icon } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
@@ -15,7 +15,6 @@ type NavItemProps = {
   iconLeft: string,
   iconRight: string,
   id?: string,
-  imageUrl: String,
   link: string,
   onClick?: EventHandler,
   text: string,
@@ -31,7 +30,6 @@ const NavItem = (props: NavItemProps) => {
     iconLeft,
     iconRight,
     id,
-    imageUrl,
     link,
     onClick = () => {},
     text = '',
@@ -55,17 +53,6 @@ const NavItem = (props: NavItemProps) => {
           href={link}
           onClick={onClick}
       >
-        <If condition={imageUrl}>
-          <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-          >
-            <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-            />
-          </div>
-        </If>
         <If condition={iconLeft}>
           <div
               className="pb_nav_list_item_icon_section"

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

@@ -8,7 +8,6 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type NavProps = {
   aria?: object,
-  borderless?: boolean,
   children?: React.Node,
   className?: string | array<string>,
   data?: object,
@@ -23,7 +22,6 @@ type NavProps = {
 const Nav = (props: NavProps) => {
   const {
     aria = {},
-    borderless = false,
     children,
     className,
     data = {},
@@ -41,10 +39,9 @@ const Nav = (props: NavProps) => {
   const cardCss = classnames(
     buildCss('pb_nav_list', variant, orientation, {
       highlight: highlight,
-      borderless: borderless,
     }),
-    globalProps(props),
-    className
+    className,
+    globalProps(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -40,7 +40,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
-        padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
+        padding: $space_sm $space_md $space_sm ($space_md - 3px);
         border: 0 solid transparent;
         border-width: 0 0 0 3px;
         transition-property: color, border-color, background-color;
@@ -59,7 +59,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_icon_left] {
           font-size: $font_large;
-          margin-right: $space_xs;
+          margin-right: $space_sm;
           color: $text_lt_lighter;
         }
         [class*=_icon_right] {
@@ -69,14 +69,10 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           font-size: $font_base;
+          font-weight: $bold;
           color: $text_lt_default;
           flex: 1;
         }
-        [class*=_img_left] {
-          margin-right: $space_xs;
-          height: 20px;
-          width: 25px;
-        }
       }
       &:last-child {
         border-bottom: 0;
@@ -171,19 +167,4 @@ $selector: ".pb_nav_list";
     }
   }
 
-  //Borderless
-  &[class*=_borderless] {
-    [class*=pb_nav_list_kit_item] {
-      list-style: none;
-      border-bottom: 0;
-    }
-  }
-  
-}
-
-//Image Wrapper
-.pb_nav_img_wrapper {
-  width: 24px;
-  height: 24px;
-  margin-right: $space_xs;
 }