playbook_ui 4.17.0 → 5.0.1.pre.beta

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.scheduleUpdate()
         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_progress_pills/_progress_pills.html.erb

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

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -3,10 +3,21 @@
 import React from 'react'
 import { Body, Title } from '../'
 import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 import { spacing } from '../utilities/spacing.js'
 
 type ProgressPillsProps = {
   active?: Number,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
   steps?: Number,
   title?: String,
   value?: String,
@@ -26,7 +37,7 @@ const showSteps = (steps, active, dark) => {
 const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
-      dark ? '_dark' : null
+      dark ? '_dark' : ''
     }`}
       key={step}
   />
@@ -35,15 +46,29 @@ const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
+    aria = {},
+    className,
+    data = {},
+    id,
     steps = 3,
-    title = null,
-    value = null,
+    title,
+    value,
     dark = false,
   } = props
   const darkClass = dark ? '_dark' : ''
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, spacing(props))
+
   return (
-    <div className={classnames(`pb_progress_pills_kit${darkClass}`, spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+
       <If condition={title}>
         <div className="progress_pills_status">
           <Title
@@ -59,7 +84,6 @@ const ProgressPills = (props: ProgressPillsProps) => {
           />
         </div>
       </If>
-
       <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )

data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb

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

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -1,36 +1,45 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Caption from '../pb_caption/_caption.jsx'
+import { Caption } from '../'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type SectionSeparatorProps = {
+  aria: object,
   className: String,
-  text: String,
+  dark?: Boolean,
+  data: object,
+  id: String,
   orientation?: "horizontal" | "vertical",
+  text: String,
   variant?: "card" | "background",
-  dark?: Boolean,
 }
 
 const SectionSeparator = (props: SectionSeparatorProps) => {
   const {
+    aria = {},
     className,
-    text,
+    dark = false,
+    data = {},
+    id,
     orientation = 'horizontal',
+    text,
     variant = 'card',
-    dark = false,
   } = props
   const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames(
-    [
-      `pb_section_separator_kit_${variant}_${orientation}` + themeStyle,
-      className,
-    ],
-    spacing(props)
-  )
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, spacing(props))
 
   return (
-    <div className={css}>
+
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <span>
         <Caption text={text} />
       </span>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -3,7 +3,9 @@ import { SectionSeparator } from '../../'
 
 const SectionSeparatorText = () => {
   return (
-    <SectionSeparator text="Title Separator" />
+    <SectionSeparator
+        text="Title Separator"
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_timeline/_item.html.erb

@@ -0,0 +1,28 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  
+  <div class="pb_timeline_item_left_block">
+    <% if object.date.present? %>
+      <%= pb_rails("date_stacked", props: { 
+        date: object.date, 
+        size: "sm",
+        align: "center"
+      }) %>
+    <% end %>
+  </div>
+
+  <div class="pb_timeline_item_step">
+    <%= pb_rails("icon_circle", props: {
+      icon: object.icon,
+      variant: object.icon_color,
+      size: "xs"
+    }) %> 
+    <div class="pb_timeline_item_connector"></div>
+  </div>
+  <div class="pb_timeline_item_right_block">
+    <%= capture(&object.children) %>
+  </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_timeline/_item.jsx

@@ -0,0 +1,54 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { DateStacked, IconCircle } from '..'
+
+type ItemProps = {
+  className?: string,
+  children?: Array<React.Node>,
+  date?: Date,
+  icon?: string,
+  iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
+  lineStyle?: 'solid' | 'dotted',
+}
+
+const TimelineItem = ({
+  className,
+  children,
+  date,
+  icon = 'user',
+  iconColor = 'default',
+  lineStyle = 'solid',
+
+}: ItemProps) => {
+  const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
+
+  return (
+    <div className={classnames(timelineItemCss, className)}>
+      <div className="pb_timeline_item_left_block">
+        <If condition={date}>
+          <DateStacked
+              align="center"
+              date={date}
+              size="sm"
+          />
+        </If>
+      </div>
+      <div className="pb_timeline_item_step">
+        <IconCircle
+            icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+        <div className="pb_timeline_item_connector" />
+      </div>
+      <div className="pb_timeline_item_right_block">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default TimelineItem

data/app/pb_kits/playbook/pb_timeline/_timeline.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx

@@ -0,0 +1,43 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import TimelineItem from './_item.jsx'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
+type TimelineProps = {
+  aria?: object,
+  children?: Array<React.ReactChild>,
+  className?: String,
+  data?: String,
+  id?: String,
+  orientation?: String,
+  showDate?: Boolean,
+}
+
+const Timeline = ({
+  aria = {},
+  className,
+  children,
+  data = {},
+  orientation = 'horizontal',
+  showDate = false,
+}: TimelineProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const dateStyle = showDate === true ? '_with_date' : ''
+  const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(timelineCss, className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+Timeline.Item = TimelineItem
+
+export default Timeline

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -0,0 +1,271 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/opacity";
+@import "../tokens/typography";
+
+$connector_width: 2px;
+$icon_margin: $space_xs/2;
+$icon_height: 28px;
+$height_from_top: $icon_height/2 - $connector_width/2;
+
+@mixin pb_timeline_line_solid($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $border_light;
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_timeline_line_dotted_horizontal($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background: repeating-linear-gradient(to right, $border_light 0px ,$border_light 2px, transparent 3px, transparent 10px);
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_timeline_line_dotted_vertical($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background: repeating-linear-gradient(0deg, $border_light 0px ,$border_light 2px, transparent 3px, transparent 10px);
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin flex_wrapper($flex_direction) {
+    display: flex;
+    flex-direction: $flex_direction;
+}
+
+[class^=pb_timeline_kit] {
+    &[class*=_horizontal] {
+        @include flex_wrapper(row);
+        width: 100%;
+        >div {
+            &:last-child {
+                flex-basis: auto !important;
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        opacity: 0;
+                    }
+                }
+                [class=pb_timeline_item_right_block] {
+                    display: block;
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+            }
+        }
+        [class*=pb_timeline_item_kit] {
+            &[class*=_solid] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_left_block] {
+                    height: 0px;
+                }
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(row);
+                    margin-top: $space_xs;
+                    margin-bottom: $space_xs;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                    }
+                }
+            }
+            &[class*=_dotted] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_left_block] {
+                    height: 0;
+                }
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(row);
+                    margin-top: $space_xs;
+                    margin-bottom: $space_xs;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                    }
+                }
+            }
+        }
+        &[class*=_with_date] {
+            @include flex_wrapper(row);
+            width: 100%;
+            >div {
+                &:last-child {
+                    flex-basis: auto !important;
+                    [class=pb_timeline_item_step] {
+                        [class=pb_timeline_item_connector] {
+                            opacity: 0;
+                        }
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        display: block;
+                        width: 100%;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                }
+            }
+            [class*=pb_timeline_item_kit] {
+                &[class*=_solid] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_left_block] {
+                        @include flex_wrapper(column);
+                        height: 55px;
+                        justify-content: flex-end;
+                        [class=pb_date_stacked_kit_center_sm] {
+                            [class=pb_date_stacked_day_month] {
+                                [class=pb_caption_kit_md] {
+                                    text-align: left;
+                                }
+                                [class=pb_title_kit_4] {
+                                    text-align: left;
+                                }
+                            }
+                        }
+                    }
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(row);
+                        margin-top: $space_xs;
+                        margin-bottom: $space_xs;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        }
+                    }
+                }
+                &[class*=_dotted] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_left_block] {
+                        height: 55px;
+                        [class=pb_date_stacked_kit_center_sm] {
+                            [class=pb_date_stacked_day_month] {
+                                [class=pb_caption_kit_md] {
+                                    text-align: left;
+                                }
+                                [class=pb_title_kit_4] {
+                                    text-align: left;
+                                }
+                            }
+                        }
+                    }
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(row);
+                        margin-top: $space_xs;
+                        margin-bottom: $space_xs;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        }
+                    }
+                }
+            } 
+        }
+    }
+    &[class*=_vertical] {
+        @include flex_wrapper(column);
+        align-items: flex-start;
+        align-self: auto;
+        >div:last-child {
+            [class=pb_timeline_item_step] {
+                [class=pb_timeline_item_connector] {
+                    opacity: 0;
+                }
+            }
+        }
+        [class*=pb_timeline_item_kit] {
+            @include flex_wrapper(row);
+            &[class*=_solid] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(column);
+                    align-content: flex-start;
+                    margin-right: $space_sm;
+                    margin-left: $space_sm;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                    }
+                }
+                [class=pb_timeline_item_left_block] {
+                    margin-bottom: $space_lg;
+                    width: 0px;
+                }
+                [class=pb_timeline_item_right_block] {
+                    @include flex_wrapper(column);
+                    margin-bottom: $space_lg;
+                }
+            }
+            &[class*=_dotted] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(column);
+                    margin-right: $space_sm;
+                    margin-left: $space_sm;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                    }
+                }
+                [class=pb_timeline_item_left_block] {
+                    margin-bottom: $space_lg;
+                    width: 0px;
+                }
+                [class=pb_timeline_item_right_block] {
+                    @include flex_wrapper(column);
+                    margin-bottom: $space_lg;
+                }
+            }
+        }
+        &[class*=_with_date] {
+            @include flex_wrapper(column);
+            align-items: flex-start;
+            align-self: auto;
+            >div:last-child {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        opacity: 0;
+                    }
+                }
+            }
+            [class*=pb_timeline_item_kit] {
+                @include flex_wrapper(row);
+                &[class*=_solid] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(column);
+                        align-content: flex-start;
+                        margin-right: $space_sm;
+                        margin-left: $space_sm;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        }
+                    }
+                    [class=pb_timeline_item_left_block] {
+                        margin-bottom: $space_lg;
+                        width: $space_lg;
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        @include flex_wrapper(column);
+                        margin-bottom: $space_lg;
+                    }
+                }
+                &[class*=_dotted] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(column);
+                        margin-right: $space_sm;
+                        margin-left: $space_sm;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        }
+                    }
+                    [class=pb_timeline_item_left_block] {
+                        margin-bottom: $space_lg;
+                        width: $space_lg;
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        @include flex_wrapper(column);
+                        margin-bottom: $space_lg;
+                    }
+                }
+            }
+        }
+    }
+}