playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.pre.guagechart1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|