playbook_ui 11.5.0.pre.alpha.fontawesome → 11.5.0.pre.alpha.pre.rubocop
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 +13 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +2 -7
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -7
- data/app/pb_kits/playbook/pb_button/button.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button/button.rb +0 -3
- 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 +9 -12
- data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +0 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +0 -2
- 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 +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +0 -3
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +127 -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_icon_stat_value/{_icon_stat_value.tsx → _icon_stat_value.jsx} +4 -2
- data/app/pb_kits/playbook/pb_icon_value/{_icon_value.tsx → _icon_value.jsx} +4 -2
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +155 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +2 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/fonts/fontawesome-min.js +2 -3
- data/fonts/regular-min.js +2 -3
- data/lib/playbook/version.rb +1 -1
- metadata +7 -20
- data/app/pb_kits/playbook/pb_badge/badge.test.js +0 -80
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +0 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +0 -2
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +0 -23
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +0 -34
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +0 -66
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +0 -4
- data/app/pb_kits/playbook/pb_filter/filter.test.js +0 -76
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +0 -129
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +0 -60
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +0 -154
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +0 -77
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +0 -123
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +0 -109
@@ -1,154 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { cleanup, render, screen } from '../utilities/test-utils'
|
3
|
-
|
4
|
-
import IconStatValue from './_icon_stat_value'
|
5
|
-
|
6
|
-
const testId = "iconstatvalue-kit"
|
7
|
-
|
8
|
-
describe("IconStatValue Kit", () => {
|
9
|
-
test("renders IconStatValue classname", () => {
|
10
|
-
render(
|
11
|
-
<IconStatValue
|
12
|
-
data={{ testid: testId }}
|
13
|
-
icon="lightbulb-on"
|
14
|
-
text="Electric"
|
15
|
-
unit="kw"
|
16
|
-
value={64.18}
|
17
|
-
/>
|
18
|
-
)
|
19
|
-
|
20
|
-
const kit = screen.getByTestId(testId)
|
21
|
-
expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_default")
|
22
|
-
})
|
23
|
-
|
24
|
-
test("renders icon", () => {
|
25
|
-
render(
|
26
|
-
<IconStatValue
|
27
|
-
data={{ testid: testId }}
|
28
|
-
icon="lightbulb-on"
|
29
|
-
text="Electric"
|
30
|
-
unit="kw"
|
31
|
-
value={64.18}
|
32
|
-
/>
|
33
|
-
)
|
34
|
-
|
35
|
-
const kit = screen.getByTestId(testId)
|
36
|
-
const icon = kit.querySelector(".fa-lightbulb-on.pb_icon_kit.fa-fw")
|
37
|
-
expect(icon).toBeInTheDocument()
|
38
|
-
})
|
39
|
-
|
40
|
-
test("renders text", () => {
|
41
|
-
render(
|
42
|
-
<IconStatValue
|
43
|
-
data={{ testid: testId }}
|
44
|
-
icon="lightbulb-on"
|
45
|
-
text="Electric"
|
46
|
-
unit="kw"
|
47
|
-
value={64.18}
|
48
|
-
/>
|
49
|
-
)
|
50
|
-
|
51
|
-
const kit = screen.getByTestId(testId)
|
52
|
-
const text = kit.querySelector(".pb_caption_kit_md")
|
53
|
-
expect(text.textContent).toEqual("Electric")
|
54
|
-
})
|
55
|
-
|
56
|
-
test("renders unit", () => {
|
57
|
-
render(
|
58
|
-
<IconStatValue
|
59
|
-
data={{ testid: testId }}
|
60
|
-
icon="lightbulb-on"
|
61
|
-
text="Electric"
|
62
|
-
unit="kw"
|
63
|
-
value={64.18}
|
64
|
-
/>
|
65
|
-
)
|
66
|
-
|
67
|
-
const kit = screen.getByTestId(testId)
|
68
|
-
const unit = kit.querySelector(".pb_body_kit")
|
69
|
-
expect(unit.textContent).toEqual("kw")
|
70
|
-
})
|
71
|
-
|
72
|
-
test("renders value", () => {
|
73
|
-
render(
|
74
|
-
<IconStatValue
|
75
|
-
data={{ testid: testId }}
|
76
|
-
icon="lightbulb-on"
|
77
|
-
text="Electric"
|
78
|
-
unit="kw"
|
79
|
-
value={64.18}
|
80
|
-
/>
|
81
|
-
)
|
82
|
-
|
83
|
-
const kit = screen.getByTestId(testId)
|
84
|
-
const value = kit.querySelector(".pb_title_kit_size_3")
|
85
|
-
expect(value.textContent).toEqual("64.18")
|
86
|
-
})
|
87
|
-
|
88
|
-
test("renders size prop", () => {
|
89
|
-
["sm",
|
90
|
-
"md",
|
91
|
-
"lg"].forEach((sizeProp) => {
|
92
|
-
render(
|
93
|
-
<IconStatValue
|
94
|
-
data={{ testid: testId }}
|
95
|
-
icon="lightbulb-on"
|
96
|
-
size={sizeProp}
|
97
|
-
text="Electric"
|
98
|
-
unit="kw"
|
99
|
-
value={64.18}
|
100
|
-
/>
|
101
|
-
)
|
102
|
-
|
103
|
-
const kit = screen.getByTestId(testId)
|
104
|
-
expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_default`)
|
105
|
-
|
106
|
-
cleanup()
|
107
|
-
})
|
108
|
-
})
|
109
|
-
|
110
|
-
test("renders color prop", () => {
|
111
|
-
["default",
|
112
|
-
"royal",
|
113
|
-
"blue",
|
114
|
-
"purple",
|
115
|
-
"teal",
|
116
|
-
"red",
|
117
|
-
"yellow",
|
118
|
-
"green"].forEach(
|
119
|
-
(colorProp) => {
|
120
|
-
render(
|
121
|
-
<IconStatValue
|
122
|
-
data={{ testid: testId }}
|
123
|
-
icon="lightbulb-on"
|
124
|
-
text="Electric"
|
125
|
-
unit="kw"
|
126
|
-
value={64.18}
|
127
|
-
variant={colorProp}
|
128
|
-
/>
|
129
|
-
)
|
130
|
-
|
131
|
-
const kit = screen.getByTestId(testId)
|
132
|
-
expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
|
133
|
-
|
134
|
-
cleanup()
|
135
|
-
})
|
136
|
-
})
|
137
|
-
|
138
|
-
test("renders vertical prop", () => {
|
139
|
-
render(
|
140
|
-
<IconStatValue
|
141
|
-
data={{ testid: testId }}
|
142
|
-
icon="lightbulb-on"
|
143
|
-
orientation="vertical"
|
144
|
-
text="Electric"
|
145
|
-
unit="kw"
|
146
|
-
value={64.18}
|
147
|
-
/>
|
148
|
-
)
|
149
|
-
|
150
|
-
const kit = screen.getByTestId(testId)
|
151
|
-
expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_default")
|
152
|
-
})
|
153
|
-
|
154
|
-
})
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { render, screen } from '../utilities/test-utils'
|
3
|
-
|
4
|
-
import IconValue from './_icon_value'
|
5
|
-
|
6
|
-
const testId = "iconvalue-kit";
|
7
|
-
|
8
|
-
describe("IconValue Kit", () => {
|
9
|
-
test("renders IconValue classname", () => {
|
10
|
-
render(
|
11
|
-
<IconValue
|
12
|
-
data={{ testid: testId }}
|
13
|
-
icon="clipboard"
|
14
|
-
text="33-123456"
|
15
|
-
/>
|
16
|
-
)
|
17
|
-
|
18
|
-
const kit = screen.getByTestId(testId)
|
19
|
-
expect(kit).toHaveClass("pb_icon_value_kit_left")
|
20
|
-
})
|
21
|
-
|
22
|
-
test("renders icon", () => {
|
23
|
-
render(
|
24
|
-
<IconValue
|
25
|
-
data={{ testid: testId }}
|
26
|
-
icon="clipboard"
|
27
|
-
text="33-123456"
|
28
|
-
/>
|
29
|
-
)
|
30
|
-
|
31
|
-
const kit = screen.getByTestId(testId)
|
32
|
-
const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
|
33
|
-
expect(icon).toBeInTheDocument()
|
34
|
-
})
|
35
|
-
|
36
|
-
test("renders value", () => {
|
37
|
-
render(
|
38
|
-
<IconValue
|
39
|
-
data={{ testid: testId }}
|
40
|
-
icon="clipboard"
|
41
|
-
text="33-123456"
|
42
|
-
/>
|
43
|
-
)
|
44
|
-
|
45
|
-
const kit = screen.getByTestId(testId)
|
46
|
-
const value = kit.querySelector(".pb_body_kit_light")
|
47
|
-
expect(value.textContent).toEqual("33-123456")
|
48
|
-
})
|
49
|
-
|
50
|
-
test("aligns content center", () => {
|
51
|
-
render(
|
52
|
-
<IconValue
|
53
|
-
align="center"
|
54
|
-
data={{ testid: testId }}
|
55
|
-
icon="clipboard"
|
56
|
-
text="33-123456"
|
57
|
-
/>
|
58
|
-
)
|
59
|
-
|
60
|
-
const kit = screen.getByTestId(testId)
|
61
|
-
expect(kit).toHaveClass("pb_icon_value_kit_center")
|
62
|
-
})
|
63
|
-
|
64
|
-
test("aligns content right", () => {
|
65
|
-
render(
|
66
|
-
<IconValue
|
67
|
-
align="right"
|
68
|
-
data={{ testid: testId }}
|
69
|
-
icon="clipboard"
|
70
|
-
text="33-123456"
|
71
|
-
/>
|
72
|
-
)
|
73
|
-
|
74
|
-
const kit = screen.getByTestId(testId)
|
75
|
-
expect(kit).toHaveClass("pb_icon_value_kit_right")
|
76
|
-
})
|
77
|
-
})
|
@@ -1,123 +0,0 @@
|
|
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;
|
@@ -1,109 +0,0 @@
|
|
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
|
-
})
|