playbook_ui 7.0.1.pre.alpha14 → 7.0.1.pre.alpha15

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb

@@ -1 +1,14 @@
-<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
+<div>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), size: "xs" }) %>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
+  <br>
+  <br>
+
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'center' }) %>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'center' }) %>
+  <br>
+  <br>
+
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'right' }) %>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'right' }) %>
+</div>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -1,13 +1,57 @@
 import React from 'react'
 import DateRangeInline from '../_date_range_inline.jsx'
 
-const DateRangeInlineDefault = () => {
+const DateRangeInlineDefault = (props) => {
   return (
     <div>
       <DateRangeInline
+          {...props}
           endDate={new Date('20 Mar 2015')}
+          size="xs"
           startDate={new Date('18 Jun 2013')}
       />
+      <DateRangeInline
+          {...props}
+          endDate={new Date('20 Mar 2015')}
+          size="sm"
+          startDate={new Date('18 Jun 2013')}
+      />
+      <br />
+      <br />
+      <DateRangeInline
+          {...props}
+          align="center"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="xs"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
+      <DateRangeInline
+          {...props}
+          align="center"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="sm"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
+      <br />
+      <br />
+      <DateRangeInline
+          {...props}
+          align="right"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="xs"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
+      <DateRangeInline
+          {...props}
+          align="right"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="sm"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -1,8 +1 @@
-<%= content_tag(:figure,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% object.widths_to_percentages.each do |percentage| %>
-    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
-  <% end %>
-<% end %>
+<%= react_component('DistributionBar', object.chart_options) %>

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

@@ -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.html.erb

@@ -3,6 +3,7 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon" }) %>
-    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text?%>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
+    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text? %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon" }) if object.closeable %>
 <% end %>

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { Icon, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
@@ -14,6 +14,7 @@ const iconMap = {
 
 type FixedConfirmationToastProps = {
   className?: string,
+  closeable?: boolean,
   data?: string,
   id?: string,
   status?: "success" | "error" | "neutral" | "tip",
@@ -21,7 +22,8 @@ type FixedConfirmationToastProps = {
 }
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
-  const { className, status = 'neutral', text } = props
+  const [showToast, toggleToast] = useState(true)
+  const { className, closeable = false, status = 'neutral', text } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
     globalProps(props),
@@ -30,20 +32,32 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const icon = iconMap[status]
 
   return (
-    <div className={css}>
-      <If condition={icon}>
-        <Icon
-            className="pb_icon"
-            fixed_width
-            icon={icon}
+    <If condition={showToast}>
+      <div
+          className={css}
+          onClick={closeable && (() => toggleToast(false))}
+      >
+        <If condition={icon}>
+          <Icon
+              className="pb_icon"
+              fixedWidth
+              icon={icon}
+          />
+        </If>
+        <Title
+            className="pb_fixed_confirmation_toast_text"
+            size={4}
+            text={text}
         />
-      </If>
-      <Title
-          className="pb_fixed_confirmation_toast_text"
-          size={4}
-          text={text}
-      />
-    </div>
+        <If condition={closeable}>
+          <Icon
+              className="pb_icon"
+              fixedWidth={false}
+              icon="times"
+          />
+        </If>
+      </div>
+    </If>
   )
 }
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -20,6 +20,16 @@ $confirmation_toast_colors: (
   border-radius: $border_rad_mega;
   box-shadow: $shadow_deeper;
 
+  .fa-times {
+    cursor: pointer;
+    opacity: 0.5;
+    position: relative;
+    right: -8px;
+  }
+  &:hover .fa-times {
+    opacity: 1;
+  }
+
   @each $color_name, $color_value in $confirmation_toast_colors {
     &[class*=_#{$color_name}]  {
       background: $color_value;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  closeable: true
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
+
+const FixedConfirmationToastClose = () => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="error"
+            text="Error Message"
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="success"
+            text="Items Successfully Moved"
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="neutral"
+            text="Scan to Assign Selected Items"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastClose

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
   text: "Error Message",
-  status: "error"
+  status: "error",
+  closeable: true
 })%>
 
 <br><br>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -6,12 +6,12 @@ const FixedConfirmationToastDefault = () => {
     <div>
       <div>
         <FixedConfirmationToast
+            closeable
             status="error"
             text="Error Message"
         />
       </div>
 
-      <br />
       <br />
 
       <div>
@@ -21,7 +21,6 @@ const FixedConfirmationToastDefault = () => {
         />
       </div>
 
-      <br />
       <br />
 
       <div>

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

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

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

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

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

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

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

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

@@ -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_form/docs/_form_form_with.html.erb

@@ -25,12 +25,15 @@
   <%= 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 },
-                     id: "checkbox-id",
-                     name: "checkbox-name",
-                     class: "checkbox-class" %>
-  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
+    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

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

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