playbook_ui 7.4.0.pre.alpha2 → 7.4.0

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

@@ -1,10 +1,46 @@
-<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 %>
+<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='regular-tooltip-1'>Hover here (Top)</span>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-1",
+      tooltip_id: "tooltip-1",
+      position: 'top'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-2",
+      tooltip_id: "tooltip-2",
+      position: 'bottom'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <span id='regular-tooltip-3'>Hover here (Right)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-3",
+      tooltip_id: "tooltip-3",
+      position: 'right'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <span id='regular-tooltip-4'>Hover here (Left)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-4",
+      tooltip_id: "tooltip-4",
+      position: 'left'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+<% end %>

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

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

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

@@ -10,7 +10,7 @@ module Playbook
       prop :trigger_element_id
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
-                          default: false
+                  default: false
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
@@ -25,7 +25,8 @@ module Playbook
         )
       end
 
-      private
+    private
+
       def dark_class
         dark ? "dark" : nil
       end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -6,6 +6,7 @@ import AsyncSelect from 'react-select/async'
 import { get } from 'lodash'
 
 import Control from './components/Control'
+import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
@@ -40,6 +41,7 @@ const Typeahead = (props: Props) => {
     defaultOptions: true,
     components: {
       Control,
+      ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
       MenuList,
@@ -48,6 +50,7 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    id: 'react-select-input',
     isClearable: true,
     isSearchable: true,
     name,
@@ -58,9 +61,18 @@ const Typeahead = (props: Props) => {
 
   const Tag = props.async ? AsyncSelect : Select
 
-  const handleOnChange = (data, { action }) => {
+  const handleOnChange = (data, { action, option, removedValue }) => {
+    if (action === 'select-option') {
+      if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
+      document.dispatchEvent(multiValueClearEvent)
+    }
+    if (action === 'remove-value' || action === 'pop-value') {
+      const multiValueRemoveEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-remove`, { detail: removedValue })
+      document.dispatchEvent(multiValueRemoveEvent)
+    }
     if (action === 'clear') {
-      const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-clear`)
       document.dispatchEvent(multiValueClearEvent)
     }
   }

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx

@@ -0,0 +1,20 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import { components } from 'react-select'
+
+const ClearContainer = (props: any) => {
+  const { selectProps, clearValue } = props
+  useEffect(() => {
+    document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
+  }, true)
+
+  return (
+    <components.ClearIndicator
+        className="clear_indicator"
+        {...props}
+    />
+  )
+}
+
+export default ClearContainer

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -13,24 +13,17 @@ type Props = {
 }
 
 const MultiValue = (props: Props) => {
-  const {
-    data,
-    removeProps,
-    selectProps,
-  } = props
+  const { removeProps } = props
+  const { imageUrl, label } = props.data
 
-  const { imageUrl, label } = data
-
-  const handleOnMultiValueRemove = () => {
-    const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
-    document.dispatchEvent(multiValueRemoveEvent)
+  const formPillProps = {
+    marginRight: 'xs',
+    name: label,
   }
 
-  const handleOnClick = () => {
-    if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
-    handleOnMultiValueRemove()
-    removeProps.onClick()
-  }
+  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
+
+  const handleOnClick = removeProps.onClick
 
   return (
     <components.MultiValueContainer

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -13,14 +13,9 @@ const Option = (props: any) => {
     label,
   } = props.data
 
-  const handleOptionClicked = () => {
-    const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
-    document.dispatchEvent(resultSelectedEvent)
-  }
-
   return (
     <components.Option {...props}>
-      <div onClick={handleOptionClicked}>
+      <div>
         <Choose>
           <When condition={imageUrl}>
             <User

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,19 +7,25 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
     console.log('Option selected')
     console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
     console.log('Option removed')
     console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-result-clear", function() {
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
     console.log('All options cleared')
   })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -1,8 +1,24 @@
 Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
 
-`{ label: "Foo", value: "bar" }`
+This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`
+
+#### Rails: Default Options
+
+You can also pass `default_options` which will populate the initial pill selections:
+
+`default_options: [{ label: 'Windows', value: '#FFA500' }]`
 
 #### Rails: Subscribing to JS Events
-`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
-`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
-`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
+This kit utilizes a default `id` prop named `react-select-input`. It is **highly advised** to send your own unique `id` prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
+
+`pb-typeahead-kit-typeahead-pills-example1-result-option-select` event to perform custom work when an option is clicked.
+`pb-typeahead-kit-typeahead-pills-example1-result-option-remove` event to perform custom work when a pill is clicked.
+`pb-typeahead-kit-typeahead-pills-example1-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+#### Rails: Publishing JS Events
+
+The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
+
+`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -7,6 +7,8 @@ module Playbook
 
       prop :async, type: Playbook::Props::Boolean,
                     default: false
+      prop :default_options, type: Playbook::Props::HashArray, default: []
+      prop :id
       prop :label
       prop :load_options
       prop :name
@@ -35,6 +37,8 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          defaultValue: default_options,
+          id: id,
           isMulti: true,
           label: label,
           options: options,

data/app/pb_kits/playbook/vendor.js

@@ -12,9 +12,6 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
 
-import PbCollapsible from './pb_collapsible'
-PbCollapsible.start()
-
 import PbPopover from './pb_popover'
 PbPopover.start()
 

data/lib/playbook/version.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 module Playbook
-  VERSION = "7.4.0.pre.alpha2"
+  VERSION = "7.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.4.0.pre.alpha2
+  version: 7.4.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-27 00:00:00.000000000 Z
+date: 2020-10-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -395,11 +395,13 @@ extra_rdoc_files: []
 files:
 - README.md
 - Rakefile
-- app/assets/images/clark.jpg
-- app/assets/images/giant.jpg
+- app/assets/images/github-brands.svg
+- app/assets/images/landing-background.svg
+- app/assets/images/landing-image.svg
 - app/assets/images/pb-caret.svg
 - app/assets/images/pb-check.svg
-- app/assets/images/pb.logo.svg
+- app/assets/images/pb-logo.svg
+- app/assets/images/pb-white-logo.svg
 - app/controllers/playbook/application_controller.rb
 - app/helpers/playbook/application_helper.rb
 - app/helpers/playbook/layout_helper.rb
@@ -445,6 +447,23 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
+- app/pb_kits/playbook/pb_background/_background.html.erb
+- app/pb_kits/playbook/pb_background/_background.jsx
+- app/pb_kits/playbook/pb_background/_background.scss
+- app/pb_kits/playbook/pb_background/background.rb
+- app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_dark.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_image.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_white.jsx
+- app/pb_kits/playbook/pb_background/docs/_description.md
+- app/pb_kits/playbook/pb_background/docs/example.yml
+- app/pb_kits/playbook/pb_background/docs/index.js
 - app/pb_kits/playbook/pb_badge/_badge.html.erb
 - app/pb_kits/playbook/pb_badge/_badge.jsx
 - app/pb_kits/playbook/pb_badge/_badge.scss
@@ -625,23 +644,6 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_footer.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
 - app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
-- app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb
-- app/pb_kits/playbook/pb_collapsible/_collapsible.jsx
-- app/pb_kits/playbook/pb_collapsible/_collapsible.scss
-- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx
-- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx
-- app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb
-- app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb
-- app/pb_kits/playbook/pb_collapsible/collapsible.rb
-- app/pb_kits/playbook/pb_collapsible/collapsible_content.rb
-- app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/example.yml
-- app/pb_kits/playbook/pb_collapsible/docs/index.js
-- app/pb_kits/playbook/pb_collapsible/index.js
 - app/pb_kits/playbook/pb_contact/_contact.html.erb
 - app/pb_kits/playbook/pb_contact/_contact.jsx
 - app/pb_kits/playbook/pb_contact/_contact.scss
@@ -685,10 +687,14 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
+- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
+- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -776,6 +782,19 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_stacked/docs/index.js
+- app/pb_kits/playbook/pb_date_time/_date_time.html.erb
+- app/pb_kits/playbook/pb_date_time/_date_time.jsx
+- app/pb_kits/playbook/pb_date_time/_date_time.scss
+- app/pb_kits/playbook/pb_date_time/date_time.rb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_description.md
+- app/pb_kits/playbook/pb_date_time/docs/example.yml
+- app/pb_kits/playbook/pb_date_time/docs/index.js
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
@@ -1369,10 +1388,12 @@ files:
 - app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb
 - app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
 - app/pb_kits/playbook/pb_progress_step/docs/_description.md
+- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx
+- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx
 - app/pb_kits/playbook/pb_progress_step/docs/example.yml
@@ -1684,8 +1705,22 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb
+- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
@@ -1753,6 +1788,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
@@ -1883,9 +1919,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key: