playbook_ui 12.1.0 → 12.2.0

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 (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +10 -10
  3. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -0
  4. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +66 -0
  5. data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +41 -0
  6. data/app/pb_kits/playbook/pb_stat_value/{_stat_value.jsx → _stat_value.tsx} +4 -6
  7. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_stat_value/stat_value.test.js +27 -0
  9. data/app/pb_kits/playbook/pb_time_stacked/{_time_stacked.jsx → _time_stacked.tsx} +3 -5
  10. data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_time_stacked/docs/index.js +1 -1
  12. data/app/pb_kits/playbook/pb_timestamp/{_timestamp.jsx → _timestamp.tsx} +5 -7
  13. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +36 -28
  19. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +1 -0
  20. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +14 -0
  21. data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
  22. data/lib/playbook/version.rb +2 -2
  23. metadata +8 -6
  24. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +0 -63
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 637dc98a1badc91927d22a80c40b7dab9ff223d0beef1585f2d588f34aea833d
4
- data.tar.gz: 1d95711beb58f0c37cf3dafc98f6c8c38cbd59e6a390290f2574fa612fbcc14e
3
+ metadata.gz: 74b102cf8c343860ef1b90352dabf96dfa1fee84c9e4912a287e6fe6a32dcabe
4
+ data.tar.gz: d25cb119dd297fe0512df07650aa237cf5be8eb80f2e79d32480da547c599b2c
5
5
  SHA512:
6
- metadata.gz: 449796d0443af564166cd7fea3d5b3ec3354553c7263aaf00def68b6bbd809aac65b3dc680034faa04564f79d692c3c11618f78a88fe07fa6dbe79c6c56822a3
7
- data.tar.gz: 17c5ef327dec5cd35db9d780af9bc4af5b7a7eb6ec8f474ecce9a726e2b8c89f8bf379c4b07e32b9a776abcf630529faf7fb6d37d558cdde5dadf5c75309adbc
6
+ metadata.gz: a58a8f1cce99f05841d01f1a3fc64dcfb40121ffea77b1bead4c1cb6b83c2f6edd89a61a62df302452ea0defac80c070484d26fa05024ed36a35139152c56c84
7
+ data.tar.gz: 17e5d846daf75ea0ba6bb333e2a464910dd18435ed7414c69a60dd07ff9845a9404a1d3b2dd9aa1c46ba49a8d67d9295813272b9b0cb789bbc8cae4cef65c6f1
data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx CHANGED
@@ -13,7 +13,7 @@ import classnames from "classnames";
13
13
  type BarGraphProps = {
14
14
  align?: "left" | "right" | "center";
15
15
  axisTitle: string;
16
- dark?: Boolean;
16
+ dark?: boolean;
17
17
  xAxisCategories: [];
18
18
  yAxisMin: number;
19
19
  yAxisMax: number;
@@ -62,7 +62,7 @@ const BarGraph = ({
62
62
  x = 0,
63
63
  y = 0,
64
64
  ...props
65
- }: BarGraphProps) => {
65
+ }: BarGraphProps): React.ReactElement => {
66
66
  const ariaProps = buildAriaProps(aria);
67
67
  const dataProps = buildDataProps(data);
68
68
  const setupTheme = () => {
@@ -130,14 +130,14 @@ const BarGraph = ({
130
130
 
131
131
  return (
132
132
  <HighchartsReact
133
- containerProps={{
134
- className: classnames(globalProps(props), className),
135
- id: id,
136
- ...ariaProps,
137
- ...dataProps,
138
- }}
139
- highcharts={Highcharts}
140
- options={options}
133
+ containerProps={{
134
+ className: classnames(globalProps(props), className),
135
+ id: id,
136
+ ...ariaProps,
137
+ ...dataProps,
138
+ }}
139
+ highcharts={Highcharts}
140
+ options={options}
141
141
  />
142
142
  );
143
143
  };
data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts CHANGED
@@ -136,6 +136,8 @@ const highchartsDarkTheme: ThemeProps = {
136
136
 
137
137
  plotOptions: {
138
138
  series: {
139
+ borderColor: colors.bg_dark_card,
140
+ borderWidth: 2,
139
141
  type: 'area',
140
142
  nullColor: colors.text_dk_lighter,
141
143
  fillColor: {
data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx ADDED
@@ -0,0 +1,66 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+
4
+ import { buildCss } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Body from '../pb_body/_body'
8
+ import Icon from '../pb_icon/_icon'
9
+
10
+ const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
11
+ increase: 'positive',
12
+ decrease: 'negative',
13
+ neutral: 'neutral',
14
+ }
15
+
16
+ const iconMap = {
17
+ increase: 'arrow-up',
18
+ decrease: 'arrow-down',
19
+ }
20
+
21
+ type StatChangeProps = {
22
+ change?: 'increase' | 'decrease' | 'neutral',
23
+ className?: string,
24
+ icon?: string,
25
+ id?: string,
26
+ value?: string | number,
27
+ }
28
+
29
+ const StatChange = (props: StatChangeProps): React.ReactElement => {
30
+ const { change = 'neutral', className, icon, id, value } = props
31
+ const status = statusMap[change as keyof typeof statusMap]
32
+ let returnedIcon = iconMap[change as keyof typeof iconMap]
33
+ if (icon) {
34
+ returnedIcon = icon
35
+ }
36
+
37
+ return (
38
+ <>
39
+ {value &&
40
+ <div
41
+ className={classnames(
42
+ buildCss('pb_stat_change_kit', status),
43
+ globalProps(props),
44
+ className
45
+ )}
46
+ id={id}
47
+ >
48
+ <Body status={status}>
49
+ {returnedIcon &&
50
+ <>
51
+ <Icon
52
+ fixed_width
53
+ icon={returnedIcon}
54
+ />
55
+ {' '}
56
+ </>
57
+ }
58
+ {`${value}%`}
59
+ </Body>
60
+ </div>
61
+ }
62
+ </>
63
+ )
64
+ }
65
+
66
+ export default StatChange
data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js ADDED
@@ -0,0 +1,41 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import StatChange from './_stat_change'
5
+
6
+ test('it renders each status', () => {
7
+ render(
8
+ <StatChange
9
+ change="increase"
10
+ value="28.4"
11
+ />
12
+ )
13
+
14
+ const kit = screen.getByText('28.4%')
15
+ expect(kit).toHaveClass(`pb_body_kit_positive`)
16
+ })
17
+
18
+ test('it renders preset icon', () => {
19
+ render(
20
+ <StatChange
21
+ change="increase"
22
+ value="28.4"
23
+ />
24
+ )
25
+
26
+ const kit = screen.getByLabelText('arrow-up icon')
27
+ expect(kit).toBeTruthy
28
+ })
29
+
30
+ test('it renders custom icon', () => {
31
+ render(
32
+ <StatChange
33
+ icon="chart-line-down"
34
+ value={6.1}
35
+ />
36
+
37
+ )
38
+
39
+ const kit = screen.getByLabelText('chart-line-down icon')
40
+ expect(kit).toBeTruthy
41
+ })
data/app/pb_kits/playbook/pb_stat_value/{_stat_value.jsx → _stat_value.tsx} RENAMED
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -10,10 +8,10 @@ type StatValueProps = {
10
8
  className?: string,
11
9
  id?: string,
12
10
  unit?: string,
13
- value: string | number
11
+ value: string | number,
14
12
  }
15
13
 
16
- const StatValue = (props: StatValueProps) => {
14
+ const StatValue = (props: StatValueProps): React.ReactElement => {
17
15
  const {
18
16
  className,
19
17
  id,
@@ -21,7 +19,7 @@ const StatValue = (props: StatValueProps) => {
21
19
  value = 0,
22
20
  } = props
23
21
 
24
- const displayValue = function(value) {
22
+ const displayValue = function(value: string | number) {
25
23
  if (value || value === 0) {
26
24
  return (
27
25
  <Title
@@ -33,7 +31,7 @@ const StatValue = (props: StatValueProps) => {
33
31
  }
34
32
  }
35
33
 
36
- const displayUnit = function(unit) {
34
+ const displayUnit = function(unit: string) {
37
35
  if (unit) {
38
36
  return (
39
37
  <Title
data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import StatValue from '../_stat_value.jsx'
2
+ import StatValue from '../_stat_value'
3
3
 
4
4
  const StatValueUnit = (props) => {
5
5
  return (
data/app/pb_kits/playbook/pb_stat_value/stat_value.test.js ADDED
@@ -0,0 +1,27 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import StatValue from './_stat_value'
5
+
6
+ test('it renders the component with the value', () => {
7
+ render(
8
+ <StatValue
9
+ value={1048}
10
+ />
11
+ )
12
+
13
+ const kit = screen.getByText('1048')
14
+ expect(kit).toBeTruthy()
15
+ })
16
+
17
+ test('it renders the component with the unit', () => {
18
+ render(
19
+ <StatValue
20
+ unit="appt"
21
+ value="5,294"
22
+ />
23
+ )
24
+
25
+ const kit = screen.getByText('appt')
26
+ expect(kit).toBeTruthy()
27
+ })
data/app/pb_kits/playbook/pb_time_stacked/{_time_stacked.jsx → _time_stacked.tsx} RENAMED
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -12,16 +10,16 @@ import Caption from '../pb_caption/_caption'
12
10
 
13
11
  type TimeStackedProps = {
14
12
  align?: 'left' | 'center' | 'right',
15
- className?: string | array<string>,
13
+ className?: string | string[],
16
14
  dark?: boolean,
17
- data?: object,
15
+ data?: { [key: string]: string },
18
16
  date?: string,
19
17
  id?: string,
20
18
  time: number | Date,
21
19
  timeZone?: string,
22
20
  }
23
21
 
24
- const TimeStackedDefault = (props: TimeStackedProps) => {
22
+ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
25
23
  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
26
24
 
27
25
  const {
data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import TimeStacked from '../_time_stacked.jsx'
2
+ import TimeStacked from '../_time_stacked'
3
3
 
4
4
  const TimeStackedDefault = (props) => {
5
5
  return (
data/app/pb_kits/playbook/pb_time_stacked/docs/index.js CHANGED
@@ -1 +1 @@
1
- export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
1
+ export { default as TimeStackedDefault } from './_time_stacked_default'
data/app/pb_kits/playbook/pb_timestamp/{_timestamp.jsx → _timestamp.tsx} RENAMED
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -11,8 +9,8 @@ import Caption from '../pb_caption/_caption'
11
9
 
12
10
  type TimestampProps = {
13
11
  align?: "left" | "center" | "right",
14
- aria?: object,
15
- className?: string | array<string>,
12
+ aria?: { [key: string]: string },
13
+ className?: string | string[],
16
14
  dark?: boolean,
17
15
  data?: string,
18
16
  text: string,
@@ -26,7 +24,7 @@ type TimestampProps = {
26
24
  variant?: "default" | "elapsed" | "updated"
27
25
  }
28
26
 
29
- const Timestamp = (props: TimestampProps) => {
27
+ const Timestamp = (props: TimestampProps): React.ReactElement => {
30
28
  const {
31
29
  align = 'left',
32
30
  aria = {},
@@ -90,9 +88,9 @@ const Timestamp = (props: TimestampProps) => {
90
88
  const captionText = () => {
91
89
  switch (variant) {
92
90
  case 'updated':
93
- return formatUpdatedString(userDisplay, dateTimestamp)
91
+ return formatUpdatedString()
94
92
  case 'elapsed':
95
- return formatElapsedString(userDisplay, timeDisplay, updatedText)
93
+ return formatElapsedString()
96
94
  default:
97
95
  return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
98
96
  }
data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
2
+ import Timestamp from '../_timestamp'
3
3
 
4
4
  const todaysDate = new Date()
5
5
  const futureYear = new Date().getFullYear() + 4
data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
2
+ import Timestamp from '../_timestamp'
3
3
 
4
4
  const todaysDate = new Date()
5
5
  const futureYear = new Date().getFullYear() + 4
data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
2
+ import Timestamp from '../_timestamp'
3
3
 
4
4
  const todaysDate = new Date()
5
5
  const year = new Date().getFullYear()
data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
2
+ import Timestamp from '../_timestamp'
3
3
 
4
4
  const todaysDate = new Date()
5
5
  const futureYear = new Date().getFullYear() + 4
data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
2
+ import Timestamp from '../_timestamp'
3
3
 
4
4
  const todaysDate = new Date()
5
5
 
data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx CHANGED
@@ -17,6 +17,7 @@ import Flex from "../pb_flex/_flex"
17
17
 
18
18
  type TooltipProps = {
19
19
  aria?: { [key: string]: string },
20
+ className?: string | string[],
20
21
  data?: { [key: string]: string },
21
22
  text: string,
22
23
  icon?: string,
@@ -26,9 +27,10 @@ type TooltipProps = {
26
27
  zIndex?: Pick<GlobalProps, "ZIndex">,
27
28
  } & GlobalProps
28
29
 
29
- const Tooltip = (props: TooltipProps) => {
30
+ const Tooltip = (props: TooltipProps): React.ReactElement => {
30
31
  const {
31
32
  aria = {},
33
+ className,
32
34
  children,
33
35
  data = {},
34
36
  icon = null,
@@ -42,7 +44,10 @@ const Tooltip = (props: TooltipProps) => {
42
44
  const dataProps: { [key: string]: any } = buildDataProps(data)
43
45
  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
44
46
 
45
- const css = classnames(globalProps({...rest}))
47
+ const css = classnames(
48
+ globalProps({...rest}),
49
+ className
50
+ )
46
51
  const [open, setOpen] = useState(false)
47
52
  const arrowRef = useRef(null)
48
53
  const {
@@ -92,44 +97,47 @@ const Tooltip = (props: TooltipProps) => {
92
97
  return (
93
98
  <>
94
99
  <div
95
- ref={reference}
96
- className={`pb_tooltip_kit ${css}`}
97
- style={{ display: "inline-flex" }}
98
- role="tooltip_trigger"
99
- {...ariaProps}
100
- {...dataProps}
100
+ className={`pb_tooltip_kit ${css}`}
101
+ ref={reference}
102
+ role="tooltip_trigger"
103
+ style={{ display: "inline-flex" }}
104
+ {...ariaProps}
105
+ {...dataProps}
101
106
  >
102
107
  {children}
103
108
  </div>
104
109
  {open && (
105
110
  <div
106
- {...getFloatingProps({
107
- role: "tooltip",
108
- ref: floating,
109
- className: `tooltip_tooltip ${placement} visible`,
110
- style: {
111
- position: strategy,
112
- top: y ?? 0,
113
- left: x ?? 0,
114
- zIndex: zIndex ?? 0,
115
- },
116
- })}
111
+ {...getFloatingProps({
112
+ role: "tooltip",
113
+ ref: floating,
114
+ className: `tooltip_tooltip ${placement} visible`,
115
+ style: {
116
+ position: strategy,
117
+ top: y ?? 0,
118
+ left: x ?? 0,
119
+ zIndex: zIndex ?? 0,
120
+ },
121
+ })}
117
122
  >
118
- <Flex gap="xs" align="center">
123
+ <Flex
124
+ align="center"
125
+ gap="xs"
126
+ >
119
127
  {icon && (
120
128
  <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
121
129
  )}
122
130
  {text}
123
131
  </Flex>
124
132
  <div
125
- ref={arrowRef}
126
- className="arrow_bg"
127
- style={{
128
- position: strategy,
129
- left: arrowX != null ? `${arrowX}px` : "",
130
- top: arrowY != null ? `${arrowY}px` : "",
131
- [staticSide]: "-5px",
132
- }}
133
+ className="arrow_bg"
134
+ ref={arrowRef}
135
+ style={{
136
+ position: strategy,
137
+ left: arrowX != null ? `${arrowX}px` : "",
138
+ top: arrowY != null ? `${arrowY}px` : "",
139
+ [staticSide]: "-5px",
140
+ }}
133
141
  />
134
142
  </div>
135
143
  )}
data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx CHANGED
@@ -14,6 +14,7 @@ const TooltipDefaultReact = (props) => {
14
14
  >
15
15
  <FlexItem>
16
16
  <Tooltip
17
+ className={"customClassNameHere"}
17
18
  placement='top'
18
19
  text="Whoa. I'm a Tooltip"
19
20
  zIndex={10}
data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx CHANGED
@@ -51,3 +51,17 @@ test("closes on mouseleave", async () => {
51
51
  cleanup();
52
52
  })
53
53
  });
54
+
55
+ test("closes on mouseleave", async () => {
56
+ render(
57
+ <Tooltip
58
+ className={"Hello World"}
59
+ data={{ testid: "className-test" }}
60
+ />
61
+ );
62
+
63
+ const kit = screen.getByTestId("className-test");
64
+ expect(kit).toHaveClass("Hello World");
65
+
66
+ cleanup();
67
+ });
data/app/pb_kits/playbook/tokens/_colors.scss CHANGED
@@ -59,9 +59,11 @@ $main_colors: (
59
59
  Background colors ------------------*/
60
60
  $bg_light: $silver !default;
61
61
  $bg_dark: #0a0527 !default;
62
+ $bg_dark_card: #231E3D;
62
63
  $background_colors: (
63
64
  bg_light: $bg_light,
64
- bg_dark: $bg_dark
65
+ bg_dark: $bg_dark,
66
+ bg_dark_card: $bg_dark_card
65
67
  );
66
68
 
67
69
  /* Card colors ------------------*/
data/lib/playbook/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.0.0"
5
- VERSION = "12.1.0"
4
+ PREVIOUS_VERSION = "12.1.0"
5
+ VERSION = "12.2.0"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.1.0
4
+ version: 12.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-02-02 00:00:00.000000000 Z
12
+ date: 2023-02-07 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1812,8 +1812,8 @@ files:
1812
1812
  - app/pb_kits/playbook/pb_star_rating/docs/index.js
1813
1813
  - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
1814
1814
  - app/pb_kits/playbook/pb_star_rating/star_rating.rb
1815
- - app/pb_kits/playbook/pb_stat_change/_stat_change.jsx
1816
1815
  - app/pb_kits/playbook/pb_stat_change/_stat_change.scss
1816
+ - app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
1817
1817
  - app/pb_kits/playbook/pb_stat_change/docs/_description.md
1818
1818
  - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb
1819
1819
  - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx
@@ -1826,8 +1826,9 @@ files:
1826
1826
  - app/pb_kits/playbook/pb_stat_change/docs/index.js
1827
1827
  - app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
1828
1828
  - app/pb_kits/playbook/pb_stat_change/stat_change.rb
1829
- - app/pb_kits/playbook/pb_stat_value/_stat_value.jsx
1829
+ - app/pb_kits/playbook/pb_stat_change/stat_change.test.js
1830
1830
  - app/pb_kits/playbook/pb_stat_value/_stat_value.scss
1831
+ - app/pb_kits/playbook/pb_stat_value/_stat_value.tsx
1831
1832
  - app/pb_kits/playbook/pb_stat_value/docs/_description.md
1832
1833
  - app/pb_kits/playbook/pb_stat_value/docs/_footer.md
1833
1834
  - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb
@@ -1841,6 +1842,7 @@ files:
1841
1842
  - app/pb_kits/playbook/pb_stat_value/docs/index.js
1842
1843
  - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
1843
1844
  - app/pb_kits/playbook/pb_stat_value/stat_value.rb
1845
+ - app/pb_kits/playbook/pb_stat_value/stat_value.test.js
1844
1846
  - app/pb_kits/playbook/pb_table/_table.jsx
1845
1847
  - app/pb_kits/playbook/pb_table/_table.scss
1846
1848
  - app/pb_kits/playbook/pb_table/_table_row.jsx
@@ -1998,8 +2000,8 @@ files:
1998
2000
  - app/pb_kits/playbook/pb_time_range_inline/docs/index.js
1999
2001
  - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb
2000
2002
  - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb
2001
- - app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
2002
2003
  - app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
2004
+ - app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
2003
2005
  - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
2004
2006
  - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx
2005
2007
  - app/pb_kits/playbook/pb_time_stacked/docs/example.yml
@@ -2025,8 +2027,8 @@ files:
2025
2027
  - app/pb_kits/playbook/pb_timeline/timeline.html.erb
2026
2028
  - app/pb_kits/playbook/pb_timeline/timeline.rb
2027
2029
  - app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss
2028
- - app/pb_kits/playbook/pb_timestamp/_timestamp.jsx
2029
2030
  - app/pb_kits/playbook/pb_timestamp/_timestamp.scss
2031
+ - app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
2030
2032
  - app/pb_kits/playbook/pb_timestamp/docs/_description.md
2031
2033
  - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
2032
2034
  - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx DELETED
@@ -1,63 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
-
6
- import { buildCss } from '../utilities/props'
7
- import { globalProps } from '../utilities/globalProps'
8
-
9
- import Body from '../pb_body/_body'
10
- import Icon from '../pb_icon/_icon'
11
-
12
- const statusMap = {
13
- increase: 'positive',
14
- decrease: 'negative',
15
- }
16
-
17
- const iconMap = {
18
- increase: 'arrow-up',
19
- decrease: 'arrow-down',
20
- }
21
-
22
- type StatChangeProps = {
23
- change?: "increase" | "decrease" | "neutral",
24
- className?: string,
25
- icon?: string,
26
- id?: string,
27
- value?: string | number,
28
- }
29
-
30
- const StatChange = (props: StatChangeProps) => {
31
- const { change = 'neutral', className, icon, id, value } = props
32
- const status = statusMap[change] || 'neutral'
33
- let returnedIcon = iconMap[change]
34
- if (icon) {
35
- returnedIcon = icon
36
- }
37
-
38
- return (
39
- <If condition={value}>
40
- <div
41
- className={classnames(
42
- buildCss('pb_stat_change_kit', status),
43
- globalProps(props),
44
- className
45
- )}
46
- id={id}
47
- >
48
- <Body status={status}>
49
- <If condition={returnedIcon}>
50
- <Icon
51
- fixed_width
52
- icon={returnedIcon}
53
- />
54
- {' '}
55
- </If>
56
- {`${value}%`}
57
- </Body>
58
- </div>
59
- </If>
60
- )
61
- }
62
-
63
- export default StatChange