playbook_ui 11.6.0.pre.alpha.rubocopperf1 → 11.6.0
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_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/utilities/text.ts +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +21 -8
- 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
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import LabelValue from './_label_value'
|
|
5
|
+
|
|
6
|
+
const testId = "labelvalue-kit";
|
|
7
|
+
jest.useFakeTimers()
|
|
8
|
+
|
|
9
|
+
describe("LabelValue Kit", () => {
|
|
10
|
+
test("renders LabelValue classname", () => {
|
|
11
|
+
render(
|
|
12
|
+
<LabelValue
|
|
13
|
+
data={{ testid: testId }}
|
|
14
|
+
label="Role"
|
|
15
|
+
value="Administrator, Moderator"
|
|
16
|
+
/>
|
|
17
|
+
)
|
|
18
|
+
const kit = screen.getByTestId(testId)
|
|
19
|
+
expect(kit).toHaveClass("pb_label_value_kit")
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
test("renders label correctly", () => {
|
|
23
|
+
render(
|
|
24
|
+
<LabelValue
|
|
25
|
+
data={{ testid: testId }}
|
|
26
|
+
label="Role"
|
|
27
|
+
value="Administrator, Moderator"
|
|
28
|
+
/>
|
|
29
|
+
)
|
|
30
|
+
const kit = screen.getByTestId(testId)
|
|
31
|
+
const text = kit.querySelector(".pb_caption_kit_md")
|
|
32
|
+
expect(text.textContent).toEqual("Role")
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
test("renders value correctly", () => {
|
|
36
|
+
render(
|
|
37
|
+
<LabelValue
|
|
38
|
+
data={{ testid: testId }}
|
|
39
|
+
label="Role"
|
|
40
|
+
value="Administrator, Moderator"
|
|
41
|
+
/>
|
|
42
|
+
)
|
|
43
|
+
const kit = screen.getByTestId(testId)
|
|
44
|
+
const text = kit.querySelector(".pb_body_kit")
|
|
45
|
+
expect(text.textContent).toEqual("Administrator, Moderator")
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
test("renders icon if included with details variant", () => {
|
|
49
|
+
render(
|
|
50
|
+
<LabelValue
|
|
51
|
+
data={{ testid: testId }}
|
|
52
|
+
icon="truck"
|
|
53
|
+
label="Installer"
|
|
54
|
+
title="JD Installations LLC"
|
|
55
|
+
variant="details"
|
|
56
|
+
/>
|
|
57
|
+
)
|
|
58
|
+
const kit = screen.getByTestId(testId)
|
|
59
|
+
const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
|
|
60
|
+
expect(icon).toBeInTheDocument()
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
test("renders title if included with details variant", () => {
|
|
64
|
+
render(
|
|
65
|
+
<LabelValue
|
|
66
|
+
data={{ testid: testId }}
|
|
67
|
+
icon="truck"
|
|
68
|
+
label="Installer"
|
|
69
|
+
title="JD Installations LLC"
|
|
70
|
+
variant="details"
|
|
71
|
+
/>
|
|
72
|
+
)
|
|
73
|
+
const kit = screen.getByTestId(testId)
|
|
74
|
+
const text = kit.querySelector(".pb_title_kit_size_4")
|
|
75
|
+
expect(text.textContent).toEqual("JD Installations LLC")
|
|
76
|
+
})
|
|
77
|
+
|
|
78
|
+
test("renders date if included with details variant", () => {
|
|
79
|
+
render(
|
|
80
|
+
<LabelValue
|
|
81
|
+
data={{ testid: testId }}
|
|
82
|
+
date={new Date('18 Nov 2019')}
|
|
83
|
+
description="33-12345"
|
|
84
|
+
icon="home"
|
|
85
|
+
label="Project"
|
|
86
|
+
title="Jefferson-Smith"
|
|
87
|
+
variant="details"
|
|
88
|
+
/>
|
|
89
|
+
)
|
|
90
|
+
const text = screen.getByText("11/18", {exact: false})
|
|
91
|
+
expect(text).toBeInTheDocument()
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
test("renders title if included with details variant", () => {
|
|
95
|
+
render(
|
|
96
|
+
<LabelValue
|
|
97
|
+
active
|
|
98
|
+
data={{ testid: testId }}
|
|
99
|
+
icon="truck"
|
|
100
|
+
label="Installer"
|
|
101
|
+
title="JD Installations LLC"
|
|
102
|
+
variant="details"
|
|
103
|
+
/>
|
|
104
|
+
)
|
|
105
|
+
const kit = screen.getByTestId(testId)
|
|
106
|
+
const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
|
|
107
|
+
expect(activeProp).toBeInTheDocument()
|
|
108
|
+
})
|
|
109
|
+
})
|
|
@@ -82,7 +82,7 @@ test("render all layout variants", () => {
|
|
|
82
82
|
]
|
|
83
83
|
|
|
84
84
|
testValues.forEach(({ layout, expected }) => {
|
|
85
|
-
const { getByTestId
|
|
85
|
+
const { getByTestId } = render(
|
|
86
86
|
<Layout data={{ testid: `test-${layout}` }}
|
|
87
87
|
layout={layout}>
|
|
88
88
|
<Layout.Body>
|
|
@@ -90,7 +90,6 @@ test("render all layout variants", () => {
|
|
|
90
90
|
</Layout.Body>
|
|
91
91
|
</Layout>
|
|
92
92
|
)
|
|
93
|
-
console.log(container)
|
|
94
93
|
|
|
95
94
|
expect(getByTestId(`test-${layout}`)).toHaveClass(expected)
|
|
96
95
|
cleanup()
|
|
@@ -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],
|
|
7
|
+
values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
|
|
8
8
|
default: "left"
|
|
9
9
|
prop :trigger_element_id
|
|
10
10
|
prop :tooltip_id
|
|
@@ -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: [], separator: string): string => (
|
|
13
|
+
export const joinPresent = (array: string[], separator: string): string => (
|
|
14
14
|
filter(array, notEmpty).join(separator)
|
|
15
15
|
)
|
|
16
16
|
|
data/lib/playbook/version.rb
CHANGED
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.0
|
|
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-
|
|
12
|
+
date: 2022-09-23 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -348,6 +348,7 @@ 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
|
|
351
352
|
- app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb
|
|
352
353
|
- app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx
|
|
353
354
|
- app/pb_kits/playbook/pb_badge/docs/_badge_default.html.erb
|
|
@@ -417,6 +418,7 @@ files:
|
|
|
417
418
|
- app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx
|
|
418
419
|
- app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb
|
|
419
420
|
- app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx
|
|
421
|
+
- app/pb_kits/playbook/pb_button/docs/_button_block_content.md
|
|
420
422
|
- app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
|
|
421
423
|
- app/pb_kits/playbook/pb_button/docs/_button_default.jsx
|
|
422
424
|
- app/pb_kits/playbook/pb_button/docs/_button_default.md
|
|
@@ -425,6 +427,9 @@ files:
|
|
|
425
427
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
|
|
426
428
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
|
|
427
429
|
- 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
|
|
428
433
|
- app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
|
|
429
434
|
- app/pb_kits/playbook/pb_button/docs/_button_link.jsx
|
|
430
435
|
- app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
|
|
@@ -871,6 +876,9 @@ files:
|
|
|
871
876
|
- app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md
|
|
872
877
|
- app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb
|
|
873
878
|
- 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
|
|
874
882
|
- app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
|
|
875
883
|
- app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
|
|
876
884
|
- app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
|
|
@@ -879,6 +887,7 @@ files:
|
|
|
879
887
|
- app/pb_kits/playbook/pb_filter/docs/index.js
|
|
880
888
|
- app/pb_kits/playbook/pb_filter/filter.html.erb
|
|
881
889
|
- app/pb_kits/playbook/pb_filter/filter.rb
|
|
890
|
+
- app/pb_kits/playbook/pb_filter/filter.test.js
|
|
882
891
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
|
|
883
892
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
|
|
884
893
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
|
|
@@ -1039,8 +1048,8 @@ files:
|
|
|
1039
1048
|
- app/pb_kits/playbook/pb_highlight/docs/index.js
|
|
1040
1049
|
- app/pb_kits/playbook/pb_highlight/highlight.html.erb
|
|
1041
1050
|
- app/pb_kits/playbook/pb_highlight/highlight.rb
|
|
1042
|
-
- app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx
|
|
1043
1051
|
- 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
|
|
1044
1053
|
- app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb
|
|
1045
1054
|
- app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb
|
|
1046
1055
|
- app/pb_kits/playbook/pb_home_address_street/docs/_description.md
|
|
@@ -1060,6 +1069,7 @@ files:
|
|
|
1060
1069
|
- app/pb_kits/playbook/pb_home_address_street/docs/index.js
|
|
1061
1070
|
- app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb
|
|
1062
1071
|
- 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
|
|
1063
1073
|
- app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb
|
|
1064
1074
|
- app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb
|
|
1065
1075
|
- app/pb_kits/playbook/pb_icon/_icon.scss
|
|
@@ -1104,8 +1114,8 @@ files:
|
|
|
1104
1114
|
- app/pb_kits/playbook/pb_icon_circle/docs/index.js
|
|
1105
1115
|
- app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb
|
|
1106
1116
|
- app/pb_kits/playbook/pb_icon_circle/icon_circle.rb
|
|
1107
|
-
- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx
|
|
1108
1117
|
- 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
|
|
1109
1119
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb
|
|
1110
1120
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx
|
|
1111
1121
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb
|
|
@@ -1118,8 +1128,9 @@ files:
|
|
|
1118
1128
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/index.js
|
|
1119
1129
|
- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb
|
|
1120
1130
|
- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb
|
|
1121
|
-
- app/pb_kits/playbook/
|
|
1131
|
+
- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js
|
|
1122
1132
|
- app/pb_kits/playbook/pb_icon_value/_icon_value.scss
|
|
1133
|
+
- app/pb_kits/playbook/pb_icon_value/_icon_value.tsx
|
|
1123
1134
|
- app/pb_kits/playbook/pb_icon_value/docs/_description.md
|
|
1124
1135
|
- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb
|
|
1125
1136
|
- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx
|
|
@@ -1129,6 +1140,7 @@ files:
|
|
|
1129
1140
|
- app/pb_kits/playbook/pb_icon_value/docs/index.js
|
|
1130
1141
|
- app/pb_kits/playbook/pb_icon_value/icon_value.html.erb
|
|
1131
1142
|
- app/pb_kits/playbook/pb_icon_value/icon_value.rb
|
|
1143
|
+
- app/pb_kits/playbook/pb_icon_value/icon_value.test.js
|
|
1132
1144
|
- app/pb_kits/playbook/pb_image/_image.scss
|
|
1133
1145
|
- app/pb_kits/playbook/pb_image/_image.tsx
|
|
1134
1146
|
- app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
|
|
@@ -1159,8 +1171,8 @@ files:
|
|
|
1159
1171
|
- app/pb_kits/playbook/pb_label_pill/docs/index.js
|
|
1160
1172
|
- app/pb_kits/playbook/pb_label_pill/label_pill.html.erb
|
|
1161
1173
|
- app/pb_kits/playbook/pb_label_pill/label_pill.rb
|
|
1162
|
-
- app/pb_kits/playbook/pb_label_value/_label_value.jsx
|
|
1163
1174
|
- app/pb_kits/playbook/pb_label_value/_label_value.scss
|
|
1175
|
+
- app/pb_kits/playbook/pb_label_value/_label_value.tsx
|
|
1164
1176
|
- app/pb_kits/playbook/pb_label_value/docs/_description.md
|
|
1165
1177
|
- app/pb_kits/playbook/pb_label_value/docs/_footer.md
|
|
1166
1178
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
|
|
@@ -1175,6 +1187,7 @@ files:
|
|
|
1175
1187
|
- app/pb_kits/playbook/pb_label_value/docs/index.js
|
|
1176
1188
|
- app/pb_kits/playbook/pb_label_value/label_value.html.erb
|
|
1177
1189
|
- app/pb_kits/playbook/pb_label_value/label_value.rb
|
|
1190
|
+
- app/pb_kits/playbook/pb_label_value/label_value.test.js
|
|
1178
1191
|
- app/pb_kits/playbook/pb_layout/_layout.scss
|
|
1179
1192
|
- app/pb_kits/playbook/pb_layout/_layout.tsx
|
|
1180
1193
|
- app/pb_kits/playbook/pb_layout/_layout_mixin.scss
|
|
@@ -2284,9 +2297,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2284
2297
|
version: '0'
|
|
2285
2298
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2286
2299
|
requirements:
|
|
2287
|
-
- - "
|
|
2300
|
+
- - ">="
|
|
2288
2301
|
- !ruby/object:Gem::Version
|
|
2289
|
-
version:
|
|
2302
|
+
version: '0'
|
|
2290
2303
|
requirements: []
|
|
2291
2304
|
rubygems_version: 3.3.7
|
|
2292
2305
|
signing_key:
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
|
|
3
|
-
import React from 'react'
|
|
4
|
-
import classnames from 'classnames'
|
|
5
|
-
|
|
6
|
-
import { joinPresent, titleize } from '../utilities/text'
|
|
7
|
-
import { globalProps } from '../utilities/globalProps'
|
|
8
|
-
|
|
9
|
-
import Body from '../pb_body/_body'
|
|
10
|
-
import Hashtag from '../pb_hashtag/_hashtag'
|
|
11
|
-
import Title from '../pb_title/_title'
|
|
12
|
-
|
|
13
|
-
type HomeAddressStreetProps = {
|
|
14
|
-
address: string,
|
|
15
|
-
addressCont: string,
|
|
16
|
-
city: string,
|
|
17
|
-
className?: string,
|
|
18
|
-
dark?: boolean,
|
|
19
|
-
emphasis: "street" | "city",
|
|
20
|
-
homeId: number,
|
|
21
|
-
houseStyle: string,
|
|
22
|
-
homeUrl: string,
|
|
23
|
-
newWindow: Boolean,
|
|
24
|
-
state: string,
|
|
25
|
-
zipcode: string,
|
|
26
|
-
territory: string,
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const HomeAddressStreet = (props: HomeAddressStreetProps) => {
|
|
30
|
-
const {
|
|
31
|
-
address,
|
|
32
|
-
addressCont,
|
|
33
|
-
city,
|
|
34
|
-
className,
|
|
35
|
-
dark = false,
|
|
36
|
-
emphasis = 'street',
|
|
37
|
-
homeId,
|
|
38
|
-
homeUrl,
|
|
39
|
-
newWindow,
|
|
40
|
-
houseStyle,
|
|
41
|
-
state,
|
|
42
|
-
zipcode,
|
|
43
|
-
territory,
|
|
44
|
-
} = props
|
|
45
|
-
|
|
46
|
-
const classes = (className, dark) =>
|
|
47
|
-
classnames(
|
|
48
|
-
{
|
|
49
|
-
'pb_home_address_street': !dark,
|
|
50
|
-
'pb_home_address_street_dark': dark,
|
|
51
|
-
},
|
|
52
|
-
globalProps(props),
|
|
53
|
-
className
|
|
54
|
-
)
|
|
55
|
-
return (
|
|
56
|
-
<div className={classes(className, dark)}>
|
|
57
|
-
{
|
|
58
|
-
<Choose>
|
|
59
|
-
<When condition={emphasis == 'street'}>
|
|
60
|
-
<div>
|
|
61
|
-
<Title
|
|
62
|
-
className="pb_home_address_street_address"
|
|
63
|
-
dark={dark}
|
|
64
|
-
size={4}
|
|
65
|
-
>
|
|
66
|
-
{joinPresent([titleize(address), houseStyle], ' · ')}
|
|
67
|
-
</Title>
|
|
68
|
-
<Title
|
|
69
|
-
className="pb_home_address_street_address"
|
|
70
|
-
dark={dark}
|
|
71
|
-
size={4}
|
|
72
|
-
>
|
|
73
|
-
{titleize(addressCont)}
|
|
74
|
-
</Title>
|
|
75
|
-
<Body color="light">
|
|
76
|
-
{`${titleize(city)}, ${state} ${zipcode}`}
|
|
77
|
-
</Body>
|
|
78
|
-
</div>
|
|
79
|
-
</When>
|
|
80
|
-
<When condition={emphasis == 'city'}>
|
|
81
|
-
<div>
|
|
82
|
-
<Body color="light">
|
|
83
|
-
{joinPresent([titleize(address), houseStyle], ' · ')}
|
|
84
|
-
</Body>
|
|
85
|
-
<Body color="light">{titleize(addressCont)}</Body>
|
|
86
|
-
<div>
|
|
87
|
-
<Title
|
|
88
|
-
className="pb_home_address_street_address"
|
|
89
|
-
dark={dark}
|
|
90
|
-
size={4}
|
|
91
|
-
tag="span"
|
|
92
|
-
>
|
|
93
|
-
{`${titleize(city)}, ${state}`}
|
|
94
|
-
</Title>
|
|
95
|
-
<Body
|
|
96
|
-
color="light"
|
|
97
|
-
tag="span"
|
|
98
|
-
>
|
|
99
|
-
{` ${zipcode}`}
|
|
100
|
-
</Body>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</When>
|
|
104
|
-
</Choose>
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
<If condition={homeId}>
|
|
108
|
-
<Hashtag
|
|
109
|
-
classname="home-hashtag"
|
|
110
|
-
dark={dark}
|
|
111
|
-
newWindow={newWindow}
|
|
112
|
-
text={homeId}
|
|
113
|
-
type="home"
|
|
114
|
-
url={homeUrl || '#'}
|
|
115
|
-
/>
|
|
116
|
-
</If>
|
|
117
|
-
<Body
|
|
118
|
-
color="light"
|
|
119
|
-
tag="span"
|
|
120
|
-
>
|
|
121
|
-
<small>{territory}</small>
|
|
122
|
-
</Body>
|
|
123
|
-
</div>
|
|
124
|
-
)
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
export default HomeAddressStreet
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
|
|
3
|
-
import React from 'react'
|
|
4
|
-
import classnames from 'classnames'
|
|
5
|
-
import DateTime from '../pb_kit/dateTime'
|
|
6
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
7
|
-
import { globalProps } from '../utilities/globalProps'
|
|
8
|
-
|
|
9
|
-
import Body from '../pb_body/_body'
|
|
10
|
-
import Caption from '../pb_caption/_caption'
|
|
11
|
-
import Flex from '../pb_flex/_flex'
|
|
12
|
-
import Icon from '../pb_icon/_icon'
|
|
13
|
-
import Title from '../pb_title/_title'
|
|
14
|
-
|
|
15
|
-
type LabelValueProps = {
|
|
16
|
-
active?: boolean,
|
|
17
|
-
aria?: object,
|
|
18
|
-
className?: string,
|
|
19
|
-
dark?: boolean,
|
|
20
|
-
data?: object,
|
|
21
|
-
date?: date,
|
|
22
|
-
id?: string,
|
|
23
|
-
label: string,
|
|
24
|
-
value?: string,
|
|
25
|
-
variant?: "default" | "details",
|
|
26
|
-
icon?: string,
|
|
27
|
-
description?: string,
|
|
28
|
-
title?: string,
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const dateString = (value: DateTime) => {
|
|
32
|
-
const month = value.toMonthNum()
|
|
33
|
-
const day = value.toDay()
|
|
34
|
-
|
|
35
|
-
return ` · ${month}/${day}`
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const LabelValue = (props: LabelValueProps) => {
|
|
39
|
-
const {
|
|
40
|
-
active = false,
|
|
41
|
-
aria = {},
|
|
42
|
-
className,
|
|
43
|
-
dark = false,
|
|
44
|
-
data = {},
|
|
45
|
-
date,
|
|
46
|
-
description,
|
|
47
|
-
icon,
|
|
48
|
-
id,
|
|
49
|
-
label,
|
|
50
|
-
title,
|
|
51
|
-
value,
|
|
52
|
-
variant = 'default',
|
|
53
|
-
} = props
|
|
54
|
-
|
|
55
|
-
const ariaProps = buildAriaProps(aria)
|
|
56
|
-
const dataProps = buildDataProps(data)
|
|
57
|
-
const formattedDate = new DateTime({ value: date })
|
|
58
|
-
const variantClass = variant === 'details' ? 'details' : ''
|
|
59
|
-
const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<div
|
|
63
|
-
{...ariaProps}
|
|
64
|
-
{...dataProps}
|
|
65
|
-
className={classes}
|
|
66
|
-
description={description}
|
|
67
|
-
icon={icon}
|
|
68
|
-
id={id}
|
|
69
|
-
title={title}
|
|
70
|
-
>
|
|
71
|
-
<Caption
|
|
72
|
-
dark={dark}
|
|
73
|
-
text={label}
|
|
74
|
-
/>
|
|
75
|
-
<If condition={variant === 'details'}>
|
|
76
|
-
<Flex
|
|
77
|
-
inline
|
|
78
|
-
vertical="center"
|
|
79
|
-
>
|
|
80
|
-
<If condition={icon}>
|
|
81
|
-
<Body
|
|
82
|
-
color="light"
|
|
83
|
-
dark={dark}
|
|
84
|
-
marginRight="xs"
|
|
85
|
-
>
|
|
86
|
-
<Icon
|
|
87
|
-
dark={dark}
|
|
88
|
-
fixedWidth
|
|
89
|
-
icon={icon}
|
|
90
|
-
/>
|
|
91
|
-
</Body>
|
|
92
|
-
</If>
|
|
93
|
-
<If condition={description}>
|
|
94
|
-
<Body
|
|
95
|
-
color="light"
|
|
96
|
-
dark={dark}
|
|
97
|
-
marginRight="xs"
|
|
98
|
-
text={description}
|
|
99
|
-
/>
|
|
100
|
-
</If>
|
|
101
|
-
<Choose>
|
|
102
|
-
<When condition={active === true}>
|
|
103
|
-
<Flex
|
|
104
|
-
inline
|
|
105
|
-
vertical="center"
|
|
106
|
-
>
|
|
107
|
-
<If condition={title}>
|
|
108
|
-
<Title
|
|
109
|
-
dark={dark}
|
|
110
|
-
size={4}
|
|
111
|
-
text={title}
|
|
112
|
-
variant="link"
|
|
113
|
-
/>
|
|
114
|
-
</If>
|
|
115
|
-
<If condition={date}>
|
|
116
|
-
<Title
|
|
117
|
-
dark={dark}
|
|
118
|
-
marginLeft="xs"
|
|
119
|
-
size={4}
|
|
120
|
-
text={' ' + dateString(formattedDate)}
|
|
121
|
-
variant="link"
|
|
122
|
-
/>
|
|
123
|
-
</If>
|
|
124
|
-
</Flex>
|
|
125
|
-
</When>
|
|
126
|
-
<Otherwise>
|
|
127
|
-
<If condition={title}>
|
|
128
|
-
<Title
|
|
129
|
-
dark={dark}
|
|
130
|
-
size={4}
|
|
131
|
-
text={title}
|
|
132
|
-
/>
|
|
133
|
-
</If>
|
|
134
|
-
<If condition={date}>
|
|
135
|
-
<Title
|
|
136
|
-
dark={dark}
|
|
137
|
-
marginLeft="xs"
|
|
138
|
-
size={4}
|
|
139
|
-
text={' ' + dateString(formattedDate)}
|
|
140
|
-
/>
|
|
141
|
-
</If>
|
|
142
|
-
</Otherwise>
|
|
143
|
-
</Choose>
|
|
144
|
-
</Flex>
|
|
145
|
-
<Else />
|
|
146
|
-
<Body
|
|
147
|
-
dark={dark}
|
|
148
|
-
text={value}
|
|
149
|
-
/>
|
|
150
|
-
</If>
|
|
151
|
-
</div>
|
|
152
|
-
)
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
export default LabelValue
|