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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +5 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +25 -20
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +82 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
- data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -6
- data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +31 -32
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +3 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +33 -32
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +3 -7
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +9 -0
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +25 -19
- data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -3
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +71 -64
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -5
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +37 -31
- data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +4 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +11 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +52 -17
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb +5 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +16 -9
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +6 -1
- data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
- data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
- data/app/pb_kits/playbook/pb_icon/_icon.scss +17 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +5 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +34 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +9 -1
- data/app/pb_kits/playbook/pb_icon/icon.test.js +22 -9
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +132 -201
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +28 -33
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx +14 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +81 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +56 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +64 -0
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +2 -2
- metadata +15 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 97b32cfbfaf4288ac7b09b0faad73e010da664c53e39cec72f3a70414ae31f08
|
4
|
+
data.tar.gz: 42569b6c2e25459fa22168ceaed1a9b44cacc8a85cf2bce3b5c26a4008b9de58
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
|
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={
|
87
|
-
|
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
|
-
|
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
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
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
|
-
|
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
|
@@ -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
|
-
<%=
|
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
|
-
<%=
|
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,9 +1,4 @@
|
|
1
|
-
<%=
|
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 %>
|
@@ -19,7 +19,7 @@ const CollapsibleColor = (props) => (
|
|
19
19
|
</Collapsible.Content>
|
20
20
|
</Collapsible>
|
21
21
|
<Collapsible
|
22
|
-
iconColor='
|
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='
|
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
|
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
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
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
|
-
|
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("
|
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
|
+
|