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

Sign up to get free protection for your applications and to get access to all the features.
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