Textfield typescript (#638)

* WIP

* Updated & working with typescript

* remove unwatend ts-no-check

* Fixed misplaced label

* cleaning code

* Improved helpertext color for better contrast

apps/storybook-react/stories/TextField.stories.jsx

@@ -150,13 +150,13 @@ export const knobs = () => (
       id="storybook-knobs"
       variant={select(
         'Variant',
-        [...Object.values(TextField.constants.variants)],
-        TextField.constants.variants[0],
+        ['error', 'warning', 'success', 'default'],
+        'default',
       )}
       type={select(
         'Type',
-        [...Object.values(TextField.constants.types)],
-        TextField.constants.types[0],
+        ['text', 'search', 'password', 'email', 'number'],
+        'text',
       )}
       label={text('Label', 'label')}
       meta={text('Meta', 'meta')}

libraries/core-react/src/TextField/HelperText/HelperText.token.js → libraries/core-react/src/TextField/HelperText/HelperText.token.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {
@@ -21,36 +20,34 @@ const spacings = {
     bottom: '6px',
   },
 }
+export type HelperTextVariantProps = {
+  color: string
+  disabledColor: string
+  focusColor: string
+}
+
 export const helperText = {
   background: colors.ui.background__light.hex,
   typography: typography.input.helper,
   spacings,
   default: {
     color: colors.text.static_icons__tertiary.hex,
     disabledColor: colors.interactive.disabled__text.hex,
-    focus: {
-      color: colors.text.static_icons__tertiary.hex,
-    },
+    focusColor: colors.text.static_icons__tertiary.hex,
   },
   error: {
-    color: colors.interactive.danger__resting.hex,
+    color: colors.interactive.danger__text.hex,
     disabledColor: colors.interactive.disabled__text.hex,
-    focus: {
-      color: colors.interactive.danger__hover.hex,
-    },
+    focusColor: colors.interactive.danger__hover.hex,
   },
   warning: {
-    color: colors.interactive.warning__resting.hex,
+    color: colors.interactive.warning__text.hex,
     disabledColor: colors.interactive.disabled__text.hex,
-    focus: {
-      color: colors.interactive.warning__hover.hex,
-    },
+    focusColor: colors.interactive.warning__hover.hex,
   },
   success: {
-    color: colors.interactive.success__resting.hex,
+    color: colors.interactive.success__text.hex,
     disabledColor: colors.interactive.disabled__text.hex,
-    focus: {
-      color: colors.interactive.success__hover.hex,
-    },
+    focusColor: colors.interactive.success__hover.hex,
   },
 }

libraries/core-react/src/TextField/HelperText/HelperText.tsx

@@ -0,0 +1,112 @@
+import React, { ReactNode } from 'react'
+import styled, { css } from 'styled-components'
+import { Spacing, typographyTemplate } from '../../_common/templates'
+import {
+  HelperTextVariantProps,
+  helperText as tokens,
+} from './HelperText.token'
+import { useTextField } from '../context'
+import { Icon } from '../Icon'
+import type { Variants } from '../types'
+
+type VariantionProps = {
+  variant: HelperTextVariantProps
+  isFocused: boolean
+  isDisabled: boolean
+}
+
+const Variation = ({ variant, isFocused, isDisabled }: VariantionProps) => {
+  if (!variant) {
+    return ``
+  }
+
+  const { focusColor, color, disabledColor } = variant
+
+  if (isDisabled) {
+    return css`
+      color: ${disabledColor};
+    `
+  }
+
+  if (isFocused) {
+    return css`
+      color: ${focusColor};
+    `
+  }
+
+  return css`
+    color: ${color};
+  `
+}
+
+type StyledProps = {
+  spacings: Spacing
+}
+
+const Container = styled.div<StyledProps>`
+  display: flex;
+  align-items: flex-end;
+
+  margin-left: ${({ spacings }) => spacings.left};
+  margin-top: ${({ spacings }) => spacings.top};
+`
+const Text = styled.p`
+  margin: 0;
+  ${typographyTemplate(tokens.typography)}
+  ${Variation}
+`
+
+const StyledIcon = styled(Icon)<StyledProps>`
+  margin-right: ${({ spacings }) => spacings.left};
+`
+
+type Props = {
+  /** Helper text */
+  helperText?: string
+  /** Icon */
+  icon?: ReactNode
+  /** Disabled */
+  disabled?: boolean
+  /** Variant */
+  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>
+    )
+  },
+)
+
+HelperText.displayName = 'eds-text-field-helperText'
+
+export { HelperText }

libraries/core-react/src/TextField/HelperText/index.js → libraries/core-react/src/TextField/HelperText/index.ts

@@ -1,2 +1 @@
-// @ts-nocheck
 export { HelperText } from './HelperText'