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

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

@@ -2,6 +2,20 @@ examples:
 
   rails:
   - timestamp_default: Default
+  - timestamp_align: Alignments
+  - timestamp_timezones: Timezones
+  - timestamp_timezones_align: Timezones - Alignments
+  - timestamp_updated: Last Updated by
+  - timestamp_updated_align: Last Updated by - Alignments
+  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed_align: Time Ago - Alignments
 
   react:
   - timestamp_default: Default
+  - timestamp_align: Alignments
+  - timestamp_timezones: Timezones
+  - timestamp_timezones_align: Timezones - Alignments
+  - timestamp_updated: Last Updated by
+  - timestamp_updated_align: Last Updated by - Alignments
+  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed_align: Time Ago - Alignments

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

@@ -1 +1,8 @@
 export { default as TimestampDefault } from './_timestamp_default.jsx'
+export { default as TimestampAlign } from './_timestamp_align.jsx'
+export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
+export { default as TimestampTimezonesAlign } from './_timestamp_timezones_align.jsx'
+export { default as TimestampUpdated } from './_timestamp_updated.jsx'
+export { default as TimestampUpdatedAlign } from './_timestamp_updated_align.jsx'
+export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
+export { default as TimestampElapsedAlign } from './_timestamp_elapsed_align.jsx'

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -3,14 +3,80 @@
 module Playbook
   module PbTimestamp
     class Timestamp
+      include ActionView::Helpers::DateHelper
       include Playbook::Props
 
       partial "pb_timestamp/timestamp"
 
       prop :text
+      prop :timestamp, required: true
+
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :align,  type: Playbook::Props::Enum,
+                    values: %w[left center right],
+                    default: "left"
+      prop :show_date, type: Playbook::Props::Boolean,
+                       default: true
+      prop :show_timezone, type: Playbook::Props::Boolean,
+                           default: false
+      prop :show_user, type: Playbook::Props::Boolean,
+                       default: false
+      prop :timezone, default: "America/New_York"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default elapsed updated],
+                     default: "default"
 
       def classname
-        generate_classname("pb_timestamp_kit")
+        generate_classname("pb_timestamp_kit", variant_class, align)
+      end
+
+      def format_year_string
+        pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
+      end
+
+      def format_time_string
+        "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian} #{format_timezone_string}".strip
+      end
+
+      def format_timezone_string
+        timezone && show_timezone ? pb_date_time.to_timezone.to_s : ""
+      end
+
+      def format_date_string
+        "#{pb_date_time.to_month_downcase} #{pb_date_time.to_unpadded_day}#{format_year_string}"
+      end
+
+      def format_datetime_string
+        "#{format_date_string} · #{format_time_string}".html_safe
+      end
+
+      def format_updated_string
+        user_string = show_user ? " by #{text}" : ""
+
+        case variant
+        when "updated"
+          datetime_string = " on #{format_date_string} at #{format_time_string}"
+        when "elapsed"
+          datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+        end
+
+        "Last updated#{user_string}#{datetime_string}"
+      end
+
+    private
+
+      def pb_date_time
+        Playbook::PbKit::PbDateTime.new(timestamp, timezone)
+      end
+
+      def variant_class
+        case variant
+        when "updated"
+          "updated"
+        when "elapsed"
+          "elapsed"
+        end
       end
     end
   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)
     }
   }

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 %>