playbook_ui 11.5.0.pre.alpha.pre.rubocop → 11.6.0.pre.alpha.fontawesome

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +0 -13
  3. data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
  4. data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
  6. data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
  7. data/app/pb_kits/playbook/pb_button/button.rb +3 -0
  8. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
  10. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
  14. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  15. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  17. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  18. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  19. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  20. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  21. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  22. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  23. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  24. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  25. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  27. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  28. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  29. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  30. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  32. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  33. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  34. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  35. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  36. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  37. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  38. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  39. data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
  40. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  41. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  42. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  43. data/fonts/fontawesome-min.js +3 -2
  44. data/fonts/regular-min.js +3 -2
  45. data/lib/playbook/version.rb +2 -2
  46. metadata +20 -7
  47. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
  48. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -0,0 +1,129 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+
4
+ import { joinPresent, titleize } from '../utilities/text'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Body from '../pb_body/_body'
8
+ import Hashtag from '../pb_hashtag/_hashtag'
9
+ import Title from '../pb_title/_title'
10
+ import { buildAriaProps, buildDataProps } from '../utilities/props'
11
+
12
+ type HomeAddressStreetProps = {
13
+ aria?: { [key: string]: string },
14
+ address: string,
15
+ addressCont: string,
16
+ city: string,
17
+ className?: string,
18
+ data?: { [key: string]: string },
19
+ dark?: boolean,
20
+ emphasis: "street" | "city",
21
+ homeId: string,
22
+ houseStyle: string,
23
+ homeUrl: string,
24
+ newWindow: boolean,
25
+ state: string,
26
+ zipcode: string,
27
+ territory: string,
28
+ }
29
+
30
+ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
31
+ const {
32
+ address,
33
+ addressCont,
34
+ aria = {},
35
+ city,
36
+ className,
37
+ data = {},
38
+ dark = false,
39
+ emphasis = 'street',
40
+ homeId,
41
+ homeUrl,
42
+ newWindow,
43
+ houseStyle,
44
+ state,
45
+ zipcode,
46
+ territory,
47
+ } = props
48
+
49
+ const classes = (className: string, dark: boolean) =>
50
+ classnames(
51
+ {
52
+ 'pb_home_address_street': !dark,
53
+ 'pb_home_address_street_dark': dark,
54
+ },
55
+ globalProps(props),
56
+ className
57
+ )
58
+
59
+ const dataProps: { [key: string]: any } = buildDataProps(data)
60
+ const ariaProps: { [key: string]: any } = buildAriaProps(aria)
61
+
62
+ return (
63
+ <div className={classes(className, dark)} {...ariaProps} {...dataProps}>
64
+ {emphasis == 'street' &&
65
+ <div>
66
+ <Title
67
+ className="pb_home_address_street_address"
68
+ dark={dark}
69
+ size={4}
70
+ >
71
+ {joinPresent([titleize(address), houseStyle], ' · ')}
72
+ </Title>
73
+ <Title
74
+ className="pb_home_address_street_address"
75
+ dark={dark}
76
+ size={4}
77
+ >
78
+ {titleize(addressCont)}
79
+ </Title>
80
+ <Body color="light">
81
+ {`${titleize(city)}, ${state} ${zipcode}`}
82
+ </Body>
83
+ </div>
84
+ }
85
+ {emphasis == 'city' &&
86
+ <div>
87
+ <Body color="light">
88
+ {joinPresent([titleize(address), houseStyle], ' · ')}
89
+ </Body>
90
+ <Body color="light">{titleize(addressCont)}</Body>
91
+ <div>
92
+ <Title
93
+ className="pb_home_address_street_address"
94
+ dark={dark}
95
+ size={4}
96
+ tag="span"
97
+ >
98
+ {`${titleize(city)}, ${state}`}
99
+ </Title>
100
+ <Body
101
+ color="light"
102
+ tag="span"
103
+ >
104
+ {` ${zipcode}`}
105
+ </Body>
106
+ </div>
107
+ </div>
108
+ }
109
+ {homeId &&
110
+ <Hashtag
111
+ classname="home-hashtag"
112
+ dark={dark}
113
+ newWindow={newWindow}
114
+ text={homeId}
115
+ type="home"
116
+ url={homeUrl || '#'}
117
+ />
118
+ }
119
+ <Body
120
+ color="light"
121
+ tag="span"
122
+ >
123
+ <small>{territory}</small>
124
+ </Body>
125
+ </div>
126
+ )
127
+ }
128
+
129
+ export default HomeAddressStreet
@@ -8,7 +8,7 @@ const HomeAddressStreetDefault = (props) => {
8
8
  address="70 Prospect Ave"
9
9
  addressCont="Apt M18"
10
10
  city="West Chester"
11
- homeId={8250263}
11
+ homeId="8250263"
12
12
  homeUrl="https://powerhrg.com/"
13
13
  houseStyle="Colonial"
14
14
  state="PA"
@@ -9,7 +9,7 @@ const HomeAddressStreetEmphasis = (props) => {
9
9
  address="70 Prospect Ave"
10
10
  addressCont="Apt M18"
11
11
  city="West Chester"
12
- homeId={8250263}
12
+ homeId="8250263"
13
13
  homeUrl="https://powerhrg.com/"
14
14
  houseStyle="Colonial"
15
15
  state="PA"
@@ -24,7 +24,7 @@ const HomeAddressStreetEmphasis = (props) => {
24
24
  addressCont="Apt M18"
25
25
  city="West Chester"
26
26
  emphasis="city"
27
- homeId={8250263}
27
+ homeId="8250263"
28
28
  homeUrl="https://powerhrg.com/"
29
29
  houseStyle="Colonial"
30
30
  state="PA"
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+ import { render, screen, cleanup } from "../utilities/test-utils";
3
+
4
+ import { HomeAddressStreet } from "..";
5
+
6
+
7
+ const testId = "primary-test"
8
+ const address = "70 Prospect Ave"
9
+ const city = "West Chester"
10
+ const homeId = "8250263"
11
+
12
+ function HomeAdressStreetTest(props) {
13
+ return (
14
+ <HomeAddressStreet
15
+ address={address}
16
+ addressCont="Apt M18"
17
+ city={city}
18
+ data={{ testid: testId }}
19
+ homeId={homeId}
20
+ homeUrl="https://powerhrg.com/"
21
+ houseStyle="Colonial"
22
+ state="PA"
23
+ territory="PHL"
24
+ zipcode="19382"
25
+ {...props}
26
+ />
27
+ );
28
+ }
29
+
30
+ test("renders the component", () => {
31
+ render(<HomeAdressStreetTest />);
32
+ const kit = screen.getByTestId("primary-test");
33
+ expect(kit).toBeInTheDocument();
34
+ expect(kit).toHaveClass("pb_home_address_street");
35
+
36
+ cleanup()
37
+ });
38
+
39
+ test("emphasize street by not setting a prop", () => {
40
+ const { container } = render(<HomeAdressStreetTest />);
41
+ expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(address);
42
+
43
+ cleanup()
44
+ });
45
+
46
+ test("emphasize city", () => {
47
+ const { container } = render(<HomeAdressStreetTest emphasis="city" />);
48
+ expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(city);
49
+
50
+ cleanup()
51
+ });
52
+
53
+ test("renders the hashtag kit", () => {
54
+ const { container } = render(<HomeAdressStreetTest />);
55
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0]).toBeInTheDocument;
56
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href");
57
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveTextContent(homeId);
58
+
59
+ cleanup()
60
+ });
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -13,7 +11,7 @@ import IconCircle from '../pb_icon_circle/_icon_circle'
13
11
  import Title from '../pb_title/_title'
14
12
 
15
13
  type IconStatValueProps = {
16
- aria?: object,
14
+ aria?: { [key: string]: string },
17
15
  className?: string,
18
16
  data?: object,
19
17
  icon: string,
@@ -53,7 +51,7 @@ const IconStatValue = (props: IconStatValueProps) => {
53
51
  buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
54
52
  className
55
53
  )
56
- const titleSize = function(size) {
54
+ const titleSize = function(size: "sm" | "md" | "lg") {
57
55
  if (size == 'lg') {
58
56
  return (
59
57
  <Title
@@ -0,0 +1,154 @@
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,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -11,12 +9,12 @@ import Icon from '../pb_icon/_icon'
11
9
 
12
10
  type IconValueProps = {
13
11
  align?: "left" | "center" | "right",
14
- aria?: object,
12
+ aria?: { [key: string]: string; },
15
13
  className?: string,
16
14
  dark?: boolean,
17
15
  data?: object,
18
16
  icon: string,
19
- id?: number,
17
+ id?: string,
20
18
  text: string,
21
19
  }
22
20
 
@@ -0,0 +1,77 @@
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
+ })
@@ -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;