Define prop types for icon & buttons (#818)

- Add types for Icon and components using Icon - Adding types for IconButton required types for Button, so did that and CloseButton Co-authored-by: Brianna Mansell <[email protected]>
priceline · May 29, 2020 · aede4ea · aede4ea
1 parent 6a8f8f2
commit aede4ea
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 14 deletions.
diff --git a/packages/types/types/index.d.ts b/packages/types/types/index.d.ts
@@ -26,6 +26,7 @@ import {
   TopProps,
   WidthProps,
   ZIndexProps,
+  SizeProps,
 } from 'styled-system'
 
 /**
@@ -62,6 +63,17 @@ export interface BoxProps
     SpaceProps,
     TextAlignProps {}
 
+export interface ButtonProps
+  extends ColorProps,
+  SpaceProps,
+  WidthProps {
+    disabled?: boolean,
+    dsRef?: RefPropType
+    onClick?: React.MouseEventHandler<HTMLElement>
+    size?: 'small' | 'medium' | 'large' | number
+    variation?: 'fill' | 'outline' | 'link'
+}
+
 export interface FlexProps
   extends BoxProps,
     SpaceProps,
@@ -82,6 +94,21 @@ export interface HideProps extends BoxProps {
   print?: boolean
 }
 
+export interface IconProps
+  extends ColorProps,
+  SizeProps {
+  name?: string
+  title?: string
+  titleId?: string
+  desc?: string
+  descId?: string
+}
+
+export interface IconButtonProps extends ButtonProps {
+  icon?: React.ComponentElement<IconProps, any>
+  dsRef?: RefPropType
+}
+
 export interface CardProps
   extends BoxProps,
     BorderRadiusProps,
@@ -91,6 +118,13 @@ export interface CardProps
   borderWidth?: 0 | 1 | 2
 }
 
+export interface CloseButtonProps
+  extends IconButtonProps,
+  ButtonProps {
+  size?: number
+  title?: string
+}
+
 export interface ImageProps extends WidthProps {
   height?: string
   alt?: string
@@ -164,10 +198,10 @@ export class Box extends React.Component<BoxProps, any> {}
 export class Breadcrumbs extends React.Component<any, any> {
   static Link
 }
-export class Button extends React.Component<any, any> {}
+export class Button extends React.Component<ButtonProps, any> {}
 export class Card extends React.Component<CardProps, any> {}
 export class Checkbox extends React.Component<any, any> {}
-export class CloseButton extends React.Component<any, any> {}
+export class CloseButton extends React.Component<CloseButtonProps, any> {}
 export class Container extends React.Component<any, any> {}
 export class Divider extends React.Component<any, any> {}
 export class Flag extends React.Component<any, any> {}
@@ -183,9 +217,9 @@ export class Heading extends React.Component<TextProps, any> {
 }
 export class Hide extends React.Component<HideProps, any> {}
 export class Hug extends React.Component<any, any> {}
-export class Icon extends React.Component<any, any> {}
-export class IconButton extends React.Component<any, any> {}
-export class IconField extends React.Component<any, any> {}
+export class Icon extends React.Component<IconProps, any> {}
+export class IconButton extends React.Component<IconButtonProps, any> {}
+export class IconField extends React.Component<FlexProps, any> {}
 export class Image extends React.Component<ImageProps, any> {}
 export class Input extends React.Component<any, any> {
   static isField: boolean

diff --git a/packages/types/types/test.tsx b/packages/types/types/test.tsx
@@ -4,7 +4,9 @@ import {
   BlockLink,
   borders,
   Box,
+  Button,
   Card,
+  CloseButton,
   color,
   createTheme,
   deprecatedPropType,
@@ -15,7 +17,11 @@ import {
   hasPaletteColor,
   Heading,
   Hide,
+  Icon,
+  IconButton,
+  IconField,
   Image,
+  Input,
   Link,
   PlaceholderImage,
   SrOnly,
@@ -61,35 +67,82 @@ const myThemeProvider = (
   <ThemeProvider theme={theme} customBreakpoints={['100px', '500px']} />
 )
 
-const myBox = <Box width={'1'} bg={'primary'} /> // $ExpectType Element
-const myCard = <Card width={'1'} bg={'primary'} borderRadius={'md'} /> // $ExpectType Element
+const myBox = <Box width='1' bg='primary' /> // $ExpectType Element
+const myCard = <Card width='1' bg='primary' borderRadius='md' /> // $ExpectType Element
 const myText = <Text regular /> // $ExpectType Element
 const mySpan = <Text.span regular /> // $ExpectType Element
 const myAbsolute = <Absolute bottom={1} top={1} left={1} right={1} /> // $ExpectType Element
 const myFlex = <Flex flexDirection={['row', null, 'column']} m={3} /> // $ExpectType Element
 const myHide = <Hide xs sm md lg xl xxl m={3} /> // $ExpectType Element
 // $ExpectType Element
 const myLink = (
-  <Link color={'secondary'} variation={'outline'} dsRef={{ current: 'bla' }} />
+  <Link color='secondary' variation='outline' dsRef={{ current: 'bla' }} />
 )
 // $ExpectType Element
 const myBlockLink = (
   <BlockLink
-    color={'secondary'}
-    variation={'outline'}
+    color='secondary'
+    variation='outline'
     dsRef={() => 'ima ref'}
   />
 )
+// $ExpectType Element
+const myButton = (
+  <Button
+    variation='fill'
+    size='medium'
+    color='primary'
+    disabled={false}
+    width={1}
+  >
+    BUTTON
+  </Button>
+)
+// $ExpectType Element
+const myCloseButton = (
+  <CloseButton
+    color='background.darkest'
+    onClick={() => 'ima function'}
+    title='Title'
+  />
+)
+// $ExpectType Element
+const myIcon = (
+  <Icon
+    name='Email'
+    size={48}
+    color='primary'
+    title='Email'
+    titleId='Title ID'
+    desc='Description'
+    descId='Description ID'
+  />
+)
+// $ExpectType Element
+const myIconButton = (
+  <IconButton
+    dsRef={() => 'ima ref'}
+    icon={<Icon name='Calendar' title='Choose date' />}
+    onClick={() => 'ima function'}
+  />
+)
+// $ExpectType Element
+const myIconField = (
+  <IconField flexWrap='wrap' flexDirection={['row', null, 'column']} m={3}>
+    <Icon color='blue' />
+    <Input placeholder='Choose Date' />
+  </IconField>
+)
 
-const myHeading = <Heading color={'secondary'} /> // $ExpectType Element
+const myHeading = <Heading color='secondary' /> // $ExpectType Element
 const myH1 = <Heading.h1 caps /> // $ExpectType Element
-const myH2 = <Heading.h2 fontSize={'300px'} /> // $ExpectType Element
+const myH2 = <Heading.h2 fontSize='300px' /> // $ExpectType Element
 const myH3 = <Heading.h3 m={4} /> // $ExpectType Element
 const myH4 = <Heading.h4 p={[2, 2, 4]} /> // $ExpectType Element
-const myH5 = <Heading.h5 lineHeight={'12px'} /> // $ExpectType Element
+const myH5 = <Heading.h5 lineHeight='12px' /> // $ExpectType Element
 const myH6 = <Heading.h6 /> // $ExpectType Element
 
-const myTruncate = <Truncate color={'primary'} /> // $ExpectType Element
+const myTruncate = <Truncate color='primary' /> // $ExpectType Element
 const mySrOnly = <SrOnly class='test-class-stuff' /> // $ExpectType Element
 // $ExpectType Element
 const myImage = (