playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.pre.guagechart1
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/data/menu.yml +0 -13
- data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button/button.rb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
- data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +22 -6
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b3c15ebbe9a1fbfc39421f5a48270f09e9992eb440be598fd6913e9e24ed9afd
|
4
|
+
data.tar.gz: 813c6e5d1511ffc6a343afb19670c1ade1466802b2ac1d5447537f771861f3fd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 10c3cae3f5fb56ee7cf2f4c3f663902c9af9d9126aae1da0901b5a26fb8f1612dc404cf352d2f2ba4cfe09c3f91eab740c566581d99773cc5de38cc72c772d2a
|
7
|
+
data.tar.gz: bfad6320a42c988dfec679e35737390a16e09be1b5b07cf0aa7617e452c971b1f63539a60c62e592e08695c081787c05885cd1150c04e6c950099ca24749700f
|
@@ -104,16 +104,3 @@ kits:
|
|
104
104
|
- title_detail
|
105
105
|
- user_badge
|
106
106
|
- walkthrough
|
107
|
-
visual_guidelines:
|
108
|
-
- colors
|
109
|
-
- max_width
|
110
|
-
- number_spacing
|
111
|
-
- positioning
|
112
|
-
- line_height
|
113
|
-
- spacing
|
114
|
-
- border_radius
|
115
|
-
- typography
|
116
|
-
- shadows
|
117
|
-
- display
|
118
|
-
- cursor
|
119
|
-
- flex_box
|
@@ -0,0 +1,80 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { cleanup, render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Badge from './_badge'
|
5
|
+
|
6
|
+
const testId = "badge"
|
7
|
+
|
8
|
+
test('default class name', () => {
|
9
|
+
render(
|
10
|
+
<Badge
|
11
|
+
data={{ testid: testId }}
|
12
|
+
text="+1"
|
13
|
+
/>
|
14
|
+
)
|
15
|
+
|
16
|
+
const kit = screen.getByTestId(testId)
|
17
|
+
|
18
|
+
expect(kit).toHaveClass('pb_badge_kit_neutral')
|
19
|
+
})
|
20
|
+
|
21
|
+
test('primary class name', () => {
|
22
|
+
render(
|
23
|
+
<Badge
|
24
|
+
data={{ testid: testId }}
|
25
|
+
text="+1"
|
26
|
+
variant="primary"
|
27
|
+
/>
|
28
|
+
)
|
29
|
+
|
30
|
+
const kit = screen.getByTestId(testId)
|
31
|
+
|
32
|
+
expect(kit).toHaveClass('pb_badge_kit_primary')
|
33
|
+
})
|
34
|
+
|
35
|
+
test('displays text content', () => {
|
36
|
+
render(
|
37
|
+
<Badge
|
38
|
+
text="+1"
|
39
|
+
variant="primary"
|
40
|
+
/>
|
41
|
+
)
|
42
|
+
|
43
|
+
const text = screen.getByText("+1")
|
44
|
+
expect(text).toBeInTheDocument()
|
45
|
+
})
|
46
|
+
|
47
|
+
test('displays rounded corners', () => {
|
48
|
+
render(
|
49
|
+
<Badge
|
50
|
+
data={{ testid: testId }}
|
51
|
+
rounded
|
52
|
+
text="+1"
|
53
|
+
variant="primary"
|
54
|
+
/>
|
55
|
+
)
|
56
|
+
|
57
|
+
const kit = screen.getByTestId(testId)
|
58
|
+
expect(kit).toHaveClass('pb_badge_kit_primary_rounded')
|
59
|
+
})
|
60
|
+
|
61
|
+
test('displays color variants', () => {
|
62
|
+
[
|
63
|
+
"success",
|
64
|
+
"warning",
|
65
|
+
"error",
|
66
|
+
"info"
|
67
|
+
].forEach((colorVariant) => {
|
68
|
+
render(
|
69
|
+
<Badge
|
70
|
+
data={{ testid: testId }}
|
71
|
+
text={colorVariant}
|
72
|
+
variant={colorVariant}
|
73
|
+
/>
|
74
|
+
)
|
75
|
+
const kit = screen.getByTestId(testId)
|
76
|
+
expect(kit).toHaveClass(`pb_badge_kit_${colorVariant}`)
|
77
|
+
|
78
|
+
cleanup()
|
79
|
+
})
|
80
|
+
})
|
@@ -17,6 +17,7 @@ type ButtonPropTypes = {
|
|
17
17
|
form?: string,
|
18
18
|
fullWidth?: boolean,
|
19
19
|
icon?: string,
|
20
|
+
iconRight?: boolean,
|
20
21
|
id?: string,
|
21
22
|
link?: string,
|
22
23
|
loading?: boolean,
|
@@ -61,6 +62,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
61
62
|
data = {},
|
62
63
|
disabled,
|
63
64
|
icon = null,
|
65
|
+
iconRight = false,
|
64
66
|
id,
|
65
67
|
loading = false,
|
66
68
|
onClick,
|
@@ -91,10 +93,13 @@ const Button = (props: ButtonPropTypes) => {
|
|
91
93
|
|
92
94
|
const content = (
|
93
95
|
<span className="pb_button_content">
|
94
|
-
{icon && (
|
95
|
-
<i className={`pb_icon_kit far fa-${icon} fa-fw`} />
|
96
|
+
{icon && !iconRight && (
|
97
|
+
<i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
|
96
98
|
)}
|
97
99
|
<span>{text || children}</span>
|
100
|
+
{icon && iconRight && (
|
101
|
+
<i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
|
102
|
+
)}
|
98
103
|
</span>
|
99
104
|
)
|
100
105
|
|
@@ -1,5 +1,16 @@
|
|
1
1
|
<%= content_tag(object.tag,
|
2
2
|
object.tag == "button" ? object.options : object.link_options) do %>
|
3
|
+
<% if object.icon && !object.icon_right %>
|
4
|
+
<span>
|
5
|
+
<%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
|
6
|
+
</span>
|
7
|
+
<% end %>
|
3
8
|
<%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
|
4
9
|
<span class="pb_button_content"><%= content.presence || object.text %></span>
|
10
|
+
<% if object.icon && object.icon_right %>
|
11
|
+
<span>
|
12
|
+
<%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
|
13
|
+
</span>
|
14
|
+
<% end %>
|
15
|
+
|
5
16
|
<% end %>
|
@@ -7,6 +7,9 @@ module Playbook
|
|
7
7
|
default: false
|
8
8
|
prop :full_width, type: Playbook::Props::Boolean,
|
9
9
|
default: false
|
10
|
+
prop :icon
|
11
|
+
prop :icon_right, type: Playbook::Props::Boolean,
|
12
|
+
default: false
|
10
13
|
prop :link
|
11
14
|
prop :loading, type: Playbook::Props::Boolean,
|
12
15
|
default: false
|
@@ -1,15 +1,18 @@
|
|
1
|
-
import React from
|
2
|
-
import { Button } from
|
1
|
+
import React from "react";
|
2
|
+
import { Button, Pill } from "../../";
|
3
3
|
|
4
4
|
const ButtonBlockContent = (props) => (
|
5
5
|
<div>
|
6
|
-
<Button
|
7
|
-
fixedWidth
|
8
|
-
icon="users"
|
9
|
-
text="Button with Block Content"
|
6
|
+
<Button fixedWidth
|
10
7
|
{...props}
|
11
|
-
|
8
|
+
>
|
9
|
+
<Pill marginRight="xs"
|
10
|
+
text="5"
|
11
|
+
variant="info"
|
12
|
+
/>
|
13
|
+
<span>Button with Block Content</span>
|
14
|
+
</Button>
|
12
15
|
</div>
|
13
|
-
)
|
16
|
+
);
|
14
17
|
|
15
|
-
export default ButtonBlockContent
|
18
|
+
export default ButtonBlockContent;
|
@@ -0,0 +1 @@
|
|
1
|
+
Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a `<span>` element inside the button.
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button } from '../../'
|
3
|
+
|
4
|
+
const ButtonIconOptions = (props) => (
|
5
|
+
<div>
|
6
|
+
<Button
|
7
|
+
fixedWidth
|
8
|
+
icon='plus'
|
9
|
+
text="Icon on Left"
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
{' '}
|
13
|
+
<Button
|
14
|
+
fixedWidth
|
15
|
+
icon='chevron-right'
|
16
|
+
iconRight
|
17
|
+
text="Icon on Right"
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
</div>
|
21
|
+
)
|
22
|
+
|
23
|
+
export default ButtonIconOptions
|
@@ -0,0 +1 @@
|
|
1
|
+
Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of `iconRight` in react or `icon_right` in rails.
|
@@ -5,6 +5,7 @@ examples:
|
|
5
5
|
- button_link: Button Links
|
6
6
|
- button_loading: Button Loading
|
7
7
|
- button_block_content: Button Block Content
|
8
|
+
- button_icon_options: Button Icon Options
|
8
9
|
- button_accessibility: Button Accessibility Options
|
9
10
|
- button_options: Button Additional Options
|
10
11
|
- button_size: Button Size
|
@@ -15,6 +16,7 @@ examples:
|
|
15
16
|
- button_link: Button Links
|
16
17
|
- button_loading: Button Loading
|
17
18
|
- button_block_content: Button Block Content
|
19
|
+
- button_icon_options: Button Icon Options
|
18
20
|
- button_accessibility: Button Accessibility Options
|
19
21
|
- button_options: Button Additional Options (onClick)
|
20
22
|
- button_size: Button Size
|
@@ -3,6 +3,7 @@ export { default as ButtonFullWidth } from './_button_full_width.jsx'
|
|
3
3
|
export { default as ButtonLink } from './_button_link.jsx'
|
4
4
|
export { default as ButtonLoading } from './_button_loading.jsx'
|
5
5
|
export { default as ButtonBlockContent } from './_button_block_content.jsx'
|
6
|
+
export { default as ButtonIconOptions } from './_button_icon_options.jsx'
|
6
7
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
7
8
|
export { default as ButtonOptions } from './_button_options.jsx'
|
8
9
|
export { default as ButtonSize } from './_button_size.jsx'
|
@@ -46,7 +46,8 @@ module Playbook
|
|
46
46
|
prop :plugins, type: Playbook::Props::Boolean,
|
47
47
|
default: false,
|
48
48
|
deprecated: true
|
49
|
-
prop :position, type: Playbook::Props::String
|
49
|
+
prop :position, type: Playbook::Props::String,
|
50
|
+
default: "auto"
|
50
51
|
prop :position_element, type: Playbook::Props::String
|
51
52
|
prop :scroll_container, type: Playbook::Props::String
|
52
53
|
prop :selection_type, type: Playbook::Props::Enum,
|
@@ -33,6 +33,7 @@ const FilterDouble = ({
|
|
33
33
|
children,
|
34
34
|
dark,
|
35
35
|
minWidth,
|
36
|
+
placement,
|
36
37
|
...bgProps
|
37
38
|
}: FilterDoubleProps) => (
|
38
39
|
<FilterBackground
|
@@ -46,6 +47,7 @@ const FilterDouble = ({
|
|
46
47
|
<FiltersPopover
|
47
48
|
dark={dark}
|
48
49
|
minWidth={minWidth}
|
50
|
+
placement={placement}
|
49
51
|
>
|
50
52
|
{children}
|
51
53
|
</FiltersPopover>
|
@@ -33,6 +33,7 @@ const FilterSingle = ({
|
|
33
33
|
children,
|
34
34
|
dark,
|
35
35
|
minWidth,
|
36
|
+
placement,
|
36
37
|
...bgProps
|
37
38
|
}: FilterSingleProps) => {
|
38
39
|
return (
|
@@ -49,6 +50,7 @@ const FilterSingle = ({
|
|
49
50
|
<FiltersPopover
|
50
51
|
dark={dark}
|
51
52
|
minWidth={minWidth}
|
53
|
+
placement={placement}
|
52
54
|
>
|
53
55
|
{children}
|
54
56
|
</FiltersPopover>
|
@@ -6,7 +6,7 @@ import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
|
|
6
6
|
import PbReactPopover from '../../pb_popover/_popover'
|
7
7
|
|
8
8
|
const FiltersPopoverProps = { children: Node }
|
9
|
-
const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
|
9
|
+
const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
|
10
10
|
const [hide, updateHide] = useState(true)
|
11
11
|
const toggle = () => updateHide(!hide)
|
12
12
|
|
@@ -25,7 +25,7 @@ const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
|
|
25
25
|
<PbReactPopover
|
26
26
|
closeOnClick="outside"
|
27
27
|
minWidth={minWidth}
|
28
|
-
placement=
|
28
|
+
placement={placement}
|
29
29
|
reference={filterButton}
|
30
30
|
shouldClosePopover={updateHide}
|
31
31
|
show={!hide}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
id: "pla",
|
4
|
+
filters: [
|
5
|
+
{ name: "name", value: "John Wick" }
|
6
|
+
],
|
7
|
+
placement: "right",
|
8
|
+
template:"filter_only",
|
9
|
+
}) do
|
10
|
+
%>
|
11
|
+
<%
|
12
|
+
example_collection = [
|
13
|
+
OpenStruct.new(name: "Alabama", value: 1),
|
14
|
+
OpenStruct.new(name: "Alaska", value: 2),
|
15
|
+
OpenStruct.new(name: "Arizona", value: 3),
|
16
|
+
OpenStruct.new(name: "Arkansas", value: 4),
|
17
|
+
OpenStruct.new(name: "California", value: 5),
|
18
|
+
OpenStruct.new(name: "Colorado", value: 6),
|
19
|
+
OpenStruct.new(name: "Connecticut", value: 7),
|
20
|
+
OpenStruct.new(name: "Delaware", value: 8),
|
21
|
+
OpenStruct.new(name: "Florida", value: 9),
|
22
|
+
OpenStruct.new(name: "Georgia", value: 10),
|
23
|
+
]
|
24
|
+
%>
|
25
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
26
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
27
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
28
|
+
|
29
|
+
<%= form.actions do |action| %>
|
30
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
31
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
32
|
+
<% end %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from '../..'
|
3
|
+
|
4
|
+
const SortingChangeCallback = (sortOptions) => {
|
5
|
+
alert(JSON.stringify(sortOptions[0]))
|
6
|
+
}
|
7
|
+
|
8
|
+
const FilterPlacement = (props) => {
|
9
|
+
const options = [
|
10
|
+
{ value: 'USA' },
|
11
|
+
{ value: 'Canada' },
|
12
|
+
{ value: 'Brazil' },
|
13
|
+
{ value: 'Philippines' },
|
14
|
+
{ value: 'A Galaxy Far Far Away Like Really Far Away' },
|
15
|
+
]
|
16
|
+
return (
|
17
|
+
|
18
|
+
<>
|
19
|
+
<Filter
|
20
|
+
double
|
21
|
+
onSortChange={SortingChangeCallback}
|
22
|
+
placement={"right"}
|
23
|
+
results={1}
|
24
|
+
sortOptions={{
|
25
|
+
popularity: 'Popularity',
|
26
|
+
// eslint-disable-next-line
|
27
|
+
manager_title: 'Manager\'s Title',
|
28
|
+
// eslint-disable-next-line
|
29
|
+
manager_name: 'Manager\'s Name',
|
30
|
+
}}
|
31
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
32
|
+
{...props}
|
33
|
+
>
|
34
|
+
<TextInput
|
35
|
+
label="Example Text Field"
|
36
|
+
placeholder="Enter Text"
|
37
|
+
{...props}
|
38
|
+
/>
|
39
|
+
|
40
|
+
<Select
|
41
|
+
blankSelection="Select One..."
|
42
|
+
label="Example Collection Select"
|
43
|
+
name="Collection Select"
|
44
|
+
options={options}
|
45
|
+
{...props}
|
46
|
+
/>
|
47
|
+
<Flex
|
48
|
+
spacing="between"
|
49
|
+
{...props}
|
50
|
+
>
|
51
|
+
<Button
|
52
|
+
text="Apply"
|
53
|
+
{...props}
|
54
|
+
/>
|
55
|
+
<Button
|
56
|
+
text="Clear"
|
57
|
+
variant="secondary"
|
58
|
+
{...props}
|
59
|
+
/>
|
60
|
+
</Flex>
|
61
|
+
</Filter>
|
62
|
+
</>
|
63
|
+
)
|
64
|
+
}
|
65
|
+
|
66
|
+
export default FilterPlacement
|
@@ -0,0 +1,4 @@
|
|
1
|
+
Click the filter buttom above to toggle the popover.
|
2
|
+
|
3
|
+
To change the filter's popover position, use the `placement` prop with one of the positions:
|
4
|
+
`"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"`
|
@@ -8,6 +8,7 @@ examples:
|
|
8
8
|
- filter_only: Filter Only
|
9
9
|
- sort_only: Sort Only
|
10
10
|
- filter_min_width: Min Width for Popover Inside of Filter
|
11
|
+
- filter_placement: Filter Placement
|
11
12
|
|
12
13
|
react:
|
13
14
|
- filter_default: Default
|
@@ -18,3 +19,4 @@ examples:
|
|
18
19
|
- sort_only: Sort Only
|
19
20
|
- filter_min_width: Min Width for Popover Inside of Filter
|
20
21
|
- filter_close_popover: Close Popover
|
22
|
+
- filter_placement: Filter Placement
|
@@ -6,3 +6,4 @@ export { default as FilterOnly } from './_filter_only.jsx'
|
|
6
6
|
export { default as SortOnly } from './_sort_only.jsx'
|
7
7
|
export { default as FilterMinWidth } from './_filter_min_width.jsx'
|
8
8
|
export { default as FilterClosePopover } from './_filter_close_popover.jsx'
|
9
|
+
export { default as FilterPlacement } from './_filter_placement.jsx'
|
@@ -69,13 +69,13 @@
|
|
69
69
|
<% end %>
|
70
70
|
|
71
71
|
<% if object.template != "sort_only"%>
|
72
|
-
<%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position:
|
72
|
+
<%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
|
73
73
|
<%= content %>
|
74
74
|
<% end %>
|
75
75
|
<%end%>
|
76
76
|
|
77
77
|
<% if object.template != "filter_only"%>
|
78
|
-
<%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position:
|
78
|
+
<%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
|
79
79
|
<%= pb_rails("list") do %>
|
80
80
|
<% object.sort_menu.each do |item| %>
|
81
81
|
<%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
|
@@ -11,6 +11,9 @@ module Playbook
|
|
11
11
|
default: "default"
|
12
12
|
prop :background, type: Playbook::Props::Boolean, default: true
|
13
13
|
prop :min_width, default: "auto"
|
14
|
+
prop :placement, type: Playbook::Props::Enum,
|
15
|
+
values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
|
16
|
+
default: "bottom-start"
|
14
17
|
|
15
18
|
def classname
|
16
19
|
generate_classname("pb_filter_kit")
|
@@ -0,0 +1,76 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import {
|
3
|
+
render,
|
4
|
+
screen,
|
5
|
+
fireEvent,
|
6
|
+
} from "../utilities/test-utils";
|
7
|
+
import { Button, Filter, Flex, Select, TextInput } from "..";
|
8
|
+
|
9
|
+
function FilterTest(props) {
|
10
|
+
const SortingChangeCallback = (sortOptions) => {
|
11
|
+
alert(JSON.stringify(sortOptions[0]));
|
12
|
+
};
|
13
|
+
|
14
|
+
const options = [
|
15
|
+
{ value: "USA" },
|
16
|
+
{ value: "Canada" },
|
17
|
+
{ value: "Brazil" },
|
18
|
+
{ value: "Philippines" },
|
19
|
+
{ value: "A Galaxy Far Far Away Like Really Far Away" },
|
20
|
+
];
|
21
|
+
return (
|
22
|
+
<Filter
|
23
|
+
onSortChange={SortingChangeCallback}
|
24
|
+
results={1}
|
25
|
+
sortOptions={{
|
26
|
+
popularity: "Popularity",
|
27
|
+
// eslint-disable-next-line
|
28
|
+
manager_title: "Manager's Title",
|
29
|
+
// eslint-disable-next-line
|
30
|
+
manager_name: "Manager's Name",
|
31
|
+
}}
|
32
|
+
sortValue={[{ name: "popularity", dir: "desc" }]}
|
33
|
+
{...props}
|
34
|
+
>
|
35
|
+
<TextInput
|
36
|
+
label="Example Text Field"
|
37
|
+
placeholder="Enter Text"
|
38
|
+
{...props}
|
39
|
+
/>
|
40
|
+
|
41
|
+
<Select
|
42
|
+
blankSelection="Select One..."
|
43
|
+
label="Example Collection Select"
|
44
|
+
name="Collection Select"
|
45
|
+
options={options}
|
46
|
+
{...props}
|
47
|
+
/>
|
48
|
+
<Flex spacing="between"
|
49
|
+
{...props}>
|
50
|
+
<Button text="Apply"
|
51
|
+
{...props} />
|
52
|
+
<Button text="Clear"
|
53
|
+
variant="secondary"
|
54
|
+
{...props} />
|
55
|
+
</Flex>
|
56
|
+
</Filter>
|
57
|
+
);
|
58
|
+
}
|
59
|
+
|
60
|
+
test("triggers popover on filter button click", () => {
|
61
|
+
render(<FilterTest data={{ testid: "render-test" }}/>);
|
62
|
+
|
63
|
+
const btn = screen.getAllByRole("button")[0];
|
64
|
+
|
65
|
+
// checks if the sort menu rendered
|
66
|
+
expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
|
67
|
+
expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered
|
68
|
+
|
69
|
+
// hits the filter button and triggers popover
|
70
|
+
fireEvent.click(btn);
|
71
|
+
|
72
|
+
// check if popover displays correctly by checking its tet
|
73
|
+
expect(screen.getByText("Example Text Field")).toBeInTheDocument()
|
74
|
+
|
75
|
+
|
76
|
+
});
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
|
2
|
+
<%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
|
3
|
+
<%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
|
4
|
+
<%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
|
5
|
+
<%= pb_rails("flex", props: {align: "stretch"}) do %>
|
6
|
+
<%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
|
7
|
+
<%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
|
8
|
+
<%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
|
9
|
+
<%= pb_rails("title", props: {size: 1, text: "39"})%>
|
10
|
+
<%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
|
13
|
+
<%end %>
|
14
|
+
<%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
|
15
|
+
<%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
|
16
|
+
<%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
|
17
|
+
<%= pb_rails("flex", props: {wrap: true}) do %>
|
18
|
+
<%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
|
19
|
+
<%= pb_rails("gauge", props: {
|
20
|
+
chart_data: [{ name: "Name", value: 10 }],
|
21
|
+
disable_animation: true,
|
22
|
+
height: '100%',
|
23
|
+
id: "gauge-complex",
|
24
|
+
suffix: "%"
|
25
|
+
}) %>
|
26
|
+
<% end %>
|
27
|
+
<% end %>
|
28
|
+
<% end %>
|
29
|
+
<%end %>
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<% end %>
|