playbook_ui 4.15.0 → 4.15.1.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -3
- data/app/pb_kits/playbook/data/menu.yml +0 -5
- data/app/pb_kits/playbook/index.js +1 -4
- data/app/pb_kits/playbook/packs/examples.js +0 -2
- data/app/pb_kits/playbook/pb_button/_button.jsx +1 -9
- data/app/pb_kits/playbook/pb_contact/_contact.jsx +0 -1
- data/app/pb_kits/playbook/pb_contact/contact.rb +0 -2
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +0 -5
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +0 -4
- 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 -5
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +1 -26
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/_filter.jsx +222 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +13 -16
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +41 -34
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -13
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +74 -69
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +9 -12
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +35 -28
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +6 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +41 -35
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +10 -12
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb +18 -12
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx +44 -14
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/_body.jsx +26 -0
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +14 -66
- data/app/pb_kits/playbook/pb_layout/_sidebar.jsx +26 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx +14 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_online_status/_online_status.jsx +14 -31
- data/app/pb_kits/playbook/pb_online_status/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_online_status/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +19 -26
- data/app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx +34 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb +4 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_popover/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +1 -1
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +14 -39
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +14 -47
- data/app/pb_kits/playbook/pb_title_detail/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_title_detail/docs/index.js +0 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +1 -49
- data/app/pb_kits/playbook/tokens/_colors.scss +0 -4
- data/app/pb_kits/playbook/vendor.js +0 -3
- data/lib/playbook/version.rb +1 -1
- metadata +9 -52
- data/app/pb_kits/playbook/packs/kits/pb_progress_step.js +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +0 -12
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +0 -6
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +0 -81
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +0 -19
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb +0 -136
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb +0 -37
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb +0 -22
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -56
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +0 -26
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +0 -58
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +0 -46
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +0 -37
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx +0 -34
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +0 -85
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +0 -26
- data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx +0 -63
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx +0 -87
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +0 -92
- data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx +0 -24
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +0 -19
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb +0 -6
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +0 -35
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +0 -388
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +0 -23
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +0 -44
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb +0 -8
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx +0 -18
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +0 -33
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +0 -39
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +0 -33
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +0 -40
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +0 -12
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +0 -33
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +0 -19
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -8
- data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx +0 -26
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.html.erb +0 -10
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +0 -105
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_tooltip/index.js +0 -80
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +0 -34
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d1eaec88d82c53a274c0d92dd7d6a69e63ba22589107395a1cdc0935806ceef8
|
4
|
+
data.tar.gz: 68fede97efa40f94dee01360bd6f29f3121969d5e2190c9d80b51b3531951ef1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a0f5bf6be6bd1160d6fd1eeb54e806348aa3178470574ef4a18327826e40f145d7cc6af01937b2cf612fd5f5d26f3a7c0805ae896490ab1929c2ef581afba46e
|
7
|
+
data.tar.gz: 60a66f8d413244e10d2187c5f7c1465e5310154ddbeb82d630c2fd5b7614fb2a3fd3d4730b501a538f4ad18c26b0a599d2c262cb15410d67cbc712ed33d4e8c9
|
@@ -7,7 +7,6 @@
|
|
7
7
|
@import 'pb_badge/badge';
|
8
8
|
@import 'pb_bar_graph/bar_graph';
|
9
9
|
@import 'pb_checkbox/checkbox';
|
10
|
-
@import 'pb_circle_chart/circle_chart';
|
11
10
|
@import 'pb_circle_icon_button/circle_icon_button';
|
12
11
|
@import 'pb_contact/contact';
|
13
12
|
@import 'pb_currency/currency';
|
@@ -50,7 +49,6 @@
|
|
50
49
|
@import 'pb_popover/popover';
|
51
50
|
@import 'pb_progress_pills/progress_pills';
|
52
51
|
@import 'pb_progress_simple/progress_simple';
|
53
|
-
@import 'pb_progress_step/progress_step';
|
54
52
|
@import 'pb_radio/radio';
|
55
53
|
@import 'pb_section_separator/section_separator';
|
56
54
|
@import 'pb_select/select';
|
@@ -68,7 +66,6 @@
|
|
68
66
|
@import 'pb_title_count/title_count';
|
69
67
|
@import 'pb_title_detail/title_detail';
|
70
68
|
@import 'pb_toggle/toggle';
|
71
|
-
@import 'pb_tooltip/tooltip';
|
72
69
|
@import 'pb_typeahead/typeahead';
|
73
70
|
@import 'pb_user/user';
|
74
71
|
@import 'pb_user_badge/user_badge';
|
@@ -1,6 +1,5 @@
|
|
1
1
|
samples:
|
2
2
|
- dashboards
|
3
|
-
- something
|
4
3
|
kits:
|
5
4
|
- avatar
|
6
5
|
- badge
|
@@ -14,8 +13,6 @@ kits:
|
|
14
13
|
- legend
|
15
14
|
- line_graph
|
16
15
|
- distribution_bar
|
17
|
-
- circle_chart
|
18
|
-
|
19
16
|
- filter
|
20
17
|
- fixed_confirmation_toast
|
21
18
|
- flex
|
@@ -48,13 +45,11 @@ kits:
|
|
48
45
|
- popover
|
49
46
|
- progress_pills
|
50
47
|
- progress_simple
|
51
|
-
- progress_step
|
52
48
|
- section_separator
|
53
49
|
- source
|
54
50
|
- star_rating
|
55
51
|
- stat_change
|
56
52
|
- table
|
57
|
-
- tooltip
|
58
53
|
- typography:
|
59
54
|
- body
|
60
55
|
- caption
|
@@ -52,7 +52,6 @@ export PersonContact from './pb_person_contact/_person_contact.jsx'
|
|
52
52
|
export Pill from './pb_pill/_pill.jsx'
|
53
53
|
export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
|
54
54
|
export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
|
55
|
-
export ProgressStep from './pb_progress_step/_progress_step.jsx'
|
56
55
|
export Radio from './pb_radio/_radio.jsx'
|
57
56
|
export SectionSeparator from './pb_section_separator/_section_separator.jsx'
|
58
57
|
export Select from './pb_select/_select.jsx'
|
@@ -67,11 +66,10 @@ export Textarea from './pb_textarea/_textarea.jsx'
|
|
67
66
|
export TextInput from './pb_text_input/_text_input.jsx'
|
68
67
|
export Time from './pb_time/_time.jsx'
|
69
68
|
export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
|
70
|
-
export
|
69
|
+
export TimeStamp from './pb_timestamp/_timestamp.jsx'
|
71
70
|
export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
|
72
71
|
export Title from './pb_title/_title.jsx'
|
73
72
|
export TitleCount from './pb_title_count/_title_count.jsx'
|
74
|
-
export TitleDetail from './pb_title_detail/_title_detail.jsx'
|
75
73
|
export Toggle from './pb_toggle/_toggle.jsx'
|
76
74
|
export User from './pb_user/_user.jsx'
|
77
75
|
export UserBadge from './pb_user_badge/_user_badge.jsx'
|
@@ -88,4 +86,3 @@ export pbChart from './plugins/pb_chart.js'
|
|
88
86
|
export PbTypeahead from './pb_typeahead'
|
89
87
|
export PbPopover from './pb_popover'
|
90
88
|
export PbTable from './pb_table'
|
91
|
-
export PbTooltip from './pb_tooltip'
|
@@ -63,7 +63,6 @@ import * as PersonContact from 'pb_person_contact/docs'
|
|
63
63
|
import * as Pill from 'pb_pill/docs'
|
64
64
|
import * as ProgressPills from 'pb_progress_pills/docs'
|
65
65
|
import * as ProgressSimple from 'pb_progress_simple/docs'
|
66
|
-
import * as ProgressStep from 'pb_progress_step/docs'
|
67
66
|
import * as Radio from 'pb_radio/docs'
|
68
67
|
import * as SectionSeparator from 'pb_section_separator/docs'
|
69
68
|
import * as Select from 'pb_select/docs'
|
@@ -138,7 +137,6 @@ WebpackerReact.setup({
|
|
138
137
|
...Pill,
|
139
138
|
...ProgressPills,
|
140
139
|
...ProgressSimple,
|
141
|
-
...ProgressStep,
|
142
140
|
...Radio,
|
143
141
|
...SectionSeparator,
|
144
142
|
...Select,
|
@@ -3,8 +3,6 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
|
6
|
-
import Icon from '../pb_icon/_icon.jsx'
|
7
|
-
|
8
6
|
type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
|
9
7
|
type ButtonPropTypes = {
|
10
8
|
aria?: {
|
@@ -85,13 +83,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
85
83
|
const buttonAria = buttonAriaProps(props)
|
86
84
|
const css = classnames(buttonClassName(props), className)
|
87
85
|
const loadingIcon = (
|
88
|
-
<
|
89
|
-
<Icon
|
90
|
-
fixedWidth
|
91
|
-
icon="spinner"
|
92
|
-
pulse
|
93
|
-
/>
|
94
|
-
</div>
|
86
|
+
<i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon" />
|
95
87
|
)
|
96
88
|
|
97
89
|
const content = (
|
@@ -4,9 +4,6 @@ import typography from '../tokens/_typography.scss'
|
|
4
4
|
import Highcharts from 'highcharts'
|
5
5
|
|
6
6
|
const highchartsTheme = {
|
7
|
-
lang: {
|
8
|
-
thousandsSep: ',',
|
9
|
-
},
|
10
7
|
colors: [
|
11
8
|
colors.data_1,
|
12
9
|
colors.data_2,
|
@@ -22,6 +19,7 @@ const highchartsTheme = {
|
|
22
19
|
plotBackgroundColor: null,
|
23
20
|
plotShadow: false,
|
24
21
|
plotBorderWidth: 0,
|
22
|
+
|
25
23
|
},
|
26
24
|
title: {
|
27
25
|
style: {
|
@@ -143,29 +141,6 @@ const highchartsTheme = {
|
|
143
141
|
},
|
144
142
|
threshold: null,
|
145
143
|
},
|
146
|
-
|
147
|
-
// PIE STYLES
|
148
|
-
pie: {
|
149
|
-
colors: [
|
150
|
-
colors.data_1,
|
151
|
-
colors.data_2,
|
152
|
-
colors.data_3,
|
153
|
-
colors.data_4,
|
154
|
-
colors.data_5,
|
155
|
-
colors.data_6,
|
156
|
-
colors.data_7,
|
157
|
-
],
|
158
|
-
dataLabels: {
|
159
|
-
style: {
|
160
|
-
fontFamily: typography.font_family_base,
|
161
|
-
fontSize: typography.text_smaller,
|
162
|
-
color: colors.text_lt_light,
|
163
|
-
fontWeight: typography.regular,
|
164
|
-
},
|
165
|
-
},
|
166
|
-
},
|
167
|
-
|
168
|
-
// LINE CHART STYLES
|
169
144
|
line: {
|
170
145
|
dataLabels: {
|
171
146
|
color: '#CCC',
|
@@ -12,7 +12,7 @@ import {
|
|
12
12
|
} from '../'
|
13
13
|
|
14
14
|
type DateYearStackedProps = {
|
15
|
-
align?: '
|
15
|
+
align?: 'center' | 'right',
|
16
16
|
className?: String | Array<String>,
|
17
17
|
dark?: Boolean,
|
18
18
|
data?: String,
|
@@ -21,7 +21,7 @@ type DateYearStackedProps = {
|
|
21
21
|
}
|
22
22
|
|
23
23
|
const DateYearStacked = ({
|
24
|
-
align
|
24
|
+
align,
|
25
25
|
className,
|
26
26
|
dark = false,
|
27
27
|
date,
|
@@ -1,3 +1,224 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import {
|
5
|
+
Button,
|
6
|
+
Caption,
|
7
|
+
Card,
|
8
|
+
CircleIconButton,
|
9
|
+
Flex,
|
10
|
+
Icon,
|
11
|
+
List,
|
12
|
+
ListItem,
|
13
|
+
PbReactPopover,
|
14
|
+
SectionSeparator,
|
15
|
+
Title,
|
16
|
+
TitleCount,
|
17
|
+
} from '../'
|
18
|
+
|
19
|
+
type FilterProps = {
|
20
|
+
background?: Boolean,
|
21
|
+
className?: String,
|
22
|
+
data?: String,
|
23
|
+
id?: String,
|
24
|
+
children?: React.Node,
|
25
|
+
filters?: Array<Hash>,
|
26
|
+
results?: Number,
|
27
|
+
sortMenu?: Array<Hash>,
|
28
|
+
template?: 'default' | 'filter_only' | 'sort_only' | 'single'
|
29
|
+
}
|
30
|
+
|
31
|
+
const Filter = ({
|
32
|
+
background = true,
|
33
|
+
className = 'pb_filter_kit',
|
34
|
+
data,
|
35
|
+
filters = [{}],
|
36
|
+
id,
|
37
|
+
children,
|
38
|
+
results,
|
39
|
+
sortMenu = null,
|
40
|
+
template = 'default',
|
41
|
+
}: FilterProps) => {
|
42
|
+
const [showFilterOptions, setShowFilterOptions] = useState(false)
|
43
|
+
const [showSortOptions, setShowSortOptions] = useState(false)
|
44
|
+
const handleToggleFilters = () => {
|
45
|
+
setShowFilterOptions(!showFilterOptions)
|
46
|
+
}
|
47
|
+
const handleToggleSort = () => {
|
48
|
+
setShowSortOptions(!showSortOptions)
|
49
|
+
}
|
50
|
+
|
51
|
+
const filterButton = (
|
52
|
+
<CircleIconButton
|
53
|
+
icon="filter"
|
54
|
+
id="filter"
|
55
|
+
onClick={handleToggleFilters}
|
56
|
+
text="filter"
|
57
|
+
variant="secondary"
|
58
|
+
/>
|
59
|
+
)
|
60
|
+
|
61
|
+
const Filters = () => (
|
62
|
+
<If condition={template != 'sort_only' && filters != null}>
|
63
|
+
<PbReactPopover
|
64
|
+
closeOnClick="outside"
|
65
|
+
offset
|
66
|
+
placement="bottom"
|
67
|
+
reference={filterButton}
|
68
|
+
show={showFilterOptions}
|
69
|
+
>
|
70
|
+
<div className="pb-form">
|
71
|
+
{children}
|
72
|
+
</div>
|
73
|
+
|
74
|
+
</PbReactPopover>
|
75
|
+
<div className="maskContainer">
|
76
|
+
<div className="filters">
|
77
|
+
<div className="left_gradient" />
|
78
|
+
{ filters.map((item, index) => (
|
79
|
+
<div
|
80
|
+
className="filter"
|
81
|
+
key={index}
|
82
|
+
>
|
83
|
+
<Caption text={item.name} />
|
84
|
+
<Title
|
85
|
+
size={4}
|
86
|
+
tag="h4"
|
87
|
+
text={item.value}
|
88
|
+
/>
|
89
|
+
</div>
|
90
|
+
))}
|
91
|
+
<div className="right_gradient" />
|
92
|
+
</div>
|
93
|
+
</div>
|
94
|
+
</If>
|
95
|
+
)
|
96
|
+
|
97
|
+
const activeSort = () => {
|
98
|
+
return (
|
99
|
+
sortMenu.map((item) => (
|
100
|
+
item.active ? item.item : null
|
101
|
+
))
|
102
|
+
)
|
103
|
+
}
|
104
|
+
|
105
|
+
const activeDirection = () => {
|
106
|
+
let direction
|
107
|
+
sortMenu.map((item) => {
|
108
|
+
item.active ? direction = item.direction : null
|
109
|
+
})
|
110
|
+
const icon = direction == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
|
111
|
+
return icon
|
112
|
+
}
|
113
|
+
|
114
|
+
const sortButton = (
|
115
|
+
<If condition={sortMenu != null}>
|
116
|
+
<Button
|
117
|
+
id="sort-button"
|
118
|
+
onClick={handleToggleSort}
|
119
|
+
variant="link"
|
120
|
+
>
|
121
|
+
{activeSort()}
|
122
|
+
<Icon
|
123
|
+
fixedWidth
|
124
|
+
icon={`${activeDirection()}`}
|
125
|
+
/>
|
126
|
+
</Button>
|
127
|
+
</If>
|
128
|
+
)
|
129
|
+
const Results = () => {
|
130
|
+
const resultsText = results > 1 ? 'Results' : 'Result'
|
131
|
+
return (
|
132
|
+
<If condition={results != undefined}>
|
133
|
+
<If condition={template != 'default'}>
|
134
|
+
<Caption
|
135
|
+
className="filter-results"
|
136
|
+
size="xs"
|
137
|
+
text={`${results} ${resultsText}`}
|
138
|
+
/>
|
139
|
+
<Else />
|
140
|
+
<TitleCount
|
141
|
+
align="center"
|
142
|
+
count={results}
|
143
|
+
title={`${resultsText}:`}
|
144
|
+
/>
|
145
|
+
</If>
|
146
|
+
</If>
|
147
|
+
)
|
148
|
+
}
|
149
|
+
const Sort = () => (
|
150
|
+
<If condition={template != 'filter_only'}>
|
151
|
+
<Flex
|
152
|
+
orientation="row"
|
153
|
+
vertical="center"
|
154
|
+
>
|
155
|
+
<If condition={template == 'default'}>
|
156
|
+
<Caption text="sort by:" />
|
157
|
+
</If>
|
158
|
+
<PbReactPopover
|
159
|
+
closeOnClick="outside"
|
160
|
+
offset
|
161
|
+
placement="bottom"
|
162
|
+
reference={sortButton}
|
163
|
+
show={showSortOptions}
|
164
|
+
>
|
165
|
+
<List>
|
166
|
+
{sortMenu ? sortMenu.map((item) => (
|
167
|
+
<ListItem key={item.item}>
|
168
|
+
<Button
|
169
|
+
link={item.link}
|
170
|
+
text={item.item}
|
171
|
+
variant="link"
|
172
|
+
/>
|
173
|
+
</ListItem>
|
174
|
+
)) : null}
|
175
|
+
|
176
|
+
</List>
|
177
|
+
</PbReactPopover>
|
178
|
+
</Flex>
|
179
|
+
</If>
|
180
|
+
)
|
181
|
+
const Core = () => (
|
182
|
+
<>
|
183
|
+
<Flex
|
184
|
+
orientation="row"
|
185
|
+
vertical="center"
|
186
|
+
>
|
187
|
+
<Filters />
|
188
|
+
<If condition={template != 'default'}>
|
189
|
+
<Results />
|
190
|
+
<Sort />
|
191
|
+
</If>
|
192
|
+
</Flex>
|
193
|
+
<If condition={template == 'default'}>
|
194
|
+
<SectionSeparator />
|
195
|
+
<Flex
|
196
|
+
className="filter-bottom"
|
197
|
+
orientation="row"
|
198
|
+
spacing="between"
|
199
|
+
vertical="center"
|
200
|
+
>
|
201
|
+
<Results />
|
202
|
+
<Sort />
|
203
|
+
</Flex>
|
204
|
+
</If>
|
205
|
+
</>
|
206
|
+
)
|
207
|
+
return (
|
208
|
+
<div
|
209
|
+
className={className}
|
210
|
+
data={data}
|
211
|
+
id={id}
|
212
|
+
>
|
213
|
+
<If condition={background}>
|
214
|
+
<Card padding="none">
|
215
|
+
<Core />
|
216
|
+
</Card>
|
217
|
+
<Else />
|
218
|
+
<Core />
|
219
|
+
</If>
|
220
|
+
</div>
|
221
|
+
)
|
222
|
+
}
|
223
|
+
|
224
|
+
export default Filter
|
@@ -1,30 +1,27 @@
|
|
1
1
|
@import "../tokens/spacing";
|
2
2
|
@import "../tokens/colors";
|
3
3
|
|
4
|
-
.pb_filter_sort_menu {
|
5
|
-
li {
|
6
|
-
padding: 0 $space_sm !important;
|
7
|
-
}
|
8
|
-
[class^=pb_button_kit][class*=_link]{
|
9
|
-
flex-shrink:0;
|
10
|
-
padding: 0 $space_xs !important;
|
11
|
-
[id^="sort"]{
|
12
|
-
margin-left: $space_xs !important;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
[class^=pb_card_body_kit][class*=_md]{
|
16
|
-
padding: 0 !important;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
4
|
[class^=pb_filter_kit] {
|
21
5
|
[class^=pb_circle_icon_button_kit]{
|
22
6
|
padding-left: $space_sm !important;
|
23
7
|
padding-top: $space_sm !important;
|
24
8
|
padding-bottom: $space_sm !important;
|
25
9
|
}
|
10
|
+
[class^=pb_card_body_kit][class*=_md]{
|
11
|
+
padding: 0 !important;
|
12
|
+
}
|
13
|
+
[class^=pb_list_kit] li{
|
14
|
+
padding: 0 $space_sm !important;
|
15
|
+
}
|
26
16
|
[class^=pb-form]{
|
27
17
|
padding: $space_sm ;
|
18
|
+
}
|
19
|
+
[class^=pb_button_kit][class*=_link]{
|
20
|
+
flex-shrink:0;
|
21
|
+
padding: 0 $space_xs !important;
|
22
|
+
[id^="sort"]{
|
23
|
+
margin-left: $space_xs !important;
|
24
|
+
}
|
28
25
|
}
|
29
26
|
.sort-by{
|
30
27
|
flex-shrink:0;
|
@@ -1,39 +1,46 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
10
|
-
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
1
|
+
<% 5.times do%>
|
2
|
+
<br>
|
3
|
+
<%end%>
|
4
|
+
|
5
|
+
<%= pb_rails("filter", props: {
|
6
|
+
id: "1",
|
7
|
+
filters: [
|
8
|
+
{name: "name", value: "John Wick"}
|
11
9
|
],
|
12
|
-
|
13
|
-
|
14
|
-
|
10
|
+
sort_menu: [
|
11
|
+
{item:"Popularity", link:"#", active: true, direction:"desc"},
|
12
|
+
{item:"Title", link:"#", active: false},
|
13
|
+
{item:"Name", link:"#", active: false},
|
14
|
+
],
|
15
|
+
template:"default",
|
16
|
+
results: 546,
|
17
|
+
}) do%>
|
18
|
+
<%
|
19
|
+
example_collection = [
|
20
|
+
OpenStruct.new(name: "Alabama", value: 1),
|
21
|
+
OpenStruct.new(name: "Alaska", value: 2),
|
22
|
+
OpenStruct.new(name: "Arizona", value: 3),
|
23
|
+
OpenStruct.new(name: "Arkansas", value: 4),
|
24
|
+
OpenStruct.new(name: "California", value: 5),
|
25
|
+
OpenStruct.new(name: "Colorado", value: 6),
|
26
|
+
OpenStruct.new(name: "Connecticut", value: 7),
|
27
|
+
OpenStruct.new(name: "Delaware", value: 8),
|
28
|
+
OpenStruct.new(name: "Florida", value: 9),
|
29
|
+
OpenStruct.new(name: "Georgia", value: 10),
|
30
|
+
]
|
15
31
|
%>
|
16
|
-
<%
|
17
|
-
example_collection = [
|
18
|
-
OpenStruct.new(name: "Alabama", value: 1),
|
19
|
-
OpenStruct.new(name: "Alaska", value: 2),
|
20
|
-
OpenStruct.new(name: "Arizona", value: 3),
|
21
|
-
OpenStruct.new(name: "Arkansas", value: 4),
|
22
|
-
OpenStruct.new(name: "California", value: 5),
|
23
|
-
OpenStruct.new(name: "Colorado", value: 6),
|
24
|
-
OpenStruct.new(name: "Connecticut", value: 7),
|
25
|
-
OpenStruct.new(name: "Delaware", value: 8),
|
26
|
-
OpenStruct.new(name: "Florida", value: 9),
|
27
|
-
OpenStruct.new(name: "Georgia", value: 10),
|
28
|
-
]
|
29
|
-
%>
|
30
|
-
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
31
|
-
<%= form.text_field :example_text_field, props: { label: true } %>
|
32
|
-
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
33
32
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
33
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
34
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
35
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
36
|
+
|
37
|
+
<%= form.actions do |action| %>
|
38
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
39
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
38
40
|
<% end %>
|
39
41
|
<% end %>
|
42
|
+
|
43
|
+
<% end %>
|
44
|
+
<% 5.times do%>
|
45
|
+
<br>
|
46
|
+
<%end%>
|
@@ -11,20 +11,16 @@ const FilterDefault = () => {
|
|
11
11
|
]
|
12
12
|
return (
|
13
13
|
<Filter
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}}
|
14
|
+
filters={[
|
15
|
+
{ name: 'Full Name', value: 'John Wick' },
|
16
|
+
{ name: 'Territory', value: 'San Francisco' },
|
17
|
+
]}
|
19
18
|
results={256}
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
manager_name: 'Manager\'s Name',
|
26
|
-
}}
|
27
|
-
sortValue={[{ name: 'popularity', dir: 'asc' }]}
|
19
|
+
sortMenu={[
|
20
|
+
{ item: 'Popularity', link: '#', active: true, direction: 'desc' },
|
21
|
+
{ item: 'Title', link: '#', active: false },
|
22
|
+
{ item: 'Name', link: '#', active: false },
|
23
|
+
]}
|
28
24
|
>
|
29
25
|
<TextInput
|
30
26
|
label="Full Name"
|