playbook_ui 4.18.1.pre.alpha1 → 5.0.2

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

@@ -1,14 +1,18 @@
 examples:
   rails:
     - popover_default: Default
-    - popover_list: With any children
-    - popover_click_outside: Close on click outside
-    - popover_click_inside: Close on click inside
-    - popover_click_any: Close on click anywhere
+    - popover_list: Example as dropdown
+    - popover_close: Close Options
+    - popover_z_index: Set Z-Index
+    - popover_scroll_height: Scroll and Height Settings
 
   react:
     - popover_default: Default
-    - popover_list: With any children
-    - popover_click_outside: Close on click outside
-    - popover_click_inside: Close on click inside
-    - popover_click_any: Close on click anywhere
+    - popover_list: Dropdown example
+    - popover_close: Close Options
+    - popover_z_index: Set Z-Index
+    - popover_scroll_height: Scroll and Height Settings
+  
+
+
+    

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

@@ -1,5 +1,5 @@
 export { default as PopoverDefault } from './_popover_default.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
-export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
-export { default as PopoverClickInside } from './_popover_click_inside.jsx'
-export { default as PopoverClickAny } from './_popover_click_any.jsx'
+export { default as PopoverClose } from './_popover_close.jsx'
+export { default as PopoverZIndex } from './_popover_z_index.jsx'
+export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'

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

@@ -1,21 +1,30 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import Popper from 'popper.js'
+import { createPopper } from '@popperjs/core'
 
-const POPOVER_OFFSET_Y = '0,8'
+const POPOVER_OFFSET_Y = [0, 20]
 
 export default class PbPopover extends PbEnhancedElement {
   static get selector() {
     return '[data-pb-popover-kit]'
   }
 
+  moveTooltip() {
+    document.querySelector('body').appendChild(this.tooltip)
+  }
+
   connect() {
-    this.popper = new Popper(this.triggerElement, this.tooltip, {
+    this.moveTooltip()
+    this.popper = createPopper(this.triggerElement, this.tooltip, {
       placement: this.position,
-      modifiers: {
-        offset: {
-          offset: this.offset,
+      strategy: 'fixed',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: this.offset,
+          },
         },
-      },
+      ],
     })
 
     this.triggerElement.addEventListener('click', (event) => {
@@ -27,7 +36,7 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.scheduleUpdate()
+        this.popper.update()
         this.tooltip.classList.toggle('show')
       }, 0)
     })
@@ -89,7 +98,7 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   get offset() {
-    return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : '0,0'
+    return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : [0, 0]
   }
 
   get closeOnClick() {

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -6,16 +6,40 @@ module Playbook
       include Playbook::Props
       partial "pb_popover/popover"
 
-      prop :position
+      prop :position, type: Playbook::Props::Enum,
+                      values: %w[top bottom left right],
+                      default: "left"
       prop :trigger_element_id
       prop :tooltip_id
+      prop :max_height
+      prop :max_width
+      prop :min_width
+      prop :min_height
+      prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
                             values: %w[none outside inside any],
                             default: "none"
 
       def classname
-        generate_classname("pb_popover_kit")
+        generate_classname_without_spacing("pb_popover_kit")
+      end
+
+      def popover_spacing_helper
+        generate_classname(spacing_props.nil? ? "p_sm" : spacing_props)
+      end
+
+      def z_index_helper
+        z_index.present? ? "z-index: #{z_index}" : ""
+      end
+
+      def width_height_helper
+        out = ""
+        out += "max-height: #{max_height}; " if max_height.present?
+        out += "max-width: #{max_width}; " if max_width.present?
+        out += "min-height: #{min_height}; " if min_height.present?
+        out += "min-width: #{min_width};" if min_width.present?
+        out
       end
 
       def data

data/app/pb_kits/playbook/pb_title/_title.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(object.tag, object.text,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) %>

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -2,38 +2,45 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
+  aria?: object,
   className?: String,
   children?: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
+  data?: object,
+  id?: String,
   size?: 1 | 2 | 3 | 4,
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
   text?: String,
-  tag?: "h1" | "h2" | "h3",
-}
-
-const tagCSS = ({ dark = false, size = 3 }) => {
-  let css = ''
-
-  css += `_${size}`
-  css += dark === true ? '_dark' : ''
-
-  return css
 }
 
 const Title = (props: TitleProps) => {
-  const { children, className, tag = 'h3', text } = props
-
+  const {
+    aria = {},
+    children,
+    className,
+    dark = false,
+    data = {},
+    id,
+    size = 3,
+    tag = 'h3',
+    text } = props
+
+  const themeStyle = dark === true ? '_dark' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_title_kit', size, themeStyle), className, spacing(props))
   const Tag = `${tag}`
 
   return (
     <Tag
-        className={classnames(
-        `pb_title_kit${tagCSS(props)}`,
-        className,
-        spacing(props),
-      )}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {text || children}
     </Tag>

data/app/pb_kits/playbook/props.rb

@@ -51,6 +51,13 @@ module Playbook
       ].compact.join(" ")
     end
 
+    def generate_classname_without_spacing(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+      ].compact.join(" ")
+    end
+
     attr_accessor :values
     private :values, :values=
 

data/app/views/playbook/samples/filter_table/index.html.erb

@@ -0,0 +1,348 @@
+<!-- START TOP AREA -->
+<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between", margin_top: "md", margin_x: "md" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { text: "Prospective Clients", tag: "h3", size: 3 }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("button", props: { text: "Add Client" }) %>
+    <% end %>
+<% end %>
+<!-- END TOP AREA -->
+
+<!-- START FILTER -->
+<%= pb_rails("filter", props: {
+  id:"2",
+  filters: [
+    {name: "start date", value: "Aug 01, 2020"},
+    {name: "end date", value: "Aug 03, 2020"}
+
+    ],
+  sort_menu: [
+    {item:"Date Created", link:"#", active: true, direction:"desc"},
+    {item:"Assignee", link:"#", active: false},
+    {item:"Contact", link:"#", active: false},
+    {item:"Inquiry Source", link:"#", active: false},
+
+  ],
+  results: 546,
+  template: "single",
+  margin_y: "md",
+  margin_x: "md"
+  }) do%>
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+      <%= pb_rails("text_input", props: { label: "Start Date", value: "Aug 01, 2020", margin_right: "sm" }) %>
+    <% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+      <%= pb_rails("text_input", props: { label: "End Date",  value: "Aug 3, 2020" }) %>
+    <% end %>
+  <% end %>
+
+  <%= form.actions do |action| %>
+
+  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+
+
+  <% end %>
+<% end %>
+
+<% end %>
+<!-- END FILTER -->
+
+<!-- START TABlE -->
+
+  <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch", margin_x: "md"}) do %>
+      <%= pb_rails("table", props: { size: "sm" }) do %>
+        <thead>
+          <tr>
+            <th>Contact</th>
+            <th>Date Created</th>
+            <th>Inquiry Source</th>
+            <th>Lead Status</th>
+            <th>Quote</th>
+            <th>Assignee</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Jesse",
+                last_name: "Cortez",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "3832919348"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "jesse.cortez@gmail.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Email" }) %>
+              <%= pb_rails("caption", props: { text: "hello@companyname.com", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 0, title:"Status:", value:"Not Started" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "729.63", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Unassigned" }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Bill",
+                last_name: "Buchanan",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "8313455824"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "billbuch@yahoo.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Social Media" }) %>
+              <%= pb_rails("caption", props: { text: "Facebook", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "534.40", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Effie",
+                last_name: "Guzman",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "1582430782"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "effieguzman@comcast.net"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Online Quote" }) %>
+              <%= pb_rails("caption", props: { text: "Landing Page", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "392.26", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Rodney",
+                last_name: "Boone",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "3859275970"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "rodneyboone@gmail.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Internal" }) %>
+              <%= pb_rails("caption", props: { text: "Referral", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "342.86", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Barbara",
+                last_name: "Maxwell",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "2849186943"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "barbaramaxwell4@yahoo.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Online Quote" }) %>
+              <%= pb_rails("caption", props: { text: "Main Website", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "145.01", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Ellen",
+                last_name: "Thornton",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "6884927492"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "ellen.thornton@gmail.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Social Media" }) %>
+              <%= pb_rails("caption", props: { text: "Instagram", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "25.27", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+        </tbody>
+      <% end %>
+  <% end %>
+
+<!-- END TABLE -->