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.
Files changed (55) 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_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
  18. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  19. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  20. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  21. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  22. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  23. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  24. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  25. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  26. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  28. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  29. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  30. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
  31. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
  32. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
  33. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
  34. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
  35. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
  36. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  38. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  40. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  41. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  42. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  43. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  44. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  45. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  46. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  47. data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
  48. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  49. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  50. data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
  51. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  52. data/lib/playbook/version.rb +2 -2
  53. metadata +22 -6
  54. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
  55. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -0,0 +1,101 @@
1
+ import React from "react";
2
+ import {
3
+ Title,
4
+ Card,
5
+ Gauge,
6
+ Flex,
7
+ FlexItem,
8
+ SectionSeparator,
9
+ Body,
10
+ Caption,
11
+ } from "../..";
12
+
13
+ const data = [{ name: "Name", value: 10 }];
14
+
15
+ const GaugeComplex = (props) => (
16
+ <Flex
17
+ gap="sm"
18
+ padding="xl"
19
+ wrap
20
+ >
21
+ <FlexItem
22
+ flex={1}
23
+ grow
24
+ >
25
+ <Card
26
+ maxWidth="xs"
27
+ padding="md"
28
+ >
29
+ <Title
30
+ paddingBottom="sm"
31
+ size={4}
32
+ text="Abandoned Calls"
33
+ />
34
+ <Flex align="stretch">
35
+ <Flex
36
+ marginRight="sm"
37
+ orientation="column"
38
+ >
39
+ <Body
40
+ color="light"
41
+ paddingBottom="sm"
42
+ text="Total Abandoned"
43
+ />
44
+ <Flex
45
+ align="baseline"
46
+ paddingBottom="xs"
47
+ >
48
+ <Title
49
+ size={1}
50
+ text="39"
51
+ />
52
+ <Title
53
+ color="light"
54
+ size={3}
55
+ text="calls"
56
+ />
57
+ </Flex>
58
+ <Caption
59
+ size="xs"
60
+ text="of 390"
61
+ />
62
+ </Flex>
63
+
64
+ <SectionSeparator
65
+ alignSelf="stretch"
66
+ marginRight="sm"
67
+ orientation="vertical"
68
+ />
69
+
70
+ <Flex
71
+ orientation="column"
72
+ wrap
73
+ >
74
+ <Body
75
+ color="light"
76
+ text="% Abandoned"
77
+ />
78
+ <Flex wrap>
79
+ <FlexItem
80
+ fixedSize="150px"
81
+ overflow="hidden"
82
+ shrink
83
+ >
84
+ <Gauge
85
+ chartData={data}
86
+ disableAnimation
87
+ height="100%"
88
+ id="gauge-complex"
89
+ suffix="%"
90
+ {...props}
91
+ />
92
+ </FlexItem>
93
+ </Flex>
94
+ </Flex>
95
+ </Flex>
96
+ </Card>
97
+ </FlexItem>
98
+ </Flex>
99
+ );
100
+
101
+ export default GaugeComplex;
@@ -0,0 +1 @@
1
+ We are able to wrap our Gauge kits within multiple other Flex and Card components.
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: {wrap: true}) do %>
1
+ <%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
2
2
  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
3
3
  <%= pb_rails("gauge", props: {
4
4
  id: "gauge-sizing4",
@@ -20,6 +20,7 @@
20
20
  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
21
21
  <%= pb_rails("gauge", props: {
22
22
  id: "gauge-sizing1",
23
+ height: '100%',
23
24
  chart_data: [{ name: "Point 4", value: 25 }],
24
25
  }) %>
25
26
  <% end %>
@@ -4,6 +4,7 @@ import { Flex, FlexItem, Gauge } from '../../'
4
4
  const GaugeSizing = (props) => (
5
5
  <div>
6
6
  <Flex
7
+ align="center"
7
8
  wrap
8
9
  {...props}
9
10
  >
@@ -51,6 +52,7 @@ const GaugeSizing = (props) => (
51
52
  >
52
53
  <Gauge
53
54
  chartData={[ { name: 'Point 4', value: 25 } ]}
55
+ height="100%"
54
56
  id="gauge-sizing1"
55
57
  {...props}
56
58
  />
@@ -10,6 +10,7 @@ examples:
10
10
  - gauge_sizing: Sizing
11
11
  - gauge_height: Height
12
12
  - gauge_colors: Color Overrides
13
+ - gauge_complex: Complex
13
14
 
14
15
 
15
16
  react:
@@ -23,3 +24,4 @@ examples:
23
24
  - gauge_height: Height
24
25
  - gauge_live_data: Live Data
25
26
  - gauge_colors: Color Overrides
27
+ - gauge_complex: Complex
@@ -8,3 +8,4 @@ export { default as GaugeTitle } from './_gauge_title.jsx'
8
8
  export { default as GaugeUnits } from './_gauge_units.jsx'
9
9
  export { default as GaugeLiveData } from './_gauge_live_data.jsx'
10
10
  export { default as GaugeColors } from './_gauge_colors.jsx'
11
+ export { default as GaugeComplex } from './_gauge_complex.jsx'
@@ -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
+ })