[Play-529] Typescript Conversion Stat Value

playbook/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx → playbook/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -10,18 +8,18 @@ type StatValueProps = {
   className?: string,
   id?: string,
   unit?: string,
-  value: string | number
+  value: string | number,
 }
 
-const StatValue = (props: StatValueProps) => {
+const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
     className,
     id,
     unit,
     value = 0,
   } = props
 
-  const displayValue = function(value) {
+  const displayValue = function(value: string | number) {
     if (value || value === 0) {
       return (
         <Title
@@ -33,7 +31,7 @@ const StatValue = (props: StatValueProps) => {
     }
   }
 
-  const displayUnit = function(unit) {
+  const displayUnit = function(unit: string) {
     if (unit) {
       return (
         <Title

playbook/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatValue from '../_stat_value.jsx'
+import StatValue from '../_stat_value'
 
 const StatValueUnit = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_stat_value/stat_value.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import StatValue from './_stat_value'
+
+test('it renders the component with the value', () => {
+  render(
+    <StatValue
+        value={1048}
+    />
+  )
+
+  const kit = screen.getByText('1048')
+  expect(kit).toBeTruthy()
+})
+
+test('it renders the component with the unit', () => {
+  render(
+    <StatValue
+        unit="appt"
+        value="5,294"
+    />
+  )
+
+  const kit = screen.getByText('appt')
+  expect(kit).toBeTruthy()
+})