playbook_ui 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

data/lib/playbook/classnames.rb

@@ -41,7 +41,6 @@ module Playbook
         top_props,
         right_props,
         bottom_props,
-        vertical_align_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/forms/builder.rb

@@ -13,7 +13,6 @@ module Playbook
       require_relative "builder/intl_telephone_field"
       require_relative "builder/multi_level_select_field"
       require_relative "builder/phone_number_field"
-      require_relative "builder/dropdown_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/kit_base.rb

@@ -29,7 +29,6 @@ require "playbook/left"
 require "playbook/top"
 require "playbook/right"
 require "playbook/bottom"
-require "playbook/vertical_align"
 
 module Playbook
   include ActionView::Helpers
@@ -66,7 +65,6 @@ module Playbook
     include Playbook::Top
     include Playbook::Right
     include Playbook::Bottom
-    include Playbook::VerticalAlign
 
     prop :id
     prop :data, type: Playbook::Props::HashProp, default: {}

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.28.0"
-  VERSION = "13.28.0.pre.alpha.PBNTR297gradientoverlay3029"
+  VERSION = "13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.28.0.pre.alpha.PBNTR297gradientoverlay3029
+  version: 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-06 00:00:00.000000000 Z
+date: 2024-05-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -263,8 +263,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
@@ -299,8 +297,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/table_header.rb
 - app/pb_kits/playbook/pb_advanced_table/table_row.html.erb
 - app/pb_kits/playbook/pb_advanced_table/table_row.rb
-- app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
-- app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb
 - app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.tsx
@@ -399,17 +395,15 @@ files:
 - app/pb_kits/playbook/pb_badge/docs/index.js
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
-- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
 - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
@@ -633,7 +627,6 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
-- app/pb_kits/playbook/pb_circle_chart/circleChart.test.js
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
@@ -676,7 +669,6 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_footer.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
 - app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
-- app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap
 - app/pb_kits/playbook/pb_collapsible/_collapsible.scss
 - app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
 - app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
@@ -1073,17 +1065,6 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
-- app/pb_kits/playbook/pb_draggable/_draggable.scss
-- app/pb_kits/playbook/pb_draggable/_draggable.tsx
-- app/pb_kits/playbook/pb_draggable/context/index.tsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
-- app/pb_kits/playbook/pb_draggable/docs/example.yml
-- app/pb_kits/playbook/pb_draggable/docs/index.js
-- app/pb_kits/playbook/pb_draggable/draggable.test.jsx
-- app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx
-- app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
@@ -1349,7 +1330,6 @@ files:
 - app/pb_kits/playbook/pb_gauge/docs/index.js
 - app/pb_kits/playbook/pb_gauge/gauge.html.erb
 - app/pb_kits/playbook/pb_gauge/gauge.rb
-- app/pb_kits/playbook/pb_gauge/gauge.test.js
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
 - app/pb_kits/playbook/pb_hashtag/_hashtag.tsx
 - app/pb_kits/playbook/pb_hashtag/docs/_description.md
@@ -1648,7 +1628,6 @@ files:
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
 - app/pb_kits/playbook/pb_line_graph/docs/example.yml
 - app/pb_kits/playbook/pb_line_graph/docs/index.js
-- app/pb_kits/playbook/pb_line_graph/lineGraph.test.js
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
@@ -1872,15 +1851,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/online_status.rb
-- app/pb_kits/playbook/pb_overlay/_overlay.scss
-- app/pb_kits/playbook/pb_overlay/_overlay.tsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
-- app/pb_kits/playbook/pb_overlay/docs/example.yml
-- app/pb_kits/playbook/pb_overlay/docs/index.js
-- app/pb_kits/playbook/pb_overlay/overlay.test.jsx
 - app/pb_kits/playbook/pb_pagination/_pagination.scss
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
@@ -2356,22 +2326,17 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
@@ -2397,9 +2362,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.md
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb
@@ -2444,7 +2406,6 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_hover.scss
 - app/pb_kits/playbook/pb_table/styles/_mobile.scss
 - app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss
-- app/pb_kits/playbook/pb_table/styles/_outer_padding.scss
 - app/pb_kits/playbook/pb_table/styles/_reset.scss
 - app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
@@ -2744,7 +2705,6 @@ files:
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
 - app/pb_kits/playbook/pb_treemap_chart/docs/index.js
-- app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
@@ -2886,7 +2846,6 @@ files:
 - app/pb_kits/playbook/tokens/_titles.scss
 - app/pb_kits/playbook/tokens/_transition.scss
 - app/pb_kits/playbook/tokens/_typography.scss
-- app/pb_kits/playbook/tokens/_vertical_align.scss
 - app/pb_kits/playbook/tokens/exports/_border_radius.scss
 - app/pb_kits/playbook/tokens/exports/_colors.scss
 - app/pb_kits/playbook/tokens/exports/_line_height.scss
@@ -2917,7 +2876,6 @@ files:
 - app/pb_kits/playbook/utilities/_spacing.scss
 - app/pb_kits/playbook/utilities/_text_align.scss
 - app/pb_kits/playbook/utilities/_truncate.scss
-- app/pb_kits/playbook/utilities/_vertical_align.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss
@@ -2972,7 +2930,6 @@ files:
 - lib/playbook/forms/builder/checkbox_field.rb
 - lib/playbook/forms/builder/collection_select_field.rb
 - lib/playbook/forms/builder/date_picker_field.rb
-- lib/playbook/forms/builder/dropdown_field.rb
 - lib/playbook/forms/builder/form_field_builder.rb
 - lib/playbook/forms/builder/intl_telephone_field.rb
 - lib/playbook/forms/builder/multi_level_select_field.rb
@@ -3017,7 +2974,6 @@ files:
 - lib/playbook/top.rb
 - lib/playbook/truncate.rb
 - lib/playbook/version.rb
-- lib/playbook/vertical_align.rb
 - lib/playbook/z_index.rb
 - lib/playbook_ui.rb
 homepage: https://playbook.powerapp.cloud/

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

@@ -1,40 +0,0 @@
-<% 
-  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",
-    }
-  ]
-
-  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_subrow_headers.md

@@ -1,3 +0,0 @@
-`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
-
-`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,34 +0,0 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
-        <% 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 %>
-                    <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? %>
-                                <button class="gray-icon toggle-all-icon" onclick="expandAllSubRows(this, <%= depth %>)">
-                                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
-                                </button>
-                            <% end %>
-                            <%= pb_rails("flex/flex_item") do %>
-                                <% if index.zero? %>
-                                    <%= pb_rails("caption", props: { margin_left: object.row[:children].present? ? "none" : "xs", text: object.subrow_header }) %>
-                                <% end %>
-                            <% end %>
-                        <% end %>
-                    </div>
-                <% end %>
-            <% end %>
-        <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>

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

@@ -1,31 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbAdvancedTable
-    class TableSubrowHeader < Playbook::KitBase
-      prop :column_definitions, type: Playbook::Props::Array,
-                                default: []
-      prop :depth
-      prop :row
-      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
-                                     values: %w[all header none],
-                                     default: "header"
-      prop :subrow_header, type: Playbook::Props::String,
-                           default: ""
-
-      def classname
-        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
-      end
-
-      def td_classname
-        generate_classname("id-cell", "chrome-styles", separator: " ")
-      end
-
-    private
-
-      def subrow_depth_classname
-        depth.positive? ? "depth-sub-row-#{depth}" : ""
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import BarGraph from './_bar_graph';
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const testId = 'bargraph1';
-
-test('bargraph uses exact classname', () => {
-  render(
-    <BarGraph
-        className='super_important_class'
-        data={{ testid: testId }}
-        id='bar-default'
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('super_important_class');
-});

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md

@@ -1,2 +0,0 @@
-The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
- It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import CircleChart from './_circle_chart';
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const testId = 'circlechart1';
-
-test('uses exact classname', () => {
-  const data = [
-    {
-      name: 'Waiting for Calls',
-      value: 41,
-    },
-    {
-      name: 'On Call',
-      value: 49,
-    },
-    {
-      name: 'After call',
-      value: 10,
-    },
-  ]
-  render(
-    <CircleChart
-        chartData={data}
-        data={{ testid: testId }}
-        id='circlechartid'
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_circle_chart');
-});

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`html structure is correct 1`] = `
-<div>
-  <div
-    class="pb_collapsible_kit additional_class"
-    data-testid="collapsible1"
-  >
-    <div
-      class="pb_collapsible_main_kit cursor_pointer"
-    >
-      <div>
-        <div
-          class="pb_flex_kit_orientation_row_justify_content_left_align_items_center_spacing_between"
-        >
-          <div
-            class="pb_flex_item_kit"
-          >
-            <div>
-              Main Section
-            </div>
-          </div>
-          <div
-            class="pb_flex_item_kit"
-          >
-            <div
-              class="icon_wrapper"
-              style="vertical-align: middle; color: rgb(193, 205, 214);"
-            >
-              <i
-                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
-              />
-              <span
-                aria-label="chevron-down icon"
-                hidden=""
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="pb_collapsible_content_kit toggle-content"
-      data-collapsible-content="true"
-      style="height: 0px;"
-    >
-      <div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.
-      </div>
-    </div>
-  </div>
-</div>
-`;

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -1,10 +0,0 @@
-@import "../tokens/colors";
-
-.pb_draggable {
-  .is_dragging {
-    opacity: 40%;
-  }
-  .active {
-    opacity: 60%;
-  }
-}

data/app/pb_kits/playbook/pb_draggable/_draggable.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-import DraggableContainer from "./subcomponents/DraggableContainer";
-import DraggableItem from "./subcomponents/DraggableItem";
-
-type DraggableProps = {
-  aria?: { [key: string]: string };
-  className?: string;
-  children?: React.ReactNode;
-  data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-};
-
-const Draggable = (props: DraggableProps) => {
-  const {
-    aria = {},
-    className,
-    children,
-    data = {},
-    htmlOptions = {},
-    id,
-  } = props;
-
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  const classes = classnames(
-    buildCss("pb_draggable"),
-    globalProps(props),
-    className
-  );
-
-  return (
-    <div {...ariaProps} 
-        {...dataProps} 
-        {...htmlProps}
-        className={classes} 
-        id={id}
-    >
-      {children}
-    </div>
-  );
-};
-
-Draggable.Container = DraggableContainer;
-Draggable.Item = DraggableItem;
-
-export default Draggable;

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,92 +0,0 @@
-import React, { createContext, useState, useContext, useEffect } from "react";
-
-const DragContext = createContext<any>({});
-
-export const DraggableContext = () => {
-  return useContext(DragContext);
-};
-
-export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
-  const [items, setItems] = useState([]);
-  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
-  const [isDragging, setIsDragging] = useState("");
-  const [activeContainer, setActiveContainer] = useState("");
-
-  useEffect(() => {
-    setItems(initialItems);
-  }, [initialItems]);
-
-  useEffect(() => {
-    onChange(items);
-  }, [items]);
-
-  const handleDragStart = (id: string, container: string) => {
-    setDragData({ id: id, initialGroup: container });
-    setIsDragging(id);
-  };
-
-  const handleDragEnter = (id: string, container: string) => {
-    if (dragData?.id !== id) {
-      const newItems = [...items];
-      const draggedItem = newItems.find((item) => item.id === dragData.id);
-      const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex((item) => item.id === id);
-
-      newItems.splice(draggedIndex, 1);
-      newItems.splice(targetIndex, 0, draggedItem);
-
-      setItems(newItems);
-      setDragData({ id: dragData.id, initialGroup: container });
-    }
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging("");
-    setActiveContainer("");
-  };
-
-  const changeCategory = (itemId: string, container: string) => {
-    const updatedItems = items.map((item) => {
-      if (item.id === itemId) {
-        return { ...item, container: container };
-      }
-      return item;
-    });
-
-    setItems(updatedItems);
-  };
-
-  const handleDrop = (container: string) => {
-    setIsDragging("");
-    setActiveContainer("");
-    const selected = dragData.id;
-    changeCategory(selected, container);
-  };
-
-  const handleDragOver = (e: Event, container: string) => {
-    e.preventDefault();
-    setActiveContainer(container);
-  };
-
-  
-
-  const contextValue = {
-    items,
-    setItems,
-    dragData,
-    setDragData,
-    isDragging,
-    setIsDragging,
-    activeContainer,
-    setActiveContainer,
-    handleDragStart,
-    handleDragEnter,
-    handleDragEnd,
-    handleDrop,
-    handleDragOver,
-  };
-
-  return (
-    <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
-  );
-};