playbook_ui 7.4.0.pre.alpha1 → 7.4.0.pre.test4

data/app/pb_kits/playbook/pb_date_time/docs/_description.md

@@ -0,0 +1 @@
+Date Time is a composite kit that leverages the [Date](/kits/date) and [Time](/kits/time) kits. The Date Time kit is affected by time zones and defaults to "America/New_York".

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

@@ -0,0 +1,11 @@
+examples:
+  
+  rails:
+  - date_time_default: Default
+  - date_time_align: Alignment
+  - date_time_size: Size
+
+  react:
+  - date_time_default: Default
+  - date_time_align: Alignment
+  - date_time_size: Size

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

@@ -0,0 +1,3 @@
+export { default as DateTimeDefault } from './_date_time_default.jsx'
+export { default as DateTimeAlign } from './_date_time_align.jsx'
+export { default as DateTimeSize } from './_date_time_size.jsx'

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -13,7 +13,7 @@ type FlexProps = {
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
   reverse?: boolean,
-  vertical?: "top" | "center" | "bottom" | "stretch",
+  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
   wrap?: boolean,
 }
 

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -71,6 +71,10 @@
     align-items: stretch;
   }
 
+  &[class*=align_items_baseline] {
+    align-items: baseline;
+  }
+
   // Spacing
   &[class*=spacing_around] {
     justify-content: space-around;

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -26,7 +26,7 @@ module Playbook
                      default: false
 
       prop :vertical, type: Playbook::Props::Enum,
-                      values: %w[top center bottom stretch],
+                      values: %w[top center bottom stretch baseline],
                       default: "top"
 
       prop :wrap, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -14,6 +14,7 @@
 %>
 
 <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -33,10 +34,60 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
+  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
+
+<!-- form.typeahead user results example template -->
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<!-- form.typeahead JS example implementation -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample1) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.children[0].dataset.user = JSON.stringify(user)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample1) return;
+
+    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
+    const selectedUserData = JSON.parse(selectedUserJSON)
+
+    // set the input field's value
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
+
+    // log the selected option's dataset
+    console.log('The selected user data:')
+    console.dir(selectedUserData)
+
+    // do even more with the data later - TBD
+    event.target.dataset.user = selectedUserJSON
+  })
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -28,7 +28,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, props: { label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -8,12 +8,30 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
+
           props[:label] = @template.label(@object_name, name) if props[:label] == true
+          props[:label] = "Date Picker" if props[:label].nil?
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id
 
-          @template.pb_rails("date_picker", props: props)
+          input = text_field(
+            name,
+            autocomplete: "off",
+            disabled: props[:disable_input],
+            data: props[:input_data],
+            aria: props[:input_aria],
+            props: {
+              error: props[:error],
+              label: props[:hide_label] ? nil : props[:label],
+              placeholder: props[:placeholder],
+              required: props[:required],
+            }
+          )
+
+          @template.pb_rails("date_picker", props: props) do
+            input
+          end
         end
       end
     end

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -38,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        "#{address.titleize} #{separator} #{house_style}"
+        "#{address&.titleize} #{separator} #{house_style}"
       end
 
       def address_house_style2

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -17,9 +17,7 @@ type ListProps = {
   ordered: boolean,
   role?: string,
   tabIndex?: string,
-  text?: string,
   size?: string,
-  variant?: string,
   xpadding: boolean,
 }
 
@@ -38,8 +36,6 @@ const List = (props: ListProps) => {
     size = '',
     tabIndex,
     xpadding = false,
-    variant,
-    text,
   } = props
 
   const layoutClass = {
@@ -48,9 +44,6 @@ const List = (props: ListProps) => {
     default: '',
   }
 
-  const childrenWithProps = React.Children.map(children, (child) => {
-    return React.cloneElement(child, { text, variant })
-  })
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -77,7 +70,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {childrenWithProps}
+          {children}
         </ol>
         <Else />
         <ul
@@ -88,7 +81,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {childrenWithProps}
+          {children}
         </ul>
       </If>
     </div>

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -16,8 +16,8 @@ module Playbook
                      values: %w[default tracker],
                      default: "default"
       prop :color, type: Playbook::Props::Enum,
-                     values: %w[primary info],
-                     default: "primary"
+                   values: %w[primary info],
+                   default: "primary"
       def classname
         generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
       end

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -1,6 +1,8 @@
 @import "../tokens/positioning";
 @import "../tokens/colors";
 
+$tooltip_shadow: rgba(60, 106, 172, 0.18);
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -33,19 +35,8 @@
     &.flipped {
       margin-top: 15px;
       .arrow {
-        top: -35%;
         border-color: transparent transparent $white transparent;
-      }
-    }
-
-    &.react {
-      .arrow {
-        top: 78%;
-      }
-      &.flipped {
-        .arrow {
-          top: -8%;
-        }
+        transform: rotate(180deg);
       }
     }
 
@@ -66,7 +57,7 @@
       z-index: $z_9;
       margin-bottom: $space_sm;
       background-color: $white;
-      padding: $space_xs $space_sm $space_xs $space_sm;
+      padding: $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
 
@@ -82,10 +73,6 @@
     .tooltip_tooltip{
       color: $white;
       background-color: rgba($black, $opacity_9);
-
-
-      &.show {
-      }
       .arrow {
         border-color: $black transparent transparent transparent;
         opacity: $opacity_9;
@@ -100,6 +87,46 @@
   }
 }
 
-.tooltip_tooltip.top {
-  padding: ($space_xs - 3px) 0;
+// Right
+[class^="pb_tooltip_kit"] .tooltip_tooltip {
+
+  &[x-placement="right"] {
+    box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
+    .arrow {
+      left: -#{$space_xs};
+      margin-bottom: 0;
+      transform: rotate(90deg);
+    }
+    &.flipped .arrow {
+        transform: rotate(270deg);
+    }
+  }
+
+  &[x-placement="bottom"] {
+    box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
+    .arrow {
+      top: -18px;
+      margin-bottom: 0;
+      transform: rotate(180deg);
+    }
+    &.flipped .arrow {
+      transform: rotate(0deg);
+    }
+  }
+
+  &[x-placement="left"] {
+    box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
+    .arrow {
+      margin-bottom: 0;
+      right: -18px;
+      left: auto;
+      transform: rotate(270deg);
+    }
+    &.flipped .arrow {
+      transform: rotate(90deg);
+    }
+  }
 }

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)
     }
   }