playbook_ui 14.9.0.pre.alpha.PLAY16264952 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +17 -61
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +3 -5
  6. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +2 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +49 -53
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +36 -29
  9. data/app/pb_kits/playbook/pb_body/_body.scss +13 -14
  10. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +16 -22
  11. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +0 -6
  12. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -2
  13. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  14. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +26 -33
  15. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +6 -7
  16. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  17. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +4 -9
  18. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  19. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +5 -0
  21. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +10 -0
  22. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
  23. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +0 -5
  24. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +2 -7
  25. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -8
  26. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
  27. data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
  28. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +1 -11
  29. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +2 -16
  30. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  31. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +2 -2
  32. data/app/pb_kits/playbook/pb_select/_select.tsx +14 -20
  33. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -1
  34. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
  35. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  36. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  37. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +36 -44
  38. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  39. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
  40. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -5
  41. data/app/pb_kits/playbook/pb_table/index.ts +26 -100
  42. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -2
  43. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -106
  44. data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
  45. data/app/pb_kits/playbook/pb_table/table.rb +2 -17
  46. data/app/pb_kits/playbook/pb_title/_title.scss +5 -6
  47. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +0 -13
  48. data/app/pb_kits/playbook/tokens/_titles.scss +8 -0
  49. data/app/pb_kits/playbook/utilities/_hover.scss +2 -11
  50. data/app/pb_kits/playbook/utilities/globalProps.ts +0 -2
  51. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +0 -15
  52. data/dist/chunks/_typeahead-DU1QgR52.js +22 -0
  53. data/dist/chunks/_weekday_stacked-BLOmRNnB.js +45 -0
  54. data/dist/chunks/lib-Ce7MLbJk.js +29 -0
  55. data/dist/chunks/{pb_form_validation-D37k10a0.js → pb_form_validation-kPWA1Z2g.js} +1 -1
  56. data/dist/chunks/vendor.js +1 -1
  57. data/dist/menu.yml +1 -1
  58. data/dist/playbook-doc.js +1 -1
  59. data/dist/playbook-rails-react-bindings.js +1 -1
  60. data/dist/playbook-rails.js +1 -1
  61. data/dist/playbook.css +1 -1
  62. data/lib/playbook/hover.rb +1 -7
  63. data/lib/playbook/version.rb +1 -1
  64. metadata +6 -27
  65. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +0 -50
  66. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md +0 -1
  67. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +0 -57
  68. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +0 -5
  69. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json +0 -5600
  70. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.jsx +0 -138
  71. data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx +0 -109
  72. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
  73. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +0 -75
  74. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +0 -1
  75. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +0 -108
  76. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +0 -2
  77. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +0 -94
  78. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +0 -83
  80. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +0 -3
  81. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +0 -120
  82. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +0 -1
  83. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +0 -35
  84. data/app/pb_kits/playbook/utilities/hookFormProps.ts +0 -22
  85. data/app/pb_kits/playbook/utilities/withReactHookForm.tsx +0 -64
  86. data/dist/chunks/_typeahead-BqHgiHoJ.js +0 -22
  87. data/dist/chunks/_weekday_stacked-BAk0aNPW.js +0 -45
  88. data/dist/chunks/lib-CuCy3_xO.js +0 -29
data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.jsx DELETED
@@ -1,138 +0,0 @@
1
- import React from "react"
2
- import { useForm } from "react-hook-form"
3
- import { Checkbox, Card, Body, Button } from "playbook-ui"
4
-
5
- const CheckboxForm = () => {
6
- const {
7
- register,
8
- handleSubmit,
9
- formState: { errors },
10
- watch,
11
- } = useForm({
12
- defaultValues: {
13
- termsAccepted: false,
14
- newsletter: false,
15
- interests: [],
16
- preferences: {
17
- emailUpdates: false,
18
- smsUpdates: false,
19
- pushNotifications: false,
20
- },
21
- },
22
- })
23
-
24
- const onSubmit = (data) => {
25
- console.log("Form submitted:", data)
26
- }
27
-
28
- const formValues = watch()
29
-
30
- return (
31
- <div>
32
- <Card padding='md'>
33
- <form onSubmit={handleSubmit(onSubmit)}>
34
- <div>
35
- <Body marginBottom='xs'
36
- text='Terms and Conditions'
37
- />
38
- <Checkbox
39
- error={errors.termsAccepted?.message}
40
- name='termsAccepted'
41
- register={register}
42
- rules={{
43
- required: "You must accept the terms and conditions",
44
- }}
45
- text='I accept the terms and conditions'
46
- />
47
- </div>
48
- <div className='mt-4'>
49
- <Body marginBottom='xs'
50
- text='Newsletter Subscription'
51
- />
52
- <Checkbox
53
- name='newsletter'
54
- register={register}
55
- text='Subscribe to our newsletter'
56
- />
57
- </div>
58
- <div className='mt-4'>
59
- <Body marginBottom='xs'
60
- text='Your Interests'
61
- />
62
- <Checkbox
63
- error={errors.interests?.message}
64
- name='interests'
65
- register={register}
66
- rules={{
67
- validate: (value) => {
68
- const selectedInterests = Object.values(value).filter(Boolean)
69
- return (
70
- selectedInterests.length >= 1 ||
71
- "Please select at least one interest"
72
- )
73
- },
74
- }}
75
- text='Technology'
76
- value='technology'
77
- />
78
- <Checkbox
79
- name='interests'
80
- register={register}
81
- text='Design'
82
- value='design'
83
- />
84
- <Checkbox
85
- name='interests'
86
- register={register}
87
- text='Business'
88
- value='business'
89
- />
90
- <Checkbox
91
- name='interests'
92
- register={register}
93
- text='Marketing'
94
- value='marketing'
95
- />
96
- </div>
97
- <div className='mt-4'>
98
- <Body marginBottom='xs'
99
- text='Communication Preferences'
100
- />
101
- <Checkbox
102
- name='preferences.emailUpdates'
103
- register={register}
104
- text='Email Updates'
105
- />
106
- <Checkbox
107
- name='preferences.smsUpdates'
108
- register={register}
109
- text='SMS Updates'
110
- />
111
- <Checkbox
112
- name='preferences.pushNotifications'
113
- register={register}
114
- text='Push Notifications'
115
- />
116
- </div>
117
- <Button
118
- htmlType="submit"
119
- marginTop='lg'
120
- text='Submit'
121
- type='submit'
122
- variant='primary'
123
- />
124
- </form>
125
- <Card marginTop='lg'>
126
- <Body text='Current Form Values:'
127
- variant='bold'
128
- />
129
- <pre style={{ marginTop: "8px", color: "white" }}>
130
- {JSON.stringify(formValues, null, 2)}
131
- </pre>
132
- </Card>
133
- </Card>
134
- </div>
135
- )
136
- }
137
-
138
- export default CheckboxForm
data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx DELETED
@@ -1,109 +0,0 @@
1
- import React from 'react'
2
- import { useForm } from 'react-hook-form'
3
- import { Select, Card, Body, Button } from 'playbook-ui'
4
-
5
- const SelectForm = (props) => {
6
- const {
7
- register,
8
- handleSubmit,
9
- formState: { errors },
10
- watch,
11
- } = useForm({
12
- defaultValues: {
13
- favoriteFood: '',
14
- mealType: '',
15
- dietaryRestrictions: '',
16
- }
17
- })
18
-
19
- const onSubmit = (data) => {
20
- console.log('Form submitted:', data)
21
- }
22
-
23
- // Watch form values for real-time display
24
- const formValues = watch()
25
-
26
- const foodOptions = [
27
- { value: 'pizza', text: 'Pizza' },
28
- { value: 'burger', text: 'Burger' },
29
- { value: 'sushi', text: 'Sushi' },
30
- { value: 'salad', text: 'Salad' },
31
- ]
32
-
33
- const mealTypes = [
34
- { value: 'breakfast', text: 'Breakfast' },
35
- { value: 'lunch', text: 'Lunch' },
36
- { value: 'dinner', text: 'Dinner' },
37
- ]
38
-
39
- const dietaryOptions = [
40
- { value: 'none', text: 'No Restrictions' },
41
- { value: 'vegetarian', text: 'Vegetarian' },
42
- { value: 'vegan', text: 'Vegan' },
43
- { value: 'glutenFree', text: 'Gluten Free' },
44
- ]
45
-
46
- return (
47
- <div>
48
- <Card>
49
- <form onSubmit={handleSubmit(onSubmit)}>
50
- <Select
51
- error={errors.favoriteFood?.message}
52
- label="What's your favorite food?"
53
- name="favoriteFood"
54
- options={foodOptions}
55
- register={register}
56
- rules={{
57
- required: 'Please select your favorite food',
58
- }}
59
- {...props}
60
- />
61
- <Select
62
- blankSelection="Choose a meal type..."
63
- error={errors.mealType?.message}
64
- label="Preferred meal time"
65
- marginTop="md"
66
- name="mealType"
67
- options={mealTypes}
68
- register={register}
69
- rules={{
70
- required: 'Please select a meal type',
71
- }}
72
- {...props}
73
- />
74
- <Select
75
- label="Dietary Restrictions"
76
- marginTop="md"
77
- name="dietaryRestrictions"
78
- options={dietaryOptions}
79
- register={register}
80
- {...props}
81
- />
82
-
83
- <Button
84
- htmlType="submit"
85
- marginTop="lg"
86
- text="Submit"
87
- type="submit"
88
- variant="primary"
89
-
90
- />
91
- </form>
92
- <Card marginTop="lg">
93
- <Body
94
- text="Current Form Values:"
95
- variant="bold"
96
- />
97
- <pre style={{ marginTop: '8px', color: "white" }}>
98
- {JSON.stringify(formValues, null, 2)}
99
- </pre>
100
- </Card>
101
- </Card>
102
- </div>
103
- )
104
- }
105
-
106
- export default SelectForm
107
-
108
-
109
-
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb DELETED
@@ -1,95 +0,0 @@
1
- <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
2
- <thead>
3
- <tr>
4
- <th id="1">Column 1</th>
5
- <th id="2">Column 2</th>
6
- <th id="3">Column 3</th>
7
- <th>Column 4</th>
8
- <th>Column 5</th>
9
- <th>Column 6</th>
10
- <th>Column 7</th>
11
- <th>Column 8</th>
12
- <th>Column 9</th>
13
- <th>Column 10</th>
14
- <th>Column 11</th>
15
- <th>Column 12</th>
16
- <th>Column 13</th>
17
- <th>Column 14</th>
18
- <th>Column 15</th>
19
- </tr>
20
- </thead>
21
- <tbody>
22
- <tr>
23
- <td id="1">Value 1</td>
24
- <td id="2">Value 2</td>
25
- <td id="3">Value 3</td>
26
- <td>Value 4</td>
27
- <td>Value 5</td>
28
- <td>Column 6</td>
29
- <td>Column 7</td>
30
- <td>Column 8</td>
31
- <td>Column 9</td>
32
- <td>Column 10</td>
33
- <td>Column 11</td>
34
- <td>Column 12</td>
35
- <td>Column 13</td>
36
- <td>Column 14</td>
37
- <td>Column 15</td>
38
-
39
- </tr>
40
- <tr>
41
- <td id="1">Value 1</td>
42
- <td id="2">Value 2</td>
43
- <td id="3">Value 3</td>
44
- <td>Value 4</td>
45
- <td>Value 5</td>
46
- <td>Column 6</td>
47
- <td>Column 7</td>
48
- <td>Column 8</td>
49
- <td>Column 9</td>
50
- <td>Column 10</td>
51
- <td>Column 11</td>
52
- <td>Column 12</td>
53
- <td>Column 13</td>
54
- <td>Column 14</td>
55
- <td>Column 15</td>
56
-
57
- </tr>
58
- <tr>
59
- <td id="1">Value 1</td>
60
- <td id="2">Value 2</td>
61
- <td id="3">Value 3</td>
62
- <td>Value 4</td>
63
- <td>Value 5</td>
64
- <td>Column 6</td>
65
- <td>Column 7</td>
66
- <td>Column 8</td>
67
- <td>Column 9</td>
68
- <td>Column 10</td>
69
- <td>Column 11</td>
70
- <td>Column 12</td>
71
- <td>Column 13</td>
72
- <td>Column 14</td>
73
- <td>Column 15</td>
74
-
75
- </tr>
76
- <tr>
77
- <td id="1">Value 1</td>
78
- <td id="2">Value 2</td>
79
- <td id="3">Value 3</td>
80
- <td>Value 4</td>
81
- <td>Value 5</td>
82
- <td>Column 6</td>
83
- <td>Column 7</td>
84
- <td>Column 8</td>
85
- <td>Column 9</td>
86
- <td>Column 10</td>
87
- <td>Column 11</td>
88
- <td>Column 12</td>
89
- <td>Column 13</td>
90
- <td>Column 14</td>
91
- <td>Column 15</td>
92
-
93
- </tr>
94
- </tbody>
95
- <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx DELETED
@@ -1,75 +0,0 @@
1
- import React from 'react'
2
- import { Table, Icon, Body, Card } from 'playbook-ui'
3
-
4
- const TableWithCollapsible = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Card
9
- borderNone
10
- borderRadius="none"
11
- padding="md"
12
- {...props}
13
- >
14
- <Body {...props}>Nested content inside a Table Row</Body>
15
- </Card>
16
- );
17
- };
18
-
19
- return (
20
- <Table
21
- size="sm"
22
- {...props}
23
- >
24
- <Table.Head>
25
- <Table.Row>
26
- <Table.Header>{'Column 1'}</Table.Header>
27
- <Table.Header>{'Column 2'}</Table.Header>
28
- <Table.Header>{'Column 3'}</Table.Header>
29
- <Table.Header>{'Column 4'}</Table.Header>
30
- <Table.Header>{'Column 5'}</Table.Header>
31
- <Table.Header>{''}</Table.Header>
32
- </Table.Row>
33
-
34
- </Table.Head>
35
- <Table.Body>
36
- <Table.Row collapsible
37
- collapsibleContent={<Content/>}
38
- {...props}
39
- >
40
- <Table.Cell>{'Value 1'}</Table.Cell>
41
- <Table.Cell>{'Value 2'}</Table.Cell>
42
- <Table.Cell>{'Value 3'}</Table.Cell>
43
- <Table.Cell>{'Value 4'}</Table.Cell>
44
- <Table.Cell>{'Value 5'}</Table.Cell>
45
- <Table.Cell textAlign="right">{
46
- <Icon
47
- color="primary"
48
- fixedWidth
49
- icon="chevron-down"
50
- />}
51
- </Table.Cell>
52
-
53
- </Table.Row>
54
- <Table.Row>
55
- <Table.Cell>{'Value 1'}</Table.Cell>
56
- <Table.Cell>{'Value 2'}</Table.Cell>
57
- <Table.Cell>{'Value 3'}</Table.Cell>
58
- <Table.Cell>{'Value 4'}</Table.Cell>
59
- <Table.Cell>{'Value 5'}</Table.Cell>
60
- <Table.Cell>{''}</Table.Cell>
61
- </Table.Row>
62
- <Table.Row>
63
- <Table.Cell>{'Value 1'}</Table.Cell>
64
- <Table.Cell>{'Value 2'}</Table.Cell>
65
- <Table.Cell>{'Value 3'}</Table.Cell>
66
- <Table.Cell>{'Value 4'}</Table.Cell>
67
- <Table.Cell>{'Value 5'}</Table.Cell>
68
- <Table.Cell>{''}</Table.Cell>
69
- </Table.Row>
70
- </Table.Body>
71
- </Table>
72
- )
73
- }
74
-
75
- export default TableWithCollapsible
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md DELETED
@@ -1 +0,0 @@
1
- The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx DELETED
@@ -1,108 +0,0 @@
1
- import React from 'react'
2
- import { Table, Card, Icon, Body } from 'playbook-ui'
3
-
4
- const TableWithCollapsibleWithCustomClick = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Card
9
- borderNone
10
- borderRadius="none"
11
- padding="md"
12
- {...props}
13
- >
14
- <Body {...props}>Nested content inside a Table Row</Body>
15
- </Card>
16
- );
17
- };
18
-
19
-
20
- return (
21
- <Table
22
- size="sm"
23
- {...props}
24
- >
25
- <Table.Head>
26
- <Table.Row>
27
- <Table.Header>{'Column 1'}</Table.Header>
28
- <Table.Header>{'Column 2'}</Table.Header>
29
- <Table.Header>{'Column 3'}</Table.Header>
30
- <Table.Header>{'Column 4'}</Table.Header>
31
- <Table.Header>{'Column 5'}</Table.Header>
32
- <Table.Header>{''}</Table.Header>
33
- </Table.Row>
34
-
35
- </Table.Head>
36
- <Table.Body>
37
- <Table.Row collapsible
38
- collapsibleContent={<Content/>}
39
- toggleCellId="cell-1"
40
- {...props}
41
- >
42
- <Table.Cell>{'Value 1'}</Table.Cell>
43
- <Table.Cell>{'Value 2'}</Table.Cell>
44
- <Table.Cell>{'Value 3'}</Table.Cell>
45
- <Table.Cell>{'Value 4'}</Table.Cell>
46
- <Table.Cell>{'Value 5'}</Table.Cell>
47
- <Table.Cell cursor="pointer"
48
- id="cell-1"
49
- textAlign="right"
50
- >
51
- <Icon
52
- color="primary"
53
- fixedWidth
54
- icon="chevron-down"
55
- />
56
- </Table.Cell>
57
-
58
- </Table.Row>
59
- <Table.Row collapsible
60
- collapsibleContent={<Content/>}
61
- toggleCellId="cell-2"
62
- {...props}
63
- >
64
- <Table.Cell>{'Value 1'}</Table.Cell>
65
- <Table.Cell>{'Value 2'}</Table.Cell>
66
- <Table.Cell>{'Value 3'}</Table.Cell>
67
- <Table.Cell>{'Value 4'}</Table.Cell>
68
- <Table.Cell>{'Value 5'}</Table.Cell>
69
- <Table.Cell cursor="pointer"
70
- id="cell-2"
71
- textAlign="right"
72
- >
73
- <Icon
74
- color="primary"
75
- fixedWidth
76
- icon="chevron-down"
77
- />
78
- </Table.Cell>
79
-
80
- </Table.Row>
81
- <Table.Row collapsible
82
- collapsibleContent={<Content/>}
83
- toggleCellId="cell-3"
84
- {...props}
85
- >
86
- <Table.Cell>{'Value 1'}</Table.Cell>
87
- <Table.Cell>{'Value 2'}</Table.Cell>
88
- <Table.Cell>{'Value 3'}</Table.Cell>
89
- <Table.Cell>{'Value 4'}</Table.Cell>
90
- <Table.Cell>{'Value 5'}</Table.Cell>
91
- <Table.Cell cursor="pointer"
92
- id="cell-3"
93
- textAlign="right"
94
- >
95
- <Icon
96
- color="primary"
97
- fixedWidth
98
- icon="chevron-down"
99
- />
100
- </Table.Cell>
101
-
102
- </Table.Row>
103
- </Table.Body>
104
- </Table>
105
- )
106
- }
107
-
108
- export default TableWithCollapsibleWithCustomClick
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md DELETED
@@ -1,2 +0,0 @@
1
- When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
2
- __NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx DELETED
@@ -1,94 +0,0 @@
1
- import React from 'react'
2
- import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
3
-
4
- const TableWithCollapsibleWithCustomContent = (props) => {
5
-
6
- const Content = () => {
7
- return (
8
- <Card
9
- borderNone
10
- borderRadius="none"
11
- color="light"
12
- paddingX="xl"
13
- paddingY="md"
14
- {...props}
15
- >
16
- <Body paddingBottom="sm"
17
- text="Expanded Custom Layout"
18
- {...props}
19
- />
20
- <Flex justify="between">
21
- <Image
22
- url="https://via.placeholder.com/150"
23
- />
24
- <Image
25
- url="https://via.placeholder.com/150"
26
- />
27
- <Image
28
- url="https://via.placeholder.com/150"
29
- />
30
- <Image
31
- url="https://via.placeholder.com/150"
32
- />
33
- </Flex>
34
- </Card>
35
- );
36
- };
37
-
38
- return (
39
- <Table
40
- size="sm"
41
- {...props}
42
- >
43
- <Table.Head>
44
- <Table.Row>
45
- <Table.Header>{'Column 1'}</Table.Header>
46
- <Table.Header>{'Column 2'}</Table.Header>
47
- <Table.Header>{'Column 3'}</Table.Header>
48
- <Table.Header>{'Column 4'}</Table.Header>
49
- <Table.Header>{'Column 5'}</Table.Header>
50
- <Table.Header>{''}</Table.Header>
51
- </Table.Row>
52
-
53
- </Table.Head>
54
- <Table.Body>
55
- <Table.Row collapsible
56
- collapsibleContent={<Content/>}
57
- {...props}
58
- >
59
- <Table.Cell>{'Value 1'}</Table.Cell>
60
- <Table.Cell>{'Value 2'}</Table.Cell>
61
- <Table.Cell>{'Value 3'}</Table.Cell>
62
- <Table.Cell>{'Value 4'}</Table.Cell>
63
- <Table.Cell>{'Value 5'}</Table.Cell>
64
- <Table.Cell textAlign="right">{
65
- <Icon
66
- color="primary"
67
- fixedWidth
68
- icon="chevron-down"
69
- />}
70
- </Table.Cell>
71
-
72
- </Table.Row>
73
- <Table.Row>
74
- <Table.Cell>{'Value 1'}</Table.Cell>
75
- <Table.Cell>{'Value 2'}</Table.Cell>
76
- <Table.Cell>{'Value 3'}</Table.Cell>
77
- <Table.Cell>{'Value 4'}</Table.Cell>
78
- <Table.Cell>{'Value 5'}</Table.Cell>
79
- <Table.Cell>{''}</Table.Cell>
80
- </Table.Row>
81
- <Table.Row>
82
- <Table.Cell>{'Value 1'}</Table.Cell>
83
- <Table.Cell>{'Value 2'}</Table.Cell>
84
- <Table.Cell>{'Value 3'}</Table.Cell>
85
- <Table.Cell>{'Value 4'}</Table.Cell>
86
- <Table.Cell>{'Value 5'}</Table.Cell>
87
- <Table.Cell>{''}</Table.Cell>
88
- </Table.Row>
89
- </Table.Body>
90
- </Table>
91
- )
92
- }
93
-
94
- export default TableWithCollapsibleWithCustomContent