From 042ce3622e5a5ae97cf04f9330d2356fb675e584 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 2 Feb 2021 12:17:12 -0800
Subject: [PATCH] =?UTF-8?q?CounterLabel.js=20=E2=86=92=20CounterLabel.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{CounterLabel.js => CounterLabel.tsx}       | 17 ++++++++++++-----
 .../{CounterLabel.js => CounterLabel.tsx}       |  0
 ...unterLabel.js.snap => CounterLabel.tsx.snap} |  0
 3 files changed, 12 insertions(+), 5 deletions(-)
 rename src/{CounterLabel.js => CounterLabel.tsx} (67%)
 rename src/__tests__/{CounterLabel.js => CounterLabel.tsx} (100%)
 rename src/__tests__/__snapshots__/{CounterLabel.js.snap => CounterLabel.tsx.snap} (100%)

diff --git a/src/CounterLabel.js b/src/CounterLabel.tsx
similarity index 67%
rename from src/CounterLabel.js
rename to src/CounterLabel.tsx
index 29c7377a78b..d424e512a57 100644
--- a/src/CounterLabel.js
+++ b/src/CounterLabel.tsx
@@ -1,10 +1,16 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, get} from './constants'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
 import theme from './theme'
-import sx from './sx'
+import {ComponentProps} from './utils/types'
 
-const colorStyles = ({scheme, ...props}) => {
+type StyledCounterLabelProps = {
+  scheme?: 'gray' | 'gray-light'
+} & SystemCommonProps &
+  SxProp
+
+const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     color:
       scheme === 'gray-light'
@@ -15,7 +21,7 @@ const colorStyles = ({scheme, ...props}) => {
   }
 }
 
-const bgStyles = ({scheme, ...props}) => {
+const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     backgroundColor:
       scheme === 'gray-light'
@@ -26,7 +32,7 @@ const bgStyles = ({scheme, ...props}) => {
   }
 }
 
-const CounterLabel = styled.span`
+const CounterLabel = styled.span<StyledCounterLabelProps>`
   display: inline-block;
   padding: 2px 5px;
   font-size: ${get('fontSizes.0')};
@@ -56,4 +62,5 @@ CounterLabel.propTypes = {
   ...sx.propTypes
 }
 
+export type CounterLabelProps = ComponentProps<typeof CounterLabel>
 export default CounterLabel
diff --git a/src/__tests__/CounterLabel.js b/src/__tests__/CounterLabel.tsx
similarity index 100%
rename from src/__tests__/CounterLabel.js
rename to src/__tests__/CounterLabel.tsx
diff --git a/src/__tests__/__snapshots__/CounterLabel.js.snap b/src/__tests__/__snapshots__/CounterLabel.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/CounterLabel.js.snap
rename to src/__tests__/__snapshots__/CounterLabel.tsx.snap