RubyGems - playbook_ui - Versions diffs - 7.0.1.pre.alpha10 → 7.0.1 - Mend

playbook_ui 7.0.1.pre.alpha10 → 7.0.1

Files changed (222) hide show

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb CHANGED

@@ -22,6 +22,13 @@ module Playbook
           (width.to_f * 100 / widths.sum).round(2)
         end
       end
+      def chart_options
+        {
+          size: size,
+          widths: widths,
+        }
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]

data/app/pb_kits/playbook/pb_flex/_flex.jsx CHANGED

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        className,
-        globalProps(props)
+        globalProps(props),
+        className
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED

@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

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

@@ -24,7 +24,15 @@
   <%= 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 } %>
+  <%= 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_picker1, props: { default_date: "blank" } %>
   <%= form.actions do |action| %>

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

@@ -4,13 +4,18 @@ module Playbook
   module PbForm
     module FormBuilder
       module CheckboxField
-        def check_box(name, props: {}, **options, &block)
+        def check_box(name, props: {}, **options)
           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
-          input = super(name, **options, &block)
+          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)
           if props[:label]
             @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +

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

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

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

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

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

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

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

@@ -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)
+      globalProps(props),
+      className
     )
   return (
     <div className={classes(className, dark)}>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1 @@
-<%= 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 %>
+<%= react_component('LineGraph', object.chart_options) %>

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

@@ -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_line_graph/line_graph.rb CHANGED

@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,
@@ -44,7 +45,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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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) => (
@@ -73,22 +77,23 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={index}
+            key={`valid-contact-${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={index}
+              key={`wrong-contact-${index}`}
           />
-        </>
-          ))}
+        </div>
+      ))}
     </div>
   )
 }

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

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

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

@@ -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 CHANGED

@@ -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 (