refactor(components): use dark mode styles for input components (#125)

src/components/FormV2/PdapFormV2.vue

@@ -101,7 +101,7 @@ watchEffect(() => {
 
 @layer components {
 	.pdap-form-error-message {
-		@apply items-center justify-start basis-full flex-shrink flex bg-red-300 text-red-800 mb-3 p-2 text-sm;
+		@apply items-center justify-start basis-full flex-shrink flex bg-red-300 text-red-800 mb-3 p-2 text-sm rounded-sm;
 	}
 }
 </style>

src/components/FormV2/__snapshots__/formv2.spec.ts.snap

@@ -56,11 +56,7 @@ exports[`PdapFormV2 > renders default error message when form has errors 1`] = `
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
-      <button aria-label="Show text" class="pdap-input-password-toggle" type="button">
-        <svg aria-hidden="true" class="svg-inline--fa fa-eye" data-icon="eye" data-prefix="fas" focusable="false" role="img" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
-          <path class="" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" fill="currentColor" />
-        </svg>
-      </button>
+      <!--v-if-->
     </div>
   </div>
   <div class="pdap-input pdap-input-checkbox">
@@ -100,11 +96,7 @@ exports[`PdapFormV2 > renders error message when errorMessage prop is provided 1
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
-      <button aria-label="Show text" class="pdap-input-password-toggle" type="button">
-        <svg aria-hidden="true" class="svg-inline--fa fa-eye" data-icon="eye" data-prefix="fas" focusable="false" role="img" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
-          <path class="" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" fill="currentColor" />
-        </svg>
-      </button>
+      <!--v-if-->
     </div>
   </div>
   <div class="pdap-input pdap-input-checkbox">
@@ -138,11 +130,7 @@ exports[`PdapFormV2 > renders the form element 1`] = `
     <!--v-if-->
     <div class="pdap-input-password-wrapper">
       <input id="password" name="password" placeholder="Password" type="password">
-      <button aria-label="Show text" class="pdap-input-password-toggle" type="button">
-        <svg aria-hidden="true" class="svg-inline--fa fa-eye" data-icon="eye" data-prefix="fas" focusable="false" role="img" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
-          <path class="" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" fill="currentColor" />
-        </svg>
-      </button>
+      <!--v-if-->
     </div>
   </div>
   <div class="pdap-input pdap-input-checkbox">

src/components/Header/PdapHeader.vue

@@ -79,7 +79,11 @@ export default {
 }
 
 .logo {
-	@apply decoration-0 relative max-w-[80%] dark:invert;
+	@apply decoration-0 relative max-w-[80%] px-4;
 	@apply xs:max-w-none;
 }
+
+.logo img {
+	@apply dark:invert;
+}
 </style>

src/components/Header/__snapshots__/header.spec.ts.snap

@@ -4,10 +4,11 @@ exports[`Header component > Renders a header 1`] = `
 <header class="pdap-header">
   <!---->
   <div aria-controls="nav" aria-expanded="false" aria-label="open navigation menu" class="pdap-nav-open-button" role="button" tabindex="0">
-    <svg aria-label="Menu" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
-      <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-      <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
-    </svg>
+    <transition-stub appear="false" css="true" persisted="true">
+      <svg aria-hidden="true" class="svg-inline--fa fa-bars" data-icon="bars" data-prefix="fas" focusable="false" role="img" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
+        <path class="" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" fill="currentColor" />
+      </svg>
+    </transition-stub>
   </div>
   <transition-stub appear="false" css="true" persisted="true">
     <nav aria-hidden="true" class="pdap-nav" id="nav" style="display: none;">

src/components/Input/PdapInput.vue

@@ -50,81 +50,75 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 </script>
 
 <style scoped>
-@tailwind components;
-
-@layer components {
-	/* General input styles  */
-	.pdap-input {
-		@apply h-[max-content] gap-1 leading-normal mb-3 w-full flex flex-col;
-	}
-
-	.pdap-input input {
-		@apply dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)];
-	}
-
-	.pdap-input input::placeholder {
-		@apply text-neutral-600 text-lg;
-	}
-
-	.pdap-input input:focus,
-	.pdap-input input:focus-within,
-	.pdap-input input:focus-visible {
-		@apply border-2 border-blue-light border-solid outline-none;
-	}
-
-	.pdap-input label {
-		@apply max-w-[max-content] text-lg py-1 font-medium;
-	}
-
-	/* Error state */
-	.pdap-input-error {
-		@apply flex-wrap gap-x-0;
-	}
-
-	.pdap-input-error label {
-		@apply justify-start;
-	}
-
-	.pdap-input-error input {
-		@apply border-red-800 dark:border-red-300;
-	}
-
-	.pdap-input-error-message {
-		@apply items-center justify-start flex bg-red-300 text-red-800 p-1 text-xs;
-	}
-
-	/* Specific inputs */
-	/* Input - text */
-	.pdap-input input[type='text'] {
-		@apply h-12 text-lg;
-	}
-
-	/* Input - checkbox */
-	.pdap-input-checkbox {
-		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto;
-	}
-
-	.pdap-input-checkbox-checked {
-		@apply border-2 border-brand-gold border-solid rounded-md;
-	}
-
-	.pdap-input input[type='checkbox'] {
-		@apply h-6 w-6 accent-brand-gold;
-	}
-
-	.pdap-input input[type='checkbox'] ~ label {
-		@apply pl-0 w-full max-w-full;
-	}
-
-	.pdap-input input[type='checkbox'],
-	.pdap-input input[type='checkbox'] ~ label {
-		@apply cursor-pointer;
-	}
-}
-
-/* stylelint-disable */
+/* General input styles  */
+.pdap-input {
+	@apply h-[max-content] gap-1 leading-normal mb-3 w-full flex flex-col;
+}
+
+.pdap-input input {
+	@apply dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)];
+}
+
+.pdap-input input::placeholder {
+	@apply text-neutral-600 text-lg;
+}
+
+.pdap-input input:focus,
+.pdap-input input:focus-within,
+.pdap-input input:focus-visible {
+	@apply border-2 border-blue-light border-solid outline-none;
+}
+
+.pdap-input label {
+	@apply max-w-[max-content] text-lg py-1 font-medium;
+}
+
+/* Error state */
+.pdap-input-error {
+	@apply flex-wrap gap-x-0;
+}
+
+.pdap-input-error label {
+	@apply justify-start;
+}
+
+.pdap-input-error input {
+	@apply border-red-800 dark:border-red-300;
+}
+
+.pdap-input-error-message {
+	@apply items-center justify-start flex bg-red-300 text-red-800 p-1 text-xs;
+}
+
+/* Specific inputs */
+/* Input - text */
+.pdap-input input[type='text'] {
+	@apply h-12 text-lg;
+}
+
+/* Input - checkbox */
+.pdap-input-checkbox {
+	@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto;
+}
+
+.pdap-input-checkbox-checked {
+	@apply border-2 border-brand-gold border-solid rounded-md;
+}
+
+.pdap-input input[type='checkbox'] {
+	@apply h-6 w-6 accent-brand-gold;
+}
+
+.pdap-input input[type='checkbox'] ~ label {
+	@apply pl-0 w-full max-w-full;
+}
+
+.pdap-input input[type='checkbox'],
+.pdap-input input[type='checkbox'] ~ label {
+	@apply cursor-pointer;
+}
+
 .svg-inline--fa {
 	@apply ml-2;
 }
-/* stylelint-enable */
 </style>

src/components/InputDatePicker/PdapInputDatePicker.vue

@@ -62,6 +62,7 @@ watch(
 	() => values.value,
 	// In the (unlikely, unrecommended, but sometimes unfortunately necessary) event of form values changing upstream from a parent component:
 	(formValuesUpdated) => {
+		const val = formValuesUpdated[name];
 		// Case 0: Values are equivalent, or the change was made here, do nothing.
 
 		/*
@@ -70,11 +71,12 @@ watch(
 		 ** b. has been changed to an empty string by `Form` after submit event
 		 ** In either case, clear state or keep it clear
 		 */
-		if (!formValuesUpdated[name]) date.value = undefined;
+		if (!val) date.value = undefined;
 		// Case 2 (rare): value has been programmatically updated upstream of `Form`
 		else if (
-			!_isEqual(formValuesUpdated[name], date.value) &&
-			formValuesUpdated[name] instanceof Date
+			!_isEqual(val, date.value) &&
+			(val instanceof Date ||
+				(Array.isArray(val) && val.every((date) => date instanceof Date)))
 		) {
 			// Set the date to the value of the form value
 			date.value = formValuesUpdated[name];
@@ -119,12 +121,12 @@ watch(
 }
 
 .dp__theme_light {
-	--dp-primary-color: rgb(var(--color-wine-neutral-700));
+	--dp-primary-color: rgb(var(--color-brand-gold-600));
 	--dp-primary-text-color: rgb(var(--color-neutral-50));
 }
 
 .dp__theme_dark {
-	--dp-primary-color: rgb(var(--color-wine-neutral-300));
+	--dp-primary-color: rgb(var(--color-brand-gold-700));
 	--dp-primary-text-color: rgb(var(--color-neutral-950));
 }
 
@@ -135,4 +137,10 @@ watch(
 div[role='gridcell'] {
 	@apply outline-none border-2 border-solid border-transparent;
 }
+
+div[role='gridcell']:hover,
+div[role='gridcell']:focus,
+div[role='gridcell']:focus-visible {
+	@apply border-2 border-brand-gold-500 border-solid outline-none;
+}
 </style>

src/components/InputPassword/PdapInputPassword.vue

@@ -21,6 +21,7 @@
 				@input="onInput"
 			/>
 			<button
+				v-if="values?.[name]"
 				type="button"
 				class="pdap-input-password-toggle"
 				:aria-label="isMasked ? 'Show text' : 'Hide text'"
@@ -78,7 +79,7 @@ function toggleMask() {
 	}
 
 	.pdap-input-password-toggle {
-		@apply absolute right-4 cursor-pointer text-[rgba(0_0_0)] top-1/2 translate-y-[-50%];
+		@apply absolute right-4 cursor-pointer top-1/2 translate-y-[-50%] outline-none p-1;
 	}
 }
 </style>

src/components/InputSelect/PdapInputSelect.vue

@@ -312,15 +312,15 @@ watch(
 
 @layer components {
 	.pdap-custom-select {
-		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border-2 border-solid border-neutral-500 cursor-pointer text-lg rounded-md;
+		@apply relative w-full bg-neutral-50 border-2 border-solid border-neutral-500 cursor-pointer text-lg rounded-md;
 	}
 
 	.pdap-custom-select-options {
-		@apply absolute top-[115%] left-[-2px] w-[calc(100%+4px)] bg-neutral-50 dark:bg-neutral-950 border-solid border border-neutral-500 max-h-48 overflow-y-auto z-20 p-1;
+		@apply absolute top-[115%] left-[-2px] w-[calc(100%+4px)] bg-neutral-50 border-solid border border-neutral-500 max-h-48 overflow-y-auto z-20 p-1;
 	}
 
 	.pdap-custom-select-option {
-		@apply text-neutral-950 dark:text-neutral-50 p-2 w-full max-w-full cursor-pointer border-2 border-solid border-transparent;
+		@apply text-neutral-950 p-2 w-full max-w-full cursor-pointer border-2 border-solid border-transparent;
 	}
 
 	.pdap-custom-select:focus,
@@ -331,11 +331,11 @@ watch(
 
 	.pdap-custom-select-option:hover,
 	.pdap-custom-select-option:focus {
-		@apply bg-neutral-200 dark:bg-neutral-700;
+		@apply bg-neutral-200;
 	}
 
 	.pdap-custom-select input {
-		@apply w-full bg-transparent border-none outline-none py-2 px-3 text-neutral-950 dark:text-neutral-50;
+		@apply w-full bg-transparent border-none outline-none py-2 px-3 text-neutral-950;
 	}
 
 	.pdap-custom-select input:focus {
@@ -344,15 +344,15 @@ watch(
 }
 
 .selected-value {
-	@apply py-2 px-3 text-neutral-950 dark:text-neutral-50;
+	@apply py-2 px-3 text-neutral-950;
 }
 
 .selected-value.value-is-placeholder {
 	@apply text-neutral-600;
 }
 
 .arrow {
-	@apply absolute top-1/2 right-3 w-0 h-0 border-l-8 border-r-8 border-t-8 border-solid border-x-transparent border-t-neutral-950 dark:border-t-neutral-50 transition-transform;
+	@apply absolute top-1/2 right-3 w-0 h-0 border-l-8 border-r-8 border-t-8 border-solid border-x-transparent border-t-neutral-950 transition-transform;
 }
 
 .arrow.open {

src/components/Nav/PdapNav.vue

@@ -12,16 +12,12 @@
 		@click="toggleIsExpanded"
 		@keyup.enter="toggleIsExpanded"
 	>
-		<svg
-			aria-label="Menu"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 448 512"
-		>
-			<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-			<path
-				d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
+		<transition>
+			<FontAwesomeIcon
+				v-show="state.isMobile"
+				:icon="state.isExpanded ? faClose : faBars"
 			/>
-		</svg>
+		</transition>
 	</div>
 
 	<transition>
@@ -52,15 +48,18 @@
 					class="pdap-nav-link"
 					:to="link.path"
 					@click="toggleIsExpanded"
-					>{{ link.text }}</router-link
 				>
+					{{ link.text }}
+				</router-link>
 			</li>
 		</nav>
 	</transition>
 </template>
 
 <script setup lang="ts">
 // Imports
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faBars, faClose } from '@fortawesome/free-solid-svg-icons';
 import {
 	inject,
 	nextTick,
@@ -200,7 +199,7 @@ export default {
 	}
 
 	.pdap-nav-open-button {
-		@apply cursor-pointer flex items-center text-xl;
+		@apply cursor-pointer flex items-center text-xl px-4;
 		@apply lg:hidden;
 	}