feat(DnInput): add name prop

denali-design · Jan 31, 2022 · 4dcae71 · 4dcae71
1 parent b45e190
commit 4dcae71
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/src/DnInput/DnInput.tsx b/src/DnInput/DnInput.tsx
@@ -19,6 +19,7 @@ export const DnInput = ({
     frontIconComponent,
     backIconComponent,
     id,
+    name,
     ...rest
 }: DnInputProps): JSX.Element => {
     return (
@@ -39,7 +40,7 @@ export const DnInput = ({
             {...rest}
         >
             {frontIconComponent}
-            <input id={id} type={type} placeholder={placeholderText} disabled={isDisabled} />
+            <input id={id} name={name} type={type} placeholder={placeholderText} disabled={isDisabled} />
             {backIconComponent}
             {isError && <p className="message">{errorMessage}</p>}
         </div>
@@ -72,6 +73,7 @@ export interface DnInputProps {
     frontIconComponent?: React.ReactNode;
     backIconComponent?: React.ReactNode;
     id?: string;
+    name?: string;
 }
 
 DnInput.defaultProps = {
@@ -86,4 +88,5 @@ DnInput.defaultProps = {
     frontIconComponent: null,
     backIconComponent: null,
     id: undefined,
+    name: undefined,
 };
diff --git a/src/DnInput/__stories__/index.stories.jsx b/src/DnInput/__stories__/index.stories.jsx
@@ -37,6 +37,8 @@ const getPlaceholderText = (value) => text('placeholderText', value, propsGroupI
 
 const getId = (value) => text('id', value, propsGroupId);
 
+const getName = (value) => text('name', value, propsGroupId);
+
 export default {
     title: 'Components/DnInput',
     decorators: [withKnobs],
@@ -51,6 +53,7 @@ export const playground = () => {
         <div className={getThemeClassName()}>
             <DnInput
                 id={getId('someId')}
+                name={getName('someName')}
                 size={getSize()}
                 type={getType()}
                 isActive={getIsActive()}
@@ -68,6 +71,7 @@ export const fieldWithIconAtFront = () => {
     return (
         <DnInput
             id={getId('someId')}
+            name={getName('someName')}
             size={getSize()}
             type={getType()}
             isActive={getIsActive()}
@@ -87,6 +91,7 @@ export const fieldWithIconAtBack = () => {
     return (
         <DnInput
             id={getId('someId')}
+            name={getName('someName')}
             size={getSize()}
             type={getType()}
             isActive={getIsActive()}
@@ -105,6 +110,7 @@ export const fieldWithButton = () => {
         <DnInputGroup hasButton>
             <DnInput
                 id={getId('someId')}
+                name={getName('someName')}
                 size={getSize()}
                 type={getType()}
                 isActive={getIsActive()}

diff --git a/src/DnInput/__tests__/__snapshots__/index.spec.jsx.snap b/src/DnInput/__tests__/__snapshots__/index.spec.jsx.snap
@@ -132,6 +132,7 @@ exports[`DnInput Tests should render correctly with custom props 1`] = `
     <input
       disabled=""
       id="someId"
+      name="myInput"
       placeholder="Just an input field"
       type="text"
     />

diff --git a/src/DnInput/__tests__/index.spec.jsx b/src/DnInput/__tests__/index.spec.jsx
@@ -63,6 +63,7 @@ describe('DnInput Tests', () => {
                     isInverse
                     errorMessage="Error"
                     placeholderText="Just an input field"
+                    name="myInput"
                 />
             </div>,
         );