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.
Files changed (48) 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_filter/Filter/FilterDouble.jsx +0 -2
  13. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +0 -2
  14. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +0 -1
  16. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -2
  17. data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
  18. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  19. data/app/pb_kits/playbook/pb_filter/filter.rb +0 -3
  20. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +127 -0
  21. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  23. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.tsx → _icon_stat_value.jsx} +4 -2
  24. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.tsx → _icon_value.jsx} +4 -2
  25. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +155 -0
  26. data/app/pb_kits/playbook/pb_layout/layout.test.js +2 -1
  27. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  28. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -0
  29. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  30. data/fonts/fontawesome-min.js +2 -3
  31. data/fonts/regular-min.js +2 -3
  32. data/lib/playbook/version.rb +1 -1
  33. metadata +7 -20
  34. data/app/pb_kits/playbook/pb_badge/badge.test.js +0 -80
  35. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +0 -1
  36. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +0 -2
  37. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +0 -23
  38. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +0 -1
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +0 -34
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +0 -66
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +0 -4
  42. data/app/pb_kits/playbook/pb_filter/filter.test.js +0 -76
  43. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +0 -129
  44. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +0 -60
  45. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +0 -154
  46. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +0 -77
  47. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +0 -123
  48. 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
- })