playbook_ui 11.6.0 → 11.6.1.pre.alpha.rubocop.pre.performance1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +13 -0
  3. data/app/pb_kits/playbook/pb_button/_button.tsx +2 -7
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -7
  5. data/app/pb_kits/playbook/pb_button/button.html.erb +0 -11
  6. data/app/pb_kits/playbook/pb_button/button.rb +0 -3
  7. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +9 -12
  9. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -2
  12. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +3 -0
  13. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +0 -2
  14. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +0 -2
  15. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +0 -1
  17. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -2
  18. data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
  19. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  20. data/app/pb_kits/playbook/pb_filter/filter.rb +0 -3
  21. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +127 -0
  22. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  24. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.tsx → _icon_stat_value.jsx} +4 -2
  25. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.tsx → _icon_value.jsx} +4 -2
  26. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +155 -0
  27. data/app/pb_kits/playbook/pb_layout/layout.test.js +2 -1
  28. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  29. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -0
  30. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +8 -21
  33. data/app/pb_kits/playbook/pb_badge/badge.test.js +0 -80
  34. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +0 -1
  35. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +0 -2
  36. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +0 -23
  37. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +0 -1
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +0 -34
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +0 -66
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +0 -4
  41. data/app/pb_kits/playbook/pb_filter/filter.test.js +0 -76
  42. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +0 -129
  43. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +0 -60
  44. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +0 -154
  45. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +0 -77
  46. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +0 -123
  47. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +0 -109
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbPopover
5
5
  class Popover < Playbook::KitBase
6
6
  prop :position, type: Playbook::Props::Enum,
7
- values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
7
+ values: %w[top bottom left right],
8
8
  default: "left"
9
9
  prop :trigger_element_id
10
10
  prop :tooltip_id
@@ -103,6 +103,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
103
103
  <React.Fragment>
104
104
  <Flex
105
105
  className={`add-on-${addOnAlignment} ${borderCss}`}
106
+ inline
106
107
  vertical="center"
107
108
  >
108
109
  {addOnAlignment == 'left' && <>
@@ -10,7 +10,7 @@ export const titleize = (sentence: string): string => (
10
10
 
11
11
  const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
12
12
 
13
- export const joinPresent = (array: string[], separator: string): string => (
13
+ export const joinPresent = (array: [], separator: string): string => (
14
14
  filter(array, notEmpty).join(separator)
15
15
  )
16
16
 
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "11.5.0"
5
- VERSION = "11.6.0"
5
+ VERSION = "11.6.1.pre.alpha.rubocop-performance1"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.6.0
4
+ version: 11.6.1.pre.alpha.rubocop.pre.performance1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-09-23 00:00:00.000000000 Z
12
+ date: 2022-09-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -348,7 +348,6 @@ files:
348
348
  - app/pb_kits/playbook/pb_badge/_badge.tsx
349
349
  - app/pb_kits/playbook/pb_badge/badge.html.erb
350
350
  - app/pb_kits/playbook/pb_badge/badge.rb
351
- - app/pb_kits/playbook/pb_badge/badge.test.js
352
351
  - app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb
353
352
  - app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx
354
353
  - app/pb_kits/playbook/pb_badge/docs/_badge_default.html.erb
@@ -418,7 +417,6 @@ files:
418
417
  - app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx
419
418
  - app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb
420
419
  - app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx
421
- - app/pb_kits/playbook/pb_button/docs/_button_block_content.md
422
420
  - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
423
421
  - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
424
422
  - app/pb_kits/playbook/pb_button/docs/_button_default.md
@@ -427,9 +425,6 @@ files:
427
425
  - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
428
426
  - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
429
427
  - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
430
- - app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb
431
- - app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx
432
- - app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
433
428
  - app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
434
429
  - app/pb_kits/playbook/pb_button/docs/_button_link.jsx
435
430
  - app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
@@ -876,9 +871,6 @@ files:
876
871
  - app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md
877
872
  - app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb
878
873
  - app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx
879
- - app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb
880
- - app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx
881
- - app/pb_kits/playbook/pb_filter/docs/_filter_placement.md
882
874
  - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
883
875
  - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
884
876
  - app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
@@ -887,7 +879,6 @@ files:
887
879
  - app/pb_kits/playbook/pb_filter/docs/index.js
888
880
  - app/pb_kits/playbook/pb_filter/filter.html.erb
889
881
  - app/pb_kits/playbook/pb_filter/filter.rb
890
- - app/pb_kits/playbook/pb_filter/filter.test.js
891
882
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
892
883
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
893
884
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
@@ -1048,8 +1039,8 @@ files:
1048
1039
  - app/pb_kits/playbook/pb_highlight/docs/index.js
1049
1040
  - app/pb_kits/playbook/pb_highlight/highlight.html.erb
1050
1041
  - app/pb_kits/playbook/pb_highlight/highlight.rb
1042
+ - app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx
1051
1043
  - app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss
1052
- - app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx
1053
1044
  - app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb
1054
1045
  - app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb
1055
1046
  - app/pb_kits/playbook/pb_home_address_street/docs/_description.md
@@ -1069,7 +1060,6 @@ files:
1069
1060
  - app/pb_kits/playbook/pb_home_address_street/docs/index.js
1070
1061
  - app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb
1071
1062
  - app/pb_kits/playbook/pb_home_address_street/home_address_street.rb
1072
- - app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js
1073
1063
  - app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb
1074
1064
  - app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb
1075
1065
  - app/pb_kits/playbook/pb_icon/_icon.scss
@@ -1114,8 +1104,8 @@ files:
1114
1104
  - app/pb_kits/playbook/pb_icon_circle/docs/index.js
1115
1105
  - app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb
1116
1106
  - app/pb_kits/playbook/pb_icon_circle/icon_circle.rb
1107
+ - app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx
1117
1108
  - app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss
1118
- - app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx
1119
1109
  - app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb
1120
1110
  - app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx
1121
1111
  - app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb
@@ -1128,9 +1118,8 @@ files:
1128
1118
  - app/pb_kits/playbook/pb_icon_stat_value/docs/index.js
1129
1119
  - app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb
1130
1120
  - app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb
1131
- - app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js
1121
+ - app/pb_kits/playbook/pb_icon_value/_icon_value.jsx
1132
1122
  - app/pb_kits/playbook/pb_icon_value/_icon_value.scss
1133
- - app/pb_kits/playbook/pb_icon_value/_icon_value.tsx
1134
1123
  - app/pb_kits/playbook/pb_icon_value/docs/_description.md
1135
1124
  - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb
1136
1125
  - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx
@@ -1140,7 +1129,6 @@ files:
1140
1129
  - app/pb_kits/playbook/pb_icon_value/docs/index.js
1141
1130
  - app/pb_kits/playbook/pb_icon_value/icon_value.html.erb
1142
1131
  - app/pb_kits/playbook/pb_icon_value/icon_value.rb
1143
- - app/pb_kits/playbook/pb_icon_value/icon_value.test.js
1144
1132
  - app/pb_kits/playbook/pb_image/_image.scss
1145
1133
  - app/pb_kits/playbook/pb_image/_image.tsx
1146
1134
  - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
@@ -1171,8 +1159,8 @@ files:
1171
1159
  - app/pb_kits/playbook/pb_label_pill/docs/index.js
1172
1160
  - app/pb_kits/playbook/pb_label_pill/label_pill.html.erb
1173
1161
  - app/pb_kits/playbook/pb_label_pill/label_pill.rb
1162
+ - app/pb_kits/playbook/pb_label_value/_label_value.jsx
1174
1163
  - app/pb_kits/playbook/pb_label_value/_label_value.scss
1175
- - app/pb_kits/playbook/pb_label_value/_label_value.tsx
1176
1164
  - app/pb_kits/playbook/pb_label_value/docs/_description.md
1177
1165
  - app/pb_kits/playbook/pb_label_value/docs/_footer.md
1178
1166
  - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
@@ -1187,7 +1175,6 @@ files:
1187
1175
  - app/pb_kits/playbook/pb_label_value/docs/index.js
1188
1176
  - app/pb_kits/playbook/pb_label_value/label_value.html.erb
1189
1177
  - app/pb_kits/playbook/pb_label_value/label_value.rb
1190
- - app/pb_kits/playbook/pb_label_value/label_value.test.js
1191
1178
  - app/pb_kits/playbook/pb_layout/_layout.scss
1192
1179
  - app/pb_kits/playbook/pb_layout/_layout.tsx
1193
1180
  - app/pb_kits/playbook/pb_layout/_layout_mixin.scss
@@ -2297,9 +2284,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2297
2284
  version: '0'
2298
2285
  required_rubygems_version: !ruby/object:Gem::Requirement
2299
2286
  requirements:
2300
- - - ">="
2287
+ - - ">"
2301
2288
  - !ruby/object:Gem::Version
2302
- version: '0'
2289
+ version: 1.3.1
2303
2290
  requirements: []
2304
2291
  rubygems_version: 3.3.7
2305
2292
  signing_key:
@@ -1,80 +0,0 @@
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
- })
@@ -1 +0,0 @@
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.
@@ -1,2 +0,0 @@
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" }) %>
@@ -1,23 +0,0 @@
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
@@ -1 +0,0 @@
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.
@@ -1,34 +0,0 @@
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 %>
@@ -1,66 +0,0 @@
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
@@ -1,4 +0,0 @@
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"`
@@ -1,76 +0,0 @@
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
- });
@@ -1,129 +0,0 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
3
-
4
- import { joinPresent, titleize } from '../utilities/text'
5
- import { globalProps } from '../utilities/globalProps'
6
-
7
- import Body from '../pb_body/_body'
8
- import Hashtag from '../pb_hashtag/_hashtag'
9
- import Title from '../pb_title/_title'
10
- import { buildAriaProps, buildDataProps } from '../utilities/props'
11
-
12
- type HomeAddressStreetProps = {
13
- aria?: { [key: string]: string },
14
- address: string,
15
- addressCont: string,
16
- city: string,
17
- className?: string,
18
- data?: { [key: string]: string },
19
- dark?: boolean,
20
- emphasis: "street" | "city",
21
- homeId: string,
22
- houseStyle: string,
23
- homeUrl: string,
24
- newWindow: boolean,
25
- state: string,
26
- zipcode: string,
27
- territory: string,
28
- }
29
-
30
- const HomeAddressStreet = (props: HomeAddressStreetProps) => {
31
- const {
32
- address,
33
- addressCont,
34
- aria = {},
35
- city,
36
- className,
37
- data = {},
38
- dark = false,
39
- emphasis = 'street',
40
- homeId,
41
- homeUrl,
42
- newWindow,
43
- houseStyle,
44
- state,
45
- zipcode,
46
- territory,
47
- } = props
48
-
49
- const classes = (className: string, dark: boolean) =>
50
- classnames(
51
- {
52
- 'pb_home_address_street': !dark,
53
- 'pb_home_address_street_dark': dark,
54
- },
55
- globalProps(props),
56
- className
57
- )
58
-
59
- const dataProps: { [key: string]: any } = buildDataProps(data)
60
- const ariaProps: { [key: string]: any } = buildAriaProps(aria)
61
-
62
- return (
63
- <div className={classes(className, dark)} {...ariaProps} {...dataProps}>
64
- {emphasis == 'street' &&
65
- <div>
66
- <Title
67
- className="pb_home_address_street_address"
68
- dark={dark}
69
- size={4}
70
- >
71
- {joinPresent([titleize(address), houseStyle], ' · ')}
72
- </Title>
73
- <Title
74
- className="pb_home_address_street_address"
75
- dark={dark}
76
- size={4}
77
- >
78
- {titleize(addressCont)}
79
- </Title>
80
- <Body color="light">
81
- {`${titleize(city)}, ${state} ${zipcode}`}
82
- </Body>
83
- </div>
84
- }
85
- {emphasis == 'city' &&
86
- <div>
87
- <Body color="light">
88
- {joinPresent([titleize(address), houseStyle], ' · ')}
89
- </Body>
90
- <Body color="light">{titleize(addressCont)}</Body>
91
- <div>
92
- <Title
93
- className="pb_home_address_street_address"
94
- dark={dark}
95
- size={4}
96
- tag="span"
97
- >
98
- {`${titleize(city)}, ${state}`}
99
- </Title>
100
- <Body
101
- color="light"
102
- tag="span"
103
- >
104
- {` ${zipcode}`}
105
- </Body>
106
- </div>
107
- </div>
108
- }
109
- {homeId &&
110
- <Hashtag
111
- classname="home-hashtag"
112
- dark={dark}
113
- newWindow={newWindow}
114
- text={homeId}
115
- type="home"
116
- url={homeUrl || '#'}
117
- />
118
- }
119
- <Body
120
- color="light"
121
- tag="span"
122
- >
123
- <small>{territory}</small>
124
- </Body>
125
- </div>
126
- )
127
- }
128
-
129
- export default HomeAddressStreet
@@ -1,60 +0,0 @@
1
- import React from 'react'
2
- import { render, screen, cleanup } from "../utilities/test-utils";
3
-
4
- import { HomeAddressStreet } from "..";
5
-
6
-
7
- const testId = "primary-test"
8
- const address = "70 Prospect Ave"
9
- const city = "West Chester"
10
- const homeId = "8250263"
11
-
12
- function HomeAdressStreetTest(props) {
13
- return (
14
- <HomeAddressStreet
15
- address={address}
16
- addressCont="Apt M18"
17
- city={city}
18
- data={{ testid: testId }}
19
- homeId={homeId}
20
- homeUrl="https://powerhrg.com/"
21
- houseStyle="Colonial"
22
- state="PA"
23
- territory="PHL"
24
- zipcode="19382"
25
- {...props}
26
- />
27
- );
28
- }
29
-
30
- test("renders the component", () => {
31
- render(<HomeAdressStreetTest />);
32
- const kit = screen.getByTestId("primary-test");
33
- expect(kit).toBeInTheDocument();
34
- expect(kit).toHaveClass("pb_home_address_street");
35
-
36
- cleanup()
37
- });
38
-
39
- test("emphasize street by not setting a prop", () => {
40
- const { container } = render(<HomeAdressStreetTest />);
41
- expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(address);
42
-
43
- cleanup()
44
- });
45
-
46
- test("emphasize city", () => {
47
- const { container } = render(<HomeAdressStreetTest emphasis="city" />);
48
- expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(city);
49
-
50
- cleanup()
51
- });
52
-
53
- test("renders the hashtag kit", () => {
54
- const { container } = render(<HomeAdressStreetTest />);
55
- expect(container.getElementsByClassName("pb_hashtag_kit")[0]).toBeInTheDocument;
56
- expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href");
57
- expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveTextContent(homeId);
58
-
59
- cleanup()
60
- });