playbook_ui 14.10.0.pre.rc.17 → 14.10.0.pre.rc.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2044fc2c1a58d8d4632d8feafa77f11bed85265c571cb4e89f627b3390c58faa
-  data.tar.gz: 16e54cd1b328d28a44a041f15aa55999a71199952cc770d3d24046f61bc47814
+  metadata.gz: 0db00405bd73a7d733f9dcb81f68c86dab5104053480460df1bb4cd662f64cc4
+  data.tar.gz: 62318e1c0f631c6c9a233def0d6c114997b564bdbf4fcf4231f9009b746d3550
 SHA512:
-  metadata.gz: 1b8b23e3024156ec53746bb29957cde5b919ec57912207c5a6624d7e4a724352095e34ed8da4549792f5d7bd769e5bc190087aded4959e3320b1f45d28f11f6a
-  data.tar.gz: '04289107335c2ed969557d29d4e4c8baa0e5822351821c962c26b677468799ea32dc87b87f36318c260e567d87465507f38106f54308f3fe7256244060496335'
+  metadata.gz: 5db0081e5de8ef6e228810d22f313d64a722752fc1f74b5a37d0a8720be182b8b4d589c5198e90fa536dd5939bc0aeac676de1e48fe8f4ae9013ddb646a70202
+  data.tar.gz: 8d5ab849f68bdc5361c07d06f055d0760ea41bbf8792ab85e4732e085ad79ecb28b1c3229ed9cd2d4ec6876b0e808059aa404dd7559a567c25177cc92e469ce8

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -3,18 +3,13 @@ import React from "react"
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
-    position: "absolute",
     left: `${leftOffset}em`,
-    top: 0,
-    bottom: 0,
-    width: "2px",
-    backgroundColor: "#E4E8F0",
   }
 
   return (
     <div 
         className="collapsible-trail" 
-        style={style} 
+        style={style}
     />
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -110,6 +110,14 @@
     height: auto;
   }
 
+  .collapsible-trail {
+    background-color: $border_light;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+  }
+
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
     &[class*="table-responsive-scroll"] {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -0,0 +1,36 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md

@@ -0,0 +1 @@
+`collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
 

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -14,14 +14,16 @@ module Playbook
                                      default: "header"
       prop :subrow_headers, type: Playbook::Props::Array,
                             default: []
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
 
         if row[:children].present?
           output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -2,6 +2,14 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
+                    <% end %>
+
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -9,6 +9,8 @@ module Playbook
                                 default: []
       prop :row
       prop :depth
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -6,6 +6,14 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
+                    <% end %>
+
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -12,6 +12,8 @@ module Playbook
                                      default: "header"
       prop :subrow_header, type: Playbook::Props::String,
                            default: ""
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

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

@@ -90,50 +90,7 @@
       }
     }
   }
-  &[class*=dark] {
-    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
-      color: $text_dk_light;
-    }
-    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
-      display: inherit !important;
-    }
-    .typeahead-kit-select__menu {
-      background-color: $bg_dark;
-      color: $white;
-      z-index: $z_1;
-    }
-    .typeahead-kit-select__option:hover {
-      background-color: $active_dark;
-    }
-    .typeahead-kit-select__indicator:hover {
-      color: $white;
-    }
-    .typeahead-kit-select__input {
-      color: white;
-      input:focus {
-        box-shadow: none;
-      }
-    }
-    .typeahead-kit-select__single-value {
-      color: white;
-    }
-    .typeahead-kit-select__option--is-focused {
-      background-color: $active_dark;
-    }
-    [class^=pb_list_kit] {
-      background-color: $bg_dark;
-    }
-    .pb_item_kit {
-      button {
-        color: white !important;
-      }
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($white,.1);
-        }
-      }
-    }
-  }
+
   &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;
@@ -182,7 +139,7 @@
       }
     }
   }
- 
+
   .typeahead-kit-select__menu {
     z-index: $z_1;
     .typeahead-kit-select__menu-list {
@@ -215,5 +172,117 @@
       }
     }
   }
-}
 
+  &[class*=dark] {
+    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
+      color: $text_dk_light;
+    }
+    .pb_text_input_kit_label {
+      color: $text_dk_light;
+    }
+    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
+      display: inherit !important;
+    }
+    .typeahead-kit-select__menu {
+      background-color: $bg_dark;
+      color: $white;
+      z-index: $z_1;
+      .typeahead-kit-select__menu-list {
+        padding: 0;
+      }
+      .typeahead-kit-select__single-value {
+        color: white;
+      }
+
+      .typeahead-kit-select__option {
+        &.typeahead-kit-select__option--is-focused {
+          background-color: $hover_dark;
+        }
+        &.typeahead-kit-select__option--is-selected {
+          background-color: $active_dark;
+        }
+      }
+    }
+    .text_input_wrapper{
+      color: text_dk_default;
+    }
+    .typeahead-kit-select__option:hover {
+      background-color: $active_dark;
+    }
+    .typeahead-kit-select__indicator {
+      color: $text_dk_default;
+    }
+    .typeahead-kit-select__indicator:hover {
+      color: $text_dk_lighter;
+    }
+    .typeahead-kit-select__input {
+      color: white;
+      input:focus {
+        box-shadow: none;
+      }
+    }
+    .typeahead-kit-select__option--is-focused {
+      background-color: $active_dark;
+    }
+    [class^=pb_list_kit] {
+      background-color: $bg_dark;
+    }
+    .pb_item_kit {
+      button {
+        color: white !important;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: $hover_dark;
+        }
+      }
+    }
+
+    .text_input {
+      .typeahead-kit-select__input-container{
+        color: $text_dk_default
+      }
+      .typeahead-kit-select {
+        &__single-value{
+          color: $text_dk_default;
+        }
+      }
+      &.typeahead-kit-select {
+        &__single-value{
+          color: $text_dk_default;
+        }
+        &__control {
+          &--is-focused {
+            @include pb_textarea_focus;
+            @include transition_default;
+            border-color: $active_dark;
+            background-color: rgba($focus_input_dark,$opacity_5);
+            box-shadow: none;
+            .typeahead-plus-icon {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    &.inline {
+      &:not(:hover) {
+        .text_input {
+          background-color: transparent;
+          border-color: transparent;
+        }
+        .typeahead-kit-select__indicator {
+          color: transparent;
+        }
+      }
+
+      &:hover {
+        .text_input {
+          background-color: $hover_dark;
+        }
+      }
+    }
+
+  }
+}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -55,11 +55,18 @@ const TypeaheadWithHighlight = (props) => {
               marginRight="sm"
               name={name}
               size="sm"
+              {...props}
           />
         </FlexItem>
         <FlexItem>
-          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
-          <Body color="light">
+          <Title
+              size={4}
+              {...props}
+          >
+            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light"
+              {...props}
+          >
             <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
             {territory}
           </Body>

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

@@ -25,8 +25,9 @@
         validation: object.validation,
         label: object.label,
         id: object.input_options[:id],
+        dark: object.dark,
       }) %>
-      <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+      <%= pb_rails("list", props: { ordered: false, borderless: true, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
     </div>
 
@@ -36,4 +37,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>