playbook_ui 15.0.0.pre.alpha.PLAY2511playbookiconsupgrade10732 → 15.0.0.pre.alpha.PLAY198710641
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/RegularTableView.tsx +11 -12
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +2 -7
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +0 -5
- data/app/pb_kits/playbook/pb_contact/contact.rb +0 -4
- data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -21
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +1 -16
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +0 -15
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +0 -6
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +0 -6
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +5 -13
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +0 -23
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +7 -45
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -4
- data/dist/chunks/{_line_graph-DeH7NK-i.js → _line_graph-CUfJ7E4h.js} +1 -1
- data/dist/chunks/{_typeahead-CCGp0OQe.js → _typeahead-DCp1lVJx.js} +1 -1
- data/dist/chunks/{_weekday_stacked-CZAWLGyu.js → _weekday_stacked-B-e7xOfU.js} +2 -2
- data/dist/chunks/{lib-QZuu1ltS.js → lib-BTs5acfO.js} +1 -1
- data/dist/chunks/{pb_form_validation-CleM960_.js → pb_form_validation-CKkaQFX3.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/engine.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -23
- data/lib/playbook/version.rb +1 -1
- metadata +26 -15
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +0 -5
- data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +0 -165
- data/dist/chunks/componentRegistry-DzmmLR2x.js +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4f692a3e63d89de4fe158b94d5114817e3e6dfd45108fb5ea88dec73f8a3362b
|
4
|
+
data.tar.gz: b77805447d91e42a4167450176bcf1772ed6d9bed5231786cde8cf6ce3929651
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f6619f4dc7594a4b1e2cf846f29847640f6ae076afc3b60b1b2f385c37ced204c40b9355a63af0ea65aa9bb4ab2130f4c43198a48eaa2719761e91a9ebe61930
|
7
|
+
data.tar.gz: e29fa8941bdf8b40ccae627949a91b336e52dc63e888b9b1c48e53b6588f39cbf5aac5c4bfaf53cdc7115c06b385e0f3ee96d791a25085e6ef6286e52d13d423
|
@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
import { isChrome } from "../Utilities/BrowserCheck"
|
7
7
|
import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
|
8
|
-
import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
|
9
8
|
|
10
9
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
11
10
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -61,7 +60,7 @@ const TableCellRenderer = ({
|
|
61
60
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
62
61
|
const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
|
63
62
|
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
64
|
-
|
63
|
+
|
65
64
|
return (
|
66
65
|
<td
|
67
66
|
align={cellAlignment}
|
@@ -133,7 +132,6 @@ export const RegularTableView = ({
|
|
133
132
|
|
134
133
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
135
134
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
136
|
-
|
137
135
|
// Row pinning
|
138
136
|
function PinnedRow({ row }: { row: Row<any> }) {
|
139
137
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
@@ -146,7 +144,7 @@ export const RegularTableView = ({
|
|
146
144
|
backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
|
147
145
|
color: customRowStyle?.fontColor,
|
148
146
|
position: 'sticky',
|
149
|
-
top:
|
147
|
+
top:
|
150
148
|
row.getIsPinned() === 'top'
|
151
149
|
? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
|
152
150
|
: undefined,
|
@@ -171,20 +169,21 @@ export const RegularTableView = ({
|
|
171
169
|
return (
|
172
170
|
<>
|
173
171
|
{pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
|
174
|
-
<PinnedRow key={row.id}
|
175
|
-
row={row}
|
172
|
+
<PinnedRow key={row.id}
|
173
|
+
row={row}
|
176
174
|
/>
|
177
175
|
))}
|
178
176
|
{totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
|
177
|
+
const isExpandable = row.getIsExpanded();
|
179
178
|
const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
|
179
|
+
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
180
180
|
const numberOfColumns = table.getAllFlatColumns().length;
|
181
|
+
const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
|
182
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
183
|
+
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
181
184
|
const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
|
182
185
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
183
186
|
|
184
|
-
// Use functions from RowUtils for consistent cell coloring
|
185
|
-
const rowColor = getRowColorClass(row, inlineRowLoading || false);
|
186
|
-
const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
|
187
|
-
|
188
187
|
return (
|
189
188
|
<React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
|
190
189
|
{isFirstChildofSubrow && subRowHeaders && (
|
@@ -229,7 +228,7 @@ export const RegularTableView = ({
|
|
229
228
|
|
230
229
|
{/* Display LoadingInline if Row Data is querying and there are no children already */}
|
231
230
|
{isDataLoading && (
|
232
|
-
<tr key={`${row.id}-
|
231
|
+
<tr key={`${row.id}-row`}>
|
233
232
|
<td colSpan={numberOfColumns}
|
234
233
|
style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
|
235
234
|
>
|
@@ -244,4 +243,4 @@ export const RegularTableView = ({
|
|
244
243
|
);
|
245
244
|
}
|
246
245
|
|
247
|
-
export default RegularTableView;
|
246
|
+
export default RegularTableView;
|
@@ -7,7 +7,6 @@ import { GenericObject } from "../../types"
|
|
7
7
|
|
8
8
|
import { isChrome } from "../Utilities/BrowserCheck"
|
9
9
|
import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
|
10
|
-
import { getRowColorClass } from "../Utilities/RowUtils"
|
11
10
|
|
12
11
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
13
12
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -46,10 +45,10 @@ export const VirtualizedTableView = ({
|
|
46
45
|
|
47
46
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
48
47
|
const sortingState = JSON.stringify(table.getState().sorting || []);
|
49
|
-
|
48
|
+
|
50
49
|
// Store column widths extracted from header
|
51
50
|
const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
|
52
|
-
|
51
|
+
|
53
52
|
// Function to get header cell widths
|
54
53
|
const getHeaderCellWidths = () => {
|
55
54
|
const widths: {[key: string]: string} = {};
|
@@ -137,7 +136,7 @@ export const VirtualizedTableView = ({
|
|
137
136
|
</tr>
|
138
137
|
);
|
139
138
|
}
|
140
|
-
|
139
|
+
|
141
140
|
// Establish # of Parent Rows (so that Footer count does not include every single row)
|
142
141
|
const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
|
143
142
|
|
@@ -173,9 +172,10 @@ export const VirtualizedTableView = ({
|
|
173
172
|
|
174
173
|
if (item.type === 'row') {
|
175
174
|
const row = item.row;
|
176
|
-
|
177
|
-
|
178
|
-
const
|
175
|
+
const isExpandable = row.getIsExpanded();
|
176
|
+
const rowHasNoChildren = row.original?.children && !row.original.children.length;
|
177
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
178
|
+
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
179
179
|
|
180
180
|
return (
|
181
181
|
<tr
|
@@ -10,14 +10,9 @@ export const getRowColorClass = (
|
|
10
10
|
): string => {
|
11
11
|
const isExpandable = row.getIsExpanded();
|
12
12
|
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
13
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
13
14
|
|
14
|
-
|
15
|
-
const shouldShowExpandedBackground = isExpandable && (
|
16
|
-
(!inlineRowLoading && row.getCanExpand()) ||
|
17
|
-
(inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
|
18
|
-
);
|
19
|
-
|
20
|
-
return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
|
15
|
+
return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
21
16
|
}
|
22
17
|
|
23
18
|
/**
|
@@ -17,7 +17,6 @@ const contactTypeMap: { [key: string]: string } = {
|
|
17
17
|
'work': 'phone-office',
|
18
18
|
'work-cell': 'phone-laptop',
|
19
19
|
'wrong-phone': 'phone-slash',
|
20
|
-
'international': 'globe',
|
21
20
|
}
|
22
21
|
|
23
22
|
const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
|
@@ -25,10 +24,6 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
|
|
25
24
|
const formatContact = (contactString: string, contactType: string) => {
|
26
25
|
if (contactType === 'email') return contactString
|
27
26
|
|
28
|
-
// International phone numbers are unformatted
|
29
|
-
if (contactType === 'international') return contactString
|
30
|
-
|
31
|
-
// Format US numbers
|
32
27
|
const cleaned = contactString.replace(/\D/g, '')
|
33
28
|
const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
|
34
29
|
|
@@ -29,8 +29,6 @@ module Playbook
|
|
29
29
|
"phone-slash"
|
30
30
|
when "extension"
|
31
31
|
"phone-plus"
|
32
|
-
when "international"
|
33
|
-
"globe"
|
34
32
|
else # "unknown" || "other"
|
35
33
|
"phone"
|
36
34
|
end
|
@@ -41,8 +39,6 @@ module Playbook
|
|
41
39
|
contact_value
|
42
40
|
elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
|
43
41
|
contact_value
|
44
|
-
elsif contact_type == "international"
|
45
|
-
contact_value
|
46
42
|
else
|
47
43
|
number_to_phone(formatted_value, area_code: true)
|
48
44
|
end
|
@@ -66,12 +66,6 @@ test('returns correct icon', () => {
|
|
66
66
|
contactValue="1234"
|
67
67
|
data={{ testid: 'test-extension' }}
|
68
68
|
/>
|
69
|
-
<Contact
|
70
|
-
contactDetail="International"
|
71
|
-
contactType="international"
|
72
|
-
contactValue="+44 20 7946 0958"
|
73
|
-
data={{ testid: 'test-international' }}
|
74
|
-
/>
|
75
69
|
<Contact
|
76
70
|
contactDetail=""
|
77
71
|
contactType=""
|
@@ -89,11 +83,10 @@ test('returns correct icon', () => {
|
|
89
83
|
expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
90
84
|
expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
91
85
|
expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
92
|
-
expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
93
86
|
expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
94
87
|
})
|
95
88
|
|
96
|
-
test("not compliant values return null in
|
89
|
+
test("not compliant values return null in phone related contact types", () => {
|
97
90
|
const notCompliantValues = [
|
98
91
|
"349-185-998223",
|
99
92
|
"349-1858",
|
@@ -136,16 +129,3 @@ test("not compliant values return null in US phone related contact types", () =>
|
|
136
129
|
)
|
137
130
|
})
|
138
131
|
})
|
139
|
-
|
140
|
-
test('international contact type preserves original format', () => {
|
141
|
-
render(
|
142
|
-
<Contact
|
143
|
-
contactType="international"
|
144
|
-
contactValue="+44 20 7946 0958"
|
145
|
-
data={{ testid: 'test-international-format' }}
|
146
|
-
/>
|
147
|
-
)
|
148
|
-
|
149
|
-
const kit = screen.getByTestId('test-international-format')
|
150
|
-
expect(kit).toHaveTextContent('+44 20 7946 0958')
|
151
|
-
})
|
@@ -13,7 +13,7 @@
|
|
13
13
|
}) %>
|
14
14
|
|
15
15
|
<%= pb_rails("contact", props: {
|
16
|
-
contact_type: "
|
16
|
+
contact_type: "wrong number",
|
17
17
|
contact_value: "3245627482",
|
18
18
|
}) %>
|
19
19
|
|
@@ -21,18 +21,3 @@
|
|
21
21
|
contact_type: "work-cell",
|
22
22
|
contact_value: "349-185-9988",
|
23
23
|
}) %>
|
24
|
-
|
25
|
-
<%= pb_rails("contact", props: {
|
26
|
-
contact_type: "wrong-phone",
|
27
|
-
contact_value: "2124396666",
|
28
|
-
}) %>
|
29
|
-
|
30
|
-
<%= pb_rails("contact", props: {
|
31
|
-
contact_type: "extension",
|
32
|
-
contact_value: "1233",
|
33
|
-
}) %>
|
34
|
-
|
35
|
-
<%= pb_rails("contact", props: {
|
36
|
-
contact_type: "international",
|
37
|
-
contact_value: "+44 7700 900461",
|
38
|
-
}) %>
|
@@ -28,21 +28,6 @@ const ContactDefault = (props) => {
|
|
28
28
|
contactValue="3245627482"
|
29
29
|
{...props}
|
30
30
|
/>
|
31
|
-
<Contact
|
32
|
-
contactType="wrong-phone"
|
33
|
-
contactValue="2124396666"
|
34
|
-
{...props}
|
35
|
-
/>
|
36
|
-
<Contact
|
37
|
-
contactType='extension'
|
38
|
-
contactValue="1234"
|
39
|
-
{...props}
|
40
|
-
/>
|
41
|
-
<Contact
|
42
|
-
contactType="international"
|
43
|
-
contactValue="+44 7700 900461"
|
44
|
-
{...props}
|
45
|
-
/>
|
46
31
|
</div>
|
47
32
|
)
|
48
33
|
}
|
@@ -56,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
|
|
56
56
|
<Icon
|
57
57
|
aria={{ label: 'loading icon' }}
|
58
58
|
fixedWidth
|
59
|
-
icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? '
|
59
|
+
icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
|
60
60
|
pulse
|
61
61
|
/>
|
62
62
|
{text}
|
@@ -4,8 +4,8 @@
|
|
4
4
|
|
5
5
|
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
|
6
6
|
|
7
|
-
|
8
|
-
window.addEventListener("
|
7
|
+
<%= javascript_tag do %>
|
8
|
+
window.addEventListener("DOMContentLoaded", () => {
|
9
9
|
|
10
10
|
// variables for the kits you are targeting
|
11
11
|
const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
|
@@ -142,4 +142,4 @@
|
|
142
142
|
});
|
143
143
|
|
144
144
|
})
|
145
|
-
|
145
|
+
<% end %>
|
@@ -10,8 +10,8 @@
|
|
10
10
|
<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
|
11
11
|
|
12
12
|
|
13
|
-
|
14
|
-
window.addEventListener("
|
13
|
+
<%= javascript_tag do %>
|
14
|
+
window.addEventListener("DOMContentLoaded", () => {
|
15
15
|
|
16
16
|
const commonText = document.querySelector("#body_common")
|
17
17
|
|
@@ -133,4 +133,4 @@
|
|
133
133
|
});
|
134
134
|
|
135
135
|
})
|
136
|
-
|
136
|
+
<% end %>
|
@@ -4,8 +4,8 @@
|
|
4
4
|
|
5
5
|
<div id="match"> </div>
|
6
6
|
|
7
|
-
|
8
|
-
window.addEventListener("
|
7
|
+
<%= javascript_tag do %>
|
8
|
+
window.addEventListener("DOMContentLoaded", () => {
|
9
9
|
|
10
10
|
const useState = (defaultValue) => {
|
11
11
|
let value = defaultValue;
|
@@ -48,4 +48,4 @@
|
|
48
48
|
|
49
49
|
}
|
50
50
|
})
|
51
|
-
|
51
|
+
<% end %>
|
@@ -32,8 +32,8 @@
|
|
32
32
|
|
33
33
|
|
34
34
|
|
35
|
-
|
36
|
-
window.addEventListener("
|
35
|
+
<%= javascript_tag do %>
|
36
|
+
window.addEventListener("DOMContentLoaded", () => {
|
37
37
|
|
38
38
|
|
39
39
|
// variables for the passphrase kits you are targeting
|
@@ -320,4 +320,4 @@
|
|
320
320
|
|
321
321
|
|
322
322
|
})
|
323
|
-
|
323
|
+
<% end %>
|
@@ -7,8 +7,8 @@
|
|
7
7
|
<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
|
8
8
|
|
9
9
|
|
10
|
-
|
11
|
-
window.addEventListener("
|
10
|
+
<%= javascript_tag do %>
|
11
|
+
window.addEventListener("DOMContentLoaded", () => {
|
12
12
|
|
13
13
|
// variables for the kits you are targeting
|
14
14
|
const passphrase = document.querySelector(".passphrase_change").querySelector("input")
|
@@ -120,4 +120,4 @@
|
|
120
120
|
});
|
121
121
|
|
122
122
|
})
|
123
|
-
|
123
|
+
<% end %>
|
@@ -13,8 +13,8 @@
|
|
13
13
|
<script>
|
14
14
|
document.addEventListener('DOMContentLoaded', () => {
|
15
15
|
function handleButtonClick() {
|
16
|
-
const editorContainer = [...document.querySelectorAll('[data-
|
17
|
-
.find(element => element.getAttribute('data-
|
16
|
+
const editorContainer = [...document.querySelectorAll('[data-react-props]')]
|
17
|
+
.find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
|
18
18
|
|
19
19
|
const editorElement = editorContainer?.querySelector('trix-editor')
|
20
20
|
const inputId = editorElement?.getAttribute('input')
|
@@ -53,13 +53,10 @@ $section_colors_dark: (
|
|
53
53
|
.pb_section_separator_vertical {
|
54
54
|
margin-left: $space_xs;
|
55
55
|
margin-right: $space_xs;
|
56
|
-
flex-direction: column;
|
57
56
|
&::before {
|
58
|
-
|
59
|
-
@include section_separator_vertical(false);
|
57
|
+
display: none;
|
60
58
|
}
|
61
59
|
&::after {
|
62
|
-
flex: 1;
|
63
60
|
@include section_separator_vertical(false);
|
64
61
|
}
|
65
62
|
}
|
@@ -90,7 +87,7 @@ $section_colors_dark: (
|
|
90
87
|
background: none;
|
91
88
|
}
|
92
89
|
&.pb_section_separator_vertical {
|
93
|
-
&::
|
90
|
+
&::after {
|
94
91
|
border: 1px dashed $color_value;
|
95
92
|
background: none;
|
96
93
|
}
|
@@ -109,7 +106,7 @@ $section_colors_dark: (
|
|
109
106
|
}
|
110
107
|
|
111
108
|
&.pb_section_separator_vertical {
|
112
|
-
&::
|
109
|
+
&::after {
|
113
110
|
@include section_separator_vertical(true);
|
114
111
|
}
|
115
112
|
}
|
@@ -118,11 +115,6 @@ $section_colors_dark: (
|
|
118
115
|
&::before, &::after {
|
119
116
|
@include section_separator_dashed(true);
|
120
117
|
}
|
121
|
-
&.pb_section_separator_vertical {
|
122
|
-
&::before, &::after {
|
123
|
-
@include section_separator_dashed(true);
|
124
|
-
}
|
125
|
-
}
|
126
118
|
}
|
127
119
|
}
|
128
120
|
|
@@ -134,7 +126,7 @@ $section_colors_dark: (
|
|
134
126
|
}
|
135
127
|
|
136
128
|
&.pb_section_separator_vertical {
|
137
|
-
&::
|
129
|
+
&::after {
|
138
130
|
@include section_separator_vertical(false);
|
139
131
|
background: $color_value;
|
140
132
|
}
|
@@ -146,7 +138,7 @@ $section_colors_dark: (
|
|
146
138
|
background: none;
|
147
139
|
}
|
148
140
|
&.pb_section_separator_vertical {
|
149
|
-
&::
|
141
|
+
&::after {
|
150
142
|
border: 1px dashed $color_value;
|
151
143
|
background: none;
|
152
144
|
}
|
@@ -11,27 +11,4 @@
|
|
11
11
|
padding_right: "xs"
|
12
12
|
}) %>
|
13
13
|
<% end %>
|
14
|
-
<% end %>
|
15
|
-
|
16
|
-
<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
|
17
|
-
<%= pb_rails("body", props: { classname: "flex-item" }) do %>
|
18
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
|
19
|
-
<% end %>
|
20
|
-
<%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
|
21
|
-
<%= pb_rails("card", props: {
|
22
|
-
border_radius: "rounded",
|
23
|
-
justify_content: "center",
|
24
|
-
padding: "none"
|
25
|
-
}) do %>
|
26
|
-
<%= pb_rails("caption", props: {
|
27
|
-
text: "TODAY",
|
28
|
-
size: "xs",
|
29
|
-
padding_left: "xs",
|
30
|
-
padding_right: "xs"
|
31
|
-
}) %>
|
32
|
-
<% end %>
|
33
|
-
<% end %>
|
34
|
-
<%= pb_rails("body", props: { classname: "flex-item" }) do %>
|
35
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
|
36
|
-
<% end %>
|
37
14
|
<% end %>
|
@@ -2,25 +2,8 @@ import React from 'react'
|
|
2
2
|
import Card from '../../pb_card/_card'
|
3
3
|
import Caption from '../../pb_caption/_caption'
|
4
4
|
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
5
|
-
import Flex from '../../pb_flex/_flex'
|
6
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
7
5
|
|
8
|
-
const
|
9
|
-
<Card
|
10
|
-
borderRadius="rounded"
|
11
|
-
justifyContent="center"
|
12
|
-
padding="none"
|
13
|
-
>
|
14
|
-
<Caption
|
15
|
-
paddingLeft="xs"
|
16
|
-
paddingRight="xs"
|
17
|
-
size="xs"
|
18
|
-
text="TODAY"
|
19
|
-
/>
|
20
|
-
</Card>
|
21
|
-
)
|
22
|
-
|
23
|
-
const childrenVertical = (
|
6
|
+
const children = (
|
24
7
|
<Card
|
25
8
|
borderRadius="rounded"
|
26
9
|
justifyContent="center"
|
@@ -37,33 +20,12 @@ const childrenVertical = (
|
|
37
20
|
|
38
21
|
const SectionSeparatorChildren = (props) => {
|
39
22
|
return (
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
</SectionSeparator>
|
47
|
-
<Flex
|
48
|
-
inline="flex-container"
|
49
|
-
marginTop="lg"
|
50
|
-
vertical="stretch"
|
51
|
-
>
|
52
|
-
<FlexItem>
|
53
|
-
{'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
|
54
|
-
</FlexItem>
|
55
|
-
<SectionSeparator
|
56
|
-
orientation="vertical"
|
57
|
-
{...props}
|
58
|
-
>
|
59
|
-
{childrenVertical}
|
60
|
-
</SectionSeparator>
|
61
|
-
<FlexItem>
|
62
|
-
{'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
|
63
|
-
</FlexItem>
|
64
|
-
</Flex>
|
65
|
-
</>
|
66
|
-
|
23
|
+
<SectionSeparator
|
24
|
+
{...props}
|
25
|
+
lineStyle='dashed'
|
26
|
+
>
|
27
|
+
{children}
|
28
|
+
</SectionSeparator>
|
67
29
|
)
|
68
30
|
}
|
69
31
|
|
@@ -7,10 +7,7 @@
|
|
7
7
|
<% end %>
|
8
8
|
<% end %>
|
9
9
|
<% if object.orientation === 'vertical' %>
|
10
|
-
|
11
|
-
<%= content %>
|
12
|
-
<% elsif object.text %>
|
13
|
-
<span><%= pb_rails("caption", props: { text: object.text }) %></span>
|
10
|
+
<%= pb_rails("flex", props: { orientation: "column"}) do %>
|
14
11
|
<% end %>
|
15
12
|
<%end%>
|
16
13
|
<% end %>
|