playbook_ui 7.7.0.pre.alpha1 → 7.8.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/images/{sample_screenshot.svg → full_page_samples.svg} +0 -0
- data/app/pb_kits/playbook/_playbook.scss +4 -1
- data/app/pb_kits/playbook/data/menu.yml +3 -0
- data/app/pb_kits/playbook/index.js +4 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +27 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +8 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +9 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +17 -6
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +15 -5
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -1
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx +4 -1
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +9 -4
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +0 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +44 -23
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +3 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +5 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +6 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +73 -28
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +3 -7
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +4 -3
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb +1 -2
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx +3 -3
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +4 -5
- data/app/pb_kits/playbook/pb_form_group/_form_group.html.erb +7 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +41 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +123 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb +12 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx +39 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb +6 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx +21 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx +26 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +35 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb +21 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx +42 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx +35 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb +42 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx +31 -0
- data/app/pb_kits/playbook/pb_form_group/docs/example.yml +20 -0
- data/app/pb_kits/playbook/pb_form_group/docs/index.js +7 -0
- data/app/pb_kits/playbook/pb_form_group/form_group.rb +15 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.html.erb +24 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx +105 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +64 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +49 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +67 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb +11 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +25 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.html.erb +20 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +35 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.html.erb +7 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +52 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +123 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +215 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb +3 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +11 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +14 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb +115 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +39 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js +75 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +55 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/useFocus.js +20 -0
- data/app/pb_kits/playbook/pb_table/_table.scss +45 -13
- data/app/pb_kits/playbook/pb_table/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +70 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +61 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -1
- data/app/pb_kits/playbook/pb_table/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb +3 -6
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +15 -21
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss +0 -17
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb +4 -1
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx +12 -1
- data/app/pb_kits/playbook/pb_time_stacked/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_time_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb +7 -11
- data/app/pb_kits/playbook/react_rails_kits.js +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +9 -0
- data/app/pb_kits/playbook/utilities/test-utils.js +24 -0
- data/app/pb_kits/playbook/vendor.js +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +73 -10
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.html.erb +0 -2
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.jsx +0 -15
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f5edc6bf656e6d1e7aa9e67313cccebd45847f9573ad987747db8ab5400229cd
|
4
|
+
data.tar.gz: 7a99d92a2b485d89e6ea294820012ac5d7719ab82cd85a7e36676520e3522973
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8df37ff76c9e25cde1b16ec5e292f54248b18f1aa0493fb3771dde68440dba1132647ea136be5ba47f07c3aa457fb3d76b3dc2296cd39bc1d8832909e0b36a2c
|
7
|
+
data.tar.gz: 8d3e71da8e414e6806da81a7cdd70e5744afa26f9a387745d1c1f8c3a55e783416df85e4eaca2012dce1c3b2d5eec447ce2da8221802dbb4e8e760f38f4b25a8
|
File without changes
|
@@ -29,6 +29,7 @@
|
|
29
29
|
@import 'pb_filter/filter';
|
30
30
|
@import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
|
31
31
|
@import 'pb_form/form';
|
32
|
+
@import 'pb_form_group/form_group';
|
32
33
|
@import 'pb_form_pill/form_pill';
|
33
34
|
@import 'pb_flex/flex';
|
34
35
|
@import 'pb_gauge/gauge';
|
@@ -37,6 +38,7 @@
|
|
37
38
|
@import 'pb_home_address_street/home_address_street';
|
38
39
|
@import 'pb_icon/icon';
|
39
40
|
@import 'pb_icon_circle/icon_circle';
|
41
|
+
@import 'pb_icon_stat_value/icon_stat_value';
|
40
42
|
@import 'pb_icon_value/icon_value';
|
41
43
|
@import 'pb_image/image';
|
42
44
|
@import 'pb_label_pill/label_pill';
|
@@ -59,6 +61,7 @@
|
|
59
61
|
@import 'pb_progress_simple/progress_simple';
|
60
62
|
@import 'pb_progress_step/progress_step';
|
61
63
|
@import 'pb_radio/radio';
|
64
|
+
@import 'pb_rich_text_editor/rich_text_editor';
|
62
65
|
@import 'pb_section_separator/section_separator';
|
63
66
|
@import 'pb_select/select';
|
64
67
|
@import 'pb_selectable_card/selectable_card';
|
@@ -86,4 +89,4 @@
|
|
86
89
|
@import 'pb_time_stacked/time_stacked';
|
87
90
|
@import 'pb_weekday_stacked/weekday_stacked';
|
88
91
|
@import './utilities/spacing';
|
89
|
-
|
92
|
+
@import "trix";
|
@@ -22,6 +22,7 @@ kits:
|
|
22
22
|
- date_picker
|
23
23
|
- file_upload
|
24
24
|
- form
|
25
|
+
- form_group
|
25
26
|
- form_pill
|
26
27
|
- radio
|
27
28
|
- select
|
@@ -36,6 +37,7 @@ kits:
|
|
36
37
|
- highlight
|
37
38
|
- icon
|
38
39
|
- icon_circle
|
40
|
+
- icon_stat_value
|
39
41
|
- icon_value
|
40
42
|
- image
|
41
43
|
- layout
|
@@ -54,6 +56,7 @@ kits:
|
|
54
56
|
- progress_pills
|
55
57
|
- progress_simple
|
56
58
|
- progress_step
|
59
|
+
- rich_text_editor
|
57
60
|
- section_separator
|
58
61
|
- source
|
59
62
|
- star_rating
|
@@ -5,7 +5,7 @@ import 'lazysizes'
|
|
5
5
|
// React Component JSX Imports from the React Kits
|
6
6
|
export Avatar from './pb_avatar/_avatar.jsx'
|
7
7
|
export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
|
8
|
-
export Background from 'pb_background/_background.jsx'
|
8
|
+
export Background from './pb_background/_background.jsx'
|
9
9
|
export Badge from './pb_badge/_badge.jsx'
|
10
10
|
export BarGraph from './pb_bar_graph/_bar_graph.jsx'
|
11
11
|
export Body from './pb_body/_body.jsx'
|
@@ -33,6 +33,7 @@ export Filter from './pb_filter/_filter.jsx'
|
|
33
33
|
export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
|
34
34
|
export Flex from './pb_flex/_flex.jsx'
|
35
35
|
export FlexItem from './pb_flex/_flex_item.jsx'
|
36
|
+
export FormGroup from './pb_form_group/_form_group.jsx'
|
36
37
|
export FormPill from './pb_form_pill/_form_pill.jsx'
|
37
38
|
export Gauge from './pb_gauge/_gauge.jsx'
|
38
39
|
export Hashtag from './pb_hashtag/_hashtag.jsx'
|
@@ -40,6 +41,7 @@ export Highlight from './pb_highlight/_highlight.jsx'
|
|
40
41
|
export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
|
41
42
|
export Icon from './pb_icon/_icon.jsx'
|
42
43
|
export IconCircle from './pb_icon_circle/_icon_circle.jsx'
|
44
|
+
export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
|
43
45
|
export IconValue from './pb_icon_value/_icon_value.jsx'
|
44
46
|
export Image from './pb_image/_image.jsx'
|
45
47
|
export LabelPill from './pb_label_pill/_label_pill.jsx'
|
@@ -65,6 +67,7 @@ export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
|
|
65
67
|
export ProgressStep from './pb_progress_step/_progress_step.jsx'
|
66
68
|
export ProgressStepItem from './pb_progress_step/_progress_step_item.jsx'
|
67
69
|
export Radio from './pb_radio/_radio.jsx'
|
70
|
+
export RichTextEditor from './pb_rich_text_editor/_rich_text_editor.jsx'
|
68
71
|
export SectionSeparator from './pb_section_separator/_section_separator.jsx'
|
69
72
|
export Select from './pb_select/_select.jsx'
|
70
73
|
export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
|
@@ -27,7 +27,7 @@ const firstTwoInitials = (name) =>
|
|
27
27
|
.substring(0, 2)
|
28
28
|
|
29
29
|
const Avatar = (props: AvatarProps) => {
|
30
|
-
const { aria = {}, className, data = {}, name = null, id =
|
30
|
+
const { aria = {}, className, data = {}, name = null, id = '', imageUrl, size = 'md', status = null, dark = false } = props
|
31
31
|
const dataProps = buildDataProps(data)
|
32
32
|
const ariaProps = buildAriaProps(aria)
|
33
33
|
const classes = classnames(
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Avatar from './_avatar'
|
5
|
+
|
6
|
+
const imageUrl = 'https://randomuser.me/api/portraits/men/44.jpg',
|
7
|
+
testId = 'tjohnson',
|
8
|
+
name = 'Terry Johnson'
|
9
|
+
|
10
|
+
test('loads the given image url and name', () => {
|
11
|
+
render(
|
12
|
+
<Avatar
|
13
|
+
data={{ testid: testId }}
|
14
|
+
imageUrl={imageUrl}
|
15
|
+
name={name}
|
16
|
+
/>
|
17
|
+
)
|
18
|
+
|
19
|
+
const kit = screen.getByTestId(testId)
|
20
|
+
const image = screen.getByAltText(name)
|
21
|
+
const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
|
22
|
+
|
23
|
+
expect(kit).toHaveClass('pb_avatar_kit_md')
|
24
|
+
expect(kit).toHaveAttribute('data-initials', initials)
|
25
|
+
expect(image).toHaveAttribute('data-src', imageUrl)
|
26
|
+
expect(image).toHaveAttribute('src', imageUrl)
|
27
|
+
})
|
@@ -1,8 +1,7 @@
|
|
1
1
|
@import "../pb_caption/caption_mixin";
|
2
2
|
@import "../pb_textarea/textarea_mixin";
|
3
3
|
@import "../tokens/colors";
|
4
|
-
|
5
|
-
@import "~flatpickr/dist/flatpickr.min.css";
|
4
|
+
@import "./sass_partials/flatpickr_styles";
|
6
5
|
|
7
6
|
[class^=pb_date_picker_kit] {
|
8
7
|
.input_wrapper {
|
@@ -9,12 +9,13 @@ export type FilterDescription = {
|
|
9
9
|
}
|
10
10
|
|
11
11
|
export type CurrentFiltersProps = {
|
12
|
+
dark: boolean,
|
12
13
|
filters: FilterDescription,
|
13
14
|
}
|
14
15
|
|
15
16
|
const hiddenFilters = (value) => isEmpty(value) && value !== true
|
16
17
|
|
17
|
-
const CurrentFilters = ({ filters }: CurrentFiltersProps) => {
|
18
|
+
const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
|
18
19
|
const displayableFilters = omitBy(filters, hiddenFilters)
|
19
20
|
|
20
21
|
return (
|
@@ -30,14 +31,19 @@ const CurrentFilters = ({ filters }: CurrentFiltersProps) => {
|
|
30
31
|
<Choose>
|
31
32
|
<When condition={value === true}>
|
32
33
|
<Title
|
34
|
+
dark={dark}
|
33
35
|
size={4}
|
34
36
|
tag="h4"
|
35
37
|
text={name}
|
36
38
|
/>
|
37
39
|
</When>
|
38
40
|
<Otherwise>
|
39
|
-
<Caption
|
41
|
+
<Caption
|
42
|
+
dark={dark}
|
43
|
+
text={name}
|
44
|
+
/>
|
40
45
|
<Title
|
46
|
+
dark={dark}
|
41
47
|
size={4}
|
42
48
|
tag="h4"
|
43
49
|
text={value}
|
@@ -9,15 +9,22 @@ type FilterBackgroundProps = {
|
|
9
9
|
background: boolean,
|
10
10
|
className: string,
|
11
11
|
children: Node,
|
12
|
+
dark: boolean,
|
12
13
|
}
|
14
|
+
|
13
15
|
const FilterBackground = (props: FilterBackgroundProps) => {
|
14
|
-
const { background = true, className, children } = props
|
16
|
+
const { background = true, className, children, dark } = props
|
15
17
|
|
16
18
|
return (
|
17
19
|
<div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
|
18
20
|
<Choose>
|
19
21
|
<When condition={background}>
|
20
|
-
<Card
|
22
|
+
<Card
|
23
|
+
dark={dark}
|
24
|
+
padding="none"
|
25
|
+
>
|
26
|
+
{children}
|
27
|
+
</Card>
|
21
28
|
</When>
|
22
29
|
<Otherwise>{children}</Otherwise>
|
23
30
|
</Choose>
|
@@ -18,18 +18,24 @@ export type FilterDoubleProps = {
|
|
18
18
|
sortValue?: SortValue,
|
19
19
|
} & FilterBackgroundProps
|
20
20
|
|
21
|
-
const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterDoubleProps) => (
|
22
|
-
<FilterBackground
|
21
|
+
const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterDoubleProps) => (
|
22
|
+
<FilterBackground
|
23
|
+
dark={dark}
|
24
|
+
{...bgProps}
|
25
|
+
>
|
23
26
|
<Flex
|
24
27
|
orientation="row"
|
25
28
|
vertical="center"
|
26
29
|
>
|
27
|
-
<FiltersPopover>
|
30
|
+
<FiltersPopover dark={dark}>
|
28
31
|
{children}
|
29
32
|
</FiltersPopover>
|
30
|
-
<CurrentFilters
|
33
|
+
<CurrentFilters
|
34
|
+
dark={dark}
|
35
|
+
filters={filters}
|
36
|
+
/>
|
31
37
|
</Flex>
|
32
|
-
<SectionSeparator />
|
38
|
+
<SectionSeparator dark={dark} />
|
33
39
|
<Flex
|
34
40
|
className="filter-bottom"
|
35
41
|
orientation="row"
|
@@ -37,6 +43,7 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
|
|
37
43
|
vertical="center"
|
38
44
|
>
|
39
45
|
<ResultsCount
|
46
|
+
dark={dark}
|
40
47
|
results={results}
|
41
48
|
title
|
42
49
|
/>
|
@@ -44,8 +51,12 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
|
|
44
51
|
orientation="row"
|
45
52
|
vertical="center"
|
46
53
|
>
|
47
|
-
<Caption
|
54
|
+
<Caption
|
55
|
+
dark={dark}
|
56
|
+
text="sort by:"
|
57
|
+
/>
|
48
58
|
<SortMenu
|
59
|
+
dark={dark}
|
49
60
|
onChange={onSortChange}
|
50
61
|
options={sortOptions}
|
51
62
|
value={sortValue}
|
@@ -19,21 +19,31 @@ export type FilterSingleProps = {
|
|
19
19
|
sortValue?: SortValue,
|
20
20
|
} & FilterBackgroundProps
|
21
21
|
|
22
|
-
const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterSingleProps) => (
|
23
|
-
<FilterBackground
|
22
|
+
const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterSingleProps) => (
|
23
|
+
<FilterBackground
|
24
|
+
dark={dark}
|
25
|
+
{...bgProps}
|
26
|
+
>
|
24
27
|
<Flex
|
25
28
|
orientation="row"
|
26
29
|
vertical="center"
|
27
30
|
>
|
28
31
|
<If condition={children}>
|
29
|
-
<FiltersPopover>
|
32
|
+
<FiltersPopover dark={dark}>
|
30
33
|
{children}
|
31
34
|
</FiltersPopover>
|
32
|
-
<CurrentFilters
|
35
|
+
<CurrentFilters
|
36
|
+
dark={dark}
|
37
|
+
filters={filters}
|
38
|
+
/>
|
33
39
|
</If>
|
34
|
-
<ResultsCount
|
40
|
+
<ResultsCount
|
41
|
+
dark={dark}
|
42
|
+
results={results}
|
43
|
+
/>
|
35
44
|
<If condition={!isEmpty(sortOptions)}>
|
36
45
|
<SortMenu
|
46
|
+
dark={dark}
|
37
47
|
onChange={onSortChange}
|
38
48
|
options={sortOptions}
|
39
49
|
value={sortValue}
|
@@ -4,12 +4,13 @@ import React, { Node, useState } from 'react'
|
|
4
4
|
import { CircleIconButton, PbReactPopover } from '../../'
|
5
5
|
|
6
6
|
const FiltersPopoverProps = { children: Node }
|
7
|
-
const FiltersPopover = ({ children }: FiltersPopoverProps) => {
|
7
|
+
const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
|
8
8
|
const [hide, updateHide] = useState(true)
|
9
9
|
const toggle = () => updateHide(!hide)
|
10
10
|
|
11
11
|
const filterButton = (
|
12
12
|
<CircleIconButton
|
13
|
+
dark={dark}
|
13
14
|
icon="filter"
|
14
15
|
id="filter"
|
15
16
|
onClick={toggle}
|
@@ -6,21 +6,24 @@ import { Caption, TitleCount } from '../../'
|
|
6
6
|
const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
|
7
7
|
|
8
8
|
type ResultsCountProps = {
|
9
|
+
dark?: boolean,
|
9
10
|
results?: ?number,
|
10
11
|
title?: boolean,
|
11
12
|
}
|
12
|
-
const ResultsCount = ({ results, title }: ResultsCountProps) => (
|
13
|
+
const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
|
13
14
|
<Choose>
|
14
15
|
<When condition={results && title}>
|
15
16
|
<TitleCount
|
16
17
|
align="center"
|
17
18
|
count={results}
|
19
|
+
dark={dark}
|
18
20
|
title={`${resultsText(results)}:`}
|
19
21
|
/>
|
20
22
|
</When>
|
21
23
|
<When condition={results}>
|
22
24
|
<Caption
|
23
25
|
className="filter-results"
|
26
|
+
dark={dark}
|
24
27
|
size="xs"
|
25
28
|
text={`${results} ${resultsText(results)}`}
|
26
29
|
/>
|
@@ -38,11 +38,12 @@ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (
|
|
38
38
|
)
|
39
39
|
|
40
40
|
export type SortMenuProps = {
|
41
|
-
|
42
|
-
options: SortOptions,
|
41
|
+
dark?: boolean,
|
43
42
|
onChange: SortingChangeCallback,
|
43
|
+
options: SortOptions,
|
44
|
+
value?: SortValue[],
|
44
45
|
}
|
45
|
-
const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
|
46
|
+
const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
|
46
47
|
const [hide, updateHide] = useState(true)
|
47
48
|
const toggle = () => updateHide(!hide)
|
48
49
|
const handleChange = (value: SortValue) => {
|
@@ -52,13 +53,17 @@ const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
|
|
52
53
|
|
53
54
|
const sortButton = (
|
54
55
|
<Button
|
56
|
+
dark={dark}
|
55
57
|
id="sort-button"
|
56
58
|
onClick={toggle}
|
57
59
|
variant="link"
|
58
60
|
>
|
59
61
|
{map(value, ({ dir, name }) => (
|
60
62
|
<span key={`current-sort-${name}-${dir}`}>
|
61
|
-
<Icon
|
63
|
+
<Icon
|
64
|
+
dark={dark}
|
65
|
+
icon={directionIcon(dir)}
|
66
|
+
/>
|
62
67
|
{` ${options[name]}`}
|
63
68
|
</span>
|
64
69
|
))}
|
@@ -5,46 +5,54 @@
|
|
5
5
|
li {
|
6
6
|
padding: 0 $space_sm !important;
|
7
7
|
}
|
8
|
-
|
8
|
+
|
9
|
+
[class^=pb_button_kit][class*=_link] {
|
9
10
|
flex-shrink:0;
|
10
11
|
padding: 0 $space_xs !important;
|
11
|
-
[id^="sort"]{
|
12
|
+
[id^="sort"] {
|
12
13
|
margin-left: $space_xs !important;
|
13
14
|
}
|
14
15
|
}
|
15
|
-
|
16
|
+
|
17
|
+
[class^=pb_card_body_kit][class*=_md] {
|
16
18
|
padding: 0 !important;
|
17
19
|
}
|
18
20
|
}
|
19
21
|
|
20
22
|
[class^=pb_filter_kit] {
|
21
|
-
[class^=pb_circle_icon_button_kit]{
|
23
|
+
[class^=pb_circle_icon_button_kit] {
|
22
24
|
padding-left: $space_sm !important;
|
23
25
|
padding-top: $space_sm !important;
|
24
26
|
padding-bottom: $space_sm !important;
|
25
27
|
}
|
26
|
-
|
28
|
+
|
29
|
+
[class^=pb-form] {
|
27
30
|
padding: $space_sm ;
|
28
31
|
}
|
29
|
-
|
32
|
+
|
33
|
+
.sort-by {
|
30
34
|
flex-shrink:0;
|
31
35
|
margin-left: $space_xs !important;
|
32
36
|
}
|
33
|
-
|
37
|
+
|
38
|
+
.filter-results {
|
34
39
|
margin-left: $space_xs !important;
|
35
40
|
margin-right: $space_xs !important;
|
36
41
|
flex-shrink:0 !important;
|
37
42
|
}
|
38
|
-
|
43
|
+
|
44
|
+
.filter-bottom {
|
39
45
|
padding-left: $space_sm !important;
|
40
46
|
padding-right: $space_sm !important;
|
41
47
|
}
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
48
|
+
|
49
|
+
.maskContainer {
|
50
|
+
display: flex;
|
51
|
+
overflow-x: hidden;
|
52
|
+
align-items: center;
|
53
|
+
flex-grow: 1;
|
47
54
|
}
|
55
|
+
|
48
56
|
.filters {
|
49
57
|
display: flex;
|
50
58
|
flex-shrink: 1;
|
@@ -54,32 +62,45 @@
|
|
54
62
|
padding-top: $space_md;
|
55
63
|
padding-bottom: $space_md;
|
56
64
|
|
57
|
-
|
58
|
-
|
59
|
-
|
65
|
+
&::-webkit-scrollbar {
|
66
|
+
display: none;
|
67
|
+
}
|
68
|
+
|
60
69
|
.filter {
|
61
70
|
flex: 0 0 auto;
|
62
71
|
padding-left: $space_xs;
|
63
72
|
padding-right: $space_xs;
|
64
73
|
border-right: 1px solid $border_light !important;
|
65
74
|
}
|
75
|
+
}
|
66
76
|
|
67
|
-
|
68
|
-
.maskContainer::after {
|
69
|
-
content: " ";
|
77
|
+
.maskContainer::after {
|
70
78
|
background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
|
79
|
+
content: " ";
|
71
80
|
height: 48px;
|
72
81
|
padding-left: $space_xl;
|
73
82
|
margin-left: -$space_lg;
|
74
83
|
z-index: 1;
|
75
|
-
}
|
76
|
-
|
84
|
+
}
|
85
|
+
|
86
|
+
.maskContainer::before {
|
87
|
+
background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
|
77
88
|
content: " ";
|
78
|
-
background-image: linear-gradient(to left, rgba($card_light,.3) , rgba($card_light,1));
|
79
89
|
height: 48px;
|
80
90
|
padding-right: $space_sm;
|
81
91
|
margin-right: -$space_xs;
|
82
92
|
z-index: 1;
|
83
|
-
}
|
93
|
+
}
|
84
94
|
|
95
|
+
&[class*=dark] {
|
96
|
+
.filters .filter {
|
97
|
+
border-right: 1px solid $border_dark !important;
|
98
|
+
}
|
99
|
+
.maskContainer::before {
|
100
|
+
opacity:0;
|
101
|
+
}
|
102
|
+
.maskContainer::after {
|
103
|
+
opacity:0;
|
104
|
+
}
|
105
|
+
}
|
85
106
|
}
|