playbook_ui 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5655 → 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +3 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +3 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +33 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +1 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} +2 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +17 -3
  14. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +15 -11
  15. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +14 -3
  16. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +9 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +9 -0
  20. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +5 -0
  21. data/app/pb_kits/playbook/pb_card/card.html.erb +21 -2
  22. data/app/pb_kits/playbook/pb_card/card.rb +7 -0
  23. data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +3 -0
  24. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +92 -0
  25. data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +64 -0
  26. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +21 -0
  27. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +45 -0
  28. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +1 -0
  29. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +8 -0
  30. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -0
  31. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -1
  32. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
  33. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
  34. data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +6 -7
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
  36. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
  37. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
  38. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
  39. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
  40. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
  42. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
  43. data/app/pb_kits/playbook/pb_table/table_row.rb +1 -1
  44. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +3 -1
  45. data/dist/chunks/{_typeahead-BWwaAo_0.js → _typeahead-BIhRQo8Q.js} +3 -3
  46. data/dist/chunks/_weekday_stacked-bORvL0Zi.js +45 -0
  47. data/dist/chunks/vendor.js +1 -1
  48. data/dist/menu.yml +6 -0
  49. data/dist/playbook-doc.js +1 -1
  50. data/dist/playbook-rails-react-bindings.js +1 -1
  51. data/dist/playbook-rails.js +1 -1
  52. data/dist/playbook.css +1 -1
  53. data/lib/playbook/pb_forms_global_props_helper.rb +136 -0
  54. data/lib/playbook/pb_forms_helper.rb +13 -4
  55. data/lib/playbook/version.rb +1 -1
  56. metadata +23 -5
  57. data/dist/chunks/_weekday_stacked-zyBCd1s8.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e4e36bc39d271fc8c5799f840523e24a02597aec41b0191a8aeca562b4ed325b
4
- data.tar.gz: 3e057e647fb29b4c367d1508292b5ae7a9c923c0aaa02e771c24a33173375c84
3
+ metadata.gz: f4b2ad0e481643abe338553036ee4fb39c7c7ebe3e388e9486acb5a27cc565e7
4
+ data.tar.gz: 5c17ee40aba4bace77b6354bac9f417cfd7fb3e8bd3cc9029e9f11142b0808ca
5
5
  SHA512:
6
- metadata.gz: 9e4cd81b8cd28c013f41856ad9033d11f3cf2cf9e1c4db7cfbec611401dd9d8c3842a44c6a2be3f2030979f8bf52ebfdb236b3b8a4ca32ba928bd7b896cf93fe
7
- data.tar.gz: c8d25c303eb65eef3ba5d59502429fbaf9d9220bbe798395fd48ed02dc90fa296cf78607294db601be3a0eae591236d46c15908544799c4c825308e2b630b0f0
6
+ metadata.gz: 0633f4de5953b60ab7e9f0543bfe25de05b99e2e7378478c4c5858e17f61d271fb63ff8b73f2fe9f991c0c9848ea6bb0cf40cb1c9bba790cfff95d4f84fa9fe6
7
+ data.tar.gz: fa388b6846808f7e7a0b78c3822ad741b4f8302bdbff50c92527bf6af5a90ec002c3cade3a6ae96d24f85c23b19d26a53713321f52402d46b68d9a0e234ac044
@@ -15,6 +15,7 @@
15
15
  @import 'pb_circle_chart/circle_chart';
16
16
  @import 'pb_circle_icon_button/circle_icon_button';
17
17
  @import 'pb_collapsible/collapsible';
18
+ @import 'pb_copy_button/copy_button';
18
19
  @import 'pb_contact/contact';
19
20
  @import 'pb_currency/currency';
20
21
  @import 'pb_dashboard_value/dashboard_value';
@@ -47,7 +47,7 @@ export const CustomCell = ({
47
47
  <Flex
48
48
  alignItems="center"
49
49
  columnGap="xs"
50
- justify={!hasAnySubRows ? "end" : "start"}
50
+ justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
51
51
  orientation="row"
52
52
  >
53
53
  {
@@ -39,7 +39,7 @@ export const TableHeaderCell = ({
39
39
  sortIcon,
40
40
  table
41
41
  }: TableHeaderCellProps) => {
42
- const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
42
+ const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
43
43
  useContext(AdvancedTableContext);
44
44
 
45
45
  type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -91,7 +91,7 @@ const isToggleExpansionEnabled =
91
91
 
92
92
  let justifyHeader:justifyTypes;
93
93
 
94
- if (header?.index === 0 && hasAnySubRows) {
94
+ if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
95
95
  justifyHeader = enableSorting ? "between" : "start";
96
96
  } else {
97
97
  justifyHeader = isLeafColumn ? "end" : "center";
@@ -1,10 +1,10 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) do %>
2
+ <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : "" }.merge(object.table_props)) do %>
3
3
  <% if content.present? %>
4
4
  <% content.presence %>
5
5
  <% else %>
6
- <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
7
- <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
6
+ <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
7
+ <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
8
8
  <% end %>
9
9
  <% end %>
10
10
  <% end %>
@@ -10,9 +10,11 @@ module Playbook
10
10
  prop :enable_toggle_expansion, type: Playbook::Props::Enum,
11
11
  values: %w[all header none],
12
12
  default: "header"
13
+ prop :loading, type: Playbook::Props::Boolean,
14
+ default: false
13
15
  prop :responsive, type: Playbook::Props::Enum,
14
16
  values: %w[none scroll],
15
- default: "none"
17
+ default: "scroll"
16
18
  prop :table_props, type: Playbook::Props::HashProp,
17
19
  default: {}
18
20
 
@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
245
245
  })
246
246
 
247
247
 
248
- test("loading state + initialLoadingRowCount prop", () => {
248
+ test("loading state + initialLoadingRowsCount prop", () => {
249
249
  render(
250
250
  <AdvancedTable
251
251
  columnDefinitions={columnDefinitions}
@@ -0,0 +1,33 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
@@ -0,0 +1 @@
1
+ The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
@@ -1,3 +1,3 @@
1
- the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
1
+ The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
2
2
 
3
- By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
3
+ By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
@@ -0,0 +1,38 @@
1
+
2
+ <% column_definitions = [
3
+ {
4
+ accessor: "year",
5
+ label: "Year",
6
+ cellAccessors: ["quarter", "month", "day"],
7
+ },
8
+ {
9
+ accessor: "newEnrollments",
10
+ label: "New Enrollments",
11
+ },
12
+ {
13
+ accessor: "scheduledMeetings",
14
+ label: "Scheduled Meetings",
15
+ },
16
+ {
17
+ accessor: "attendanceRate",
18
+ label: "Attendance Rate",
19
+ },
20
+ {
21
+ accessor: "completedClasses",
22
+ label: "Completed Classes",
23
+ },
24
+ {
25
+ accessor: "classCompletionRate",
26
+ label: "Class Completion Rate",
27
+ },
28
+ {
29
+ accessor: "graduatedStudents",
30
+ label: "Graduated Students",
31
+ },
32
+ ] %>
33
+
34
+ <%= pb_rails("title", props: { size: 4 }) do %> Not Responsive <% end %>
35
+ <%= pb_rails("advanced_table", props: { id: "table_props_table_non_responsive", table_data: @table_data, column_definitions: column_definitions, responsive: "none" }) %>
36
+
37
+ <%= pb_rails("title", props: { padding_top: "sm", size: 4 }) do %> Responsive as Default <% end %>
38
+ <%= pb_rails("advanced_table", props: { id: "table_props_table_responsive", table_data: @table_data, column_definitions: column_definitions }) %>
@@ -1,10 +1,12 @@
1
1
  examples:
2
2
  rails:
3
3
  - advanced_table_beta: Default (Required Props)
4
+ - advanced_table_loading: Loading State
4
5
  - advanced_table_beta_subrow_headers: SubRow Headers
5
6
  - advanced_table_collapsible_trail_rails: Collapsible Trail
6
7
  - advanced_table_table_props: Table Props
7
8
  - advanced_table_beta_sort: Enable Sorting
9
+ - advanced_table_responsive: Responsive Tables
8
10
  - advanced_table_custom_cell_rails: Custom Components for Cells
9
11
  - advanced_table_column_headers: Multi-Header Columns
10
12
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
@@ -16,6 +16,11 @@ module Playbook
16
16
  default: []
17
17
  prop :collapsible_trail, type: Playbook::Props::Boolean,
18
18
  default: true
19
+ prop :loading, type: Playbook::Props::Boolean,
20
+ default: false
21
+ prop :responsive, type: Playbook::Props::Enum,
22
+ values: %w[none scroll],
23
+ default: "scroll"
19
24
 
20
25
  def flatten_columns(columns)
21
26
  columns.flat_map do |col|
@@ -46,12 +51,12 @@ module Playbook
46
51
  row_parent: "#{id}_#{ancestor_ids.last}",
47
52
  }
48
53
  # Subrow header if applicable
49
- output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
54
+ output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
50
55
 
51
56
  current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
52
57
 
53
58
  # Additional class and data attributes needed for toggle logic
54
- output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
59
+ output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
55
60
 
56
61
  if row[:children].present?
57
62
  row[:children].each do |child_row|
@@ -74,7 +79,16 @@ module Playbook
74
79
  end
75
80
 
76
81
  def classname
77
- generate_classname("pb_advanced_table_body", separator: " ")
82
+ additional_classes = []
83
+ additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
84
+
85
+ generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
86
+ end
87
+
88
+ def pinned_cell_class(index)
89
+ return "pinned-left" if index.zero? && responsive == "scroll"
90
+
91
+ ""
78
92
  end
79
93
 
80
94
  private
@@ -3,17 +3,21 @@
3
3
  <%= pb_rails("table/table_row") do %>
4
4
  <% header_row.each_with_index do |cell, cell_index| %>
5
5
  <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
6
- <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
7
- <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
8
- <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
9
- <button
10
- class="gray-icon toggle-all-icon"
11
- onclick="expandAllRows(this); event.preventDefault();">
12
- <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
13
- </button>
14
- <% end %>
15
- <%= cell[:label] %>
16
- <% end %>
6
+ <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
7
+ <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
8
+ <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
9
+ <% if loading %>
10
+ <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
11
+ <% else %>
12
+ <button
13
+ class="gray-icon toggle-all-icon"
14
+ onclick="expandAllRows(this); event.preventDefault();">
15
+ <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
16
+ </button>
17
+ <% end %>
18
+ <% end %>
19
+ <%= cell[:label] %>
20
+ <% end %>
17
21
  <% end %>
18
22
  <% end %>
19
23
  <% end %>
@@ -8,13 +8,24 @@ module Playbook
8
8
  prop :enable_toggle_expansion, type: Playbook::Props::Enum,
9
9
  values: %w[all header none],
10
10
  default: "header"
11
+ prop :loading, type: Playbook::Props::Boolean,
12
+ default: false
13
+ prop :responsive, type: Playbook::Props::Enum,
14
+ values: %w[none scroll],
15
+ default: "scroll"
11
16
 
12
17
  def classname
13
- generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
18
+ additional_classes = []
19
+ additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
20
+
21
+ generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
14
22
  end
15
23
 
16
- def th_classname
17
- generate_classname("table-header-cells", separator: " ")
24
+ def th_classname(is_first_column: false)
25
+ additional_classes = []
26
+ additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
27
+
28
+ generate_classname("table-header-cells", *additional_classes, separator: " ")
18
29
  end
19
30
 
20
31
  def header_rows
@@ -1,8 +1,8 @@
1
1
  <%= pb_content_tag(:tr) do %>
2
2
  <% object.column_definitions.each_with_index do |column, index| %>
3
3
  <% next unless column[:accessor].present? %>
4
- <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
5
- <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
4
+ <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
5
+ <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
6
6
  <% if collapsible_trail && index.zero? %>
7
7
  <% (1..depth).each do |i| %>
8
8
  <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -13,6 +13,13 @@ module Playbook
13
13
  default: true
14
14
  prop :table_data_attributes, type: Playbook::Props::HashProp,
15
15
  default: {}
16
+ prop :loading, type: Playbook::Props::Boolean,
17
+ default: false
18
+ prop :responsive, type: Playbook::Props::Enum,
19
+ values: %w[none scroll],
20
+ default: "scroll"
21
+ prop :is_pinned_left, type: Playbook::Props::Boolean,
22
+ default: false
16
23
 
17
24
  def data
18
25
  Hash(prop(:data)).merge(table_data_attributes)
@@ -22,9 +29,10 @@ module Playbook
22
29
  generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
23
30
  end
24
31
 
25
- def td_classname(column)
32
+ def td_classname(column, index)
26
33
  classes = %w[id-cell chrome-styles]
27
34
  classes << "last-cell" if column[:is_last_in_group]
35
+ classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
28
36
  classes.join(" ")
29
37
  end
30
38
 
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag(:tr) do %>
2
2
  <% object.column_definitions.each_with_index do |column, index| %>
3
- <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
3
+ <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) do %>
4
4
  <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
5
5
  <% if collapsible_trail && index.zero? %>
6
6
  <% (1..depth).each do |i| %>
@@ -16,6 +16,9 @@ module Playbook
16
16
  default: true
17
17
  prop :subrow_data_attributes, type: Playbook::Props::HashProp,
18
18
  default: {}
19
+ prop :responsive, type: Playbook::Props::Enum,
20
+ values: %w[none scroll],
21
+ default: "scroll"
19
22
 
20
23
  def data
21
24
  Hash(prop(:data)).merge(subrow_data_attributes)
@@ -25,6 +28,12 @@ module Playbook
25
28
  generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
26
29
  end
27
30
 
31
+ def td_classname(index)
32
+ classes = %w[id-cell chrome-styles]
33
+ classes << "pinned-left" if index.zero? && responsive == "scroll"
34
+ classes.join(" ")
35
+ end
36
+
28
37
  private
29
38
 
30
39
  def subrow_depth_classname
@@ -78,4 +78,9 @@ $avatar-sizes: (
78
78
  }
79
79
  }
80
80
  }
81
+ &.dark {
82
+ [class^=pb_card_kit] {
83
+ position: absolute;
84
+ }
85
+ }
81
86
  }
@@ -1,5 +1,24 @@
1
- <%= pb_content_tag(object.tag) do %>
2
- <%= content.presence %>
1
+ <% if object.draggable_item %>
2
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
3
+ <%= pb_content_tag(object.tag) do %>
4
+ <% if object.draggable_item %>
5
+ <%= pb_rails("flex", props: { align: "center" }) do %>
6
+ <% if object.drag_handle %>
7
+ <span classname="card_draggable_handle">
8
+ <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
9
+ </span>
10
+ <% end %>
11
+ <div style="width: 100%">
12
+ <%= content.presence %>
13
+ </div>
14
+ <% end %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+ <% else %>
19
+ <%= pb_content_tag(object.tag) do %>
20
+ <%= content.presence %>
21
+ <% end %>
3
22
  <% end %>
4
23
 
5
24
 
@@ -17,6 +17,13 @@ module Playbook
17
17
  prop :background, type: Playbook::Props::Enum,
18
18
  values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
19
19
  default: "none"
20
+ prop :drag_id, type: Playbook::Props::String
21
+ prop :draggable_item, type: Playbook::Props::Boolean,
22
+ default: false
23
+ prop :drag_handle, type: Playbook::Props::Boolean,
24
+ default: true
25
+ prop :items, type: Playbook::Props::Array,
26
+ default: []
20
27
 
21
28
  def classname
22
29
  generate_classname("pb_card_kit",
@@ -0,0 +1,3 @@
1
+ .pb_copy_button_kit {
2
+
3
+ }
@@ -0,0 +1,92 @@
1
+
2
+ import React, { useState } from 'react'
3
+ import classnames from 'classnames'
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Button from '../pb_button/_button'
8
+ import Tooltip from '../pb_tooltip/_tooltip'
9
+
10
+ type CopyButtonProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ from?: string,
16
+ text?: string,
17
+ tooltipPlacement?: "top" | "right" | "bottom" | "left",
18
+ tooltipText?: string,
19
+ value?: string,
20
+ }
21
+
22
+ const CopyButton = (props: CopyButtonProps) => {
23
+ const {
24
+ aria = {},
25
+ className,
26
+ data = {},
27
+ from = '',
28
+ id,
29
+ text= 'Copy',
30
+ tooltipPlacement= 'bottom',
31
+ tooltipText = 'Copied!',
32
+ value = '',
33
+ } = props
34
+
35
+ const [copied, setCopied] = useState(false)
36
+
37
+ const ariaProps = buildAriaProps(aria)
38
+ const dataProps = buildDataProps(data)
39
+ const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
40
+
41
+ const copy = () => {
42
+ if (!from && !value) {
43
+ return
44
+ }
45
+
46
+ if (value) {
47
+ navigator.clipboard.writeText(value)
48
+ } else if (from) {
49
+ const copyElement = document.getElementById(from);
50
+ let copyText = copyElement?.innerText
51
+
52
+ if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
53
+ copyText = copyElement.value;
54
+ }
55
+
56
+ if (copyText) {
57
+ navigator.clipboard.writeText(copyText)
58
+ }
59
+ }
60
+
61
+ setCopied(true)
62
+
63
+ setTimeout(() => {
64
+ setCopied(false)
65
+ }, 1000);
66
+ }
67
+
68
+ return (
69
+ <div
70
+ {...ariaProps}
71
+ {...dataProps}
72
+ className={classes}
73
+ id={id}
74
+ >
75
+ <Tooltip
76
+ forceOpenTooltip={copied}
77
+ placement={tooltipPlacement}
78
+ showTooltip={false}
79
+ text={tooltipText}
80
+ >
81
+ <Button
82
+ icon='copy'
83
+ onClick={copy}
84
+ >
85
+ { text }
86
+ </Button>
87
+ </Tooltip>
88
+ </div>
89
+ )
90
+ }
91
+
92
+ export default CopyButton
@@ -0,0 +1,64 @@
1
+ import React from 'react';
2
+ import { CopyButton } from 'playbook-ui'
3
+ import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
4
+
5
+ const props = {
6
+ data: { testid: 'default', value: 'copy' }
7
+ }
8
+
9
+ test('returns namespaced class name', () => {
10
+ const kit = renderKit(CopyButton, props)
11
+ expect(kit).toBeInTheDocument()
12
+ expect(kit).toHaveClass('pb_copy_button_kit')
13
+ })
14
+
15
+ it('should be accessible', async () => {
16
+ ensureAccessible(CopyButton, props)
17
+ })
18
+
19
+ // It's difficult to actually use navigator.clipboard.readText, so we mock
20
+ it('copies the value to clipboard and pastes it into an input', async () => {
21
+ Object.defineProperty(global, 'navigator', {
22
+ value: {
23
+ clipboard: {
24
+ writeText: jest.fn().mockResolvedValueOnce(undefined),
25
+ },
26
+ },
27
+ writable: true,
28
+ })
29
+
30
+ render(<CopyButton {...props} />)
31
+
32
+ const copyButton = screen.getByTestId('default')
33
+ fireEvent.click(copyButton)
34
+
35
+ await navigator.clipboard.writeText('copy')
36
+
37
+ expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
38
+ })
39
+
40
+ test('passes text and tooltip props to button', () => {
41
+ render(
42
+ <CopyButton
43
+ data={{ testid: 'text-test' }}
44
+ text={"text"}
45
+ tooltipPlacement="right"
46
+ tooltipText="Text copied!"
47
+ value="copy"
48
+ />
49
+ )
50
+
51
+ const content = screen.getByText("text")
52
+ expect(content).toHaveTextContent("text")
53
+
54
+ const kit = screen.getByTestId('text-test')
55
+ const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
56
+ expect(button).toBeInTheDocument()
57
+
58
+ fireEvent.click(button)
59
+ const tooltipContent = screen.getByText("Text copied!")
60
+ expect(tooltipContent).toHaveTextContent("Text copied!")
61
+
62
+ const tooltip = kit.querySelector('.pb_tooltip_kit')
63
+ expect(tooltip).toBeInTheDocument()
64
+ })
@@ -0,0 +1,21 @@
1
+ import React from 'react'
2
+ import { CopyButton, Textarea } from 'playbook-ui'
3
+
4
+ const CopyButtonDefault = (props) => (
5
+ <div>
6
+ <CopyButton
7
+ {...props}
8
+ text="Copy Text"
9
+ tooltipPlacement="right"
10
+ tooltipText="Text copied!"
11
+ value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
12
+ />
13
+
14
+ <Textarea
15
+ {...props}
16
+ placeholder="Copy and paste here"
17
+ />
18
+ </div>
19
+ )
20
+
21
+ export default CopyButtonDefault
@@ -0,0 +1,45 @@
1
+ import React, { useState } from 'react'
2
+ import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
3
+
4
+ const CopyButtonFrom = (props) => {
5
+ const [text, setText] = useState("Copy this text input text")
6
+
7
+ const handleChange = (event) => {
8
+ setText(event.target.value);
9
+ }
10
+
11
+ return (<div>
12
+ <Body id="body">Copy this body text!</Body>
13
+ <CopyButton
14
+ {...props}
15
+ from="body"
16
+ marginBottom="sm"
17
+ text="Copy Body text"
18
+ tooltipPlacement="right"
19
+ tooltipText="Body text copied!"
20
+ />
21
+
22
+ <TextInput
23
+ {...props}
24
+ id="textinput"
25
+ onChange={handleChange}
26
+ value={text}
27
+ />
28
+ <CopyButton
29
+ {...props}
30
+ from="textinput"
31
+ marginBottom="sm"
32
+ text="Copy Text Input"
33
+ tooltipPlacement="right"
34
+ tooltipText="Text input copied!"
35
+ />
36
+
37
+ <Textarea
38
+ {...props}
39
+ placeholder="Copy and paste here"
40
+ />
41
+ </div>
42
+ )
43
+ }
44
+
45
+ export default CopyButtonFrom