playbook_ui 13.30.0.pre.alpha.PBNTR353draggablev53136 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d681e69c84f185b628e40d1d517d5cee70c28972186ee4b47b21641a4ca4637
-  data.tar.gz: 0c5933b2d3d51c8d8c891f4604f1f11447f1edcf5227446b68db72a4b169731e
+  metadata.gz: d2f47afcafc63550e85b7c500375e2c173a285ff40b3d83bb61a99a345c20b18
+  data.tar.gz: 4742a835d7345a6d7440baaa8924f1d550fd483aed74c5926fff117022b216cd
 SHA512:
-  metadata.gz: 80a03f749ddd4bf241009567ecc83c161a4cbbefc6779d8db7c2b717242ff4ac536afb263715bae97bca4cfb73bbb2c29d11c8747592ea341bed2b4547572ae2
-  data.tar.gz: 9cdc6ecc0caeab5ee99f8846513121233f191f28c3b9dd1b9bf3c631133f707dbde9bec819db905663ca437fd2ba66a43e03a871e055e74874a61de87059ff00
+  metadata.gz: 5fb9276248e90b14c01c791ad899de5f47e663c86ed5d7296a7897532a2a972613f6b81953c1c946c459f164157c811f1c62e6d17370bf3d78e8154bcb1d490b
+  data.tar.gz: a487ea6d13567b83e9fba345ae000f60e13d3b15c65d854f80d7085fd5c74424ca441679f3880d082ac13fdc2d12eea337643bc0f31371d30e96666ee6acd0a8

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

@@ -0,0 +1,59 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data.sort! do |a, b|
+    value_a = a[sort_param]
+    value_b = b[sort_param]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% 
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#table-sort", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#table-sort", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { 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: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

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

@@ -0,0 +1,6 @@
+Optionally enable sorting by passing `sort_menu` to any `column_definition`(s). Sort options are determined by an array of `item` objects passed to the `sort_menu` prop. 
+
+</br>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example uses a custom sort method that may need to be modified or replaced within your project.

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

@@ -2,14 +2,15 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_beta_sort: Enable Sorting
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
-  - advanced_table_sort: enable Sorting
+  - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_inline_row_loading: inline Row Loading
+  - advanced_table_inline_row_loading: Inline Row Loading

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

@@ -1,11 +1,11 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: { tag: "div" }) do %>
             <% object.column_definitions.each_with_index do |item, index| %>
-                <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
-                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
+                <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
+                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
                             <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
-                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
+                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
                             </button>
                         <% end %>
                         <%= item[:label] %>

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,23 +1,14 @@
 <% if object.image_url.present? %>
-  <%= content_tag(object.tag,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
+  <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
               background-position: #{object.background_position};",
-      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>
 <% else %>
-  <%= content_tag(object.tag,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
+  <%= pb_content_tag(object.tag,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_body/body.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do%>
+<%= pb_content_tag do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
       <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,10 +1,4 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    dark: object.dark,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
 <% end %>
 

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

@@ -14,7 +14,12 @@ export default class PbCollapsible extends PbEnhancedElement {
     this.element.addEventListener('click', () => {
       this.toggleElement(this.target)
     })
-    this.displayDownArrow()
+     // Check the initial state of the collapsible content and set the arrow accordingly
+     if (this.target.classList.contains('is-visible')) {
+      this.displayUpArrow()
+    } else {
+      this.displayDownArrow()
+    }
     // Listen for a custom event to toggle the collapsible
     document.addEventListener(`${this.target.id}`, () => {
       this.toggleElement(this.target)

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md

@@ -0,0 +1,33 @@
+![Date-Time-Stacked-Default](https://github.com/powerhome/playbook/assets/54749071/b877dd01-32fa-49ff-af2d-1f8d819f6f39)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateTimeStacked(
+    timeZoneIdentifier: "EDT",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "EDT",
+    isYearDisplayed: true,
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true,
+    isYearBold: true,
+    dateVariant: .standard
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "GMT+9",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "MDT",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md

@@ -0,0 +1,18 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **dateTime** | `Date` | Takes a date type to calculate the current date | `Date()` |  |
+| **timeDate** | `Date` | Takes a date type to calculate the current time | `Date()` |  |
+| **timeZoneIdentifier** | `String` | A string value that is used in a function to get the correct time in the corrresponding time zone. This value is also used to display the time zone next to the time |  |  |
+| **isYearDisplayed** | `Bool` | Determines whether or not the year is displayed with the month and day | `false` | `true` `false` |
+| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
+| **isMonthStacked** | `Bool` | Determines whether or not the value for month is stacked over the date | `false` | `true` `false` |
+| **isMonthBold** | `Bool` | Determines whether or not the month is in bold | `false` | `true` `false` |
+| **isYearBold** | `Bool` | Determines whether or not the year is in bold | `false` | `true` `false` |
+| **dateAlignment** | `HorizontalAlignment` | Sets alignment of date | `.trailing` | `leading` `center` `trailing` |
+| **timeAlignment** | `HorizontalAlignment` | Sets alignment of the time zone | `.leading` | `leading` `center` `trailing` |
+| **dateVariant** | `Variant` | Allows user to choose the style in which the date is displayed | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate(showYear: false)` `.standard` ` .withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
+| **timeVariant** | `Variant` | Allows user to choose the style in which the time is displayed | `.time` | `.time` `.iconTimeZone` `.withTimeZoneHeader` |
+| **dateSize** | `String` | Allows user to choose the size of the date that is being displayed  | `.title4` | `title4` `body` `caption` `large` `subcaption` |
+| **timeStyle** | `PBFont` | Allows user to choose the size of the time that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|
+| **timeZoneStyle** | `PBFont` | Allows user to choose the size of the time zone that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|

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

@@ -2,6 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-
+  
   react:
   - date_time_stacked_default: Default
+  
+  swift:
+  - date_time_stacked_default_swift: Default
+  - date_time_stacked_props_swift: ""
+

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,42 +1,37 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= content_tag(:dialog,
-        aria: object.aria,
-        data: object.data,
-        id: object.id,
-        class: object.classname,
-        **combined_html_options) do %>
-            <% if object.status === "" && object.title %>
-                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
-            <% end %>
-            <% if object.status === "" && object.text %>
-                <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
-            <% end %>
-            <% if object.status != "" %>
-                <%= pb_rails("dialog/dialog_body", props: { classname: "dialog_status_text_align" ,padding: "md" }) do %>
-                    <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
-                        <%= pb_rails("icon_circle", props: {
-                                icon: object.status_alerts[0],
-                                variant: object.status_alerts[1],
-                                size: "lg"
-                            }) %>
-                        <%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
-                        <%= pb_rails("body", props: { text: object.text, margin_top: "sm" }) %>
-                    <% end %>
-                <% end %>
-            <% end %>
-            <% if object.cancel_button && object.confirm_button %>
-                        <%= pb_rails("dialog/dialog_footer", props: {
-                            cancel_button: object.cancel_button,
-                            confirm_button: object.confirm_button,
-                            id: object.id
-                        }) %>
-            <% end %>
+  <%= pb_content_tag(:dialog) do %>
+    <% if object.status === "" && object.title %>
+      <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
+    <% end %>
+    <% if object.status === "" && object.text %>
+      <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
+    <% end %>
+    <% if object.status != "" %>
+      <%= pb_rails("dialog/dialog_body", props: { classname: "dialog_status_text_align" ,padding: "md" }) do %>
+        <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
+          <%= pb_rails("icon_circle", props: {
+            icon: object.status_alerts[0],
+            variant: object.status_alerts[1],
+            size: "lg"
+          }) %>
+        <%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
+        <%= pb_rails("body", props: { text: object.text, margin_top: "sm" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if object.cancel_button && object.confirm_button %>
+    <%= pb_rails("dialog/dialog_footer", props: {
+      cancel_button: object.cancel_button,
+      confirm_button: object.confirm_button,
+      id: object.id
+    }) %>
+<% end %>
 
-            <%= content %>
+<%= content %>
     <% end %>
 </div>
 
 <%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => dialogHelper())
-    window.addEventListener("turbo:frame-load", () => dialogHelper())
+  window.addEventListener("DOMContentLoaded", () => dialogHelper())
+  window.addEventListener("turbo:frame-load", () => dialogHelper())
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
-        <%= content.presence || object.text %>
+<%= pb_content_tag do %>
+  <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.sticky_header,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md

@@ -1,5 +1,5 @@
-For a simplified version of the Draggable API for the Card kit, You can use the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
+For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
 
-In addition to the above, `dragId` is a REQUIRED prop to be passed to the Card kit when implementing dragging.
+In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
 
 The dev must manage state as shown.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md

@@ -1,6 +1,6 @@
 For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop. 
 
-In addition to the above, `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
 
 The dev must manage state as shown.
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md

@@ -1,6 +1,6 @@
 For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop. 
 
-In addition to the above, `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
 
 The dev must manage state as shown.
 

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -96,6 +96,7 @@
         width: 100%;
       }
     }
+
     .close {
       display: none;
       animation-name: fadeOut;
@@ -111,6 +112,17 @@
       animation-timing-function: linear;
       animation-fill-mode: forwards;
     }
+
+    &.error {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+
+      [class*="dropdown_trigger_wrapper"] {
+        border-color: $error;
+        box-shadow: none !important;
+      }
+    }
   }
 
   &.dark {
@@ -138,6 +150,12 @@
           color: $white;
         }
       }
+
+      &.error {
+        [class*="dropdown_trigger_wrapper"] {
+          border-color: $error_dark;
+        }
+      }
     }
     .pb_dropdown_container {
       background-color: $bg_dark !important;