playbook_ui 13.33.1 → 13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366

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 (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +5 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +25 -20
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +55 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +82 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  11. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
  12. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
  13. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
  14. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -6
  15. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
  16. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
  17. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +1 -1
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +31 -32
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +3 -2
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +33 -32
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +3 -7
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -0
  24. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +9 -0
  25. data/app/pb_kits/playbook/pb_contact/_contact.tsx +25 -19
  26. data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -3
  27. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +71 -64
  28. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
  29. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
  30. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +1 -6
  31. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -5
  32. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -6
  33. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -3
  34. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +1 -1
  35. data/app/pb_kits/playbook/pb_dropdown/index.js +37 -31
  36. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
  37. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +4 -0
  38. data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +11 -0
  39. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +52 -17
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb +5 -0
  41. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx +19 -0
  42. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -1
  43. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -1
  44. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +16 -9
  45. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +6 -1
  46. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
  47. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
  48. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
  49. data/app/pb_kits/playbook/pb_icon/_icon.scss +17 -0
  50. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
  51. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +5 -0
  52. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +34 -0
  53. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -0
  54. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
  55. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  56. data/app/pb_kits/playbook/pb_icon/icon.rb +9 -1
  57. data/app/pb_kits/playbook/pb_icon/icon.test.js +22 -9
  58. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +132 -201
  59. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +28 -33
  60. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx +14 -0
  61. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +2 -0
  62. data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +81 -0
  63. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +56 -0
  64. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +64 -0
  65. data/dist/playbook-rails.js +6 -6
  66. data/lib/playbook/version.rb +2 -2
  67. metadata +15 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e1c022847164064a888eae5ec0664e37bf3bfa352884159303d093fa8cfe6d5e
4
- data.tar.gz: 04f74d04da0122d153510b4b44268be3d4c22c70a6ddb539be0ce483ba0fd4ac
3
+ metadata.gz: 97b32cfbfaf4288ac7b09b0faad73e010da664c53e39cec72f3a70414ae31f08
4
+ data.tar.gz: 42569b6c2e25459fa22168ceaed1a9b44cacc8a85cf2bce3b5c26a4008b9de58
5
5
  SHA512:
6
- metadata.gz: f65e1607e01a68c4fc7246cfd325699398931b4e6a42ac859a49a6d763f8efdd9c422e397926aac968c028f8ad77f338cb0028df2c007162d43bde076bfc6f34
7
- data.tar.gz: 847a1fb9bccb3dbbaca66cfe8a9d5e9f40cb81b5db45b4c0a4374d5f25b52267afc5402248820ecea28775ef2e8e42bc1aa9e28bfc1497f00187af22006a2569
6
+ metadata.gz: 28bdf6df2dd0a3ffe9047e7188078491b28f5a241a9ebc0bcc71f8c55e68f283ee747aed2abd1cb505dc5b00203b967ef53d574e5c552d947502177a6f2c0f2c
7
+ data.tar.gz: d314a2e7f654cd0c64fd9dca3b7a4215246af2dc8934c972064f42d02eae1eeabccacd6e01f4b81cdf9be06e22a338043fdedf2703a60139f150aa0d0832965a
@@ -21,6 +21,7 @@ type TableHeaderCellProps = {
21
21
  handleExpandOrCollapse?: () => void
22
22
  header?: Header<GenericObject, unknown>
23
23
  headerChildren?: React.ReactNode | React.ReactNode[]
24
+ isPinnedLeft?: boolean
24
25
  loading?: boolean
25
26
  sortIcon?: string | string[]
26
27
  } & GlobalProps
@@ -31,10 +32,11 @@ export const TableHeaderCell = ({
31
32
  handleExpandOrCollapse,
32
33
  header,
33
34
  headerChildren,
35
+ isPinnedLeft = false,
34
36
  loading,
35
37
  sortIcon,
36
38
  }: TableHeaderCellProps) => {
37
- const { sortControl } = useContext(AdvancedTableContext)
39
+ const { sortControl, responsive } = useContext(AdvancedTableContext)
38
40
 
39
41
  const toggleSortButton = (event: React.SyntheticEvent) => {
40
42
  if (sortControl) {
@@ -49,7 +51,8 @@ export const TableHeaderCell = ({
49
51
 
50
52
  const cellClassName = classnames("table-header-cells",
51
53
  `${isChrome() ? "chrome-styles" : ""}`,
52
- `${enableSorting ? "table-header-cells-active" : ""}`
54
+ `${enableSorting ? "table-header-cells-active" : ""}`,
55
+ { 'pinned-left': responsive === "scroll" && isPinnedLeft },
53
56
  )
54
57
 
55
58
  const cellId = `${loading ?
@@ -20,6 +20,7 @@ type TableBodyProps = {
20
20
  className?: string
21
21
  collapsibleTrail?: boolean
22
22
  dark?: boolean
23
+ isPinnedLeft?: boolean,
23
24
  id?: string
24
25
  subRowHeaders?: string[]
25
26
  }
@@ -37,17 +38,22 @@ export const TableBody = ({
37
38
  columnDefinitions,
38
39
  enableToggleExpansion,
39
40
  handleExpandOrCollapse,
41
+ isPinnedLeft = false,
40
42
  inlineRowLoading,
41
43
  loading,
44
+ responsive,
42
45
  table,
43
46
  } = useContext(AdvancedTableContext)
44
47
 
45
48
  const classes = classnames(
46
49
  buildCss("pb_advanced_table_body"),
50
+ { 'pinned-left': responsive === "scroll" && isPinnedLeft },
47
51
  globalProps(props),
48
52
  className
49
53
  )
50
54
 
55
+ const columnPinning = table.getState().columnPinning;
56
+
51
57
  return (
52
58
  <>
53
59
  <tbody className={classes}
@@ -73,38 +79,37 @@ export const TableBody = ({
73
79
  table={table}
74
80
  />
75
81
  )}
82
+ <tr
83
+ className={`${rowBackground ? "bg-silver" : "bg-white"} ${
84
+ row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
85
+ }`}
86
+ id={`${row.index}-${row.id}-${row.depth}-row`}
87
+ >
88
+ {row.getVisibleCells().map((cell, i) => {
89
+ const isPinnedLeft = columnPinning.left.includes(cell.column.id)
76
90
 
77
- <tr
78
- className={`${rowBackground ? "bg-silver" : "bg-white"} ${
79
- row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
80
- }`}
81
- id={`${row.index}-${row.id}-${row.depth}-row`}
82
- >
83
- {row.getVisibleCells().map((cell, i) => (
91
+ return (
84
92
  <td
85
93
  align="right"
86
- className={`${cell.id}-cell position_relative ${
87
- isChrome() ? "chrome-styles" : ""
88
- }`}
94
+ className={classnames(
95
+ `${cell.id}-cell`,
96
+ isPinnedLeft && 'pinned-left',
97
+ isChrome() ? "chrome-styles" : ""
98
+ )}
89
99
  key={`${cell.id}-data`}
90
100
  >
91
- {collapsibleTrail &&
92
- i === 0 &&
93
- row.depth > 0 &&
94
- renderCollapsibleTrail(row.depth)}
101
+ {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
95
102
  <span id={`${cell.id}-span`}>
96
103
  {loading ? (
97
104
  <LoadingCell />
98
105
  ) : (
99
- flexRender(
100
- cell.column.columnDef.cell,
101
- cell.getContext()
102
- )
106
+ flexRender(cell.column.columnDef.cell, cell.getContext())
103
107
  )}
104
108
  </span>
105
109
  </td>
106
- ))}
107
- </tr>
110
+ )
111
+ })}
112
+ </tr>
108
113
 
109
114
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
110
115
  {isDataLoading ? (
@@ -42,6 +42,7 @@ export const TableHeader = ({
42
42
  className
43
43
  )
44
44
 
45
+ const columnPinning = table.getState().columnPinning;
45
46
 
46
47
  return (
47
48
  <>
@@ -51,18 +52,22 @@ export const TableHeader = ({
51
52
  {/* Get the header groups (only one in this example) */}
52
53
  {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
53
54
  <tr key={`${headerGroup.id}-headerGroup`}>
54
- {headerGroup.headers.map(header => (
55
- <TableHeaderCell
56
- enableSorting={enableSorting}
57
- enableToggleExpansion={enableToggleExpansion}
58
- handleExpandOrCollapse={handleExpandOrCollapse}
59
- header={header}
60
- headerChildren={children}
61
- key={`${header.id}-header`}
62
- loading={loading}
63
- sortIcon={sortIcon}
64
- />
65
- ))}
55
+ {headerGroup.headers.map(header => {
56
+ const isPinnedLeft = columnPinning.left.includes(header.id)
57
+ return (
58
+ <TableHeaderCell
59
+ enableSorting={enableSorting}
60
+ enableToggleExpansion={enableToggleExpansion}
61
+ handleExpandOrCollapse={handleExpandOrCollapse}
62
+ header={header}
63
+ headerChildren={children}
64
+ isPinnedLeft={isPinnedLeft}
65
+ key={`${header.id}-header`}
66
+ loading={loading}
67
+ sortIcon={sortIcon}
68
+ />
69
+ )
70
+ })}
66
71
  </tr>
67
72
  ))}
68
73
  </thead>
@@ -5,6 +5,8 @@
5
5
  @import "./scss_partials/loading";
6
6
  @import "./scss_partials/pseudo_states";
7
7
  @import "./scss_partials/chrome_styles";
8
+ @import "../tokens/screen_sizes";
9
+ @import "../tokens/shadows";
8
10
 
9
11
  .pb_advanced_table {
10
12
  $border-color: 1px solid $border_light !important;
@@ -108,6 +110,36 @@
108
110
  height: auto;
109
111
  }
110
112
 
113
+ // Responsive Styles
114
+ @media only screen and (max-width: $screen-xl-min) {
115
+ &[class*="table-responsive-scroll"] {
116
+ display: block;
117
+ overflow-x: scroll;
118
+ width: 100%;
119
+ .table-header-cells:first-child,
120
+ td:first-child,
121
+ .pb_table_td:first-child,
122
+ [class*="pinned-left"] {
123
+ background-color: $white;
124
+ box-shadow: $shadow_deep !important;
125
+ position: sticky !important;
126
+ left: 0;
127
+ z-index: 2;
128
+ }
129
+ .bg-silver td:first-child {
130
+ background-color: lighten($silver, $opacity_7);
131
+ }
132
+ .bg-white td:first-child {
133
+ background-color: $white;
134
+ }
135
+ }
136
+ }
137
+ @media only screen and (min-width: $screen-xl-min) {
138
+ &[class*="table-responsive-scroll"] {
139
+ overflow-x: visible;
140
+ }
141
+ }
142
+
111
143
  &.dark {
112
144
  .bg-white {
113
145
  background: $bg_dark_card;
@@ -151,5 +183,28 @@
151
183
  ) !important;
152
184
  }
153
185
  }
186
+ // Dark Mode Responsive Styles
187
+ @media only screen and (max-width: $screen-xl-min) {
188
+ &[class*="table-responsive-scroll"] {
189
+ display: block;
190
+ overflow-x: scroll;
191
+ width: 100%;
192
+ .table-header-cells:first-child,
193
+ td:first-child,
194
+ .pb_table_td:first-child,
195
+ [class*="pinned-left"] {
196
+ background: $bg_dark_card;
197
+ border-right: $border_dark;
198
+ box-shadow: $shadow_dark !important;
199
+ position: sticky !important;
200
+ }
201
+ .bg-silver td:first-child {
202
+ background-color: $bg_dark;
203
+ }
204
+ .bg-white td:first-child {
205
+ background-color: $bg_dark_card;
206
+ }
207
+ }
208
+ }
154
209
  }
155
210
  }
@@ -42,6 +42,7 @@ type AdvancedTableProps = {
42
42
  loading?: boolean | string
43
43
  onRowToggleClick?: (arg: Row<GenericObject>) => void
44
44
  onToggleExpansionClick?: (arg: Row<GenericObject>) => void
45
+ responsive?: "scroll" | "none",
45
46
  sortControl?: GenericObject
46
47
  tableData: GenericObject[]
47
48
  tableOptions?: GenericObject
@@ -66,6 +67,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
66
67
  loading,
67
68
  onRowToggleClick,
68
69
  onToggleExpansionClick,
70
+ responsive = "scroll",
69
71
  sortControl,
70
72
  tableData,
71
73
  tableOptions,
@@ -132,7 +134,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
132
134
  //Create column array in format needed by Tanstack
133
135
  const columns =
134
136
  columnDefinitions &&
135
- columnDefinitions.map((column) => {
137
+ columnDefinitions.map((column) => {
136
138
  // Define the base column structure
137
139
  const columnStructure = {
138
140
  ...columnHelper.accessor(column.accessor, {
@@ -209,6 +211,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
209
211
  const htmlProps = buildHtmlProps(htmlOptions)
210
212
  const classes = classnames(
211
213
  buildCss("pb_advanced_table"),
214
+ `table-responsive-${responsive}`,
212
215
  globalProps(props),
213
216
  className
214
217
  )
@@ -229,6 +232,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
229
232
  handleExpandOrCollapse,
230
233
  inlineRowLoading,
231
234
  loading,
235
+ responsive,
232
236
  setExpanded,
233
237
  sortControl,
234
238
  table,
@@ -432,4 +432,34 @@ test("inlineRowLoading prop renders inline loading if true", () => {
432
432
  rowButton.click()
433
433
  const inlineLoading = kit.querySelector(".fa-spinner")
434
434
  expect(inlineLoading).toBeInTheDocument()
435
+ })
436
+
437
+ test("responsive prop functions as expected", () => {
438
+ render(
439
+ <AdvancedTable
440
+ columnDefinitions={columnDefinitions}
441
+ data={{ testid: testId }}
442
+ responsive="scroll"
443
+ tableData={MOCK_DATA}
444
+ tableProps={tableProps}
445
+ />
446
+ )
447
+
448
+ const kit = screen.getByTestId(testId)
449
+ expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
450
+ })
451
+
452
+ test("responsive none prop functions as expected", () => {
453
+ render(
454
+ <AdvancedTable
455
+ columnDefinitions={columnDefinitions}
456
+ data={{ testid: testId }}
457
+ responsive="none"
458
+ tableData={MOCK_DATA}
459
+ tableProps={tableProps}
460
+ />
461
+ )
462
+
463
+ const kit = screen.getByTestId(testId)
464
+ expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
435
465
  })
@@ -0,0 +1,82 @@
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import Title from '../../pb_title/_title'
4
+ import MOCK_DATA from "./advanced_table_mock_data.json"
5
+
6
+ const AdvancedTableResponsive = (props) => {
7
+ const columnDefinitions = [
8
+ {
9
+ accessor: "year",
10
+ label: "Year",
11
+ cellAccessors: ["quarter", "month", "day"],
12
+ },
13
+ {
14
+ accessor: "newEnrollments",
15
+ label: "New Enrollments",
16
+ },
17
+ {
18
+ accessor: "scheduledMeetings",
19
+ label: "Scheduled Meetings",
20
+ },
21
+ {
22
+ accessor: "attendanceRate",
23
+ label: "Attendance Rate",
24
+ },
25
+ {
26
+ accessor: "completedClasses",
27
+ label: "Completed Classes",
28
+ },
29
+ {
30
+ accessor: "classCompletionRate",
31
+ label: "Class Completion Rate",
32
+ },
33
+ {
34
+ accessor: "graduatedStudents",
35
+ label: "Graduated Students",
36
+ },
37
+ ]
38
+
39
+ return (
40
+ <div>
41
+ <Title
42
+ size={4}
43
+ text="Not Responsive"
44
+ {...props}
45
+ />
46
+ <AdvancedTable
47
+ columnDefinitions={columnDefinitions}
48
+ responsive="none"
49
+ tableData={MOCK_DATA}
50
+ {...props}
51
+ />
52
+ <Title
53
+ paddingTop="sm"
54
+ size={4}
55
+ text="Responsive with Prop"
56
+ {...props}
57
+ />
58
+ <AdvancedTable
59
+ columnDefinitions={columnDefinitions}
60
+ responsive="scroll"
61
+ tableData={MOCK_DATA}
62
+ {...props}
63
+ />
64
+ <Title
65
+ paddingTop="sm"
66
+ size={4}
67
+ text="Responsive as Default"
68
+ {...props}
69
+ />
70
+ <AdvancedTable
71
+ columnDefinitions={columnDefinitions}
72
+ tableData={MOCK_DATA}
73
+ {...props}
74
+ >
75
+ <AdvancedTable.Header />
76
+ <AdvancedTable.Body />
77
+ </AdvancedTable>
78
+ </div>
79
+ )
80
+ }
81
+
82
+ export default AdvancedTableResponsive
@@ -14,3 +14,4 @@ examples:
14
14
  - advanced_table_table_options: Table Options
15
15
  - advanced_table_table_props: Table Props
16
16
  - advanced_table_inline_row_loading: Inline Row Loading
17
+ - advanced_table_responsive: Responsive Tables
@@ -7,4 +7,5 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
7
7
  export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
8
8
  export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
9
9
  export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
10
- export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
10
+ export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
11
+ export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
@@ -1,23 +1,14 @@
1
1
  <% if object.image_url.present? %>
2
- <%= content_tag(object.tag,
3
- aria: object.aria,
4
- data: object.data,
5
- id: object.id,
6
- class: object.classname,
2
+ <%= pb_content_tag(object.tag,
7
3
  style: "background-image: url('#{object.image_url}');
8
4
  background-repeat: #{object.background_repeat};
9
5
  background-size: #{object.background_size};
10
6
  background-position: #{object.background_position};",
11
- **combined_html_options
12
7
  ) do %>
13
8
  <%= content.presence %>
14
9
  <% end %>
15
10
  <% else %>
16
- <%= content_tag(object.tag,
17
- aria: object.aria,
18
- data: object.data,
19
- id: object.id,
20
- class: object.classname,
11
+ <%= pb_content_tag(object.tag,
21
12
  style: object.custom_background_color
22
13
  ) do %>
23
14
  <%= content.presence %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= object.content %>
8
3
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do%>
1
+ <%= pb_content_tag do%>
7
2
  <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
8
3
  <%= content.presence %>
9
4
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:nav,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:nav) do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= content.presence || object.text %>
8
3
  <% end %>
@@ -1,10 +1,4 @@
1
- <%= content_tag(object.tag,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- dark: object.dark,
7
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
8
2
  <%= content.presence %>
9
3
  <% end %>
10
4
 
@@ -18,7 +18,7 @@
18
18
  height: auto;
19
19
  }
20
20
  .icon_wrapper:hover {
21
- color: $primary
21
+ color: $primary_action_dark
22
22
  }
23
23
 
24
24
  .dark {
@@ -19,7 +19,7 @@ const CollapsibleColor = (props) => (
19
19
  </Collapsible.Content>
20
20
  </Collapsible>
21
21
  <Collapsible
22
- iconColor='light'
22
+ iconColor='lighter'
23
23
  marginBottom="xs"
24
24
  >
25
25
  <Collapsible.Main>
@@ -34,7 +34,7 @@ const CollapsibleColor = (props) => (
34
34
  </Collapsible.Content>
35
35
  </Collapsible>
36
36
  <Collapsible
37
- iconColor='lighter'
37
+ iconColor='light'
38
38
  marginBottom="xs"
39
39
  >
40
40
  <Collapsible.Main>
@@ -1,72 +1,71 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
2
+ import PropTypes from 'prop-types'
3
+ import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
3
4
 
4
- const CollapsibleCustomMain = () => {
5
+ const CollapsibleCustomMain = (props) => {
5
6
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
7
 
7
8
  return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- </Flex>
29
- </Background>
30
- <Collapsible.Content padding="none">
9
+ <>
10
+ <Collapsible collapsed={isCollapsed}>
11
+ <Flex
12
+ align="center"
13
+ cursor="pointer"
14
+ gap="sm"
15
+ htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
+ justify="between"
17
+ position="sticky"
18
+ top="0"
19
+ >
20
+ <Title
21
+ dark={props.dark}
22
+ size={4}
23
+ text="Custom Main Section" />
24
+ </Flex>
25
+ <Collapsible.Content
26
+ padding="none">
31
27
  <div>
32
- <List>
28
+ <List>
33
29
  <ListItem
34
30
  align="stretch"
35
31
  flexDirection="column"
36
32
  >
37
- Checklist item
33
+ {"Checklist item"}
38
34
  </ListItem>
39
35
  <ListItem
40
36
  align="stretch"
41
37
  flexDirection="column"
42
38
  >
43
- Checklist item
39
+ {"Checklist item"}
44
40
  </ListItem>
45
41
  <ListItem
46
42
  align="stretch"
47
43
  flexDirection="column"
48
44
  >
49
- Checklist item
45
+ {"Checklist item"}
50
46
  </ListItem>
51
47
  <ListItem
52
48
  align="stretch"
53
49
  flexDirection="column"
54
50
  >
55
- Checklist item
51
+ {"Checklist item"}
56
52
  </ListItem>
57
53
  <ListItem
58
54
  align="stretch"
59
55
  flexDirection="column"
60
56
  >
61
- Checklist item
57
+ {"Checklist item"}
62
58
  </ListItem>
63
59
  </List>
64
60
  </div>
65
61
  </Collapsible.Content>
66
62
  </Collapsible>
67
-
68
63
  </>
69
64
  )
70
65
  }
71
66
 
67
+ CollapsibleCustomMain.propTypes = {
68
+ dark: PropTypes.bool,
69
+ }
70
+
72
71
  export default CollapsibleCustomMain
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
2
+ <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) do %>
3
3
  <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
4
  <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
5
  <% end %>
@@ -16,4 +16,5 @@
16
16
  <% end %>
17
17
  <% end %>
18
18
  <% end %>
19
-
19
+
20
+