playbook_ui_docs 14.16.0.pre.alpha.play1960buttonkitdisablenotworkingdanger6850 → 14.16.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.16.0.pre.alpha.play1960buttonkitdisablenotworkingdanger6850
+  version: 14.16.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-24 00:00:00.000000000 Z
+date: 2025-03-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -59,8 +59,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
@@ -75,18 +73,14 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_react.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
@@ -543,10 +537,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
@@ -708,10 +700,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
@@ -798,14 +786,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
 - app/pb_kits/playbook/pb_dropdown/docs/example.yml
 - app/pb_kits/playbook/pb_dropdown/docs/index.js
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg
-- app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx
-- app/pb_kits/playbook/pb_empty_state/docs/example.yml
-- app/pb_kits/playbook/pb_empty_state/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/docs/_description.md
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.html.erb
@@ -1065,7 +1045,6 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md
 - app/pb_kits/playbook/pb_icon/docs/example.yml
 - app/pb_kits/playbook/pb_icon/docs/index.js
-- app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx
 - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb
 - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx
 - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb
@@ -1284,24 +1263,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
@@ -1508,8 +1469,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
@@ -2132,9 +2091,9 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
@@ -2146,7 +2105,6 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
@@ -2177,8 +2135,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb
@@ -2192,8 +2148,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
@@ -2226,10 +2180,6 @@ files:
 - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
 - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
-- app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb
-- app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx
-- app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md
-- app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md
 - app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md
 - app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,102 +0,0 @@
-import React, { useState } from "react";
-import { AdvancedTable, TextInput, Body } from "playbook-ui";
-import MOCK_DATA from "./advanced_table_mock_data.json";
-
-const AdvancedTableInlineEditing = (props) => {
-  const [editedValues, setEditedValues] = useState({});
-
-  const EditableCell = ({ rowId, originalValue, onSave }) => {
-    const [localValue, setLocalValue] = useState(originalValue);
-
-    const handleChange = (e) => setLocalValue(e.target.value);
-
-    const handleBlur = () => {
-      originalValue !== localValue && onSave(rowId, localValue);
-    };
-
-    return (
-      <TextInput inline
-          marginBottom="none"
-          {...props}
-      >
-        <input 
-            onBlur={handleBlur} 
-            onChange={handleChange} 
-            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
-            value={localValue} 
-        />
-      </TextInput>
-    );
-  };
-
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      editable: true,
-      customRenderer: (row) => {
-        return (
-          <EditableCell
-              onSave={(id, val) => {
-                setEditedValues((prev) => ({ ...prev, [id]: val }));
-              }}
-              originalValue={
-                editedValues[row.id] ?? row.original.scheduledMeetings
-              }
-              rowId={row.id}
-          />
-        );
-      },
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ];
-
-  return (
-    <div className="App">
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-      {
-        editedValues && Object.keys(editedValues).length > 0 && (
-          <>
-            <Body 
-                marginTop="md"
-                {...props}
-            >
-              Edited Values by Row Id:
-            </Body>
-            <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
-          </>
-        )
-      }
-    </div>
-  );
-};
-
-export default AdvancedTableInlineEditing;

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

@@ -1,4 +0,0 @@
-Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions. 
-
-Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
-See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.

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

@@ -1,39 +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: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
-<% end %>

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

@@ -1,33 +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",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

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

@@ -1 +0,0 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

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

@@ -1,6 +0,0 @@
-`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
-
-When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
-
-__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
-The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb

@@ -1,39 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Date Picker",
-  picker_id: "date-picker-onchange",
-  margin_bottom: "lg"
-}) %>
-<%= pb_rails("caption", props: { text: "Date Object" }) %>
-<%= pb_rails("body", props: {
-  label: "Date Object",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onchange-object",
-}) %>
-<%= pb_rails("caption", props: { text: "Date String" }) %>
-<%= pb_rails("body", props: {
-  label: "Date String",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onchange-string",
-}) %>
-
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", () => {
-    <%# Access flatpickr instance with picker id and assign it a variable %>
-    const fp = document.querySelector("#date-picker-onchange")._flatpickr
-
-    <%# Define Hook %>
-    const changeHook = (selectedDates, dateStr) => {
-      const object = document.querySelector('#date-picker-onchange-object')
-      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
-
-      const string = document.querySelector('#date-picker-onchange-string')
-      string.textContent = dateStr
-    }
-    
-    <%# Push one or more hooks to onChange config array %>
-    fp.config.onChange.push(changeHook)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb

@@ -1,39 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Date Picker",
-  picker_id: "date-picker-onclose",
-  margin_bottom: "lg"
-}) %>
-<%= pb_rails("caption", props: { text: "Date Object" }) %>
-<%= pb_rails("body", props: {
-  label: "Date Object",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onclose-object",
-}) %>
-<%= pb_rails("caption", props: { text: "Date String" }) %>
-<%= pb_rails("body", props: {
-  label: "Date String",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onclose-string",
-}) %>
-
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", () => {
-    <%# Access flatpickr instance with picker id and assign it a variable %>
-    const fp = document.querySelector("#date-picker-onclose")._flatpickr
-
-    <%# Define Hook %>
-    const closeHook = (selectedDates, dateStr) => {
-      const object = document.querySelector('#date-picker-onclose-object')
-      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
-
-      const string = document.querySelector('#date-picker-onclose-string')
-      string.textContent = dateStr
-    }
-    
-    <%# Push one or more hooks to onClose config array %>
-    fp.config.onClose.push(closeHook)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx

@@ -1,184 +0,0 @@
-import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-
-// Initial items to be dragged
-const dataShadow = [
-  {
-    id: "51",
-    text: "Task 1",
-  },
-  {
-    id: "52",
-    text: "Task 2",
-  },
-  {
-    id: "53",
-    text: "Task 3",
-  },
-];
-
-const dataOutline = [
-  {
-    id: "61",
-    text: "Task 1",
-  },
-  {
-    id: "62",
-    text: "Task 2",
-  },
-  {
-    id: "63",
-    text: "Task 3",
-  },
-];
-
-const dataLine = [
-  {
-    id: "71",
-    text: "Task 1",
-  },
-  {
-    id: "72",
-    text: "Task 2",
-  },
-  {
-    id: "73",
-    text: "Task 3",
-  },
-];
-
-const DraggableDropZones = (props) => {
-  const [initialShadowState, setInitialShadowState] = useState(dataShadow);
-  const [initialOutlineState, setInitialOutlineState] = useState(dataOutline);
-  const [initialLineState, setInitialLineState] = useState(dataLine);
-
-  return (
-    <>
-    <Flex justify="between"
-        {...props}
-    >
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "shadow"}}
-            initialItems={dataShadow}
-            onReorder={(items) => setInitialShadowState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Shadow"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialShadowState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "outline"}}
-            initialItems={dataOutline}
-            onReorder={(items) => setInitialOutlineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Outline"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialOutlineState.map(({ id, text }) => (
-              <Card
-                  dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex
-                    alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem>
-        <DraggableProvider
-            dropZone={{type: "line"}}
-            initialItems={dataLine}
-            onReorder={(items) => setInitialLineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Line"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialLineState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-    </Flex>
-    </>
-  );
-};
-
-export default DraggableDropZones;

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

@@ -1,5 +0,0 @@
-The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
-
-By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
-
-Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.