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.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +0 -13
  3. data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
  4. data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
  6. data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
  7. data/app/pb_kits/playbook/pb_button/button.rb +3 -0
  8. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
  10. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
  14. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  15. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
  18. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  19. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  20. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  21. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  22. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  23. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  24. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  25. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  26. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  28. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  29. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  30. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
  31. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
  32. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
  33. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
  34. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
  35. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
  36. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  38. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  40. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  41. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  42. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  43. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  44. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  45. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  46. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  47. data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
  48. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  49. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  50. data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
  51. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  52. data/lib/playbook/version.rb +2 -2
  53. metadata +22 -6
  54. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
  55. 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: dc9298eefc98f72a96a7a168d2d7019c6ff57c01ca45f5fda0e98ebf7e4f3ed6
4
- data.tar.gz: 48a26c0f5191e612e55b74bbf206efa53a454175f2b018273db0c7a83bbd7bdd
3
+ metadata.gz: b3c15ebbe9a1fbfc39421f5a48270f09e9992eb440be598fd6913e9e24ed9afd
4
+ data.tar.gz: 813c6e5d1511ffc6a343afb19670c1ade1466802b2ac1d5447537f771861f3fd
5
5
  SHA512:
6
- metadata.gz: cf1a60bc28926ebf17b04bd3fb3a3080f3d6476baefda231915328a341398e66b8723cc5d6000de1ff1d068a4cfbd7e14fc94812c4deebcf9cc147c7bea018ce
7
- data.tar.gz: a4990d58ca5b07fd0bd0c79a61e364e166d4fa81c12497411145a596e996945f204dc08df7d4f67a98c23f14916fb71f2cddab88ecab5a09a104fff037e7bbba
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
 
@@ -55,6 +55,13 @@ $pb_button_border_width: 0px;
55
55
  visibility: visible;
56
56
  }
57
57
 
58
+ .button_with_icon {
59
+ margin-right: $space_xs;
60
+ }
61
+ .button_with_icon_right {
62
+ margin-left: $space_xs;
63
+ }
64
+
58
65
  &:hover, &:focus {
59
66
  outline: none;
60
67
 
@@ -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,4 +1,4 @@
1
1
  <%= pb_rails("button") do %>
2
- <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
2
+ <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
3
3
  <span>Button with Block Content</span>
4
4
  <% end %>
@@ -1,15 +1,18 @@
1
- import React from 'react'
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,2 @@
1
+ <%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
2
+ <%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>
@@ -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,
@@ -659,9 +659,6 @@ span.flatpickr-weekday {
659
659
  -webkit-box-sizing: border-box;
660
660
  box-sizing: border-box;
661
661
  overflow: hidden;
662
- display: -webkit-box;
663
- display: -webkit-flex;
664
- display: -ms-flexbox;
665
662
  }
666
663
  .flatpickr-time:after {
667
664
  content: "";
@@ -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="bottom"
28
+ placement={placement}
29
29
  reference={filterButton}
30
30
  shouldClosePopover={updateHide}
31
31
  show={!hide}
@@ -2,6 +2,7 @@
2
2
  pb_rails("filter", props: {
3
3
  min_width: "600px",
4
4
  id: "25",
5
+ position: "top",
5
6
  filters: [
6
7
  { name: "name", value: "John Wick" },
7
8
  { name: "city", value: "San Francisco"}
@@ -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: 'bottom'}) do %>
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: 'bottom', padding: 'none'}) do %>
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 %>