playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.pre.guagechart1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/data/menu.yml +0 -13
- data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button/button.rb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
- data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +22 -6
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
import DateTime from "../pb_kit/dateTime";
|
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
|
5
|
+
import { globalProps } from "../utilities/globalProps";
|
|
6
|
+
|
|
7
|
+
import Body from "../pb_body/_body";
|
|
8
|
+
import Caption from "../pb_caption/_caption";
|
|
9
|
+
import Flex from "../pb_flex/_flex";
|
|
10
|
+
import Icon from "../pb_icon/_icon";
|
|
11
|
+
import Title from "../pb_title/_title";
|
|
12
|
+
|
|
13
|
+
type LabelValueProps = {
|
|
14
|
+
active?: boolean;
|
|
15
|
+
aria?: { [key: string]: string };
|
|
16
|
+
className?: string;
|
|
17
|
+
dark?: boolean;
|
|
18
|
+
data?: object;
|
|
19
|
+
date?: Date;
|
|
20
|
+
id?: string;
|
|
21
|
+
label: string;
|
|
22
|
+
value?: string;
|
|
23
|
+
variant?: "default" | "details";
|
|
24
|
+
icon?: string;
|
|
25
|
+
description?: string;
|
|
26
|
+
title?: string;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const dateString = (value: DateTime) => {
|
|
30
|
+
const month = value.toMonthNum();
|
|
31
|
+
const day = value.toDay();
|
|
32
|
+
|
|
33
|
+
return ` · ${month}/${day}`;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const LabelValue = (props: LabelValueProps) => {
|
|
37
|
+
const {
|
|
38
|
+
active = false,
|
|
39
|
+
aria = {},
|
|
40
|
+
className,
|
|
41
|
+
dark = false,
|
|
42
|
+
data = {},
|
|
43
|
+
date,
|
|
44
|
+
description,
|
|
45
|
+
icon,
|
|
46
|
+
id,
|
|
47
|
+
label,
|
|
48
|
+
title,
|
|
49
|
+
value,
|
|
50
|
+
variant = "default",
|
|
51
|
+
} = props;
|
|
52
|
+
|
|
53
|
+
const ariaProps = buildAriaProps(aria);
|
|
54
|
+
const dataProps = buildDataProps(data);
|
|
55
|
+
const formattedDate = new DateTime({ value: date });
|
|
56
|
+
const variantClass = variant === "details" ? "details" : "";
|
|
57
|
+
const classes = classnames(
|
|
58
|
+
buildCss("pb_label_value_kit", variantClass),
|
|
59
|
+
globalProps(props),
|
|
60
|
+
className
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<div
|
|
65
|
+
{...ariaProps}
|
|
66
|
+
{...dataProps}
|
|
67
|
+
className={classes}
|
|
68
|
+
id={id}
|
|
69
|
+
title={title}
|
|
70
|
+
>
|
|
71
|
+
<Caption dark={dark} text={label} />
|
|
72
|
+
{variant === "details" ? (
|
|
73
|
+
<Flex inline vertical="center">
|
|
74
|
+
{icon && (
|
|
75
|
+
<Body color="light" dark={dark} marginRight="xs">
|
|
76
|
+
<Icon dark={dark} fixedWidth icon={icon} />
|
|
77
|
+
</Body>
|
|
78
|
+
)}
|
|
79
|
+
{description && (
|
|
80
|
+
<Body
|
|
81
|
+
color="light"
|
|
82
|
+
dark={dark}
|
|
83
|
+
marginRight="xs"
|
|
84
|
+
text={description}
|
|
85
|
+
/>
|
|
86
|
+
)}
|
|
87
|
+
{active === true ? (
|
|
88
|
+
<Flex inline vertical="center">
|
|
89
|
+
{title && (
|
|
90
|
+
<Title dark={dark} size={4} text={title} variant="link" />
|
|
91
|
+
)}
|
|
92
|
+
{date && (
|
|
93
|
+
<Title
|
|
94
|
+
dark={dark}
|
|
95
|
+
marginLeft="xs"
|
|
96
|
+
size={4}
|
|
97
|
+
text={" " + dateString(formattedDate)}
|
|
98
|
+
variant="link"
|
|
99
|
+
/>
|
|
100
|
+
)}
|
|
101
|
+
</Flex>
|
|
102
|
+
) : (
|
|
103
|
+
<>
|
|
104
|
+
{title && <Title dark={dark} size={4} text={title} />}
|
|
105
|
+
{date && (
|
|
106
|
+
<Title
|
|
107
|
+
dark={dark}
|
|
108
|
+
marginLeft="xs"
|
|
109
|
+
size={4}
|
|
110
|
+
text={" " + dateString(formattedDate)}
|
|
111
|
+
/>
|
|
112
|
+
)}
|
|
113
|
+
</>
|
|
114
|
+
)}
|
|
115
|
+
</Flex>
|
|
116
|
+
) : (
|
|
117
|
+
<Body dark={dark} text={value} />
|
|
118
|
+
)}
|
|
119
|
+
</div>
|
|
120
|
+
);
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
export default LabelValue;
|
|
@@ -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.
|
|
4
|
+
version: 11.7.0.pre.alpha.pre.guagechart1
|
|
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-26 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
|
|
@@ -992,6 +1001,9 @@ files:
|
|
|
992
1001
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
|
|
993
1002
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
|
|
994
1003
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
|
|
1004
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb
|
|
1005
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx
|
|
1006
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md
|
|
995
1007
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
|
|
996
1008
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
|
|
997
1009
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
|
|
@@ -1039,8 +1051,8 @@ files:
|
|
|
1039
1051
|
- app/pb_kits/playbook/pb_highlight/docs/index.js
|
|
1040
1052
|
- app/pb_kits/playbook/pb_highlight/highlight.html.erb
|
|
1041
1053
|
- app/pb_kits/playbook/pb_highlight/highlight.rb
|
|
1042
|
-
- app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx
|
|
1043
1054
|
- app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss
|
|
1055
|
+
- app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx
|
|
1044
1056
|
- app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb
|
|
1045
1057
|
- app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb
|
|
1046
1058
|
- app/pb_kits/playbook/pb_home_address_street/docs/_description.md
|
|
@@ -1060,6 +1072,7 @@ files:
|
|
|
1060
1072
|
- app/pb_kits/playbook/pb_home_address_street/docs/index.js
|
|
1061
1073
|
- app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb
|
|
1062
1074
|
- app/pb_kits/playbook/pb_home_address_street/home_address_street.rb
|
|
1075
|
+
- app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js
|
|
1063
1076
|
- app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb
|
|
1064
1077
|
- app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb
|
|
1065
1078
|
- app/pb_kits/playbook/pb_icon/_icon.scss
|
|
@@ -1104,8 +1117,8 @@ files:
|
|
|
1104
1117
|
- app/pb_kits/playbook/pb_icon_circle/docs/index.js
|
|
1105
1118
|
- app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb
|
|
1106
1119
|
- app/pb_kits/playbook/pb_icon_circle/icon_circle.rb
|
|
1107
|
-
- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx
|
|
1108
1120
|
- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss
|
|
1121
|
+
- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx
|
|
1109
1122
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb
|
|
1110
1123
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx
|
|
1111
1124
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb
|
|
@@ -1118,8 +1131,9 @@ files:
|
|
|
1118
1131
|
- app/pb_kits/playbook/pb_icon_stat_value/docs/index.js
|
|
1119
1132
|
- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb
|
|
1120
1133
|
- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb
|
|
1121
|
-
- app/pb_kits/playbook/
|
|
1134
|
+
- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js
|
|
1122
1135
|
- app/pb_kits/playbook/pb_icon_value/_icon_value.scss
|
|
1136
|
+
- app/pb_kits/playbook/pb_icon_value/_icon_value.tsx
|
|
1123
1137
|
- app/pb_kits/playbook/pb_icon_value/docs/_description.md
|
|
1124
1138
|
- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb
|
|
1125
1139
|
- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx
|
|
@@ -1129,6 +1143,7 @@ files:
|
|
|
1129
1143
|
- app/pb_kits/playbook/pb_icon_value/docs/index.js
|
|
1130
1144
|
- app/pb_kits/playbook/pb_icon_value/icon_value.html.erb
|
|
1131
1145
|
- app/pb_kits/playbook/pb_icon_value/icon_value.rb
|
|
1146
|
+
- app/pb_kits/playbook/pb_icon_value/icon_value.test.js
|
|
1132
1147
|
- app/pb_kits/playbook/pb_image/_image.scss
|
|
1133
1148
|
- app/pb_kits/playbook/pb_image/_image.tsx
|
|
1134
1149
|
- app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
|
|
@@ -1159,8 +1174,8 @@ files:
|
|
|
1159
1174
|
- app/pb_kits/playbook/pb_label_pill/docs/index.js
|
|
1160
1175
|
- app/pb_kits/playbook/pb_label_pill/label_pill.html.erb
|
|
1161
1176
|
- app/pb_kits/playbook/pb_label_pill/label_pill.rb
|
|
1162
|
-
- app/pb_kits/playbook/pb_label_value/_label_value.jsx
|
|
1163
1177
|
- app/pb_kits/playbook/pb_label_value/_label_value.scss
|
|
1178
|
+
- app/pb_kits/playbook/pb_label_value/_label_value.tsx
|
|
1164
1179
|
- app/pb_kits/playbook/pb_label_value/docs/_description.md
|
|
1165
1180
|
- app/pb_kits/playbook/pb_label_value/docs/_footer.md
|
|
1166
1181
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
|
|
@@ -1175,6 +1190,7 @@ files:
|
|
|
1175
1190
|
- app/pb_kits/playbook/pb_label_value/docs/index.js
|
|
1176
1191
|
- app/pb_kits/playbook/pb_label_value/label_value.html.erb
|
|
1177
1192
|
- app/pb_kits/playbook/pb_label_value/label_value.rb
|
|
1193
|
+
- app/pb_kits/playbook/pb_label_value/label_value.test.js
|
|
1178
1194
|
- app/pb_kits/playbook/pb_layout/_layout.scss
|
|
1179
1195
|
- app/pb_kits/playbook/pb_layout/_layout.tsx
|
|
1180
1196
|
- app/pb_kits/playbook/pb_layout/_layout_mixin.scss
|
|
@@ -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
|