playbook_ui 14.7.0 → 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
  4. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +2 -2
  5. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -4
  6. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +84 -7
  7. data/app/pb_kits/playbook/pb_date/_date.scss +3 -0
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb +42 -0
  10. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +17 -1
  15. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +26 -0
  16. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +7 -0
  17. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +38 -0
  18. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -0
  19. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +19 -0
  20. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -0
  21. data/app/pb_kits/playbook/pb_draggable/draggable.html.erb +3 -0
  22. data/app/pb_kits/playbook/pb_draggable/draggable.rb +18 -0
  23. data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb +3 -0
  24. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +15 -0
  25. data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb +7 -0
  26. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +18 -0
  27. data/app/pb_kits/playbook/pb_draggable/index.js +125 -0
  28. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +88 -175
  29. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +79 -47
  30. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +20 -16
  31. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -0
  32. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +0 -1
  33. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +0 -4
  34. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +13 -2
  35. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  36. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
  37. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +63 -12
  38. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -1
  39. data/app/pb_kits/playbook/pb_table/_table.tsx +103 -24
  40. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +87 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +2 -0
  42. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  43. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -0
  44. data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +4 -0
  45. data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +18 -0
  46. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +43 -1
  47. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +6 -2
  48. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +47 -0
  49. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +59 -0
  50. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +94 -0
  51. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +180 -0
  52. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -0
  53. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +5 -3
  54. data/app/pb_kits/playbook/pb_timeline/docs/index.js +2 -0
  55. data/app/pb_kits/playbook/pb_timeline/timeline.rb +11 -1
  56. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +4 -4
  57. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +3 -0
  58. data/app/pb_kits/playbook/pb_typeahead/index.ts +29 -3
  59. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +5 -2
  60. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
  61. data/app/pb_kits/playbook/tokens/_height.scss +19 -0
  62. data/app/pb_kits/playbook/tokens/exports/_height.module.scss +37 -0
  63. data/app/pb_kits/playbook/utilities/_height.scss +33 -0
  64. data/app/pb_kits/playbook/utilities/_hover.scss +40 -27
  65. data/app/pb_kits/playbook/utilities/_max_width.scss +4 -0
  66. data/app/pb_kits/playbook/utilities/_min_width.scss +1 -1
  67. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  68. data/app/pb_kits/playbook/utilities/globalProps.ts +29 -3
  69. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +79 -0
  70. data/dist/chunks/_typeahead-C8Q_fFYF.js +22 -0
  71. data/dist/chunks/_weekday_stacked-CUJfwh5E.js +45 -0
  72. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  73. data/dist/chunks/{lib-D-mTv-kp.js → lib-SyD3buPZ.js} +1 -1
  74. data/dist/chunks/{pb_form_validation-BkWGwJsl.js → pb_form_validation-Dt8UJgrJ.js} +1 -1
  75. data/dist/chunks/vendor.js +1 -1
  76. data/dist/menu.yml +322 -1
  77. data/dist/playbook-doc.js +1 -1
  78. data/dist/playbook-rails-react-bindings.js +1 -1
  79. data/dist/playbook-rails.js +1 -1
  80. data/dist/playbook.css +1 -1
  81. data/lib/playbook/classnames.rb +3 -0
  82. data/lib/playbook/forms/builder/typeahead_field.rb +13 -0
  83. data/lib/playbook/height.rb +29 -0
  84. data/lib/playbook/hover.rb +1 -1
  85. data/lib/playbook/kit_base.rb +16 -1
  86. data/lib/playbook/max_height.rb +29 -0
  87. data/lib/playbook/min_height.rb +29 -0
  88. data/lib/playbook/version.rb +2 -2
  89. metadata +39 -10
  90. data/dist/chunks/_typeahead-DhLic2Fe.js +0 -22
  91. data/dist/chunks/_weekday_stacked-CHPFjl8J.js +0 -45
  92. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
@@ -3,7 +3,6 @@
3
3
  class: object.classname,
4
4
  data: object.data,
5
5
  id: object.id,
6
- style: object.container_style,
7
6
  **combined_html_options) do %>
8
7
  <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
9
8
  <% if content.present? %>
@@ -7,10 +7,6 @@ module Playbook
7
7
  generate_classname("pb_dropdown_container", "close", separator: " ")
8
8
  end
9
9
 
10
- def container_style
11
- "position: absolute"
12
- end
13
-
14
10
  def data
15
11
  Hash(prop(:data)).merge(dropdown_container: true)
16
12
  end
@@ -18,9 +18,19 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
18
18
  const otherChildren: React.ReactChild[] = [];
19
19
 
20
20
  React.Children.forEach(children, (child) => {
21
- if (child && (child as ReactElement).type === DropdownTrigger) {
21
+ const element = child as ReactElement;
22
+ const childType = element?.type;
23
+ const childDisplayName = (childType as any)?.displayName || (childType as any)?.name;
24
+
25
+ if (
26
+ childType === DropdownTrigger ||
27
+ childDisplayName === "DropdownTrigger"
28
+ ) {
22
29
  trigger = child;
23
- } else if (child && (child as ReactElement).type === DropdownContainer) {
30
+ } else if (
31
+ childType === DropdownContainer ||
32
+ childDisplayName === "DropdownContainer"
33
+ ) {
24
34
  container = child;
25
35
  } else {
26
36
  otherChildren.push(child);
@@ -30,6 +40,7 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
30
40
  return { trigger, container, otherChildren };
31
41
  };
32
42
 
43
+
33
44
  export const prepareSubcomponents = ({
34
45
  children,
35
46
  hasTriggerSubcomponent,
@@ -23,7 +23,7 @@
23
23
  %>
24
24
 
25
25
  <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
26
- <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
26
+ <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
27
27
  <%= form.text_field :example_text_field, props: { label: true } %>
28
28
  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
29
29
  <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
92
92
  const selectedUserData = JSON.parse(selectedUserJSON)
93
93
 
94
94
  // set the input field's value
95
- event.target.querySelector('input[name=example_user]').value = selectedUserData.login
95
+ event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
96
96
 
97
97
  // log the selected option's dataset
98
98
  console.log('The selected user data:')
@@ -1,5 +1,5 @@
1
1
  <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
2
- <%= form.text_field :example_text_field, props: { label: true } %>
2
+ <%= form.text_field :example_text_field_loading, props: { label: true } %>
3
3
 
4
4
  <%= form.actions do |action| %>
5
5
  <%= action.submit %>
@@ -22,23 +22,74 @@
22
22
  %>
23
23
 
24
24
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
25
- <%= form.text_field :example_text_field, props: { label: true, required: true } %>
26
- <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
27
- <%= form.email_field :example_email_field, props: { label: true, required: true } %>
28
- <%= form.number_field :example_number_field, props: { label: true, required: true } %>
29
- <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
30
- <%= form.password_field :example_password_field, props: { label: true, required: true } %>
31
- <%= form.url_field :example_url_field, props: { label: true, required: true } %>
32
- <%= form.text_area :example_text_area, props: { label: true, required: true } %>
33
- <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
34
- <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
35
- <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
25
+ <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
26
+ <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
27
+ <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
28
+ <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
29
+ <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
30
+ <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
31
+ <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
32
+ <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
33
+ <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
34
+ <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
35
+ <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
36
+ <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
36
37
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
37
38
  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
38
- <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
39
+ <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
39
40
 
40
41
  <%= form.actions do |action| %>
41
42
  <%= action.submit %>
42
43
  <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
43
44
  <% end %>
44
45
  <% end %>
46
+
47
+ <!-- form.typeahead user results example template -->
48
+ <template data-typeahead-example-result-option>
49
+ <%= pb_rails("user", props: {
50
+ name: tag(:slot, name: "name"),
51
+ orientation: "horizontal",
52
+ align: "left",
53
+ avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
54
+ avatar: true
55
+ }) %>
56
+ </template>
57
+
58
+ <!-- form.typeahead JS example implementation -->
59
+ <%= javascript_tag defer: "defer" do %>
60
+ document.addEventListener("pb-typeahead-kit-search", function(event) {
61
+ if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
62
+
63
+ fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
64
+ .then(response => response.json())
65
+ .then((result) => {
66
+ const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
67
+
68
+ event.detail.setResults((result.items || []).map((user) => {
69
+ const wrapper = resultOptionTemplate.content.cloneNode(true)
70
+ wrapper.children[0].dataset.user = JSON.stringify(user)
71
+ wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
72
+ wrapper.querySelector('img').dataset.src = user.avatar_url
73
+ return wrapper
74
+ }))
75
+ })
76
+ })
77
+
78
+
79
+ document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
80
+ if (!event.target.dataset.typeaheadExample2) return
81
+
82
+ const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
83
+ const selectedUserData = JSON.parse(selectedUserJSON)
84
+
85
+ // set the input field's value
86
+ event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
87
+
88
+ // log the selected option's dataset
89
+ console.log('The selected user data:')
90
+ console.dir(selectedUserData)
91
+
92
+ // do even more with the data later - TBD
93
+ event.target.dataset.user = selectedUserJSON
94
+ })
95
+ <% end %>
@@ -6,6 +6,7 @@
6
6
  value: "selected_with_icon",
7
7
  checked: true,
8
8
  icon: true,
9
+
9
10
  }) do %>
10
11
  Selected, with icon
11
12
  <% end %>
@@ -36,4 +37,4 @@
36
37
  Disabled
37
38
  <% end %>
38
39
 
39
- </div>
40
+ </div>
@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
4
4
  import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
6
  import {
7
- TableHead,
8
- TableHeader,
9
- TableBody,
10
- TableRow,
11
- TableCell,
7
+ TableHead,
8
+ TableHeader,
9
+ TableBody,
10
+ TableRow,
11
+ TableCell,
12
12
  } from "./subcomponents";
13
13
 
14
14
  type TableProps = {
@@ -28,6 +28,7 @@ type TableProps = {
28
28
  singleLine?: boolean,
29
29
  size?: "sm" | "md" | "lg",
30
30
  sticky?: boolean,
31
+ stickyLeftcolumn?: string[],
31
32
  striped?: boolean,
32
33
  tag?: "table" | "div",
33
34
  verticalBorder?: boolean,
@@ -51,6 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
51
52
  singleLine = false,
52
53
  size = 'sm',
53
54
  sticky = false,
55
+ stickyLeftcolumn = [],
54
56
  striped = false,
55
57
  tag = 'table',
56
58
  verticalBorder = false,
@@ -76,6 +78,7 @@ const Table = (props: TableProps): React.ReactElement => {
76
78
  'single-line': singleLine,
77
79
  'no-hover': disableHover,
78
80
  'sticky-header': sticky,
81
+ 'sticky-left-column': stickyLeftcolumn,
79
82
  'striped': striped,
80
83
  [outerPaddingCss]: outerPadding !== '',
81
84
  },
@@ -85,6 +88,56 @@ const Table = (props: TableProps): React.ReactElement => {
85
88
  className
86
89
  )
87
90
 
91
+ useEffect(() => {
92
+ const handleStickyColumns = () => {
93
+ let accumulatedWidth = 0;
94
+
95
+ stickyLeftcolumn.forEach((colId, index) => {
96
+ const isLastColumn = index === stickyLeftcolumn.length - 1;
97
+ const header = document.querySelector(`th[id="${colId}"]`);
98
+ const cells = document.querySelectorAll(`td[id="${colId}"]`);
99
+
100
+ if (header) {
101
+ header.classList.add('sticky');
102
+ (header as HTMLElement).style.left = `${accumulatedWidth}px`;
103
+
104
+ if (!isLastColumn) {
105
+ header.classList.add('with-border');
106
+ header.classList.remove('sticky-shadow');
107
+ } else {
108
+ header.classList.remove('with-border');
109
+ header.classList.add('sticky-shadow');
110
+ }
111
+
112
+ accumulatedWidth += (header as HTMLElement).offsetWidth;
113
+ }
114
+
115
+ cells.forEach((cell) => {
116
+ cell.classList.add('sticky');
117
+ (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
118
+
119
+ if (!isLastColumn) {
120
+ cell.classList.add('with-border');
121
+ cell.classList.remove('sticky-shadow');
122
+ } else {
123
+ cell.classList.remove('with-border');
124
+ cell.classList.add('sticky-shadow');
125
+ }
126
+ });
127
+ });
128
+ };
129
+
130
+ setTimeout(() => {
131
+ handleStickyColumns();
132
+ }, 10);
133
+
134
+ window.addEventListener('resize', handleStickyColumns);
135
+
136
+ return () => {
137
+ window.removeEventListener('resize', handleStickyColumns);
138
+ };
139
+ }, [stickyLeftcolumn]);
140
+
88
141
  useEffect(() => {
89
142
  const instance = new PbTable()
90
143
  instance.connect()
@@ -92,26 +145,52 @@ const Table = (props: TableProps): React.ReactElement => {
92
145
 
93
146
  return (
94
147
  <>
95
- {isTableTag ? (
96
- <table
97
- {...ariaProps}
98
- {...dataProps}
99
- {...htmlProps}
100
- className={classNames}
101
- id={id}
102
- >
103
- {children}
104
- </table>
105
- ) : (
106
- <div
107
- {...ariaProps}
108
- {...dataProps}
109
- {...htmlProps}
110
- className={classNames}
111
- id={id}
112
- >
113
- {children}
148
+ {responsive === 'scroll' ? (
149
+ <div className='table-responsive-scroll'>
150
+ {isTableTag ? (
151
+ <table
152
+ {...ariaProps}
153
+ {...dataProps}
154
+ {...htmlProps}
155
+ className={classNames}
156
+ id={id}
157
+ >
158
+ {children}
159
+ </table>
160
+ ) : (
161
+ <div
162
+ {...ariaProps}
163
+ {...dataProps}
164
+ {...htmlProps}
165
+ className={classNames}
166
+ id={id}
167
+ >
168
+ {children}
169
+ </div>
170
+ )}
114
171
  </div>
172
+ ) : (
173
+ isTableTag ? (
174
+ <table
175
+ {...ariaProps}
176
+ {...dataProps}
177
+ {...htmlProps}
178
+ className={classNames}
179
+ id={id}
180
+ >
181
+ {children}
182
+ </table>
183
+ ) : (
184
+ <div
185
+ {...ariaProps}
186
+ {...dataProps}
187
+ {...htmlProps}
188
+ className={classNames}
189
+ id={id}
190
+ >
191
+ {children}
192
+ </div>
193
+ )
115
194
  )}
116
195
  </>
117
196
  )
@@ -0,0 +1,87 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableStickyLeftColumns = () => {
5
+ return (
6
+ <Table
7
+ responsive="scroll"
8
+ size="md"
9
+ stickyLeftcolumn={["1", "2", "3"]}
10
+ >
11
+ <thead>
12
+ <tr>
13
+ <th id="1">{'Column 1'}</th>
14
+ <th id="2">{'Column 2'}</th>
15
+ <th id="3">{'Column 3'}</th>
16
+ <th>{'Column 4'}</th>
17
+ <th>{'Column 5'}</th>
18
+ <th>{'Column 6'}</th>
19
+ <th>{'Column 7'}</th>
20
+ <th>{'Column 8'}</th>
21
+ <th>{'Column 9'}</th>
22
+ <th>{'Column 10'}</th>
23
+ <th>{'Column 11'}</th>
24
+ <th>{'Column 12'}</th>
25
+ <th>{'Column 13'}</th>
26
+ <th>{'Column 14'}</th>
27
+ <th>{'Column 15'}</th>
28
+ </tr>
29
+ </thead>
30
+ <tbody>
31
+ <tr>
32
+ <td id="1">{'Value 1'}</td>
33
+ <td id="2">{'Value 2'}</td>
34
+ <td id="3">{'Value 3'}</td>
35
+ <td>{'Value 4'}</td>
36
+ <td>{'Value 5'}</td>
37
+ <td>{'Value 6'}</td>
38
+ <td>{'Value 7'}</td>
39
+ <td>{'Value 8'}</td>
40
+ <td>{'Value 9'}</td>
41
+ <td>{'Value 10'}</td>
42
+ <td>{'Value 11'}</td>
43
+ <td>{'Value 12'}</td>
44
+ <td>{'Value 13'}</td>
45
+ <td>{'Value 14'}</td>
46
+ <td>{'Value 15'}</td>
47
+ </tr>
48
+ <tr>
49
+ <td id="1">{'Value 1'}</td>
50
+ <td id="2">{'Value 2'}</td>
51
+ <td id="3">{'Value 3'}</td>
52
+ <td>{'Value 4'}</td>
53
+ <td>{'Value 5'}</td>
54
+ <td>{'Value 6'}</td>
55
+ <td>{'Value 7'}</td>
56
+ <td>{'Value 8'}</td>
57
+ <td>{'Value 9'}</td>
58
+ <td>{'Value 10'}</td>
59
+ <td>{'Value 11'}</td>
60
+ <td>{'Value 12'}</td>
61
+ <td>{'Value 13'}</td>
62
+ <td>{'Value 14'}</td>
63
+ <td>{'Value 15'}</td>
64
+ </tr>
65
+ <tr>
66
+ <td id="1">{'Value 1'}</td>
67
+ <td id="2">{'Value 2'}</td>
68
+ <td id="3">{'Value 3'}</td>
69
+ <td>{'Value 4'}</td>
70
+ <td>{'Value 5'}</td>
71
+ <td>{'Value 6'}</td>
72
+ <td>{'Value 7'}</td>
73
+ <td>{'Value 8'}</td>
74
+ <td>{'Value 9'}</td>
75
+ <td>{'Value 10'}</td>
76
+ <td>{'Value 11'}</td>
77
+ <td>{'Value 12'}</td>
78
+ <td>{'Value 13'}</td>
79
+ <td>{'Value 14'}</td>
80
+ <td>{'Value 15'}</td>
81
+ </tr>
82
+ </tbody>
83
+ </Table>
84
+ )
85
+ }
86
+
87
+ export default TableStickyLeftColumns
@@ -0,0 +1,2 @@
1
+ The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
+ If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
25
25
  export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
26
26
  export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
27
27
  export { default as TableOuterPadding } from './_table_outer_padding.jsx'
28
+ export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
@@ -20,3 +20,5 @@
20
20
  @import "table_header";
21
21
  @import "striped";
22
22
  @import "outer_padding";
23
+ @import "sticky_columns";
24
+ @import "scroll";
@@ -0,0 +1,4 @@
1
+ .table-responsive-scroll {
2
+ display: block;
3
+ overflow-x: auto;
4
+ }
@@ -0,0 +1,18 @@
1
+ @import "../../tokens/colors";
2
+
3
+ [class^="pb_table"] {
4
+ .sticky {
5
+ position: sticky !important;
6
+ left: 0;
7
+ z-index: 1;
8
+ background-color: white;
9
+ }
10
+
11
+ .with-border {
12
+ border-right: 1px solid $border_light !important;
13
+ }
14
+
15
+ .sticky-shadow {
16
+ box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
17
+ }
18
+ }
@@ -8,6 +8,12 @@ $icon_margin: $space_xs/2;
8
8
  $icon_height: 28px;
9
9
  $height_from_top: $icon_height/2 - $connector_width/2;
10
10
 
11
+ // Add gap variables
12
+ $gap_xs: $height_from_top + $space_xs;
13
+ $gap_sm: $height_from_top + $space_sm;
14
+ $gap_md: $height_from_top + $space_md;
15
+ $gap_lg: $height_from_top + $space_lg;
16
+
11
17
  @mixin pb_timeline_line_solid($width, $height, $margin) {
12
18
  width: $width;
13
19
  height: $height;
@@ -156,7 +162,7 @@ $height_from_top: $icon_height/2 - $connector_width/2;
156
162
  }
157
163
  }
158
164
  }
159
- }
165
+ }
160
166
  }
161
167
  }
162
168
  &[class*=_vertical] {
@@ -266,5 +272,41 @@ $height_from_top: $icon_height/2 - $connector_width/2;
266
272
  }
267
273
  }
268
274
  }
275
+ &[class*=_gap_xs] {
276
+ [class*=pb_timeline_item_kit] {
277
+ [class=pb_timeline_item_step] {
278
+ [class=pb_timeline_item_connector] {
279
+ height: $gap_xs !important;
280
+ }
281
+ }
282
+ }
283
+ }
284
+ &[class*=_gap_sm] {
285
+ [class*=pb_timeline_item_kit] {
286
+ [class=pb_timeline_item_step] {
287
+ [class=pb_timeline_item_connector] {
288
+ height: $gap_sm !important;
289
+ }
290
+ }
291
+ }
292
+ }
293
+ &[class*=_gap_md] {
294
+ [class*=pb_timeline_item_kit] {
295
+ [class=pb_timeline_item_step] {
296
+ [class=pb_timeline_item_connector] {
297
+ height: $gap_md !important;
298
+ }
299
+ }
300
+ }
301
+ }
302
+ &[class*=_gap_lg] {
303
+ [class*=pb_timeline_item_kit] {
304
+ [class=pb_timeline_item_step] {
305
+ [class=pb_timeline_item_connector] {
306
+ height: $gap_lg !important;
307
+ }
308
+ }
309
+ }
310
+ }
269
311
  }
270
312
  }
@@ -20,6 +20,7 @@ type TimelineProps = {
20
20
  id?: string,
21
21
  orientation?: string,
22
22
  showDate?: boolean,
23
+ gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
23
24
  } & GlobalProps
24
25
 
25
26
  const Timeline = ({
@@ -31,13 +32,16 @@ const Timeline = ({
31
32
  id,
32
33
  orientation = 'horizontal',
33
34
  showDate = false,
35
+ gap = 'none',
34
36
  ...props
35
37
  }: TimelineProps): React.ReactElement => {
36
38
  const ariaProps = buildAriaProps(aria)
37
39
  const dataProps = buildDataProps(data)
38
40
  const htmlProps = buildHtmlProps(htmlOptions)
39
41
  const dateStyle = showDate === true ? '_with_date' : ''
40
- const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
42
+ const gapStyle = gap === 'none' ? '' : `gap_${gap}`
43
+ const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
44
+
41
45
  return (
42
46
  <div
43
47
  {...ariaProps}
@@ -56,4 +60,4 @@ Timeline.Step = TimelineStep
56
60
  Timeline.Label = TimelineLabel
57
61
  Timeline.Detail = TimelineDetail
58
62
 
59
- export default Timeline
63
+ export default Timeline
@@ -41,3 +41,50 @@
41
41
  }) %>
42
42
  <% end %>
43
43
  <% end %>
44
+
45
+ <br /><br /><br />
46
+
47
+ <%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
48
+ <%= pb_rails("timeline/item") do |item| %>
49
+
50
+ <% item.label do %>
51
+ <%= pb_rails("timeline/label") do %>
52
+ <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
53
+ <% end %>
54
+ <% end %>
55
+
56
+ <% item.step do %>
57
+ <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
58
+ <% end %>
59
+
60
+ <% item.detail do %>
61
+ <%= pb_rails("title_detail", props: {
62
+ title: "Jackson Heights",
63
+ detail: "37-27 74th Street"
64
+ }) %>
65
+ <% end %>
66
+ <% end %>
67
+
68
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
69
+ <%= pb_rails("title_detail", props: {
70
+ title: "Society Hill",
71
+ detail: "72 E St Astoria"
72
+ }) %>
73
+ <% end %>
74
+
75
+ <%= pb_rails("timeline/item") do |item| %>
76
+
77
+ <% item.step do %>
78
+ <%= pb_rails("timeline/step") do %>
79
+ <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
80
+ <% end %>
81
+ <% end %>
82
+
83
+ <% item.detail do %>
84
+ <%= pb_rails("title_detail", props: {
85
+ title: "Greenpoint",
86
+ detail: "81 Gate St Brooklyn"
87
+ }) %>
88
+ <% end %>
89
+ <% end %>
90
+ <% end %>