feat(components): create SelectInput (#110)

Police-Data-Accessibility-Project · Oct 11, 2024 · ad35c57 · ad35c57
1 parent 44a9241
commit ad35c57
Show file tree

Hide file tree

Showing 15 changed files with 749 additions and 27 deletions.
diff --git a/.husky/post-commit b/.husky/post-commit
@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+[ -n "$CI" ] && exit 0
+
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run docs
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run docs && npm run test:ci
+npm run test:ci
diff --git a/docs/components.md b/docs/components.md
@@ -9,6 +9,7 @@
 - [Form](../src/components/Form//README.md)
 - [Header](../src/components/Header//README.md)
 - [Input](../src/components/Input//README.md)
+- [InputSelect](../src/components/InputSelect//README.md)
 - [Nav](../src/components/Nav//README.md)
 - [QuickSearchForm](../src/components/QuickSearchForm//README.md)
 - [Spinner](../src/components/Spinner//README.md)
diff --git a/scripts/update-docs.sh b/scripts/update-docs.sh
@@ -20,11 +20,11 @@ done
 
 # create a commit, only if there are changes
 if git diff --quiet docs/$output_file; then
-    echo -e "No new component README files detected.\nProceeding with push"
+    echo -e "No new component README files detected.\nNo new commit will be created."
     exit 0
 else
     commit_msg="chore(docs): auto-update to component docs"
 
     echo "New README files detected, committing updated docs/$output_file file..."
-    git add docs/$output_file && git commit -m "$commit_msg" --no-verify && echo "Commit finished, proceeding with push"
+    git add docs/$output_file && git commit -m "$commit_msg" --no-verify && echo "Updated documentation added to the TOC in \`docs/components.md\` and committed."
 fi
diff --git a/src/components/FormV2/__snapshots__/formv2.spec.ts.snap b/src/components/FormV2/__snapshots__/formv2.spec.ts.snap
@@ -4,16 +4,17 @@ exports[`PdapFormV2 > calls submit event with form values on valid submission 1`
 <form class="pdap-form" id="test" name="test">
   <!--v-if-->
   <div class="pdap-input">
+    <label for="name">Name</label>
     <!--v-if-->
     <input id="name" name="name" placeholder="Name" type="text">
-    <label for="name">Name</label>
   </div>
   <div class="pdap-input">
+    <label for="email">Email</label>
     <!--v-if-->
     <input id="email" name="email" placeholder="Email" type="text">
-    <label for="email">Email</label>
   </div>
   <div class="pdap-input pdap-input-password">
+    <label for="password">Password</label>
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
@@ -23,7 +24,6 @@ exports[`PdapFormV2 > calls submit event with form values on valid submission 1`
         </svg>
       </button>
     </div>
-    <label for="password">Password</label>
   </div>
   <div class="pdap-input pdap-input-checkbox">
     <!--v-if-->
@@ -37,16 +37,17 @@ exports[`PdapFormV2 > renders default error message when form has errors 1`] = `
 <form class="pdap-form" id="test" name="test">
   <div class="pdap-form-error-message">Please update this form to correct the errors</div>
   <div class="pdap-input pdap-input-error">
+    <label for="name">Name</label>
     <div class="pdap-input-error-message">Value is required</div>
     <input id="name" name="name" placeholder="Name" type="text">
-    <label for="name">Name</label>
   </div>
   <div class="pdap-input pdap-input-error">
+    <label for="email">Email</label>
     <div class="pdap-input-error-message">Value is required</div>
     <input id="email" name="email" placeholder="Email" type="text">
-    <label for="email">Email</label>
   </div>
   <div class="pdap-input pdap-input-password">
+    <label for="password">Password</label>
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
@@ -56,7 +57,6 @@ exports[`PdapFormV2 > renders default error message when form has errors 1`] = `
         </svg>
       </button>
     </div>
-    <label for="password">Password</label>
   </div>
   <div class="pdap-input pdap-input-checkbox">
     <!--v-if-->
@@ -76,16 +76,17 @@ exports[`PdapFormV2 > renders error message when errorMessage prop is provided 1
 <form class="pdap-form" id="test" name="test">
   <div class="pdap-form-error-message">Form Error</div>
   <div class="pdap-input">
+    <label for="name">Name</label>
     <!--v-if-->
     <input id="name" name="name" placeholder="Name" type="text">
-    <label for="name">Name</label>
   </div>
   <div class="pdap-input">
+    <label for="email">Email</label>
     <!--v-if-->
     <input id="email" name="email" placeholder="Email" type="text">
-    <label for="email">Email</label>
   </div>
   <div class="pdap-input pdap-input-password">
+    <label for="password">Password</label>
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
@@ -95,7 +96,6 @@ exports[`PdapFormV2 > renders error message when errorMessage prop is provided 1
         </svg>
       </button>
     </div>
-    <label for="password">Password</label>
   </div>
   <div class="pdap-input pdap-input-checkbox">
     <!--v-if-->
@@ -109,16 +109,17 @@ exports[`PdapFormV2 > renders the form element 1`] = `
 <form class="pdap-form" id="test" name="test">
   <!--v-if-->
   <div class="pdap-input">
+    <label for="name">Name</label>
     <!--v-if-->
     <input id="name" name="name" placeholder="Name" type="text">
-    <label for="name">Name</label>
   </div>
   <div class="pdap-input">
+    <label for="email">Email</label>
     <!--v-if-->
     <input id="email" name="email" placeholder="Email" type="text">
-    <label for="email">Email</label>
   </div>
   <div class="pdap-input pdap-input-password">
+    <label for="password">Password</label>
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
@@ -128,7 +129,6 @@ exports[`PdapFormV2 > renders the form element 1`] = `
         </svg>
       </button>
     </div>
-    <label for="password">Password</label>
   </div>
   <div class="pdap-input pdap-input-checkbox">
     <!--v-if-->

diff --git a/src/components/InputCheckbox/PdapInputCheckbox.vue b/src/components/InputCheckbox/PdapInputCheckbox.vue
@@ -3,7 +3,9 @@
 		class="pdap-input pdap-input-checkbox"
 		:class="{ ['pdap-input-error']: error }"
 	>
-		<slot v-if="$slots.error" name="error" class="pdap-input-error-message" />
+		<div v-if="$slots.error && error" class="pdap-input-error-message">
+			<slot name="error" />
+		</div>
 		<div v-else-if="error" class="pdap-input-error-message">{{ error }}</div>
 
 		<input

diff --git a/src/components/InputPassword/PdapInputPassword.vue b/src/components/InputPassword/PdapInputPassword.vue
@@ -3,7 +3,11 @@
 		class="pdap-input pdap-input-password"
 		:class="{ ['pdap-input-error']: error }"
 	>
-		<slot v-if="$slots.error" name="error" class="pdap-input-error-message" />
+		<label v-if="$slots.label" :for="id"><slot name="label" /></label>
+		<label v-else-if="label" :for="id">{{ label }}</label>
+		<div v-if="$slots.error && error" class="pdap-input-error-message">
+			<slot name="error" />
+		</div>
 		<div v-else-if="error" class="pdap-input-error-message">{{ error }}</div>
 
 		<div class="pdap-input-password-wrapper">
@@ -25,9 +29,6 @@
 				<FontAwesomeIcon :icon="isMasked ? faEye : faEyeSlash" />
 			</button>
 		</div>
-
-		<label v-if="$slots.label" :for="id"><slot name="label" /></label>
-		<label v-else-if="label" :for="id">{{ label }}</label>
 	</div>
 </template>