playbook_ui 11.4.0 → 11.5.0.pre.alpha.fontawesome

Sign up to get free protection for your applications and to get access to all the features.
Files changed (129) 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/button.test.js +6 -8
  9. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
  11. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
  14. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
  15. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_date/_date.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
  19. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +9 -0
  22. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  30. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
  31. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
  32. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
  33. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  35. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  36. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
  40. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
  41. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  42. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  43. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  44. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  45. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  46. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  47. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  48. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  49. data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
  50. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  51. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  52. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  53. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  54. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  55. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  56. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  57. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  58. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  59. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  60. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  61. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  62. data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
  63. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
  64. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  65. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  66. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  67. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  68. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  69. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  70. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  71. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  72. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  73. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  74. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  75. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  76. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  77. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  78. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  79. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  80. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  81. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  82. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  83. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  84. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  85. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  86. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  87. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  88. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  89. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  90. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  91. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  92. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  93. data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
  94. data/app/pb_kits/playbook/pb_layout/layout.test.js +97 -0
  95. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
  96. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  97. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  98. data/app/pb_kits/playbook/pb_time/_time.tsx +2 -2
  99. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
  100. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
  101. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
  102. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
  103. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
  104. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
  105. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
  106. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  107. data/app/pb_kits/playbook/tokens/_typography.scss +8 -8
  108. data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
  109. data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
  110. data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
  111. data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
  112. data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
  113. data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
  114. data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
  115. data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
  116. data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
  117. data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
  118. data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
  119. data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
  120. data/app/pb_kits/playbook/utilities/props.ts +1 -1
  121. data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
  122. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  123. data/fonts/fontawesome-min.js +3 -2
  124. data/fonts/regular-min.js +3 -2
  125. data/lib/playbook/version.rb +2 -2
  126. metadata +57 -26
  127. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +0 -155
  128. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -124
  129. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -3,6 +3,8 @@
3
3
  module Playbook
4
4
  module PbHashtag
5
5
  class Hashtag < Playbook::KitBase
6
+ prop :new_window, type: Playbook::Props::Boolean,
7
+ default: false
6
8
  prop :text
7
9
  prop :type, type: Playbook::Props::Enum,
8
10
  values: %w[default project home appointment],
@@ -17,6 +19,10 @@ module Playbook
17
19
  type_text + text
18
20
  end
19
21
 
22
+ def link_option
23
+ new_window ? "_blank" : "_self"
24
+ end
25
+
20
26
  private
21
27
 
22
28
  def type_text
@@ -0,0 +1,54 @@
1
+
2
+ import React from 'react'
3
+ import { render, screen, cleanup } from "../utilities/test-utils";
4
+
5
+ import { Hashtag } from "..";
6
+
7
+
8
+ const testId = "primary-test"
9
+ const text="Open in a new window"
10
+ const type="project"
11
+ const url="https://google.com"
12
+ const typeMap = {
13
+ home: 'H#',
14
+ project: 'P#',
15
+ appointment: 'A#',
16
+ default: '#',
17
+ }
18
+
19
+ function HashtagTest(props) {
20
+ return (
21
+ <Hashtag
22
+ data={{ testid: testId }}
23
+ text={text}
24
+ type={type}
25
+ url={url}
26
+ {...props}
27
+ />
28
+ );
29
+ }
30
+
31
+ test("renders the component", () => {
32
+ render(<HashtagTest/>);
33
+ const kit = screen.getByTestId("primary-test");
34
+ expect(kit).toBeInTheDocument();
35
+ expect(kit).toHaveClass("pb_hashtag_kit");
36
+
37
+ cleanup()
38
+ });
39
+
40
+ test("should pass in url property and allow links to open in a new window", () => {
41
+ const { container } = render(<HashtagTest newWindow />);
42
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href", url);
43
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("target", "_blank");
44
+
45
+ cleanup()
46
+ });
47
+
48
+ test("renders the badge kit with appropriate text", () => {
49
+ const { container } = render(<HashtagTest />);
50
+ expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toBeInTheDocument;
51
+ expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toHaveTextContent(typeMap[type] + text);
52
+
53
+ cleanup()
54
+ });
@@ -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
@@ -32,7 +32,8 @@
32
32
  url: object.home_url || "#",
33
33
  type: "home",
34
34
  dark: object.dark,
35
- classname: "home-hashtag"}) %>
35
+ classname: "home-hashtag",
36
+ new_window: object.new_window}) %>
36
37
  <% end %>
37
38
 
38
39
  <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
@@ -8,6 +8,8 @@ module Playbook
8
8
  prop :city_state
9
9
  prop :home_id, type: Playbook::Props::Number
10
10
  prop :home_url
11
+ prop :new_window, type: Playbook::Props::Boolean,
12
+ default: false
11
13
  prop :territory
12
14
  prop :zip
13
15
  prop :dark, type: Playbook::Props::Boolean, default: false
@@ -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,12 @@
1
+ <%= pb_rails("home_address_street", props: {
2
+ address: "70 Prospect Ave",
3
+ address_cont: "Apt M18",
4
+ city: "West Chester",
5
+ home_id: 8250263,
6
+ home_url: "https://powerhrg.com/",
7
+ house_style: "Colonial",
8
+ new_window: true,
9
+ state: "PA",
10
+ zipcode: "19382",
11
+ territory: "PHL",
12
+ }) %>
@@ -0,0 +1,23 @@
1
+ import React from 'react'
2
+
3
+ import HomeAddressStreet from '../_home_address_street'
4
+
5
+ const HomeAddressStreetLink= (props) => {
6
+ return (
7
+ <HomeAddressStreet
8
+ address="70 Prospect Ave"
9
+ addressCont="Apt M18"
10
+ city="West Chester"
11
+ homeId={8250263}
12
+ homeUrl="https://powerhrg.com/"
13
+ houseStyle="Colonial"
14
+ newWindow
15
+ state="PA"
16
+ territory="PHL"
17
+ zipcode="19382"
18
+ {...props}
19
+ />
20
+ )
21
+ }
22
+
23
+ export default HomeAddressStreetLink
@@ -0,0 +1 @@
1
+ Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior)
@@ -4,8 +4,11 @@ examples:
4
4
  - home_address_street_default: Default
5
5
  - home_address_street_emphasis: Emphasis
6
6
  - home_address_street_modified: Modified
7
+ - home_address_street_link: Link
7
8
 
8
9
  react:
9
10
  - home_address_street_default: Default
10
11
  - home_address_street_emphasis: Emphasis
11
12
  - home_address_street_modified: Modified
13
+ - home_address_street_link: Link
14
+
@@ -1,3 +1,4 @@
1
1
  export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
2
2
  export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
3
3
  export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
4
+ export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
@@ -12,6 +12,8 @@ module Playbook
12
12
  prop :home_id, type: Playbook::Props::Number
13
13
  prop :home_url
14
14
  prop :house_style
15
+ prop :new_window, type: Playbook::Props::Boolean,
16
+ default: false
15
17
  prop :state
16
18
  prop :zipcode
17
19
  prop :territory
@@ -53,6 +55,7 @@ module Playbook
53
55
  dark: dark,
54
56
  home_id: home_id,
55
57
  home_url: home_url,
58
+ new_window: new_window,
56
59
  territory: territory,
57
60
  zip: zip,
58
61
  }
@@ -66,6 +69,7 @@ module Playbook
66
69
  dark: dark,
67
70
  home_id: home_id,
68
71
  home_url: home_url,
72
+ new_window: new_window,
69
73
  territory: territory,
70
74
  }
71
75
  end
@@ -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
+ });
@@ -22,7 +22,8 @@
22
22
  url: object.home_url || "#",
23
23
  type: "home",
24
24
  dark: object.dark,
25
- classname: "home-hashtag"}) %>
25
+ classname: "home-hashtag",
26
+ new_window: object.new_window}) %>
26
27
  <% end %>
27
28
 
28
29
  <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
@@ -8,8 +8,11 @@ module Playbook
8
8
  prop :city_state_zip
9
9
  prop :home_id, type: Playbook::Props::Number
10
10
  prop :home_url
11
+ prop :new_window, type: Playbook::Props::Boolean,
12
+ default: false
11
13
  prop :territory
12
- prop :dark, type: Playbook::Props::Boolean, default: false
14
+ prop :dark, type: Playbook::Props::Boolean,
15
+ default: false
13
16
  end
14
17
  end
15
18
  end
@@ -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