fix: apply new tokens to textfield and textarea (#16)

docs/src/Main.tsx

@@ -8,6 +8,9 @@ import {
 } from 'react-router-dom';
 import Alert from '../../packages/alert/docs/Alert.mdx';
 import Button from '../../packages/button/docs/Button.mdx';
+import TextField from '../../packages/textfield/docs/TextField.mdx';
+import TextArea from '../../packages/textarea/docs/TextArea.mdx';
+
 /*
 import Box from '../../packages/box/docs/Box.mdx';
 import Breadcrumbs from '../../packages/breadcrumbs/docs/Breadcrumbs.mdx';
@@ -21,8 +24,6 @@ import Slider from '../../packages/slider/docs/Slider.mdx';
 import Steps from '../../packages/steps/docs/Steps.mdx';
 import Switch from '../../packages/switch/docs/Switch.mdx';
 import Tabs from '../../packages/tabs/docs/Tabs.mdx';
-import TextArea from '../../packages/textarea/docs/TextArea.mdx';
-import TextField from '../../packages/textfield/docs/TextField.mdx';
 import Toggle from '../../packages/toggle/docs/Toggle.mdx';
 import Attention from '../../packages/attention/docs/Attention.mdx';
 */
@@ -58,6 +59,14 @@ const App = () => {
             <Button />
           </Route>
 
+          <Route path="/textfield">
+            <TextField />
+          </Route>
+
+          <Route path="/textarea">
+            <TextArea />
+          </Route>
+
           {/*
           <Route path="/modal">
             <Modal />
@@ -71,10 +80,6 @@ const App = () => {
             <Attention />
           </Route>
 
-          <Route path="/textfield">
-            <TextField />
-          </Route>
-
           <Route path="/select">
             <Select />
           </Route>
@@ -83,10 +88,6 @@ const App = () => {
             <Tabs />
           </Route>
 
-          <Route path="/textarea">
-            <TextArea />
-          </Route>
-
           <Route path="/slider">
             <Slider />
           </Route>

package.json

@@ -2,7 +2,6 @@
   "name": "@warp-ds/react",
   "version": "1.0.0-alpha.10",
   "repository": "git@github.com:warp-ds/react.git",
-  "type": "module",
   "license": "Apache-2.0",
   "exports": {
     ".": {
@@ -101,7 +100,7 @@
   },
   "dependencies": {
     "@chbphone55/classnames": "^2.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.15",
+    "@warp-ds/component-classes": "^1.0.0-alpha.32",
     "@warp-ds/core": "^1.0.0",
     "react-focus-lock": "^2.5.2",
     "resize-observer-polyfill": "^1.5.1",

packages/_helpers/index.ts

@@ -1,5 +1,5 @@
 export { Clickable } from './clickable';
 export { DeadToggle } from './dead-toggle';
-/* export { Affix } from './affix'; */
+export { Affix } from './affix';
 export { ExpandTransition } from './expand-transition';
 export { UnstyledHeading } from './unstyled-heading';

packages/textarea/docs/TextArea.mdx

@@ -61,7 +61,7 @@ instead.
 Add the optional prop to indicate that the textarea is not required.
 
 ```jsx example
-<TextField label="Description" optional />
+<TextArea label="Description" optional />
 ```
 
 ## Help text

packages/textarea/src/component.tsx

@@ -1,5 +1,6 @@
-import { classNames } from '@chbphone55/classnames';
 import React, { forwardRef, useRef } from 'react';
+import { classNames } from '@chbphone55/classnames';
+import { input, helpText as h, label as l } from '@warp-ds/component-classes';
 import { useId } from '../../utils/src';
 import { TextAreaProps } from './props';
 import useTextAreaHeight from './useTextAreaHeight';
@@ -41,25 +42,31 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     return (
       <div
-        className={classNames(className, {
-          'input mb-0': true,
-          'input--is-invalid': isInvalid,
-          'input--is-disabled': disabled,
-          'input--is-read-only': readOnly,
-        })}
+        className={className}
         style={style}
       >
         {label && (
-          <label htmlFor={id}>
+          <label htmlFor={id} className={classNames({
+            [l.label]: true,
+            [l.labelValid]: !isInvalid,
+            [l.labelInvalid]: isInvalid
+          })} >
             {label}
             {optional && (
-              <span className="pl-8 font-normal text-14 text-gray-500">
+              <span className={l.optional}>
                 (valgfritt)
               </span>
             )}
           </label>
         )}
         <textarea
+          className={classNames({
+            [input.default]: true,
+            [input.placeholder]: !!props.placeholder,
+            [input.invalid]: isInvalid,
+            [input.disabled]: disabled,
+            [input.readOnly]: readOnly,
+          })}
           {...rest}
           aria-describedby={helpId}
           aria-errormessage={isInvalid && helpId ? helpId : undefined}
@@ -80,7 +87,12 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           readOnly={readOnly}
           value={value}
         />
-        {helpText && <div className="input__sub-text">{helpText}</div>}
+        {helpText && <div 
+          className={classNames({
+            [h.helpText]: true,
+            [h.helpTextInvalid]: isInvalid
+          })}
+          >{helpText}</div>}
       </div>
     );
   },

packages/textfield/src/component.tsx

@@ -1,5 +1,6 @@
-import { classNames } from '@chbphone55/classnames';
 import React, { forwardRef } from 'react';
+import { classNames } from '@chbphone55/classnames';
+import { input, label as l, helpText as h } from '@warp-ds/component-classes';
 import { useId } from '../../utils/src';
 import { TextFieldProps } from './props';
 
@@ -33,32 +34,32 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     );
 
     return (
-      <div
-        className={classNames({
-          'has-suffix': hasSuffix,
-          'has-prefix': hasPrefix,
-        })}
-      >
-        <div
-          className={classNames({
-            'input mb-0': true,
-            'input--is-invalid': isInvalid,
-            'input--is-disabled': disabled,
-            'input--is-read-only': readOnly,
-          })}
-        >
+        <div>
           {label && (
-            <label htmlFor={id}>
+            <label htmlFor={id} className={classNames({
+              [l.label]: true,
+              [l.labelValid]: !isInvalid,
+              [l.labelInvalid]: isInvalid
+            })} >
               {label}
               {optional && (
-                <span className="pl-8 font-normal text-14 text-gray-500">
+                <span className={l.optional}>
                   (valgfritt)
                 </span>
               )}
             </label>
           )}
-          <div className="relative">
+          <div className={input.wrapper}>
             <input
+            className={classNames({
+              [input.default]: true,
+              [input.invalid]: isInvalid,
+              [input.disabled]: disabled,
+              [input.readOnly]: readOnly,
+              [input.placeholder]: !!props.placeholder,
+              [input.suffix]: hasSuffix,
+              [input.prefix]: hasPrefix,    
+            })}
               {...rest}
               aria-describedby={helpId}
               aria-errormessage={isInvalid && helpId ? helpId : undefined}
@@ -73,12 +74,14 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           </div>
 
           {helpText && (
-            <div className="input__sub-text" id={helpId}>
+            <div className={classNames({
+              [h.helpText]: true,
+              [h.helpTextInvalid]: isInvalid
+            })} id={helpId}>
               {helpText}
             </div>
           )}
         </div>
-      </div>
     );
   },
 );

packages/textfield/stories/Textfield.stories.tsx

@@ -28,7 +28,7 @@ export const placeholder = () => <TextField placeholder="Sesame street" />;
 
 export const disabled = () => <TextField disabled />;
 
-export const readOnly = () => <TextField readOnly />;
+export const readOnly = () => <TextField readOnly value="puse@finn.no" />;
 
 export const autoFocus = () => <TextField autoFocus />;