CounterLabel.js → CounterLabel.tsx

primer · Feb 2, 2021 · 042ce36 · 042ce36
1 parent 62f0925
commit 042ce36
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/CounterLabel.js → src/CounterLabel.tsx b/src/CounterLabel.js → 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 → src/__tests__/CounterLabel.tsx b/src/__tests__/CounterLabel.js → src/__tests__/CounterLabel.tsx
diff --git a/...ests__/__snapshots__/CounterLabel.js.snap → ...sts__/__snapshots__/CounterLabel.tsx.snap b/...ests__/__snapshots__/CounterLabel.js.snap → ...sts__/__snapshots__/CounterLabel.tsx.snap