From d1259b2590d8cec43fa0462784014cea8afda338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rune=20Moskvil=20Lyng=C3=A5s?=
 <rune.moskvil.lyngaas@vtfk.no>
Date: Sat, 26 Mar 2022 11:59:43 +0100
Subject: [PATCH] Use `className` when provided

---
 src/ui/TextField/TextField.stories.js | 11 +++++++++++
 src/ui/TextField/index.js             |  3 ++-
 src/ui/TextField/stories.styles.scss  | 11 +++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/TextField/stories.styles.scss

diff --git a/src/ui/TextField/TextField.stories.js b/src/ui/TextField/TextField.stories.js
index f508228c..c8561936 100644
--- a/src/ui/TextField/TextField.stories.js
+++ b/src/ui/TextField/TextField.stories.js
@@ -4,6 +4,8 @@ import { boolean, number, text } from '@storybook/addon-knobs'
 
 import { TextField } from '.'
 
+import './stories.styles.scss'
+
 export default getConfig(
   { title: 'TextField', component: TextField }
 )
@@ -119,3 +121,12 @@ export function Required () {
     </div>
   )
 }
+
+export function WithClassName () {
+  return (
+    <div>
+      <TextField placeholder='red' className='red' value='className = red' />
+      <TextField placeholder='green' className='green' value='className = green' />
+    </div>
+  )
+}
diff --git a/src/ui/TextField/index.js b/src/ui/TextField/index.js
index 19bbd4b4..52565424 100644
--- a/src/ui/TextField/index.js
+++ b/src/ui/TextField/index.js
@@ -47,6 +47,7 @@ export function TextField ({ type, className, placeholder, required, value, id,
   // Determine what classes the component should have
   const componentClasses = useMemo(() => {
     let classes = 'textfield'
+    if (className) classes += ` ${className}`
     if (type && typeof type === 'string') classes += ` ${type}`
     if (required) classes += ' required-input'
     if (rounded) classes += ' rounded'
@@ -58,7 +59,7 @@ export function TextField ({ type, className, placeholder, required, value, id,
     classes = classes.trim()
 
     return classes
-  }, [hasData, focusState, type, required, rounded, error, alwaysPlaceholder])
+  }, [hasData, focusState, type, required, rounded, error, alwaysPlaceholder, className])
 
   // Determine what classes the input should have
   const inputClasses = useMemo(() => {
diff --git a/src/ui/TextField/stories.styles.scss b/src/ui/TextField/stories.styles.scss
new file mode 100644
index 00000000..a3952f17
--- /dev/null
+++ b/src/ui/TextField/stories.styles.scss
@@ -0,0 +1,11 @@
+.textfield {
+  margin-bottom: 15px;
+}
+
+.red {
+  color: red;
+}
+
+.green {
+  color: green;
+}