playbook_ui 7.3.0.pre.alpha12 → 7.4.0.pre.alpha5

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/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0.pre.alpha12
+  version: 7.4.0.pre.alpha5
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-23 00:00:00.000000000 Z
+date: 2020-10-30 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
@@ -628,6 +647,8 @@ files:
 - 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
@@ -640,7 +661,6 @@ files:
 - 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_collapsible/useToggler.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
@@ -684,10 +704,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
@@ -775,6 +799,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
@@ -1368,10 +1405,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
@@ -1683,8 +1722,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
@@ -1752,6 +1805,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

data/app/pb_kits/playbook/pb_collapsible/useToggler.js

@@ -1,10 +0,0 @@
-/* @flow */
-
-import { useState } from "react"
-
-export const useToggler = (startValue: boolean = false) => {
-  const [show, toggle] = useState(startValue)
-  const toggler = () => toggle(!show)
-
-  return [show, toggler]
-}