playbook_ui 7.14.0.pre.alpha1 → 7.14.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/helpers/playbook/pb_sample_helper.rb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +12 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +0 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +10 -36
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +20 -26
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -5
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +15 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb +5 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +26 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +14 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb +5 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +28 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +4 -9
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +7 -12
- data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +1 -4
- data/app/pb_kits/playbook/pb_distribution_bar/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_distribution_bar/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +1 -12
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +37 -84
- data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +7 -18
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +21 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +43 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +5 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +17 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +9 -25
- data/app/pb_kits/playbook/pb_flex/_flex.scss +7 -40
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +2 -6
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -10
- data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
- data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +15 -15
- data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +15 -17
- data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +1 -3
- data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.html.erb → _flex_horizontal.html.erb} +21 -19
- data/app/pb_kits/playbook/pb_flex/docs/{_flex_align.jsx → _flex_horizontal.jsx} +77 -71
- data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +8 -8
- data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +1 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +9 -9
- data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +2 -2
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +8 -23
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +4 -4
- data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +68 -0
- data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.jsx → _flex_vertical.jsx} +99 -41
- data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/docs/example.yml +4 -9
- data/app/pb_kits/playbook/pb_flex/docs/index.js +2 -4
- data/app/pb_kits/playbook/pb_flex/flex.rb +12 -79
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -18
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -7
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +3 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +18 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +42 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +66 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +4 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +17 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +29 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +38 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +23 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +37 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +21 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +35 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_icon_value/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_layout/_layout.scss +9 -9
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +32 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +97 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +43 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +105 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +25 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +51 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +13 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +54 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +25 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +57 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +14 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +54 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +13 -0
- data/app/pb_kits/playbook/pb_popover/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +4 -6
- data/app/pb_kits/playbook/pb_table/_table.jsx +0 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb +4 -56
- data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +3 -64
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -3
- data/app/pb_kits/playbook/pb_table/table.rb +1 -8
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +4 -6
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +16 -92
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +1 -12
- data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +18 -26
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +1 -21
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +8 -40
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +4 -12
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +18 -26
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +21 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +28 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +0 -8
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -4
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -83
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +4 -2
- data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +21 -0
- data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +36 -0
- data/app/pb_kits/playbook/pb_user_badge/docs/index.js +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +57 -31
- data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +0 -51
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +0 -77
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +0 -78
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb +0 -4
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx +0 -18
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +0 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb +0 -101
- data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +0 -7
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +0 -33
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +0 -75
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +0 -9
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +0 -49
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +0 -11
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +0 -113
- data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +0 -7
- data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md +0 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +0 -7
- data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md +0 -5
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -135
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -135
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -135
@@ -5,6 +5,11 @@ examples:
|
|
5
5
|
- popover_close: Close Options
|
6
6
|
- popover_z_index: Set Z-Index
|
7
7
|
- popover_scroll_height: Scroll and Height Settings
|
8
|
+
- popover_dark: Dark
|
9
|
+
- popover_list_dark: List Dark
|
10
|
+
- popover_close_dark: Close Dark
|
11
|
+
- popover_z_index_dark: Z-Index Dark
|
12
|
+
- popover_scroll_height_dark: Scroll and Height Settings Dark
|
8
13
|
|
9
14
|
react:
|
10
15
|
- popover_default: Default
|
@@ -12,4 +17,12 @@ examples:
|
|
12
17
|
- popover_close: Close Options
|
13
18
|
- popover_z_index: Set Z-Index
|
14
19
|
- popover_scroll_height: Scroll and Height Settings
|
20
|
+
- popover_dark: Dark
|
21
|
+
- popover_list_dark: List Dark
|
22
|
+
- popover_close_dark: Close Dark
|
23
|
+
- popover_z_index_dark: Z-Index Dark
|
24
|
+
- popover_scroll_height_dark: Scroll and Height Settings Dark
|
25
|
+
|
26
|
+
|
27
|
+
|
15
28
|
|
@@ -3,3 +3,8 @@ export { default as PopoverList } from './_popover_list.jsx'
|
|
3
3
|
export { default as PopoverClose } from './_popover_close.jsx'
|
4
4
|
export { default as PopoverZIndex } from './_popover_z_index.jsx'
|
5
5
|
export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
|
6
|
+
export { default as PopoverDark } from './_popover_dark.jsx'
|
7
|
+
export { default as PopoverListDark } from './_popover_list_dark.jsx'
|
8
|
+
export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
|
9
|
+
export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
|
10
|
+
export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'
|
@@ -12,11 +12,6 @@
|
|
12
12
|
cursor: pointer;
|
13
13
|
box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
|
14
14
|
padding-right: $space_xl;
|
15
|
-
color: transparent !important;
|
16
|
-
text-shadow: 0 0 0 $text_lt_default;
|
17
|
-
white-space: nowrap;
|
18
|
-
overflow: hidden;
|
19
|
-
text-overflow: ellipsis;
|
20
15
|
@media (hover:hover) {
|
21
16
|
&:hover, &:active, &:focus {
|
22
17
|
background-color: $focus_input_light;
|
@@ -25,6 +20,8 @@
|
|
25
20
|
&:disabled ~ .pb_select_kit_caret {
|
26
21
|
opacity: 0.5;
|
27
22
|
}
|
23
|
+
color: transparent !important;
|
24
|
+
text-shadow: 0 0 0 $text_lt_default;
|
28
25
|
}
|
29
26
|
option {
|
30
27
|
color: $text_lt_default;
|
@@ -65,12 +62,12 @@
|
|
65
62
|
@include pb_title_dark;
|
66
63
|
background: $focus_input_dark;
|
67
64
|
box-shadow: inset 0 -11px 20px rgba($white, 0.05);
|
68
|
-
text-shadow: 0 0 0 $text_dk_default;
|
69
65
|
@media (hover:hover) {
|
70
66
|
&:hover, &:active, &:focus {
|
71
67
|
background-color: tint($focus_input_dark, 5%);
|
72
68
|
}
|
73
69
|
}
|
70
|
+
text-shadow: 0 0 0 $text_dk_default;
|
74
71
|
}
|
75
72
|
.pb_select_kit_caret {
|
76
73
|
color: $white;
|
@@ -85,4 +82,5 @@
|
|
85
82
|
}
|
86
83
|
}
|
87
84
|
}
|
85
|
+
|
88
86
|
}
|
@@ -4,13 +4,11 @@ import React, { type Node } from 'react'
|
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
6
6
|
import { globalProps } from '../utilities/globalProps.js'
|
7
|
-
import PbTable from './'
|
8
7
|
|
9
8
|
type TableProps = {
|
10
9
|
aria?: object,
|
11
10
|
children: array<Node> | Node,
|
12
11
|
className: string,
|
13
|
-
collapse?: "sm" | "md" | "lg",
|
14
12
|
container: boolean,
|
15
13
|
dark?: boolean,
|
16
14
|
data?: object,
|
@@ -27,7 +25,6 @@ const Table = (props: TableProps) => {
|
|
27
25
|
aria = {},
|
28
26
|
children,
|
29
27
|
className,
|
30
|
-
collapse = 'sm',
|
31
28
|
container = true,
|
32
29
|
dark,
|
33
30
|
data = {},
|
@@ -41,10 +38,6 @@ const Table = (props: TableProps) => {
|
|
41
38
|
|
42
39
|
const ariaProps = buildAriaProps(aria)
|
43
40
|
const dataProps = buildDataProps(data)
|
44
|
-
const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
|
45
|
-
|
46
|
-
const instance = new PbTable()
|
47
|
-
instance.connect()
|
48
41
|
|
49
42
|
return (
|
50
43
|
<table
|
@@ -62,7 +55,6 @@ const Table = (props: TableProps) => {
|
|
62
55
|
'no-hover': disableHover,
|
63
56
|
},
|
64
57
|
globalProps(props),
|
65
|
-
tableCollapseCss,
|
66
58
|
className
|
67
59
|
)}
|
68
60
|
id={id}
|
@@ -1,56 +1,6 @@
|
|
1
|
-
<%= pb_rails("title", props: { size: 4, text: "
|
1
|
+
<%= pb_rails("title", props: { size: 4, text: "Default" }) %>
|
2
2
|
|
3
|
-
<%= pb_rails("table", props: { responsive: "
|
4
|
-
<thead>
|
5
|
-
<tr>
|
6
|
-
<th>Column 1</th>
|
7
|
-
<th>Column 2</th>
|
8
|
-
<th>Column 3</th>
|
9
|
-
<th>Column 4</th>
|
10
|
-
<th>Column 5</th>
|
11
|
-
</tr>
|
12
|
-
</thead>
|
13
|
-
<tbody>
|
14
|
-
<tr>
|
15
|
-
<td>Value 1</td>
|
16
|
-
<td>Value 2</td>
|
17
|
-
<td>Value 3</td>
|
18
|
-
<td>Value 4</td>
|
19
|
-
<td>Value 5</td>
|
20
|
-
</tr>
|
21
|
-
</tbody>
|
22
|
-
<% end %>
|
23
|
-
|
24
|
-
<br>
|
25
|
-
|
26
|
-
<%= pb_rails("title", props: { size: 4, text: "Collapse Mobile" }) %>
|
27
|
-
|
28
|
-
<%= pb_rails("table", props: { collapse: "sm" }) do %>
|
29
|
-
<thead>
|
30
|
-
<tr>
|
31
|
-
<th>Column 1</th>
|
32
|
-
<th>Column 2</th>
|
33
|
-
<th>Column 3</th>
|
34
|
-
<th>Column 4</th>
|
35
|
-
<th>Column 5</th>
|
36
|
-
</tr>
|
37
|
-
</thead>
|
38
|
-
<tbody>
|
39
|
-
<tr>
|
40
|
-
<td>Value 1</td>
|
41
|
-
<td>Value 2</td>
|
42
|
-
<td>Value 3</td>
|
43
|
-
<td>Value 4</td>
|
44
|
-
<td>Value 5</td>
|
45
|
-
</tr>
|
46
|
-
</tbody>
|
47
|
-
<% end %>
|
48
|
-
|
49
|
-
<br>
|
50
|
-
|
51
|
-
<%= pb_rails("title", props: { size: 4, text: "Collapse Tablet" }) %>
|
52
|
-
|
53
|
-
<%= pb_rails("table", props: { collapse: "md" }) do %>
|
3
|
+
<%= pb_rails("table", props: { responsive: "collapse" }) do %>
|
54
4
|
<thead>
|
55
5
|
<tr>
|
56
6
|
<th>Column 1</th>
|
@@ -73,9 +23,9 @@
|
|
73
23
|
|
74
24
|
<br>
|
75
25
|
|
76
|
-
<%= pb_rails("title", props: { size: 4, text: "
|
26
|
+
<%= pb_rails("title", props: { size: 4, text: "Responsive Off" }) %>
|
77
27
|
|
78
|
-
<%= pb_rails("table", props: {
|
28
|
+
<%= pb_rails("table", props: { responsive: "none" }) do %>
|
79
29
|
<thead>
|
80
30
|
<tr>
|
81
31
|
<th>Column 1</th>
|
@@ -95,5 +45,3 @@
|
|
95
45
|
</tr>
|
96
46
|
</tbody>
|
97
47
|
<% end %>
|
98
|
-
|
99
|
-
|
@@ -6,41 +6,10 @@ const TableResponsiveTable = (props) => {
|
|
6
6
|
<div>
|
7
7
|
<Title
|
8
8
|
size={4}
|
9
|
-
text="
|
9
|
+
text="Default"
|
10
10
|
{...props}
|
11
11
|
/>
|
12
12
|
<Table
|
13
|
-
responsive="none"
|
14
|
-
{...props}
|
15
|
-
>
|
16
|
-
<thead>
|
17
|
-
<tr>
|
18
|
-
<th>{'Column 1'}</th>
|
19
|
-
<th>{'Column 2'}</th>
|
20
|
-
<th>{'Column 3'}</th>
|
21
|
-
<th>{'Column 4'}</th>
|
22
|
-
<th>{'Column 5'}</th>
|
23
|
-
</tr>
|
24
|
-
</thead>
|
25
|
-
<tbody>
|
26
|
-
<tr>
|
27
|
-
<td>{'Value 1'}</td>
|
28
|
-
<td>{'Value 2'}</td>
|
29
|
-
<td>{'Value 3'}</td>
|
30
|
-
<td>{'Value 4'}</td>
|
31
|
-
<td>{'Value 5'}</td>
|
32
|
-
</tr>
|
33
|
-
</tbody>
|
34
|
-
</Table>
|
35
|
-
<br />
|
36
|
-
<br />
|
37
|
-
<Title
|
38
|
-
size={4}
|
39
|
-
text="Collapse Mobile"
|
40
|
-
{...props}
|
41
|
-
/>
|
42
|
-
<Table
|
43
|
-
collapse="sm"
|
44
13
|
{...props}
|
45
14
|
>
|
46
15
|
<thead>
|
@@ -66,41 +35,11 @@ const TableResponsiveTable = (props) => {
|
|
66
35
|
<br />
|
67
36
|
<Title
|
68
37
|
size={4}
|
69
|
-
text="
|
38
|
+
text="Default"
|
70
39
|
{...props}
|
71
40
|
/>
|
72
41
|
<Table
|
73
|
-
|
74
|
-
{...props}
|
75
|
-
>
|
76
|
-
<thead>
|
77
|
-
<tr>
|
78
|
-
<th>{'Column 1'}</th>
|
79
|
-
<th>{'Column 2'}</th>
|
80
|
-
<th>{'Column 3'}</th>
|
81
|
-
<th>{'Column 4'}</th>
|
82
|
-
<th>{'Column 5'}</th>
|
83
|
-
</tr>
|
84
|
-
</thead>
|
85
|
-
<tbody>
|
86
|
-
<tr>
|
87
|
-
<td>{'Value 1'}</td>
|
88
|
-
<td>{'Value 2'}</td>
|
89
|
-
<td>{'Value 3'}</td>
|
90
|
-
<td>{'Value 4'}</td>
|
91
|
-
<td>{'Value 5'}</td>
|
92
|
-
</tr>
|
93
|
-
</tbody>
|
94
|
-
</Table>
|
95
|
-
<br />
|
96
|
-
<br />
|
97
|
-
<Title
|
98
|
-
size={4}
|
99
|
-
text="Collapse Desktop"
|
100
|
-
{...props}
|
101
|
-
/>
|
102
|
-
<Table
|
103
|
-
collapse="lg"
|
42
|
+
responsive="none"
|
104
43
|
{...props}
|
105
44
|
>
|
106
45
|
<thead>
|
@@ -21,15 +21,12 @@ module Playbook
|
|
21
21
|
prop :responsive, type: Playbook::Props::Enum,
|
22
22
|
values: %w[collapse scroll none],
|
23
23
|
default: "collapse"
|
24
|
-
prop :collapse, type: Playbook::Props::Enum,
|
25
|
-
values: %w[sm md lg],
|
26
|
-
default: "sm"
|
27
24
|
prop :text
|
28
25
|
|
29
26
|
def classname
|
30
27
|
generate_classname(
|
31
28
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
32
|
-
disable_hover_class, container_class, data_table_class,
|
29
|
+
disable_hover_class, container_class, data_table_class,
|
33
30
|
"table-responsive-#{responsive}", separator: " "
|
34
31
|
)
|
35
32
|
end
|
@@ -55,10 +52,6 @@ module Playbook
|
|
55
52
|
def container_class
|
56
53
|
container ? "table-card" : nil
|
57
54
|
end
|
58
|
-
|
59
|
-
def collapse_class
|
60
|
-
responsive != "none" ? "table-collapse-#{collapse}" : ""
|
61
|
-
end
|
62
55
|
end
|
63
56
|
end
|
64
57
|
end
|
@@ -1,8 +1,6 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
<%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname) do %>
|
5
|
+
<%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
|
8
6
|
<% end %>
|
@@ -2,112 +2,36 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
5
|
+
|
7
6
|
import { Caption } from '../'
|
7
|
+
|
8
|
+
import { buildCss, buildDataProps } from '../utilities/props'
|
9
|
+
|
8
10
|
import { globalProps } from '../utilities/globalProps.js'
|
9
11
|
|
10
12
|
type TimestampProps = {
|
11
|
-
align?: "left" | "center" | "right",
|
12
|
-
aria?: object,
|
13
|
-
className?: string | array<string>,
|
14
|
-
dark?: boolean,
|
15
|
-
data?: string,
|
16
|
-
text: string,
|
17
|
-
timestamp: string,
|
18
|
-
timezone: string,
|
19
13
|
id?: string,
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
variant?: "default" | "elapsed" | "updated"
|
14
|
+
data?: object,
|
15
|
+
className?: string,
|
16
|
+
text?: string,
|
24
17
|
}
|
25
18
|
|
26
19
|
const Timestamp = (props: TimestampProps) => {
|
27
|
-
const {
|
28
|
-
align = 'left',
|
29
|
-
aria = {},
|
30
|
-
className,
|
31
|
-
dark = false,
|
32
|
-
data = {},
|
33
|
-
text,
|
34
|
-
timestamp,
|
35
|
-
timezone,
|
36
|
-
showDate = true,
|
37
|
-
showUser = false,
|
38
|
-
showTimezone = false,
|
39
|
-
variant = 'default',
|
40
|
-
} = props
|
41
|
-
|
42
|
-
const ariaProps = buildAriaProps(aria)
|
20
|
+
const { id, className, data = {}, text } = props
|
43
21
|
const dataProps = buildDataProps(data)
|
44
|
-
const
|
45
|
-
buildCss('pb_timestamp_kit', align, {
|
46
|
-
dark: dark,
|
47
|
-
variant: variant,
|
48
|
-
}),
|
49
|
-
globalProps(props),
|
50
|
-
className
|
51
|
-
)
|
52
|
-
|
53
|
-
const currentYear = new Date().getFullYear().toString()
|
54
|
-
const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
|
55
|
-
const dateDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
|
56
|
-
const shouldShowUser = showUser == true && text.length > 0
|
57
|
-
const shouldShowTimezone = showTimezone == true && timezone.length > 0
|
58
|
-
const userDisplay = shouldShowUser ? ` by ${text}` : ''
|
59
|
-
|
60
|
-
let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
|
61
|
-
|
62
|
-
const fullTimeDisplay = () => {
|
63
|
-
if (shouldShowTimezone) {
|
64
|
-
timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
|
65
|
-
}
|
66
|
-
return timeDisplay
|
67
|
-
}
|
68
|
-
|
69
|
-
const fullDateDisplay = () => {
|
70
|
-
let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
|
71
|
-
if (dateTimestamp.toYear() > currentYear) {
|
72
|
-
fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
|
73
|
-
}
|
74
|
-
return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
|
75
|
-
}
|
76
|
-
|
77
|
-
const formatUpdatedString = () => {
|
78
|
-
return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
|
79
|
-
}
|
80
|
-
|
81
|
-
const formatElapsedString = () => {
|
82
|
-
return `Last updated ${userDisplay} ${dateTimestamp.value.fromNow()}`
|
83
|
-
}
|
84
|
-
|
85
|
-
const datetimeOrText = timestamp ? fullDateDisplay() : text
|
86
|
-
|
87
|
-
const captionText = () => {
|
88
|
-
switch (variant) {
|
89
|
-
case 'updated':
|
90
|
-
return formatUpdatedString(userDisplay, dateTimestamp)
|
91
|
-
case 'elapsed':
|
92
|
-
return formatElapsedString(userDisplay, timeDisplay)
|
93
|
-
default:
|
94
|
-
return showDate ? datetimeOrText : fullTimeDisplay()
|
95
|
-
}
|
96
|
-
}
|
22
|
+
const pbCss = buildCss('pb_timestamp_kit')
|
97
23
|
|
98
24
|
return (
|
99
25
|
<div
|
100
|
-
{...ariaProps}
|
101
26
|
{...dataProps}
|
102
|
-
className={
|
27
|
+
className={classnames(pbCss, globalProps(props), className)}
|
28
|
+
id={id}
|
103
29
|
>
|
104
|
-
<
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
/>
|
110
|
-
</div>
|
30
|
+
<Caption
|
31
|
+
size="xs"
|
32
|
+
tag="span"
|
33
|
+
text={text}
|
34
|
+
/>
|
111
35
|
</div>
|
112
36
|
)
|
113
37
|
}
|