playbook_ui 4.11.0.pre.alpha.pre.2 → 4.11.0

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_dark.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { TimeRangeInline } from '../../'
+
+const TimeRangeInlineDark = () => (
+  <div>
+    <TimeRangeInline
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <TimeRangeInline
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+    <br />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <br />
+    <TimeRangeInline
+        alignment="right"
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+    <br />
+    <TimeRangeInline
+        alignment="right"
+        dark
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+  </div>
+)
+
+export default TimeRangeInlineDark

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.html.erb

@@ -0,0 +1,64 @@
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs"
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm"
+}) %>
+<br />
+<br />
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    timezone: true,
+    alignment: "center"
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    timezone: true,
+    alignment: "center"
+}) %>
+<br />
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    alignment: "center"
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    alignment: "center"
+}) %>
+<br />
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    timezone: true,
+    alignment: "right"
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    timezone: true,
+    alignment: "right"
+}) %>

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { TimeRangeInline } from '../../'
+
+const TimeRangeInlineDefault = () => (
+  <div>
+    <TimeRangeInline
+        endTime="2012-08-02T17:49:29Z"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <TimeRangeInline
+        endTime="2012-08-02T17:49:29Z"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        endTime="2012-08-02T17:49:29Z"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        endTime="2012-08-02T17:49:29Z"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+    <br />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <TimeRangeInline
+        alignment="center"
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+    />
+    <br />
+    <br />
+    <TimeRangeInline
+        alignment="right"
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="xs"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+    <br />
+    <TimeRangeInline
+        alignment="right"
+        endTime="2012-08-02T17:49:29Z"
+        icon="true"
+        size="sm"
+        startTime="2012-08-02T15:49:29Z"
+        timezone="true"
+    />
+  </div>
+)
+
+export default TimeRangeInlineDefault

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

@@ -0,0 +1,11 @@
+examples:
+  
+  rails:
+  - time_range_inline_default: Default
+  - time_range_inline_dark: Dark
+  
+  
+  react:
+  - time_range_inline_default: Default
+  - time_range_inline_dark: Dark
+  

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

@@ -0,0 +1,2 @@
+export { default as TimeRangeInlineDefault } from './_time_range_inline_default.jsx'
+export { default as TimeRangeInlineDark } from './_time_range_inline_dark.jsx'

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeRangeInline
+    class TimeRangeInline
+      include Playbook::Props
+
+      partial "pb_time_range_inline/time_range_inline"
+
+      prop :start_time, required: true
+      prop :end_time, required: true
+      prop :alignment, type: Playbook::Props::Enum,
+                       values: %w[left center right],
+                       default: "left"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm xs],
+                  default: "sm"
+      prop :dark, default: false
+      prop :icon, default: false
+      prop :timezone, default: false
+
+      def classname
+        generate_classname("pb_time_range_inline_kit", dark_class, alignment)
+      end
+
+      def format_start_time_string
+        "#{pb_date_start_time.to_hour}:#{pb_date_start_time.to_minutes}#{pb_date_start_time.to_meridian}"
+      end
+
+      def format_start_timezone_string
+        pb_date_start_time.to_timezone.to_s
+      end
+
+      def format_end_time_string
+        "#{pb_date_end_time.to_hour}:#{pb_date_end_time.to_minutes}#{pb_date_end_time.to_meridian}"
+      end
+
+      def format_end_timezone_string
+        pb_date_end_time.convert_to_timezone.to_timezone.to_s
+      end
+
+      def pb_date_start_time
+        Playbook::PbKit::PbDateTime.new(start_time)
+      end
+
+      def pb_date_end_time
+        Playbook::PbKit::PbDateTime.new(end_time)
+      end
+
+      def text_timezone_color
+        return "light" if size == "sm"
+
+        nil
+      end
+
+      def text_kit
+        case size
+        when "xs"
+          "caption"
+        when "sm"
+          "body"
+        end
+      end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -11,7 +11,8 @@
       label: object.label,
       name: object.name,
       value: object.value,
-      placeholder: object.placeholder
+      placeholder: object.placeholder,
+      dark: object.dark
     }) %>
     <%= pb_rails("list", props: { ordered: false, dark: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
     <% end %>

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

@@ -1,3 +1,6 @@
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+
 [class^=pb_typeahead_kit] {
   .pb_typeahead_wrapper {
     position: relative;
@@ -6,14 +9,16 @@
       position: absolute;
       width: min-content;
       bottom: 0.6em;
-      left: 1em;
-      visibility: hidden;
+      right: 1em;
+      opacity: 0;
+      color: $text_lt_light;
+      transition: opacity .15s ease-in-out;
     }
   }
 
   [class^=pb_text_input_kit] {
-    input {
-      padding-left: $space_xl !important;
+    .text_input_wrapper > input:first-child {
+      padding-right: $space_xl;
     }
   }
 
@@ -24,8 +29,8 @@
       background-color: $bg_light;
     }
   }
-
-  &:focus-within [class^=pb_list_kit] {
+  
+  [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -35,23 +40,33 @@
     background: white;
     box-shadow: $shadow_deep;
     z-index: 100;
+    border-radius: $border_rad_heavier;
+    transition: opacity .25s ease-in-out;
+  }
+
+  &:focus-within [class^=pb_list_kit] {
+    display: block;
+    opacity: 1;
   }
 
   &:not(:focus-within) [class^=pb_list_kit] {
     display: none;
+    opacity: 0;
   }
 
   [class^=pb_list_kit] {
     margin-top: -$space-sm;
-
+    li {
+      transition: background-color .25s ease-in-out;
+    }
     & > [data-pb-typeahead-kit-results] > li {
       &:focus-within {
-        background: $bg_light;
+        background-color: $active_light;
       }
 
       > button {
         background: none;
-        color: inherit;
+        color: $text_lt_default;
         border: none;
         padding: 0;
         font: inherit;
@@ -63,4 +78,10 @@
       }
     }
   }
+
+  &[class*=_dark] {
+    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
+      color: $text_dk_light;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_with_context.html.erb → _typeahead_with_context_dark.html.erb}

@@ -1,6 +1,7 @@
 <%= pb_rails("select", props: {
   label: "Colors",
   name: "foo",
+  dark: true,
   data: { context_select: true },
   options: [
     { value: "red", value_text: "Red" },
@@ -11,7 +12,7 @@
     { value: "purple", value_text: "Purple" },
   ]
   }) %>
-<%= pb_rails("typeahead", props: { label: "Crayola Crayons", name: :foo, data: { typeahead_example2: true, search_context_value_selector: "[data-context-select] select" } }) %>
+<%= pb_rails("typeahead", props: { label: "Crayola Crayons", dark: true, name: :foo, data: { typeahead_example2: true, search_context_value_selector: "[data-context-select] select" } }) %>
 
 <br><br><br>
 

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

@@ -1,4 +1,4 @@
 examples:
   rails:
   - typeahead_default: Default
-  - typeahead_with_context: With Context
+  - typeahead_with_context_dark: With Context

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

@@ -26,7 +26,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   search() {
     if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
 
-    this.toggleResultsLoadingIndicator('visible')
+    this.toggleResultsLoadingIndicator(true)
     this.showResults()
 
     const searchTerm = this.searchTerm
@@ -64,7 +64,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   showResults() {
     if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
 
-    this.toggleResultsLoadingIndicator('hidden')
+    this.toggleResultsLoadingIndicator(false)
     this.clearResults()
     for (const result of this.resultsOptionCache.get(this.searchTermAndContext)) {
       this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
@@ -192,7 +192,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     )
   }
 
-  toggleResultsLoadingIndicator(visibilityProperty) {
-    this.resultsLoadingIndicator.style.visibility = visibilityProperty
+  toggleResultsLoadingIndicator(visible) {
+    var visibilityProperty = 0
+    if (visible) visibilityProperty = 1
+    this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
 }