feat: add loading state to button (#118)

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';

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>
+`;

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 {

src/components/InputSelect/PdapInputSelect.vue

@@ -253,15 +253,21 @@ 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 {
 		@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;
 	}
 
 	.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,

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>

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;
+	}
 }

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;