refactor!: rename inputfield to input and textfield to inputfield (#1485

)

* refactor(input)!: rename old inputfield component to input

* refactor(inputfield)!: rename old textfield to inputfield

* test(inputfield): match test suite description

* test(input): remove low value tests

* docs(input): clean input prop and sp

.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx

@@ -9,13 +9,13 @@ import {
   Heading,
   HorizontalStepper,
   Icon,
+  InputField,
   Layout,
   LayoutContainer,
   LayoutSection,
   PageHeader,
   Panel,
   Text,
-  TextField,
 } from '../../../src';
 
 import CompassCenter from '../../static/compass-center.svg';
@@ -78,7 +78,7 @@ export const CoursePlannerStep1 = () => {
             <Text className={textClassName}>
               How many times per week do you have class?
             </Text>
-            <TextField
+            <InputField
               aria-label="times per week"
               className="!mb-8"
               min={0}
@@ -88,7 +88,7 @@ export const CoursePlannerStep1 = () => {
             <Text className={textClassName}>
               How many minutes is each class?
             </Text>
-            <TextField
+            <InputField
               aria-label="minutes"
               className="!mb-8"
               min={0}

.storybook/pages/StudentRefinement/StudentRefinement.tsx

@@ -473,7 +473,7 @@ export const StudentRefinement = () => {
               </div>
               <Layout className="mb-8" variant="50-50">
                 <SearchBar>
-                  <SearchBar.InputField />
+                  <SearchBar.Field />
                   <SearchBar.Button />
                 </SearchBar>
                 <ButtonGroup

src/components/Input/Input.module.css

@@ -0,0 +1,13 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # INPUT
+\*------------------------------------*/
+
+/**
+ * Default input styles 
+ */
+:where(.input) {
+  @mixin inputStyles;
+  padding-left: var(--eds-size-2);
+}

src/components/Input/Input.tsx

@@ -0,0 +1,120 @@
+import clsx from 'clsx';
+import type { ChangeEventHandler } from 'react';
+import React, { forwardRef } from 'react';
+import styles from './Input.module.css';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  /**
+   * Aria-label to provide an accesible name for the text input if no visible label is provided.
+   */
+  'aria-label'?: string;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * Disables the input and prevents editing the contents
+   */
+  disabled?: boolean;
+  /**
+   * HTML id for the component
+   */
+  id?: string;
+  /**
+   * Gives a hint as to the type of data needed for text input
+   */
+  inputMode?:
+    | 'text'
+    | 'email'
+    | 'url'
+    | 'search'
+    | 'tel'
+    | 'none'
+    | 'numeric'
+    | 'decimal';
+  /**
+   * Error state of the form field
+   */
+  isError?: boolean;
+  /**
+   * Maximum number the input can take. When this number equals the input value, the plus button becomes disabled.
+   */
+  max?: number;
+  /**
+   * Minimum number the input can take. When this number equals the input value, the minus button becomes disabled.
+   */
+  min?: number;
+  /**
+   * HTML name attribute for the input
+   */
+  name?: string;
+  /**
+   * Function that fires when field value has changed
+   */
+  onChange?: ChangeEventHandler;
+  /**
+   * Placeholder attribute for input. Note: placeholder should be used sparingly
+   */
+  placeholder?: string;
+  /**
+   * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive
+   */
+  readOnly?: boolean;
+  /**
+   * Indicates that field is required for form to be successfully submitted
+   */
+  required?: boolean;
+  /**
+   * Title attribute on input
+   */
+  title?: string;
+  /**
+   * HTML type attribute, allowing switching between text, password, and other HTML5 input field types
+   */
+  type?:
+    | 'text'
+    | 'password'
+    | 'datetime'
+    | 'datetime-local'
+    | 'date'
+    | 'month'
+    | 'time'
+    | 'week'
+    | 'number'
+    | 'email'
+    | 'url'
+    | 'search'
+    | 'tel';
+  /**
+   * The value of the input
+   */
+  value?: string | number;
+  /**
+   * The default value of the input
+   */
+  defaultValue?: string | number;
+};
+
+/**
+ * Input component for one line of text.
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, disabled, id, isError, ...other }, ref) => {
+    const componentClassName = clsx(
+      styles['input'],
+      isError && styles['error'],
+      className,
+    );
+
+    return (
+      <input
+        className={componentClassName}
+        disabled={disabled}
+        id={id}
+        ref={ref}
+        {...other}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';

src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input as default } from './Input';
+export type { InputProps } from './Input';

src/components/InputField/InputField.module.css

@@ -1,13 +1,44 @@
-@import '../../design-tokens/mixins.css';
-
 /*------------------------------------*\
-    #TEXT INPUT
+    # INPUT FIELD
 \*------------------------------------*/
 
 /**
- * Default text input styles 
+ * Wraps the Label and the optional/required indicator.
+ */
+.input-field__overline {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--eds-size-half);
+  color: var(--eds-theme-color-form-label);
+}
+.input-field__overline--no-label {
+  justify-content: flex-end;
+}
+.input-field__overline--disabled {
+  color: var(--eds-theme-color-text-disabled);
+}
+
+/**
+ * Input field body
  */
-:where(.input-field) {
-  @mixin inputStyles;
-  padding-left: var(--eds-size-2);
+.input-field__body {
+  position: relative;
+  margin-bottom: var(--eds-size-half);
+}
+
+/**
+ * Input Field Within
+ *
+ * A slot to put arbitrary content that appears within the input field border to the right. 
+ *
+ * Typically used for buttons and icon buttons to enable things like show/hide password buttons .
+ */
+.input-field__input-within {
+  position: absolute;
+  right: var(--eds-size-2);
+  top: 0;
+  bottom: 0;
+  display: grid;
+  align-items: center;
+  justify-content: center;
 }