Typescript Selection Controls (Switch, Checkbox, Radio) (#679)

* Updated switch to typescript * Tweaks to switch typings * Radio Typescript * Tweaked Radio * Checkbox typescript
equinor · Nov 13, 2020 · 3df82b1 · 3df82b1
1 parent 9ec1cfd
commit 3df82b1
Show file tree

Hide file tree

Showing 14 changed files with 148 additions and 154 deletions.
diff --git a/...ectionControls/Checkbox/Checkbox.test.jsx → ...ectionControls/Checkbox/Checkbox.test.tsx b/...ectionControls/Checkbox/Checkbox.test.jsx → ...ectionControls/Checkbox/Checkbox.test.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-undef */
 
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import { render, cleanup, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
@@ -16,7 +15,11 @@ const StyledCheckbox = styled(Checkbox)`
   clip-path: unset;
 `
 
-const ControlledCheckbox = ({ onChange }) => {
+type ControlledProps = {
+  onChange: () => void
+}
+
+const ControlledCheckbox = ({ onChange }: ControlledProps) => {
   const [checked, setChecked] = useState(true)
   return (
     <Checkbox
@@ -29,9 +32,6 @@ const ControlledCheckbox = ({ onChange }) => {
     />
   )
 }
-ControlledCheckbox.propTypes = {
-  onChange: PropTypes.func.isRequired,
-}
 
 describe('Checkbox', () => {
   it('Can extend the css for the component', () => {

diff --git a/...ctionControls/Checkbox/Checkbox.tokens.js → ...ctionControls/Checkbox/Checkbox.tokens.ts b/...ctionControls/Checkbox/Checkbox.tokens.js → ...ctionControls/Checkbox/Checkbox.tokens.ts
diff --git a/...c/SelectionControls/Checkbox/Checkbox.jsx → ...c/SelectionControls/Checkbox/Checkbox.tsx b/...c/SelectionControls/Checkbox/Checkbox.jsx → ...c/SelectionControls/Checkbox/Checkbox.tsx
@@ -1,29 +1,37 @@
 /* eslint camelcase: "off" */
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
   checkbox,
   checkbox_outline, // eslint-disable-line camelcase
   checkbox_indeterminate, // eslint-disable-line camelcase
 } from '@equinor/eds-icons'
+import type { IconData } from '@equinor/eds-icons'
+
 import { checkbox as tokens } from './Checkbox.tokens'
 import { typographyTemplate } from '../../_common/templates'
 
 const { color, enabled } = tokens
 
-const StyledCheckbox = styled.label`
+type StyledCheckboxProps = {
+  disabled: boolean
+}
+
+const StyledCheckbox = styled.label<StyledCheckboxProps>`
   display: inline-flex;
   align-items: center;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 `
+type StyledIconPathProps = {
+  icon: IconData
+  name: string
+}
 
-const StyledPath = styled.path.attrs(({ icon }) => ({
+const StyledPath = styled.path.attrs<StyledIconPathProps>(({ icon }) => ({
   fillRule: 'evenodd',
   clipRule: 'evenodd',
   d: icon.svgPathData,
-}))``
+}))<StyledIconPathProps>``
 
 const Input = styled.input.attrs(({ type = 'checkbox' }) => ({
   type,
@@ -65,7 +73,9 @@ const Svg = styled.svg.attrs(({ height, width, fill }) => ({
   fill,
 }))``
 
-const InputWrapper = styled.span`
+type StyledInputWrapperProps = { disabled: boolean }
+
+const InputWrapper = styled.span<StyledInputWrapperProps>`
   display: inline-flex;
   border-radius: 50%;
   padding: ${enabled.padding};
@@ -79,7 +89,18 @@ const LabelText = styled.span`
   ${typographyTemplate(enabled.typography)}
 `
 
-export const Checkbox = forwardRef((props, ref) => {
+type Props = {
+  /** Label for the checkbox */
+  label: string
+  /** If true, the checkbox will be disabled */
+  disabled?: boolean
+  /** If true, the checkbox appears indeterminate. Important! You'll have to
+   * set the native element to indeterminate yourself.
+   */
+  indeterminate?: boolean
+} & Omit<JSX.IntrinsicElements['input'], 'disabled'>
+
+export const Checkbox = forwardRef<HTMLInputElement, Props>((props, ref) => {
   const { label, disabled, indeterminate, className, ...rest } = props
 
   const iconSize = 24
@@ -100,7 +121,7 @@ export const Checkbox = forwardRef((props, ref) => {
             fill={disabled ? color.disabled : color.primary}
             aria-hidden
           >
-            <StyledPath icon={checkbox_indeterminate} />
+            <StyledPath icon={checkbox_indeterminate} name="indeterminate" />
           </Svg>
         ) : (
           <Svg
@@ -121,22 +142,3 @@ export const Checkbox = forwardRef((props, ref) => {
 })
 
 Checkbox.displayName = 'eds-checkbox'
-
-Checkbox.propTypes = {
-  /** Label for the checkbox */
-  label: PropTypes.string.isRequired,
-  /** If true, the checkbox will be disabled */
-  disabled: PropTypes.bool,
-  /** If true, the checkbox appears indeterminate. Important! You'll have to
-   * set the native element to indeterminate yourself.
-   */
-  indeterminate: PropTypes.bool,
-  /** Additional class names */
-  className: PropTypes.string,
-}
-
-Checkbox.defaultProps = {
-  disabled: false,
-  indeterminate: false,
-  className: undefined,
-}
diff --git a/...rc/SelectionControls/Radio/Radio.test.jsx → ...rc/SelectionControls/Radio/Radio.test.tsx b/...rc/SelectionControls/Radio/Radio.test.jsx → ...rc/SelectionControls/Radio/Radio.test.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable no-undef */
-
 import React from 'react'
 import { render, cleanup, fireEvent, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

diff --git a/...c/SelectionControls/Radio/Radio.tokens.js → ...c/SelectionControls/Radio/Radio.tokens.ts b/...c/SelectionControls/Radio/Radio.tokens.js → ...c/SelectionControls/Radio/Radio.tokens.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

diff --git a/...act/src/SelectionControls/Radio/Radio.jsx → ...act/src/SelectionControls/Radio/Radio.tsx b/...act/src/SelectionControls/Radio/Radio.jsx → ...act/src/SelectionControls/Radio/Radio.tsx
@@ -1,12 +1,11 @@
 /* eslint camelcase: "off" */
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
   radio_button_selected, // eslint-disable-line camelcase
   radio_button_unselected, // eslint-disable-line camelcase
 } from '@equinor/eds-icons'
+import type { IconData } from '@equinor/eds-icons'
 import { radio as tokens } from './Radio.tokens'
 import { typographyTemplate } from '../../_common/templates'
 
@@ -46,18 +45,24 @@ const Input = styled.input.attrs(({ type = 'radio' }) => ({
     display: inline;
   }
 `
+type StyledRadioProps = Pick<Props, 'disabled'>
 
-const StyledRadio = styled.label`
+const StyledRadio = styled.label<StyledRadioProps>`
   display: inline-flex;
   align-items: center;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 `
 
-const StyledPath = styled.path.attrs(({ icon }) => ({
+type StyledIconPathProps = {
+  icon: IconData
+  name: string
+}
+
+const StyledPath = styled.path.attrs<StyledIconPathProps>(({ icon }) => ({
   fillRule: 'evenodd',
   clipRule: 'evenodd',
   d: icon.svgPathData,
-}))``
+}))<StyledIconPathProps>``
 
 const Svg = styled.svg.attrs(({ height, width, fill }) => ({
   name: null,
@@ -71,7 +76,9 @@ const LabelText = styled.span`
   ${typographyTemplate(enabled.typography)}
 `
 
-const InputWrapper = styled.span`
+type StyledInputWrapperProps = { disabled: boolean }
+
+const InputWrapper = styled.span<StyledInputWrapperProps>`
   display: inline-flex;
   border-radius: 50%;
   padding: ${enabled.padding};
@@ -80,8 +87,14 @@ const InputWrapper = styled.span`
       disabled ? 'transparent' : color.hover};
   }
 `
+type Props = {
+  /** Label for the radio */
+  label: string
+  /** If true, the radio button will be disabled */
+  disabled?: boolean
+} & JSX.IntrinsicElements['input']
 
-export const Radio = forwardRef(
+export const Radio = forwardRef<HTMLInputElement, Props>(
   ({ label, disabled = false, className, ...rest }, ref) => {
     const iconSize = 24
     return (
@@ -106,17 +119,3 @@ export const Radio = forwardRef(
 )
 
 Radio.displayName = 'eds-radio'
-
-Radio.propTypes = {
-  /** Label for the radio */
-  label: PropTypes.string.isRequired,
-  /** If true, the radio button will be disabled */
-  disabled: PropTypes.bool,
-  /** Additional class names */
-  className: PropTypes.string,
-}
-
-Radio.defaultProps = {
-  disabled: false,
-  className: undefined,
-}
diff --git a/...ct/src/SelectionControls/Switch/Input.jsx → ...ct/src/SelectionControls/Switch/Input.tsx b/...ct/src/SelectionControls/Switch/Input.jsx → ...ct/src/SelectionControls/Switch/Input.tsx
@@ -1,14 +1,15 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { switchControl as tokens } from './Switch.tokens'
+import type { Size } from './Switch.types'
 
 const { enabled, disabled: _disabled } = tokens
 
+type StyledProps = Pick<Props, 'disabled'>
+
 const BaseInput = styled.input.attrs(({ type = 'checkbox' }) => ({
   type,
-}))`
+}))<StyledProps>`
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -59,28 +60,23 @@ const DefaultInput = styled(BaseInput)`
   }
 `
 
-export const Input = forwardRef(({ disabled, size, ...rest }, ref) => {
-  return (
-    <>
-      {size === 'small' ? (
-        <SmallInput {...rest} ref={ref} disabled={disabled} />
-      ) : (
-        <DefaultInput {...rest} ref={ref} disabled={disabled} />
-      )}
-    </>
-  )
-})
-
-Input.displayName = 'eds-switch-input'
+type Props = {
+  size?: Size
+  disabled?: boolean
+} & React.HTMLAttributes<HTMLInputElement>
 
-Input.propTypes = {
-  // If true, the component will be disabled
-  disabled: PropTypes.bool,
-  // Switch size, use the small version with caution
-  size: PropTypes.oneOf(['default', 'small']),
-}
+export const Input = forwardRef<HTMLInputElement, Props>(
+  ({ size = 'default', ...rest }, ref) => {
+    return (
+      <>
+        {size === 'small' ? (
+          <SmallInput {...rest} ref={ref} />
+        ) : (
+          <DefaultInput {...rest} ref={ref} />
+        )}
+      </>
+    )
+  },
+)
 
-Input.defaultProps = {
-  disabled: false,
-  size: 'default',
-}
+Input.displayName = 'eds-switch-input'
diff --git a/...SelectionControls/Switch/InputWrapper.jsx → ...SelectionControls/Switch/InputWrapper.tsx b/...SelectionControls/Switch/InputWrapper.jsx → ...SelectionControls/Switch/InputWrapper.tsx
@@ -1,12 +1,14 @@
-// @ts-nocheck
-import React from 'react'
+import React, { ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { switchControl as tokens } from './Switch.tokens'
+import type { Size } from './Switch.types'
 
 const { enabled, disabled: _disabled } = tokens
 
-const BaseInputWrapper = styled.span`
+type StyledProps = Pick<Props, 'isDisabled'>
+
+const BaseInputWrapper = styled.span<StyledProps>`
   width: ${enabled.clickSize};
   height: ${enabled.clickSize};
   border-radius: 50%;
@@ -29,8 +31,17 @@ const InputWrapperSmall = styled(BaseInputWrapper)`
       isDisabled ? 'transparent' : enabled.hover.background};
   }
 `
+type Props = {
+  children: ReactNode
+  isDisabled?: boolean
+  size?: Size
+}
 
-export const InputWrapper = ({ children, isDisabled, size }) => {
+export const InputWrapper = ({
+  children,
+  isDisabled,
+  size = 'default',
+}: Props): JSX.Element => {
   return (
     <>
       {size === 'small' ? (

diff --git a/.../SelectionControls/Switch/Switch.test.jsx → .../SelectionControls/Switch/Switch.test.tsx b/.../SelectionControls/Switch/Switch.test.jsx → .../SelectionControls/Switch/Switch.test.tsx
diff --git a/...SelectionControls/Switch/Switch.tokens.js → ...SelectionControls/Switch/Switch.tokens.ts b/...SelectionControls/Switch/Switch.tokens.js → ...SelectionControls/Switch/Switch.tokens.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {