playbook_ui 4.14.0 → 4.17.0

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -0,0 +1,10 @@
+<span id='regular-tooltip-2'>Hover over me.</span>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "regular-tooltip-2",
+  tooltip_id: "tooltip-2",
+  position: 'top',
+  dark: true,
+}) do %>
+    Whoa. I'm a tooltip.
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb

@@ -0,0 +1,9 @@
+<span id='regular-tooltip-1'>I am a white tooltip.</span>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "regular-tooltip-1",
+  tooltip_id: "tooltip-1",
+  position: 'top'
+}) do %>
+    Whoa. I'm a white tooltip.
+<% end %>

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

@@ -0,0 +1,5 @@
+examples:
+
+  rails:
+  - tooltip_default: Default
+  - tooltip_white: White

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

@@ -0,0 +1,80 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+import Popper from 'popper.js'
+
+const TOOLTIP_OFFSET = '0,0'
+const TOOLTIP_TIMEOUT = 250
+
+export default class PbTooltip extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-tooltip-kit]'
+  }
+
+  connect() {
+    this.popper = new Popper(this.triggerElement, this.tooltip, {
+      placement: this.position,
+      modifiers: {
+        offset: {
+          offset: TOOLTIP_OFFSET,
+        },
+        arrow: {
+          element: `#${this.tooltipId}-arrow`,
+        },
+      },
+      onUpdate: (p) => {
+        p.instance.popper.classList.toggle('flipped', p.flipped)
+      },
+    })
+
+    this.tooltip.addEventListener('mouseleave', () => {
+      this.hideTooltip()
+    })
+
+    this.triggerElement.addEventListener('mouseenter', () => {
+      this.mouseenterTimeout = setTimeout(() => {
+        this.popper.scheduleUpdate()
+        this.showTooltip()
+      }, TOOLTIP_TIMEOUT)
+
+      this.triggerElement.addEventListener('mouseleave', (event) => {
+        clearTimeout(this.mouseenterTimeout)
+        if (event.toElement.closest(`#${this.tooltipId}`) !== this.tooltip) {
+          setTimeout(() => {
+            this.hideTooltip()
+          }, 0)
+        }
+      }, { once: true })
+    })
+  }
+
+  showTooltip() {
+    this.tooltip.classList.add('show')
+  }
+
+  hideTooltip() {
+    this.tooltip.classList.remove('show')
+  }
+
+  toggleTooltip() {
+    this.tooltip.classList.toggle('show')
+  }
+
+  get triggerElement() {
+    return this._triggerElement = (this._triggerElement || document.querySelector(`#${this.triggerElementId}`))
+  }
+
+  get tooltip() {
+    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+  }
+
+  get position() {
+    return this.element.dataset.pbTooltipPosition
+  }
+
+  get triggerElementId() {
+    return this.element.dataset.pbTooltipTriggerElementId
+  }
+
+  get tooltipId() {
+    return this.element.dataset.pbTooltipTooltipId
+  }
+}

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTooltip
+    class Tooltip
+      include Playbook::Props
+      partial "pb_tooltip/tooltip"
+
+      prop :position
+      prop :trigger_element_id
+      prop :tooltip_id
+      prop :dark, type: Playbook::Props::Boolean,
+                          default: false
+
+      def classname
+        generate_classname("pb_tooltip_kit", dark_class)
+      end
+
+      def data
+        Hash(values[:data]).merge(
+          pb_tooltip_kit: true,
+          pb_tooltip_position: position,
+          pb_tooltip_trigger_element_id: trigger_element_id,
+          pb_tooltip_tooltip_id: tooltip_id,
+        )
+      end
+
+      private
+      def dark_class
+        dark ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -1,12 +1,9 @@
 /* @flow */
 
 import React from 'react'
-
-import {
-  Avatar,
-  Body,
-  Title,
-} from '../'
+import classnames from 'classnames'
+import { Avatar, Body, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type UserProps = {
   className?: String,
@@ -14,42 +11,45 @@ type UserProps = {
   name: String,
   territory?: String,
   title?: String,
-  size?: 'sm' | 'md' | 'lg',
-  align?: 'left' | 'center' | 'right',
-  orientation?: 'horiztonal' | 'vertical',
+  size?: "sm" | "md" | "lg",
+  align?: "left" | "center" | "right",
+  orientation?: "horiztonal" | "vertical",
   avatar?: Boolean,
   avatarUrl?: String,
 }
 
-const User = ({
-  name = '',
-  territory = '',
-  title = '',
-  align = 'left',
-  orientation = 'horizontal',
-  size = 'sm',
-  avatar = false,
-  avatarUrl,
-}: UserProps) => (
-  <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
-    <If condition={avatar || avatarUrl}>
-      <Avatar
-          imageUrl={avatarUrl}
-          name={name}
-          size={size}
-      />
-    </If>
+const User = (props: UserProps) => {
+  const {
+    name = '',
+    territory = '',
+    title = '',
+    align = 'left',
+    orientation = 'horizontal',
+    size = 'sm',
+    avatar = false,
+    avatarUrl,
+  } = props
+  return (
+    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, spacing(props))}>
+      <If condition={avatar || avatarUrl}>
+        <Avatar
+            imageUrl={avatarUrl}
+            name={name}
+            size={size}
+        />
+      </If>
 
-    <div className="content_wrapper">
-      <Title
-          size={size == 'lg' ? 3 : 4}
-          text={name}
-      />
-      <Body color="light">
-        {territory == '' ? title : `${territory} • ${title}`}
-      </Body>
+      <div className="content_wrapper">
+        <Title
+            size={size == 'lg' ? 3 : 4}
+            text={name}
+        />
+        <Body color="light">
+          {territory == '' ? title : `${territory} • ${title}`}
+        </Body>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default User

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -1,21 +1,21 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type UserBadgeProps = {
   className?: String,
   id?: String,
-  badge?: 'million-dollar' | 'veteran',
-  size?: 'sm' | 'md' | 'lg',
+  badge?: "million-dollar" | "veteran",
+  size?: "sm" | "md" | "lg",
 }
 
-const UserBadge = ({
-  badge = 'million-dollar',
-  size = 'md',
-}: UserBadgeProps) => {
+const UserBadge = (props: UserBadgeProps) => {
+  const { badge = 'million-dollar', size = 'md' } = props
   const image = require(`./badges/_${badge}.svg`)
 
   return (
-    <div className={`pb_user_badge_kit_${size}`}>
+    <div className={classnames(`pb_user_badge_kit_${size}`, spacing(props))}>
       <div className="pb_user_badge_wrapper">
         <img src={image} />
       </div>

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,24 +2,19 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
+import { buildCss } from '../utilities/props'
 
-import {
-  buildCss,
-} from '../utilities/props'
-
-import {
-  Caption,
-  Title,
-} from '../'
+import { Caption, Title } from '../'
 
 import DateTime from '../pb_kit/dateTime.js'
 
 type WeekdayStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   dark?: Boolean,
   date: Date,
-  variant?: 'day_only' | 'month_day' | 'expanded',
+  variant?: "day_only" | "month_day" | "expanded",
   compact?: Boolean,
   id?: String,
 }
@@ -43,25 +38,32 @@ const getFormattedDate = (date, variant) => {
   }
 }
 
-const WeekdayStacked = ({
-  align = 'left',
-  className,
-  dark = false,
-  date = new Date(),
-  variant = 'month_day',
-  compact = false,
-}: WeekdayStackedProps) => (
-  <div
-      className={classnames(buildCss('pb_weekday_stacked_kit', align), className)}
-  >
-    <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
-    <Title
-        dark={dark}
-        size={4}
-        tag="span"
-        text={getFormattedDate(date, variant)}
-    />
-  </div>
-)
+const WeekdayStacked = (props: WeekdayStackedProps) => {
+  const {
+    align = 'left',
+    className,
+    dark = false,
+    date = new Date(),
+    variant = 'month_day',
+    compact = false,
+  } = props
+  return (
+    <div
+        className={classnames(
+        buildCss('pb_weekday_stacked_kit', align),
+        className,
+        spacing(props)
+      )}
+    >
+      <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
+      <Title
+          dark={dark}
+          size={4}
+          tag="span"
+          text={getFormattedDate(date, variant)}
+      />
+    </div>
+  )
+}
 
 export default WeekdayStacked

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -82,6 +82,7 @@ class pbChart {
         text: this.defaults.title,
       },
       chart: {
+        height: this.defaults.height,
         type: this.defaults.type,
       },
       subtitle: {
@@ -97,6 +98,9 @@ class pbChart {
       xAxis: {
         categories: this.defaults.xAxisCategories,
       },
+      legend: {
+        enabled: this.defaults.legend,
+      },
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,

data/app/pb_kits/playbook/props.rb

@@ -33,10 +33,21 @@ module Playbook
       self.class.props[name].value values[name]
     end
 
+    def spacing_props
+      selected_props = spacing_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        spacing_value = send(k)
+        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
+      end.compact.join(" ")
+    end
+
     def generate_classname(*name_parts, separator: "_")
       [
         name_parts.compact.join(separator),
         prop(:classname),
+        spacing_props,
       ].compact.join(" ")
     end
 
@@ -49,6 +60,43 @@ module Playbook
       prop :classname
       prop :aria, type: Playbook::Props::Hash, default: {}
       prop :children, type: Playbook::Props::Proc
+      prop :margin
+      prop :margin_bottom
+      prop :margin_left
+      prop :margin_right
+      prop :margin_top
+      prop :margin_x
+      prop :margin_y
+      prop :padding
+      prop :padding_bottom
+      prop :padding_left
+      prop :padding_right
+      prop :padding_top
+      prop :padding_x
+      prop :padding_y
+    end
+
+    def spacing_options
+      {
+        margin: "m",
+        margin_bottom: "mb",
+        margin_left: "ml",
+        margin_right: "mr",
+        margin_top: "mt",
+        margin_x: "mx",
+        margin_y: "my",
+        padding: "p",
+        padding_bottom: "pb",
+        padding_left: "pl",
+        padding_right: "pr",
+        padding_top: "pt",
+        padding_x: "px",
+        padding_y: "py",
+      }
+    end
+
+    def spacing_values
+      %w[none xs sm md lg xl]
     end
 
     class_methods do

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -31,11 +31,15 @@ $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
 $charcoal:            #242B42;
+$black:               #000000;
+
 $interface_colors: (
   white:              $white,
   silver:             $silver,
   slate:              $slate,
   charcoal:           $charcoal,
+  black:              $black,
+
 );
 
 // Main colors ------------------------
@@ -72,7 +76,7 @@ $action_colors: (
 
 // Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #144075;
+$active_dark:         #0082ff; 
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
@@ -88,7 +92,7 @@ $hover_colors: (
 
 // Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
-$focus_input_dark:    rgba($active_dark, $opacity_5);
+$focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
   focus_input_dark:         $focus_input_dark
@@ -130,7 +134,7 @@ $data_2:              $yellow;
 $data_3:              $purple;
 $data_4:              $green;
 $data_5:              $orange;
-$data_6:              $active_dark;
+$data_6:              #144075;
 $data_7:              $teal;
 $data_8:              $red;
 $data_colors: (