playbook_ui 7.0.1.pre.alpha15 → 7.0.1

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

@@ -3,7 +3,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= 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 %>
+    <%= 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?%>
 <% end %>

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

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

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

@@ -20,16 +20,6 @@ $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_default.html.erb

@@ -1,7 +1,6 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
   text: "Error Message",
-  status: "error",
-  closeable: true
+  status: "error"
 })%>
 
 <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,6 +21,7 @@ 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 here to generate report",
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
   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 here to generate report'}
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
       />
     </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 here to generate report.",
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
   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 here to generate report'}
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
       />
     </div>
   )

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

@@ -3,14 +3,12 @@ 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,5 +1,4 @@
 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,17 +11,11 @@ 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"
@@ -36,7 +30,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status)
       end
     end
   end

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

@@ -33,7 +33,7 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", 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/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_line_graph/line_graph.rb

@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

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_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,7 +29,6 @@ const ProgressStep = (props: ProgressStepProps) => {
     orientation,
     iconStyle,
     variant,
-    color,
   )
 
   return (

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

@@ -4,17 +4,18 @@
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
-
-
 [class^=pb_progress_step_kit]{
     list-style:none;
     display: flex;
+
   [class*=pb_progress_step_item] {
     display:flex;
+    flex-basis:100%;
     flex-direction:column;
+    justify-content:space-between;
     position: relative;
-    flex-basis: 100%;
-
+    align-items: center;
+    
     .circle {
         height:14px;
         width:14px;
@@ -38,6 +39,7 @@
         height: 4px;
         position: absolute;
         top: 5px;
+        left: -50%;
         width:100%;
         background-color:$border_light;
     }
@@ -56,7 +58,7 @@
         .circle{
             background-color: $white;
             border: solid 2px $primary;
-            color: rgba( $primary, 0)
+            color: rgba($color: $primary, $alpha: 0)
         }
         &::before{
             background-color: $primary;
@@ -72,163 +74,18 @@
         }
     }
   }
-// Start of Horizontal
+
   &[class*=horizontal]{
     flex-direction: row;
-    [class*=pb_progress_step_item]{
-        align-items: flex-end;
-        &::before{
-            width: calc(100% + .04em);
-        }
-        [class*=box]{
-           display: flex;
-           flex-direction: column;
-           align-items: center;
-           .content{
-               top: 16px;
-               position: absolute;
-               width: fit-content;
-               min-width: max-content;
-           }
-        }
-        &:first-child {
-            position: relative;
-            align-items: flex-start;
-            flex-basis: 0;
-            .box{
-                align-items: flex-start;
-            }
-        }
-        &:last-child{
-            .box{
-                align-items: flex-end;
-            }
-    
-        }
-    }
-    // Start of Tracker
-    &[class*=tracker] {
-        background-color: $border_light;
-        border-radius: 1rem;
-        height:24px;
-        align-items: center;
-        [class*=box]{
-            .circle{
-                box-shadow: none;
-                height: 24px;
-                width: 24px;
-                border: $primary solid 4px;
-            }
-            .content{
-                top:-24px;
-                position: absolute;  
-            }
-        }
-        li[class*=pb_progress_step_item]{
-            &::before{
-                background-color: $border_light;
-                height: 24px;
-                border-radius: 1rem;
-                top: 0;
-                width: calc(100% + 1.5em);
-            }
-            .box{
-                align-items: center;
-            }
-            &:first-child{
-                position: relative;
-                .box{
-                    align-items: flex-start;
-                }
-            }
-            &:last-child{
-                .box{
-                    align-items: flex-end;
-                }
-            }
-        }
-        li[class*=_active]{
-            .circle{
-                height: 24px;
-                width: 24px;
-                border: $primary solid 6px;
-                background-color: rgba($white, $opacity_8);
-            }
-            &::before {
-                background-color: $primary;
-            }
-        }
-        li[class*=_inactive]{
-            &::before {
-                display: none;
-                background-color: $border_light;
-            }
-            .circle{
-                background-color: darken($border_light,10%);
-                border: $border_light solid 6px;
-            }
-            
-        }
-        li[class*=_complete]{
-            &::before {
-                background-color: $primary;
-            }
-            .circle{
-                background-color: darken($primary,25%);
-            }
-        }
-        li[class*=_hidden]{
-            &::before, .circle {
-                display: none;
-            }
-        }
-        li[class*=_hidden] ~ li[class*=_active],
-        li[class*=_hidden] ~ li[class*=_complete] {
-            &::before {
-                width: calc(200% + 1.5em);
-            }
-        }
-        &[class*=dark]{
-            background-color: tint($bg_dark,20%);
-            [class*=_inactive]{
-                .circle{
-                    border-color: tint($bg_dark,20%);
-                }
-            }
-        }
-        &[class*=info]{
-            li[class*=inactive] .circle{
-                border-color: $border_light;
-            }
-            .box .circle , li[class*=_active] .circle{
-                border-color: $teal;
-            }
-            li[class*=_complete],li[class*=_active]{
-                &::before {
-                    background-color: $teal;
-                }
-            }
-            li[class*=_complete] .circle{
-                background-color: darken($teal,25%);
-            }
-        }
-    }
-    //End of Tracker
-
   }
-// End of Horizontal
 
-// Start of Vertical
   &[class*=vertical]{
     flex-direction: column; 
     [class*=pb_progress_step_item]{
-        [class*=box]{
-        display:flex;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
         margin: 8px;
-        }
         &::before {
             display: flex;
             flex-direction: column;
@@ -236,7 +93,7 @@
             height: 100%;
             position: absolute;
             top:14px;
-            left: 21px;
+            left: 13px;
             width:4px;
             background-color:$border_light;
         }
@@ -248,39 +105,47 @@
         }
     }
   }
-//End of Vertical
 
   &[class*=icon] [class*=_complete] svg{
     opacity: 1;
   }
 
   &[class*=dark] {
-    [class*=progress_step_item]{
-        &::before{
-            background-color: tint($bg_dark,20%);
-        }
-    }
     .circle{
-        box-shadow: 0 0 0 2px tint($bg_dark,10%);
+        box-shadow: 0 0 0 2px $bg_dark;
     }
     [class*=active]{
         .circle{
-            background-color: tint($bg_dark,10%);
-        }
-        &::before{
-            background-color: $primary;
+            background-color: $bg_dark;
         }
     }
     [class*=inactive]{
         .circle, &::before{
-           background-color: tint($bg_dark,20%);
+           background-color: tint($bg_dark,10%);
         }
     }
-    [class*=complete]{
-        .circle, &::before{
-           background-color: $primary;
+  }
+  &[class*=tracker] {
+    .circle{
+        box-shadow: none;
+    }
+    li[class*=pb_progress_step_item]{
+        flex-direction: column-reverse;
+        &::before{
+            background-color: $border_light;
+            top:auto;
+            bottom: 5px;
+        }
+    }
+    li[class*=active] .circle,li[class*=inactive] .circle{
+        background-color: $border_light;
+        border:none;
+    }
+    li[class*=complete]{
+        .circle, &::before {
+            background-color: $teal;
         }
     }
   }
 
-}
+}