playbook_ui 12.5.0.pre.alpha.phonerails1 → 12.6.0.pre.alpha.collapsible1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +2 -1
  4. data/app/pb_kits/playbook/index.js +1 -0
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -2
  6. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
  7. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +5 -1
  8. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -4
  9. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -2
  10. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +7 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_main_flex.html.erb +10 -0
  12. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_main_flex.jsx +23 -0
  13. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_main_flex.md +1 -0
  14. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_main_flex_item.html.erb +23 -0
  15. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_main_flex_item.jsx +48 -0
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_main_flex_item.md +1 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -1
  18. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
  19. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +72 -0
  20. data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx} +12 -14
  21. data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx} +7 -8
  22. data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx} +25 -25
  23. data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx} +13 -11
  24. data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx} +39 -14
  25. data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx} +6 -6
  26. data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx} +17 -10
  27. data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx} +0 -2
  28. data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
  29. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +86 -0
  30. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +81 -0
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +30 -0
  32. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +86 -0
  33. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +3 -0
  34. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +6 -0
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +60 -0
  37. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +40 -0
  38. data/app/pb_kits/playbook/pb_person_contact/{_person_contact.jsx → _person_contact.tsx} +19 -22
  39. data/app/pb_kits/playbook/pb_person_contact/person_contact.test.js +112 -0
  40. data/app/pb_kits/playbook/pb_popover/_popover.tsx +33 -32
  41. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  42. data/app/pb_kits/playbook/tokens/_animation-curves.scss +30 -30
  43. data/app/pb_kits/playbook/tokens/_border_radius.scss +15 -16
  44. data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
  45. data/app/pb_kits/playbook/tokens/_display.scss +6 -6
  46. data/app/pb_kits/playbook/tokens/_line_height.scss +7 -7
  47. data/app/pb_kits/playbook/tokens/_opacity.scss +10 -10
  48. data/app/pb_kits/playbook/tokens/_positioning.scss +11 -11
  49. data/app/pb_kits/playbook/tokens/_screen_sizes.scss +10 -10
  50. data/app/pb_kits/playbook/tokens/_shadows.scss +4 -4
  51. data/app/pb_kits/playbook/tokens/_spacing.scss +6 -6
  52. data/app/pb_kits/playbook/tokens/_transition.scss +3 -3
  53. data/app/pb_kits/playbook/tokens/_typography.scss +35 -46
  54. data/lib/playbook/version.rb +2 -2
  55. metadata +28 -12
  56. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -76
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e827c4077969ef2258c6c650173ef5c8227d81aca0a0201c19ae0e136de1decb
4
- data.tar.gz: aec0d42668e214f8a32b4220704c76af66a2b55a43fbeb0efb28eb6832c45d9a
3
+ metadata.gz: 55e72b83e3d53687568964faa9a5283ed8d916b77b704a9fd211cc0293abe056
4
+ data.tar.gz: 5bed51e081fddba422e24266f7e7604ded4acaa483fd0c65bbf583540e844d3e
5
5
  SHA512:
6
- metadata.gz: ed4ab9a7d46404031c54b2c4e22731d4260d00d2db11af3b280b03f92df607f1afd8a6f3b68d6b52aa6e8866605c5c7fa85c4598a4323b2dfbc6a9d5490ff196
7
- data.tar.gz: 23d61876cc9d04ea7b378b9ecc896b5d4f0a8d04b336a2b3f0fbf81c24189cc8ac86cc2f0eb65b3760d2da51c9699798a8dbe38c20a98744c3076b6f450706ab
6
+ metadata.gz: 0a9f9c24caba0d438ef30f406b1dddce897c59797f5fca036aa334fac978a644e5373f60a585ec81107c2e1fa68b17881e1a018a860b8dc71bfce789e12f3067
7
+ data.tar.gz: 6488b6637e9ccf87d52393b9d8ea1e95be985089f1e85e79035d54f01e0b4a94e6fcf4c7ceda312a0975b0a68298e9cd4a053a2e6030c27b8a7ee7a30e75794b
@@ -107,3 +107,5 @@
107
107
  @import './utilities/display';
108
108
  @import './utilities/flexbox';
109
109
  @import './utilities/focus';
110
+
111
+ @import 'pb_multi_level_select/multi_level_select';
@@ -57,6 +57,7 @@ kits:
57
57
  - list
58
58
  - loading_inline
59
59
  - map
60
+ - multi_level_select
60
61
  - nav
61
62
  - tags:
62
63
  - badge
@@ -106,4 +107,4 @@ kits:
106
107
  - title_count
107
108
  - title_detail
108
109
  - user_badge
109
- - walkthrough
110
+ - walkthrough
@@ -60,6 +60,7 @@ export { default as ListItem } from './pb_list/_list_item'
60
60
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
61
61
  export { default as Map} from './pb_map/_map'
62
62
  export { default as Message } from './pb_message/_message'
63
+ export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
63
64
  export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
64
65
  export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'
65
66
  export { default as Nav } from './pb_nav/_nav'
@@ -101,7 +101,7 @@ $pb_button_border_width: 0px;
101
101
 
102
102
  // Secondary ====================
103
103
  @mixin pb_button_secondary {
104
- @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
104
+ @include pb_button_variant($secondary-action, $primary_action);
105
105
 
106
106
  @media (hover:hover) {
107
107
  &:hover {
@@ -109,7 +109,7 @@ $pb_button_border_width: 0px;
109
109
  }
110
110
  &:active {
111
111
  transition: none;
112
- @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
112
+ @include pb_button_variant($secondary-action, $primary_action);
113
113
  }
114
114
  }
115
115
  }
@@ -26,7 +26,7 @@ $pb_button_styles: [
26
26
  @mixin pb_circle_icon_button_active {
27
27
  &:active {
28
28
  transition: none;
29
- @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
29
+ @include pb_button_variant($secondary-action, $primary_action);
30
30
  }
31
31
  }
32
32
 
@@ -19,6 +19,8 @@ type CollapsibleProps = {
19
19
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
20
20
  iconSize?: typeof IconSizes
21
21
  id?: string,
22
+ mainFlex?: "around" | "between" | "evenly" | "none",
23
+ mainFlexItem?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
22
24
  padding?: string,
23
25
  }
24
26
 
@@ -40,6 +42,8 @@ const Collapsible = ({
40
42
  iconColor = 'default',
41
43
  iconSize,
42
44
  id,
45
+ mainFlex = "between",
46
+ mainFlexItem = "none",
43
47
  padding = 'md',
44
48
  ...props
45
49
  }: CollapsibleProps) => {
@@ -64,7 +68,7 @@ const Collapsible = ({
64
68
  )
65
69
 
66
70
  return (
67
- <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, iconSize, iconColor }}>
71
+ <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, iconSize, iconColor, mainFlex, mainFlexItem }}>
68
72
  <div
69
73
  {...ariaProps}
70
74
  {...dataProps}
@@ -3,7 +3,7 @@
3
3
  import classnames from 'classnames'
4
4
  import React, { useContext } from 'react'
5
5
  import { buildCss } from '../../utilities/props'
6
- import { globalProps } from '../../utilities/globalProps'
6
+ import { GlobalProps, globalProps } from '../../utilities/globalProps'
7
7
 
8
8
  import Flex from '../../pb_flex/_flex'
9
9
  import FlexItem from '../../pb_flex/_flex_item'
@@ -37,6 +37,8 @@ type CollapsibleMainProps = {
37
37
  }
38
38
  type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success"
39
39
 
40
+ type flexMainTypes = "around" | "between" | "evenly" | "none"
41
+
40
42
  type IconProps = {
41
43
  collapsed: boolean | (()=> void)
42
44
  iconColor?: IconColors
@@ -66,7 +68,7 @@ const CollapsibleMain = ({
66
68
  padding = 'md',
67
69
  ...props
68
70
  }: CollapsibleMainProps): React.ReactElement=> {
69
- const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
71
+ const context: {[key: string]: IconColors | (() => void)} | boolean | GlobalProps | flexMainTypes = useContext(CollapsibleContext)
70
72
  const mainCSS = buildCss('pb_collapsible_main_kit')
71
73
  const mainSpacing = globalProps(props, { cursor, padding })
72
74
 
@@ -74,10 +76,14 @@ const CollapsibleMain = ({
74
76
  <div className={classnames(mainCSS, className, mainSpacing)}>
75
77
  <div onClick={context.collapse as (() => void)}>
76
78
  <Flex
77
- spacing="between"
79
+ spacing={context.mainFlex}
78
80
  vertical="center"
79
81
  >
80
- <FlexItem>{children}</FlexItem>
82
+ <FlexItem
83
+ flex={context.mainFlexItem}
84
+ >
85
+ {children}
86
+ </FlexItem>
81
87
  <FlexItem>
82
88
  <Icon
83
89
  collapsed={context.collapsed as () => void}
@@ -4,8 +4,8 @@
4
4
  class: object.classname,
5
5
  aria: object.aria) do %>
6
6
 
7
- <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
8
- <%= pb_rails("flex/flex_item") do %>
7
+ <%= pb_rails("flex", props: {vertical: "center", spacing:object.main_flex , cursor: "pointer"}) do %>
8
+ <%= pb_rails("flex/flex_item", props: {flex:object.main_flex_item}) do %>
9
9
  <%= content.presence %>
10
10
  <% end %>
11
11
  <%= pb_rails("flex/flex_item") do %>
@@ -6,6 +6,13 @@ module Playbook
6
6
  prop :color, type: Playbook::Props::Enum,
7
7
  values: %w[default light lighter link success error],
8
8
  default: "default"
9
+ prop :main_flex, type: Playbook::Props::Enum,
10
+ values: %w[around between evenly none],
11
+ default: "between",
12
+ deprecated: true
13
+ prop :main_flex_item, type: Playbook::Props::Enum,
14
+ values: %w[auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none],
15
+ default: "none"
9
16
  prop :size, type: Playbook::Props::Enum,
10
17
  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
11
18
  default: nil
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
+ <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", main_flex: "none" }) do %>
3
+ <%= pb_rails("body", props: { text: "Main Section"}) %>
4
+ <% end %>
5
+ <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %>
6
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
7
+ <br><br>
8
+ Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
9
+ <% end %>
10
+ <% end %>
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import { Collapsible } from "../..";
3
+
4
+
5
+ const CollapsibleMainFlex = () => (
6
+
7
+ <Collapsible
8
+ mainFlex="none"
9
+ >
10
+ <Collapsible.Main>
11
+ <div>{'Main Section'}</div>
12
+ </Collapsible.Main>
13
+ <Collapsible.Content>
14
+ <div>
15
+ {
16
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
17
+ }
18
+ </div>
19
+ </Collapsible.Content>
20
+ </Collapsible>
21
+ );
22
+
23
+ export default CollapsibleMainFlex;
@@ -0,0 +1 @@
1
+ By default, the Collapisible.Main has the globalProp of 'spacing' set to 'between'. The `mainFlex` prop allows you to change this to 'none', 'around' or 'evenly'. The second example above sets `mainFlex` to 'none'.
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
+ <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", main_flex_item: "1"}) do %>
3
+ <%= pb_rails("flex", props: {gap:"lg", justify:"center", wrap:true}) do %>
4
+ <%= pb_rails("flex/flex_item", props: {orientation:"column"}) do %>
5
+ <%= pb_rails("caption", props: { text: "Number"}) %>
6
+ <%= pb_rails("body", props: { text: "12345"}) %>
7
+ <% end %>
8
+ <%= pb_rails("flex/flex_item", props: {orientation:"column"}) do %>
9
+ <%= pb_rails("caption", props: { text: "Title"}) %>
10
+ <%= pb_rails("body", props: { text: "Title"}) %>
11
+ <% end %>
12
+ <%= pb_rails("flex/flex_item", props: {orientation:"column"}) do %>
13
+ <%= pb_rails("caption", props: { text: "Description"}) %>
14
+ <%= pb_rails("body", props: { text: "Description"}) %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+ <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %>
19
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
20
+ <br><br>
21
+ Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
22
+ <% end %>
23
+ <% end %>
@@ -0,0 +1,48 @@
1
+ import React from "react";
2
+ import { Collapsible } from "../..";
3
+ import { Flex, FlexItem, Caption, Body } from "../..";
4
+ const CollapsibleMainFlexItem = () => (
5
+ <>
6
+ <Collapsible
7
+ mainFlexItem="1"
8
+ >
9
+ <Collapsible.Main>
10
+ <Flex
11
+ gap="lg"
12
+ justify="center"
13
+ wrap
14
+ >
15
+ <FlexItem
16
+ orientation="column"
17
+ >
18
+ <Caption text="Number" />
19
+ <Body text="12345" />
20
+ </FlexItem>
21
+
22
+ <FlexItem
23
+ orientation="column"
24
+ >
25
+ <Caption text="Title" />
26
+ <Body text="Title" />
27
+ </FlexItem>
28
+
29
+ <FlexItem
30
+ orientation="column"
31
+ >
32
+ <Caption text="Description" />
33
+ <Body text="Description" />
34
+ </FlexItem>
35
+ </Flex>
36
+ </Collapsible.Main>
37
+ <Collapsible.Content>
38
+ <div>
39
+ {
40
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero."
41
+ }
42
+ </div>
43
+ </Collapsible.Content>
44
+ </Collapsible>
45
+ </>
46
+ );
47
+
48
+ export default CollapsibleMainFlexItem;
@@ -0,0 +1 @@
1
+ The `mainFlexItem` prop allows you to pass any of the 'flex' values to the Collapsible which will allow the Collapsible.Main to fill the entire space of the containing div instead of being restricted by the size of it's contents. The default value is 'none'. The first example above sets `mainFlexItem` to '1'.
@@ -4,8 +4,13 @@ examples:
4
4
  - collapsible_default: Default
5
5
  - collapsible_size: Size
6
6
  - collapsible_color: Color
7
+ - collapsible_main_flex: Main Flex Spacing
8
+ - collapsible_main_flex_item: Main Flex Item
9
+
7
10
 
8
11
  react:
9
12
  - collapsible_default: Default
10
13
  - collapsible_size: Size
11
- - collapsible_color: Color
14
+ - collapsible_color: Color
15
+ - collapsible_main_flex: Main Flex Spacing
16
+ - collapsible_main_flex_item: Main Flex Item
@@ -1,3 +1,5 @@
1
1
  export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
2
  export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
3
  export { default as CollapsibleColor } from './_collapsible_color.jsx'
4
+ export {default as CollapsibleMainFlex } from './_collapsible_main_flex.jsx'
5
+ export {default as CollapsibleMainFlexItem } from './_collapsible_main_flex_item.jsx'
@@ -0,0 +1,72 @@
1
+ import React from 'react'
2
+ import { isEmpty, map, omitBy } from 'lodash'
3
+
4
+ import Body from '../../pb_body/_body'
5
+ import Caption from '../../pb_caption/_caption'
6
+ import Title from '../../pb_title/_title'
7
+
8
+ export type FilterDescription = {
9
+ [key: string]: string | null | boolean,
10
+ }
11
+
12
+ export type CurrentFiltersProps = {
13
+ dark: boolean,
14
+ filters: FilterDescription,
15
+ }
16
+
17
+ const hiddenFilters = (value: any) => isEmpty(value) && value !== true
18
+
19
+ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
20
+ const displayableFilters = omitBy(filters, hiddenFilters)
21
+
22
+ return (
23
+ <div className="maskContainer">
24
+ { isEmpty(filters) &&
25
+ <div className="filters">
26
+ <Body
27
+ color="light"
28
+ paddingLeft="xs"
29
+ size={4}
30
+ tag="h4"
31
+ text="No Filter Selected"
32
+ />
33
+ </div>
34
+ }
35
+ { !isEmpty(filters) &&
36
+ <div className="filters">
37
+ <div className="left_gradient" />
38
+ {map(displayableFilters, (value, name) => (
39
+ <div
40
+ className="filter"
41
+ key={`filter-${name}`}
42
+ >
43
+ { value === true ?
44
+ <Title
45
+ dark={dark}
46
+ size={4}
47
+ tag="h4"
48
+ text={name}
49
+ /> :
50
+ <div>
51
+ <Caption
52
+ dark={dark}
53
+ text={name}
54
+ />
55
+ <Title
56
+ dark={dark}
57
+ size={4}
58
+ tag="h4"
59
+ text={value}
60
+ />
61
+ </div>
62
+ }
63
+ </div>
64
+ ))}
65
+ <div className="right_gradient" />
66
+ </div>
67
+ }
68
+ </div>
69
+ )
70
+ }
71
+
72
+ export default CurrentFilters
@@ -1,35 +1,33 @@
1
- /* @flow */
2
-
3
- import React, { Node } from 'react'
1
+ import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
6
- import { globalProps } from '../../utilities/globalProps'
4
+ import { GlobalProps, globalProps } from '../../utilities/globalProps'
7
5
 
8
6
  import Card from '../../pb_card/_card'
9
7
 
10
- type FilterBackgroundProps = {
8
+ export type FilterBackgroundProps = {
11
9
  background: boolean,
12
10
  className: string,
13
- children: Node,
11
+ children?: React.ReactChild[] | React.ReactChild,
14
12
  dark: boolean,
15
- }
13
+ } & GlobalProps
16
14
 
17
- const FilterBackground = (props: FilterBackgroundProps) => {
15
+ const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
18
16
  const { background = true, className, children, dark } = props
19
17
 
20
18
  return (
21
19
  <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
22
- <Choose>
23
- <When condition={background}>
20
+ { background ?
24
21
  <Card
25
22
  dark={dark}
26
23
  padding="none"
27
24
  >
28
25
  {children}
29
- </Card>
30
- </When>
31
- <Otherwise>{children}</Otherwise>
32
- </Choose>
26
+ </Card> :
27
+ <>
28
+ {children}
29
+ </>
30
+ }
33
31
  </div>
34
32
  )
35
33
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import CurrentFilters, { FilterDescription } from './CurrentFilters'
@@ -15,13 +13,14 @@ import SortMenu, {
15
13
  import Caption from '../../pb_caption/_caption'
16
14
  import Flex from '../../pb_flex/_flex'
17
15
  import SectionSeparator from '../../pb_section_separator/_section_separator'
16
+
18
17
  export type FilterDoubleProps = {
19
- children: Node,
18
+ children?: React.ReactChild[] | React.ReactChild,
20
19
  filters?: FilterDescription,
21
- onSortChange: SortingChangeCallback,
20
+ onSortChange?: SortingChangeCallback,
22
21
  results?: number,
23
- sortOptions: SortOptions,
24
- sortValue?: SortValue,
22
+ sortOptions?: SortOptions,
23
+ sortValue?: SortValue[],
25
24
  } & FilterBackgroundProps
26
25
 
27
26
  const FilterDouble = ({
@@ -35,7 +34,7 @@ const FilterDouble = ({
35
34
  minWidth,
36
35
  placement,
37
36
  ...bgProps
38
- }: FilterDoubleProps) => (
37
+ }: FilterDoubleProps): React.ReactElement => (
39
38
  <FilterBackground
40
39
  dark={dark}
41
40
  {...bgProps}
@@ -49,7 +48,7 @@ const FilterDouble = ({
49
48
  minWidth={minWidth}
50
49
  placement={placement}
51
50
  >
52
- {children}
51
+ {children}
53
52
  </FiltersPopover>
54
53
  <CurrentFilters
55
54
  dark={dark}
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { isEmpty } from 'lodash'
5
3
 
@@ -16,12 +14,12 @@ import SortMenu, {
16
14
  } from './SortMenu'
17
15
 
18
16
  export type FilterSingleProps = {
19
- children?: Node,
17
+ children?: React.ReactChild[] | React.ReactChild,
20
18
  filters?: FilterDescription,
21
19
  onSortChange?: SortingChangeCallback,
22
20
  results?: number,
23
21
  sortOptions?: SortOptions,
24
- sortValue?: SortValue,
22
+ sortValue?: SortValue[],
25
23
  } & FilterBackgroundProps
26
24
 
27
25
  const FilterSingle = ({
@@ -35,7 +33,7 @@ const FilterSingle = ({
35
33
  minWidth,
36
34
  placement,
37
35
  ...bgProps
38
- }: FilterSingleProps) => {
36
+ }: FilterSingleProps): React.ReactElement => {
39
37
  return (
40
38
  <FilterBackground
41
39
  dark={dark}
@@ -46,31 +44,33 @@ const FilterSingle = ({
46
44
  paddingRight="lg"
47
45
  vertical="center"
48
46
  >
49
- <If condition={children}>
50
- <FiltersPopover
51
- dark={dark}
52
- minWidth={minWidth}
53
- placement={placement}
54
- >
47
+ { children &&
48
+ <>
49
+ <FiltersPopover
50
+ dark={dark}
51
+ minWidth={minWidth}
52
+ placement={placement}
53
+ >
55
54
  {children}
56
- </FiltersPopover>
57
- <CurrentFilters
58
- dark={dark}
59
- filters={filters}
60
- />
61
- </If>
55
+ </FiltersPopover>
56
+ <CurrentFilters
57
+ dark={dark}
58
+ filters={filters}
59
+ />
60
+ </>
61
+ }
62
62
  <ResultsCount
63
63
  dark={dark}
64
64
  results={results}
65
65
  />
66
- <If condition={!isEmpty(sortOptions)}>
67
- <SortMenu
68
- dark={dark}
69
- onChange={onSortChange}
70
- options={sortOptions}
71
- value={sortValue}
72
- />
73
- </If>
66
+ { !isEmpty(sortOptions) &&
67
+ <SortMenu
68
+ dark={dark}
69
+ onChange={onSortChange}
70
+ options={sortOptions}
71
+ value={sortValue}
72
+ />
73
+ }
74
74
  </Flex>
75
75
  </FilterBackground>
76
76
  )
@@ -1,12 +1,15 @@
1
- /* @flow */
2
-
3
- import React, { Node, useState } from 'react'
1
+ import React, { ReactNode, useState } from 'react'
4
2
 
5
3
  import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
6
4
  import PbReactPopover from '../../pb_popover/_popover'
7
5
 
8
- const FiltersPopoverProps = { children: Node }
9
- const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
6
+ type FiltersPopoverProps = {
7
+ children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) => ReactNode),
8
+ dark?: boolean,
9
+ minWidth?: string,
10
+ placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
11
+ }
12
+ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
10
13
  const [hide, updateHide] = useState(true)
11
14
  const toggle = () => updateHide(!hide)
12
15
 
@@ -16,7 +19,6 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
16
19
  icon="filter"
17
20
  id="filter"
18
21
  onClick={toggle}
19
- text="filter"
20
22
  variant="secondary"
21
23
  />
22
24
  )
@@ -30,11 +32,11 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
30
32
  shouldClosePopover={updateHide}
31
33
  show={!hide}
32
34
  >
33
- <div className="pb-form">
34
- {typeof children === 'function'
35
- ? children({ closePopover: () => (updateHide(true)) })
36
- : children}
37
- </div>
35
+ <div className="pb-form">
36
+ {typeof children === 'function'
37
+ ? children({ closePopover: () => (updateHide(true)) })
38
+ : children}
39
+ </div>
38
40
  </PbReactPopover>
39
41
  )
40
42
  }