Textfield typescript story (#760)

* ♻️ Renamed story * Updated textfield * Fixed Textfield * Moved props desctructering to function line
equinor · Nov 13, 2020 · 103ac33 · 103ac33
1 parent edccf64
commit 103ac33
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 215 deletions.
diff --git a/...ybook-react/stories/TextField.stories.jsx → ...ybook-react/stories/TextField.stories.tsx b/...ybook-react/stories/TextField.stories.jsx → ...ybook-react/stories/TextField.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs'
-import { TextField } from '@equinor/eds-core-react'
+import { TextField, TextFieldProps } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
 
 import styled from 'styled-components'
 
@@ -45,9 +45,13 @@ const ICONS = {
 export default {
   title: 'Components/TextField',
   component: TextField,
-}
+} as Meta
+
+export const Default: Story<TextFieldProps> = (args) => (
+  <TextField {...args}></TextField>
+)
 
-export const types = () => (
+export const types: Story<TextFieldProps> = () => (
   <Wrapper>
     <TextField
       id="textfield-normal"
@@ -91,7 +95,7 @@ export const types = () => (
   </Wrapper>
 )
 
-export const Other = () => (
+export const Other: Story<TextFieldProps> = () => (
   <Wrapper>
     <TextField
       id="storybook-multiline"
@@ -112,7 +116,7 @@ export const Other = () => (
   </Wrapper>
 )
 
-export const variants = () => (
+export const variants: Story<TextFieldProps> = () => (
   <Wrapper>
     <TextField
       id="storybook-error"
@@ -143,30 +147,3 @@ export const variants = () => (
     />
   </Wrapper>
 )
-
-export const knobs = () => (
-  <Wrapper>
-    <TextField
-      id="storybook-knobs"
-      variant={select(
-        'Variant',
-        ['error', 'warning', 'success', 'default'],
-        'default',
-      )}
-      type={select(
-        'Type',
-        ['text', 'search', 'password', 'email', 'number'],
-        'text',
-      )}
-      label={text('Label', 'label')}
-      meta={text('Meta', 'meta')}
-      placeholder={text('Placeholder', 'placeholder')}
-      helperText={text('Helper text', 'Helper text')}
-      multiline={boolean('Multine', false)}
-      disabled={boolean('Disabled', false)}
-    ></TextField>
-  </Wrapper>
-)
-
-knobs.storyName = 'With knobs'
-knobs.decorators = [withKnobs]
diff --git a/libraries/core-react/src/TextField/HelperText/HelperText.tsx b/libraries/core-react/src/TextField/HelperText/HelperText.tsx
@@ -61,7 +61,7 @@ const StyledIcon = styled(Icon)<StyledProps>`
   margin-right: ${({ spacings }) => spacings.left};
 `
 
-type Props = {
+type TextfieldHelperTextProps = {
   /** Helper text */
   helperText?: string
   /** Icon */
@@ -72,42 +72,40 @@ type Props = {
   variant: Variants
 }
 
-const HelperText = React.forwardRef<HTMLDivElement, Props>(
-  function TextFieldHelperText(props, ref) {
-    const {
-      helperText,
-      icon,
-      variant = 'default',
-      disabled: isDisabled,
-    } = props
-    const helperVariant = tokens[variant]
-    const spacings = tokens.spacings.comfortable
-
-    const { isFocused } = useTextField()
-
-    const iconProps = {
-      spacings,
-      isDisabled,
-      color: helperVariant.color,
-      disabledColor: helperVariant.disabledColor,
-      focusColor: helperVariant.focusColor,
-    }
-
-    return (
-      <Container ref={ref} {...props} spacings={spacings}>
-        {icon && <StyledIcon {...iconProps}>{icon}</StyledIcon>}
-        <Text
-          variant={helperVariant}
-          isFocused={isFocused}
-          isDisabled={isDisabled}
-        >
-          {helperText}
-        </Text>
-      </Container>
-    )
-  },
-)
+const TextfieldHelperText = React.forwardRef<
+  HTMLDivElement,
+  TextfieldHelperTextProps
+>(function TextfieldHelperText(
+  { helperText, icon, variant = 'default', disabled: isDisabled, ...rest },
+  ref,
+) {
+  const helperVariant = tokens[variant]
+  const spacings = tokens.spacings.comfortable
+
+  const { isFocused } = useTextField()
+
+  const iconProps = {
+    spacings,
+    isDisabled,
+    color: helperVariant.color,
+    disabledColor: helperVariant.disabledColor,
+    focusColor: helperVariant.focusColor,
+  }
+
+  return (
+    <Container ref={ref} {...rest} spacings={spacings}>
+      {icon && <StyledIcon {...iconProps}>{icon}</StyledIcon>}
+      <Text
+        variant={helperVariant}
+        isFocused={isFocused}
+        isDisabled={isDisabled}
+      >
+        {helperText}
+      </Text>
+    </Container>
+  )
+})
 
 // HelperText.displayName = 'eds-text-field-helperText'
 
-export { HelperText }
+export { TextfieldHelperText as HelperText }
diff --git a/libraries/core-react/src/TextField/Icon/Icon.tsx b/libraries/core-react/src/TextField/Icon/Icon.tsx
@@ -38,7 +38,7 @@ const StyledIcon = styled.div`
   ${Variation}
 `
 
-type Props = {
+type TextfieldIconProps = {
   /** Disabled color */
   disabledColor: string
   /** Focus color */
@@ -49,20 +49,18 @@ type Props = {
   isDisabled?: boolean
 }
 
-const Icon = React.forwardRef<HTMLDivElement, Props>(function TextFieldIcon(
-  props,
-  ref,
-) {
-  const { children, ...other } = props
-  const { isFocused } = useTextField()
+const InputIcon = React.forwardRef<HTMLDivElement, TextfieldIconProps>(
+  function InputIcon({ children, ...other }, ref) {
+    const { isFocused } = useTextField()
 
-  return (
-    <StyledIcon ref={ref} isFocused={isFocused} {...other}>
-      {children}
-    </StyledIcon>
-  )
-})
+    return (
+      <StyledIcon ref={ref} isFocused={isFocused} {...other}>
+        {children}
+      </StyledIcon>
+    )
+  },
+)
 
 // Icon.displayName = 'eds-text-field-icon'
 
-export { Icon }
+export { InputIcon as Icon }
diff --git a/libraries/core-react/src/TextField/Input/Input.tsx b/libraries/core-react/src/TextField/Input/Input.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, ElementType } from 'react'
+import React, { ReactNode, ElementType, InputHTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { InputVariantProps, input as tokens } from './Input.tokens'
 import { typographyTemplate, spacingsTemplate } from '../../_common/templates'
@@ -77,7 +77,7 @@ const StyledIcon = styled(Icon)<StyledIconProps>`
   bottom: ${({ spacings }) => spacings.bottom};
 `
 
-type Props = {
+type TextfieldInputProps = {
   /** Specifies if text should be bold */
   multiline?: boolean
   /** Placeholder */
@@ -92,63 +92,67 @@ type Props = {
   type?: string
   /** Read Only */
   readonly?: boolean
-}
-
-const Input = React.forwardRef<HTMLInputElement, Props>(function TextFieldInput(
-  props,
-  ref,
-) {
-  const {
-    multiline = false,
-    variant = 'default',
-    inputIcon,
-    disabled = false,
-    type = 'text',
-    ...other
-  } = props
-
-  const { handleFocus, handleBlur } = useTextField()
-
-  const as: ElementType = multiline ? 'textarea' : 'input'
-  const inputVariant = tokens[variant]
-  let spacings = tokens.spacings.comfortable
-
-  if (inputIcon) {
-    spacings = {
-      ...spacings,
-      input: {
-        ...spacings.input,
-        right: '32px',
-      },
+} & InputHTMLAttributes<HTMLInputElement>
+
+const TextFieldInput = React.forwardRef<HTMLInputElement, TextfieldInputProps>(
+  function TextFieldInput(
+    {
+      multiline = false,
+      variant = 'default',
+      inputIcon,
+      disabled = false,
+      type = 'text',
+      ...other
+    },
+    ref,
+  ) {
+    const { handleFocus, handleBlur } = useTextField()
+
+    const as: ElementType = multiline ? 'textarea' : 'input'
+    const inputVariant = tokens[variant]
+    let spacings = tokens.spacings.comfortable
+
+    if (inputIcon) {
+      spacings = {
+        ...spacings,
+        input: {
+          ...spacings.input,
+          right: '32px',
+        },
+      }
     }
-  }
 
-  const iconProps = {
-    spacings: spacings.icon,
-    isDisabled: disabled,
-    color: inputVariant.icon.color,
-    disabledColor: inputVariant.icon.disabledColor,
-    focusColor: inputVariant.focus.icon.color,
-  }
+    const iconProps = {
+      spacings: spacings.icon,
+      isDisabled: disabled,
+      color: inputVariant.icon.color,
+      disabledColor: inputVariant.icon.disabledColor,
+      focusColor: inputVariant.focus.icon.color,
+    }
 
-  const inputProps = {
-    as,
-    ref,
-    type,
-    disabled,
-    variant: inputVariant,
-    spacings: spacings.input,
-    ...other,
-  }
+    const inputProps = {
+      as,
+      ref,
+      type,
+      disabled,
+      variant: inputVariant,
+      spacings: spacings.input,
+      ...other,
+    }
 
-  return (
-    <Container>
-      <StyledInput onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
-      {inputIcon && <StyledIcon {...iconProps}>{inputIcon}</StyledIcon>}
-    </Container>
-  )
-})
+    return (
+      <Container>
+        <StyledInput
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          {...inputProps}
+        />
+        {inputIcon && <StyledIcon {...iconProps}>{inputIcon}</StyledIcon>}
+      </Container>
+    )
+  },
+)
 
 // Input.displayName = 'eds-text-field-input'
 
-export { Input }
+export { TextFieldInput as Input }
diff --git a/libraries/core-react/src/TextField/Label/Label.tsx b/libraries/core-react/src/TextField/Label/Label.tsx
@@ -18,26 +18,25 @@ const Text = styled.p`
   margin: 0;
 `
 
-type Props = {
+type TextfieldProps = {
   label: string
   meta: string
   inputId: string
 }
 
-const Label = React.forwardRef<HTMLLabelElement, Props>(function TextFieldLabel(
-  props,
-  ref,
-) {
-  const { label = '', meta = '', inputId } = props
+const TextFieldLabel = React.forwardRef<HTMLLabelElement, TextfieldProps>(
+  function TextFieldLabel(props, ref) {
+    const { label = '', meta = '', inputId } = props
 
-  return (
-    <LabelBase ref={ref} htmlFor={inputId}>
-      <Text>{label}</Text>
-      <Text>{meta}</Text>
-    </LabelBase>
-  )
-})
+    return (
+      <LabelBase ref={ref} htmlFor={inputId}>
+        <Text>{label}</Text>
+        <Text>{meta}</Text>
+      </LabelBase>
+    )
+  },
+)
 
 // Label.displayName = 'eds-text-field-label'
 
-export { Label }
+export { TextFieldLabel as Label }