From 7ace5f7736fa3add5edf4e7412145589a5cee055 Mon Sep 17 00:00:00 2001
From: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:08:03 -0500
Subject: [PATCH] feat: add loading state to button (#118)

---
 src/components/Button/PdapButton.vue                |  5 ++++-
 .../Button/__snapshots__/button.spec.ts.snap        |  9 ++++++++-
 src/components/Input/PdapInput.vue                  |  2 +-
 src/components/InputSelect/PdapInputSelect.vue      | 10 ++++++++--
 .../__snapshots__/quick-search-form.spec.ts.snap    |  7 ++++++-
 src/styles/base.css                                 | 11 +++++++++++
 src/styles/components.css                           | 13 ++++++++-----
 7 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/PdapButton.vue b/src/components/Button/PdapButton.vue
index 36ccd9c..ce76a61 100644
--- a/src/components/Button/PdapButton.vue
+++ b/src/components/Button/PdapButton.vue
@@ -1,12 +1,15 @@
 <template>
 	<button :class="classes">
-		<slot />
+		<slot v-if="!isLoading" />
+		<slot v-if="isLoading && $slots.loading" name="loading" />
+		<Spinner :show="isLoading && !$slots.loading" />
 	</button>
 </template>
 
 <script setup lang="ts">
 // Imports
 import { reactive } from 'vue';
+import { Spinner } from '../Spinner';
 
 // Types
 import { PdapButtonProps } from './types';
diff --git a/src/components/Button/__snapshots__/button.spec.ts.snap b/src/components/Button/__snapshots__/button.spec.ts.snap
index 0b20f47..e99c834 100644
--- a/src/components/Button/__snapshots__/button.spec.ts.snap
+++ b/src/components/Button/__snapshots__/button.spec.ts.snap
@@ -1,3 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Renders button component > Renders a button 1`] = `<button class="pdap-button pdap-button-primary">Button Content</button>`;
+exports[`Renders button component > Renders a button 1`] = `
+<button class="pdap-button pdap-button-primary">Button Content
+  <!--v-if-->
+  <transition-stub appear="true" css="true" persisted="false">
+    <!--v-if-->
+  </transition-stub>
+</button>
+`;
diff --git a/src/components/Input/PdapInput.vue b/src/components/Input/PdapInput.vue
index f4ff281..fa69bca 100644
--- a/src/components/Input/PdapInput.vue
+++ b/src/components/Input/PdapInput.vue
@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<PdapInputProps>(), {});
 const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 </script>
 
-<style>
+<style scoped>
 @tailwind components;
 
 @layer components {
diff --git a/src/components/InputSelect/PdapInputSelect.vue b/src/components/InputSelect/PdapInputSelect.vue
index 4c35ebc..c32c575 100644
--- a/src/components/InputSelect/PdapInputSelect.vue
+++ b/src/components/InputSelect/PdapInputSelect.vue
@@ -253,7 +253,7 @@ watch(
 
 @layer components {
 	.pdap-custom-select {
-		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border border-solid border-neutral-500 cursor-pointer;
+		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border-2 border-solid border-neutral-500 cursor-pointer text-lg rounded-md;
 	}
 
 	.pdap-custom-select-options {
@@ -261,7 +261,13 @@ watch(
 	}
 
 	.pdap-custom-select-option {
-		@apply text-neutral-950 dark:text-neutral-50 p-2 w-full max-w-full cursor-pointer;
+		@apply text-neutral-950 dark:text-neutral-50 p-2 w-full max-w-full cursor-pointer border-2 border-solid border-transparent;
+	}
+
+	.pdap-custom-select:focus,
+	.pdap-custom-select-option:hover,
+	.pdap-custom-select-option:focus {
+		@apply border-2 border-brand-gold-500 border-solid outline-none;
 	}
 
 	.pdap-custom-select-option:hover,
diff --git a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
index ee3186a..cfbdf07 100644
--- a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
+++ b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
@@ -27,7 +27,12 @@ exports[`QuickSearchForm component > Renders a QuickSearchForm 1`] = `
         <!--v-if-->
       </label>
     </div>
-    <button class="pdap-button pdap-button-primary flex-grow-0 flex-shrink-0 basis-full max-w-[unset] mt-4" type="submit">Search Data Sources</button>
+    <button class="pdap-button pdap-button-primary flex-grow-0 flex-shrink-0 basis-full max-w-[unset] mt-4" type="submit">Search Data Sources
+      <!--v-if-->
+      <transition-stub appear="true" css="true" persisted="false">
+        <!--v-if-->
+      </transition-stub>
+    </button>
   </form>
   <p class="max-w-[unset] text-med"> For example, you could search for <a> stops in Pittsburgh </a> or <a> complaints everywhere </a> . </p>
 </div>
diff --git a/src/styles/base.css b/src/styles/base.css
index 5da00ef..c3ebd96 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -137,4 +137,15 @@
 	pre code {
 		@apply block border-[1px] border-opacity-20 border-solid border-brand-wine max-w-full overflow-scroll p-5 text-left text-xl whitespace-pre;
 	}
+
+	*:focus,
+	*:focus-visible {
+		@apply border-2 border-brand-gold-500 border-solid outline-none;
+	}
+
+	button,
+	a,
+	[role="button"] {
+		@apply border-2 border-transparent border-solid outline-none;
+	}
 }
diff --git a/src/styles/components.css b/src/styles/components.css
index 137ff26..4137fd6 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -43,7 +43,7 @@
 
 	.pdap-input input,
 	.pdap-input textarea {
-		@apply dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)];
+		@apply dark:bg-neutral-950 border-neutral-500 border-solid border-2 px-3 py-2 text-[rgba(0,0,0)] rounded-md;
 	}
 
 	.pdap-input input::placeholder,
@@ -56,8 +56,9 @@
 	.pdap-input input:focus-visible,
 	.pdap-input textarea:focus,
 	.pdap-input textarea:focus-within,
-	.pdap-input textarea:focus-visible {
-		@apply border-2 border-blue-light border-solid outline-none;
+	.pdap-input textarea:focus-visible, 
+	.pdap-input-checkbox:has(input[type="checkbox"]:focus) {
+		@apply border-2 border-brand-gold-500 border-solid outline-none;
 	}
 
 	.pdap-input label {
@@ -92,10 +93,11 @@
 
 	/* Input - checkbox */
 	.pdap-input-checkbox {
-		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto;
+		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto rounded-md;
 	}
 
-	.pdap-input-checkbox:has(input:checked) {
+	.pdap-input-checkbox:has(input:checked),
+	.pdap-input-checkbox:has(input:checked):has(input[type="checkbox"]:focus) {
 		@apply border-2 border-brand-gold border-solid rounded-md;
 	}
 
@@ -112,6 +114,7 @@
 		@apply cursor-pointer;
 	}
 
+
 	/* Text area */
 	.pdap-input textarea {
 	  @apply text-lg;