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

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/_nav.jsx

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

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

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

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

@@ -43,11 +43,7 @@ const PersonContact = (props: PersonContactProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_person_contact_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_person_contact_kit'), className, globalProps(props))
 
   const wrongContacts = () => (
     contacts.filter((contactObject) => (
@@ -77,23 +73,22 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+            key={index}
         />
-      ))}
+            ))}
       {wrongContacts().map((contactObject, index) => (
-        <div key={`wrong-contact-caption-wrapper-${index}`}>
+        <>
           <Caption
               className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+              key={index}
           />
-        </div>
-      ))}
+        </>
+          ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -23,7 +23,6 @@ const PersonContactWithWrongNumbers = () => {
             },
           ]}
           firstName="Pauline"
-          key="person-contact-1"
           lastName="Smith"
       />
     </>

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

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

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

@@ -31,14 +31,12 @@
 
 .pb_popover_tooltip {
   opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
   visibility: hidden;
   pointer-events: none;
-  &.hide {
-    animation-name: fadeOut;
-    animation-duration: 150ms;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
   &.show {
     animation-name: fadeIn;
     animation-duration: 150ms;

data/app/pb_kits/playbook/pb_popover/index.js

@@ -37,7 +37,7 @@ export default class PbPopover extends PbEnhancedElement {
 
       setTimeout(() => {
         this.popper.update()
-        this.toggleTooltip()
+        this.tooltip.classList.toggle('show')
       }, 0)
     })
   }
@@ -71,12 +71,10 @@ export default class PbPopover extends PbEnhancedElement {
 
   hideTooltip() {
     this.tooltip.classList.remove('show')
-    this.tooltip.classList.add('hide')
   }
 
   toggleTooltip() {
     this.tooltip.classList.toggle('show')
-    this.tooltip.classList.toggle('hide')
   }
 
   get triggerElement() {

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),
-    className
+    globalProps(props)
   )
 
   const kitClass = classnames(
-    buildCss('pb_progress_simple_kit', { muted }, variantStyle, align),
-    className
+    className,
+    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
   )
 
   return (

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

@@ -13,14 +13,12 @@ type ProgressStepProps = {
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
   variant?: string,
-  color?: string,
 }
 
 const ProgressStep = (props: ProgressStepProps) => {
   const {
     className,
     children,
-    color,
     orientation = 'horizontal',
     icon = false,
     variant,
@@ -31,11 +29,10 @@ const ProgressStep = (props: ProgressStepProps) => {
     orientation,
     iconStyle,
     variant,
-    color,
   )
 
   return (
-    <ul className={classnames(progressStepCss, globalProps(props), className)}>
+    <ul className={classnames(progressStepCss, className, globalProps(props))}>
       {children}
     </ul>
   )