From 47a2c527934322cf9f7aa58ad93009b67cbefb45 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 25 Aug 2022 11:57:21 +0200
Subject: [PATCH] Added overridablecomponent to input

---
 .../src/components/Input/Input.docs.mdx       |   5 +
 .../src/components/Input/Input.stories.tsx    |   4 +
 .../src/components/Input/Input.tsx            | 180 +++++++++---------
 3 files changed, 103 insertions(+), 86 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/Input.docs.mdx b/packages/eds-core-react/src/components/Input/Input.docs.mdx
index 0267ac8c02..db48ceaebe 100644
--- a/packages/eds-core-react/src/components/Input/Input.docs.mdx
+++ b/packages/eds-core-react/src/components/Input/Input.docs.mdx
@@ -58,3 +58,8 @@ Compact `Input` using `EdsProvider`.
 
 
 <Story id="inputs-input--with-adornments" />
+
+### Casted as textarea
+
+
+<Story id="inputs-input--casted" />
diff --git a/packages/eds-core-react/src/components/Input/Input.stories.tsx b/packages/eds-core-react/src/components/Input/Input.stories.tsx
index e016f400fe..d34a53c7b4 100644
--- a/packages/eds-core-react/src/components/Input/Input.stories.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.stories.tsx
@@ -313,3 +313,7 @@ WithAdornments.decorators = [
     )
   },
 ]
+
+export const casted: Story<InputProps> = (args) => {
+  return <Input as="textarea" {...args} />
+}
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 64dd5b2e1f..d7e1bfbd8c 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -12,6 +12,7 @@ import {
   spacingsTemplate,
   outlineTemplate,
   useToken,
+  OverridableComponent,
 } from '@equinor/eds-utils'
 import { inputToken as tokens } from './Input.tokens'
 import type { InputToken } from './Input.tokens'
@@ -128,95 +129,102 @@ export type InputProps = {
   leftAdornments?: ReactNode
   /** Right adornments */
   rightAdornments?: ReactNode
+  /** Cast the input to another element */
+  as?: 'input' | 'textarea'
 } & InputHTMLAttributes<HTMLInputElement>
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  {
-    variant,
-    disabled = false,
-    type = 'text',
-    leftAdornments,
-    rightAdornments,
-    readOnly,
-    className,
-    style,
-    ...other
-  },
-  ref,
-) {
-  const inputVariant = tokens[variant] ? tokens[variant] : tokens.input
-  const { density } = useEds()
-  const token = useToken({ density }, inputVariant)()
-
-  const [rightAdornmentsRef, setRightAdornmentsRef] = useState<HTMLDivElement>()
-  const [leftAdornmentsRef, setLeftAdornmentsRef] = useState<HTMLDivElement>()
-
-  const rightAdornmentsWidth = useCallback(() => {
-    if (rightAdornmentsRef) {
-      return rightAdornmentsRef.offsetWidth
+export const Input: OverridableComponent<InputProps, HTMLInputElement> =
+  forwardRef<HTMLInputElement, InputProps>(function Input(
+    {
+      variant,
+      disabled = false,
+      type = 'text',
+      leftAdornments,
+      rightAdornments,
+      readOnly,
+      className,
+      style,
+      ...other
+    },
+    ref,
+  ) {
+    const inputVariant = tokens[variant] ? tokens[variant] : tokens.input
+    const { density } = useEds()
+    const token = useToken({ density }, inputVariant)()
+
+    const [rightAdornmentsRef, setRightAdornmentsRef] =
+      useState<HTMLDivElement>()
+    const [leftAdornmentsRef, setLeftAdornmentsRef] = useState<HTMLDivElement>()
+
+    const rightAdornmentsWidth = useCallback(() => {
+      if (rightAdornmentsRef) {
+        return rightAdornmentsRef.offsetWidth
+      }
+      return 0
+    }, [rightAdornmentsRef])()
+
+    const leftAdornmentsWidth = useCallback(() => {
+      if (leftAdornmentsRef) {
+        return leftAdornmentsRef.offsetWidth
+      }
+      return 0
+    }, [leftAdornmentsRef])()
+
+    const updatedToken = useCallback(
+      (): ComponentToken => ({
+        ...token,
+        spacings: {
+          ...token.spacings,
+          left: `${leftAdornmentsWidth + parseInt(token.spacings.left)}px`,
+          right: `${rightAdornmentsWidth + parseInt(token.spacings.right)}px`,
+        },
+      }),
+      [leftAdornmentsWidth, rightAdornmentsWidth, token],
+    )()
+
+    const inputProps = {
+      ref,
+      type,
+      disabled,
+      readOnly,
+      token: updatedToken,
+      style: {
+        resize: style?.resize,
+      },
+      ...other,
     }
-    return 0
-  }, [rightAdornmentsRef])()
 
-  const leftAdornmentsWidth = useCallback(() => {
-    if (leftAdornmentsRef) {
-      return leftAdornmentsRef.offsetWidth
+    const containerProps = {
+      disabled,
+      readOnly,
+      className,
+      style,
+      token: updatedToken,
     }
-    return 0
-  }, [leftAdornmentsRef])()
-
-  const updatedToken = useCallback(
-    (): ComponentToken => ({
-      ...token,
-      spacings: {
-        ...token.spacings,
-        left: `${leftAdornmentsWidth + parseInt(token.spacings.left)}px`,
-        right: `${rightAdornmentsWidth + parseInt(token.spacings.right)}px`,
-      },
-    }),
-    [leftAdornmentsWidth, rightAdornmentsWidth, token],
-  )()
 
-  const inputProps = {
-    ref,
-    type,
-    disabled,
-    readOnly,
-    token: updatedToken,
-    ...other,
-  }
-
-  const containerProps = {
-    disabled,
-    readOnly,
-    className,
-    style,
-    token: updatedToken,
-  }
-
-  const leftAdornmentProps = {
-    ref: setLeftAdornmentsRef,
-    token: updatedToken,
-  }
-  const rightAdornmentProps = {
-    ref: setRightAdornmentsRef,
-    token: updatedToken,
-  }
-
-  return (
-    // Not using <ThemeProvider> because of cascading styling messing with adornments
-    <Container {...containerProps}>
-      {leftAdornments ? (
-        <LeftAdornments {...leftAdornmentProps}>
-          {leftAdornments}
-        </LeftAdornments>
-      ) : null}
-      <StyledInput {...inputProps} />
-      {rightAdornments ? (
-        <RightAdornments {...rightAdornmentProps}>
-          {rightAdornments}
-        </RightAdornments>
-      ) : null}
-    </Container>
-  )
-})
+    const leftAdornmentProps = {
+      ref: setLeftAdornmentsRef,
+      token: updatedToken,
+    }
+    const rightAdornmentProps = {
+      ref: setRightAdornmentsRef,
+      token: updatedToken,
+    }
+
+    return (
+      // Not using <ThemeProvider> because of cascading styling messing with adornments
+      <Container {...containerProps}>
+        {leftAdornments ? (
+          <LeftAdornments {...leftAdornmentProps}>
+            {leftAdornments}
+          </LeftAdornments>
+        ) : null}
+        <StyledInput {...inputProps} />
+        {rightAdornments ? (
+          <RightAdornments {...rightAdornmentProps}>
+            {rightAdornments}
+          </RightAdornments>
+        ) : null}
+      </Container>
+    )
+  })