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

playbook_ui 7.0.1.pre.alpha10 → 7.1.0

Files changed (314) hide show

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb CHANGED

@@ -1,4 +1,4 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick X to close at any time",
+  text: "Scan to Assign Selected Items.\nClick here to generate report",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx CHANGED

@@ -6,7 +6,7 @@ const FixedConfirmationToastMultiLine = () => {
     <div>
       <FixedConfirmationToast
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
+          text={'Scan to Assign Selected Items.\n Click here to generate report'}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb CHANGED

@@ -1,5 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
   dark: true,
-  text: "Scan to Assign Selected Items.\nClick X to close at any time",
+  text: "Scan to Assign Selected Items.\nClick here to generate report.",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx CHANGED

@@ -7,7 +7,7 @@ const FixedConfirmationToastMultiLineDark = () => {
       <FixedConfirmationToast
           dark
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
+          text={'Scan to Assign Selected Items.\n Click here to generate report'}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml CHANGED

@@ -3,12 +3,14 @@ examples:
   rails:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
+  - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_dark: Dark
   - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
+  - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_dark: Dark
   - fixed_confirmation_toast_multi_line_dark: Multi Line Dark

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js CHANGED

@@ -1,4 +1,5 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
+export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
 export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
 export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb CHANGED

@@ -11,11 +11,17 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
+      prop :closeable, type: Playbook::Props::Boolean,
+                       default: false
       def show_text?
         text.present?
       end
+      def close_class
+        closeable.present? ? " remove_toast" : ""
+      end
       def icon_value
         case status
         when "success"
@@ -30,7 +36,7 @@ module Playbook
       end
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status)
+        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js ADDED

@@ -0,0 +1,18 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+export default class PbFixedConfirmationToast extends PbEnhancedElement {
+  static get selector() {
+    return '.remove_toast'
+  }
+  connect() {
+    this.self = this.element
+    this.self.addEventListener('click', () => {
+      this.removeToast(this.self)
+    })
+  }
+  removeToast(elem) {
+    elem.parentNode.removeChild(elem)
+  }
+}

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,8 +24,16 @@
   <%= 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.date_picker :example_date_picker1, props: { default_date: "blank" } %>
+  <%= 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.actions do |action| %>
     <%= action.submit %>

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

@@ -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_picker2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field1
+    :example_checkbox_field,
+    :example_date_picker_field_1
     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_field1, props: { default_date: 'blank' } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field2
+    :example_checkbox_field,
+    :example_date_picker_field_2
     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_field2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

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/form_builder/date_picker_field.rb CHANGED

@@ -8,6 +8,7 @@ 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 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

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