Pass in input name for Input id in storybook (#638)

* Pass in input name for input id * version patch update
LaunchPadLab · Mar 26, 2024 · 052921a · 052921a
1 parent d9e76f7
commit 052921a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "engines": {
     "node": "^18.12 || ^20.0"
   },

diff --git a/stories/forms/labels/labeled-field.story.js b/stories/forms/labels/labeled-field.story.js
@@ -6,25 +6,26 @@ import { action } from '@storybook/addon-actions'
 
 const StaticInput = (props) => <input {...props} />
 const Input = dynamicInput()(StaticInput)
+const inputName = 'inputName'
 
 storiesOf('LabeledField', module)
   .add('default', () => (
     <LabeledField
       {...{
         input: {
-          name: 'input name',
+          name: inputName,
         },
         meta: {},
       }}
     >
-      <Input />
+      <Input id={inputName} />
     </LabeledField>
   ))
   .add('with error', () => (
     <LabeledField
       {...{
         input: {
-          name: 'input name',
+          name: inputName,
         },
         meta: {
           touched: true,
@@ -33,14 +34,14 @@ storiesOf('LabeledField', module)
         },
       }}
     >
-      <Input />
+      <Input id={inputName} />
     </LabeledField>
   ))
   .add('hide error', () => (
     <LabeledField
       {...{
         input: {
-          name: 'input name',
+          name: inputName,
         },
         meta: {
           touched: true,
@@ -50,28 +51,28 @@ storiesOf('LabeledField', module)
         hideErrorLabel: true,
       }}
     >
-      <Input />
+      <Input id={inputName} />
     </LabeledField>
   ))
   .add('with custom label', () => {
     // eslint-disable-next-line
     const CustomLabel = ({ onClickLabel }) => (
-      <label onClick={onClickLabel} htmlFor="inputName">
+      <label onClick={onClickLabel} htmlFor={inputName}>
         This is a <b>custom</b> label
       </label>
     )
     return (
       <LabeledField
         {...{
           input: {
-            name: 'inputName',
+            name: inputName,
           },
           meta: {},
           labelComponent: CustomLabel,
           onClickLabel: action('Custom Label Clicked'),
         }}
       >
-        <Input id="inputName" />
+        <Input id={inputName} />
       </LabeledField>
     )
   })
@@ -86,7 +87,7 @@ storiesOf('LabeledField', module)
       <LabeledField
         {...{
           input: {
-            name: 'inputName',
+            name: inputName,
           },
           meta: {
             touched: true,
@@ -96,7 +97,7 @@ storiesOf('LabeledField', module)
           errorComponent: CustomError,
         }}
       >
-        <Input id="inputName" aria-describedby="inputError" />
+        <Input id={inputName} aria-describedby="inputError" />
       </LabeledField>
     )
   })