[Play-528] Typescript Conversion Stat Change (#2293)

* converted stat change to typescript * added jest tests * removed @flow from top of file
powerhome · Feb 7, 2023 · 302c643 · 302c643
1 parent 556468c
commit 302c643
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 63 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx b/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx
diff --git a/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx b/playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildCss } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
+}
+
+const iconMap = {
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
+}
+
+type StatChangeProps = {
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  id?: string,
+  value?: string | number,
+}
+
+const StatChange = (props: StatChangeProps): React.ReactElement => {
+  const { change = 'neutral', className, icon, id, value } = props
+  const status = statusMap[change as keyof typeof statusMap]
+  let returnedIcon = iconMap[change as keyof typeof iconMap]
+  if (icon) {
+    returnedIcon = icon
+  }
+
+  return (
+    <>
+      {value &&
+        <div
+            className={classnames(
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
+            id={id}
+        >
+          <Body status={status}>
+            {returnedIcon &&
+              <>
+                <Icon
+                    fixed_width
+                    icon={returnedIcon}
+                />
+                {' '}
+              </>
+            }
+            {`${value}%`}
+          </Body>
+        </div>
+      }
+    </>
+  )
+}
+
+export default StatChange
diff --git a/playbook/app/pb_kits/playbook/pb_stat_change/stat_change.test.js b/playbook/app/pb_kits/playbook/pb_stat_change/stat_change.test.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import StatChange from './_stat_change'
+
+test('it renders each status', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+
+    const kit = screen.getByText('28.4%')
+    expect(kit).toHaveClass(`pb_body_kit_positive`)
+})
+
+test('it renders preset icon', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+
+    const kit = screen.getByLabelText('arrow-up icon')
+    expect(kit).toBeTruthy
+})
+
+test('it renders custom icon', () => {
+    render(
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+      />
+
+    )
+
+    const kit = screen.getByLabelText('chart-line-down icon')
+    expect(kit).toBeTruthy
+})