+`;
+
+exports[`PdapSpinner > does not render spinner when show prop is false 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`PdapSpinner > renders spinner when show prop is true 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`PdapSpinner > renders text when text prop is provided 1`] = `
+
+
+
+
+
+
Loading...
+
+
+`;
diff --git a/src/components/Spinner/index.ts b/src/components/Spinner/index.ts
new file mode 100644
index 0000000..aa1f02b
--- /dev/null
+++ b/src/components/Spinner/index.ts
@@ -0,0 +1 @@
+export { default as Spinner } from './PdapSpinner.vue';
diff --git a/src/components/Spinner/spinner.spec.ts b/src/components/Spinner/spinner.spec.ts
new file mode 100644
index 0000000..5cede75
--- /dev/null
+++ b/src/components/Spinner/spinner.spec.ts
@@ -0,0 +1,60 @@
+import { shallowMount } from '@vue/test-utils';
+import PdapSpinner from './PdapSpinner.vue';
+
+import { describe, expect, it } from 'vitest';
+
+describe('PdapSpinner', () => {
+ it('renders spinner when show prop is true', () => {
+ const wrapper = shallowMount(PdapSpinner, {
+ props: {
+ show: true,
+ },
+ });
+
+ expect(wrapper.find('svg').exists()).toBe(true);
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('does not render spinner when show prop is false', () => {
+ const wrapper = shallowMount(PdapSpinner, {
+ props: {
+ show: false,
+ },
+ });
+
+ expect(wrapper.find('svg').exists()).toBe(false);
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('renders text when text prop is provided', () => {
+ const text = 'Loading...';
+ const wrapper = shallowMount(PdapSpinner, {
+ props: {
+ show: true,
+ text,
+ },
+ });
+
+ expect(wrapper.text()).toContain(text);
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('applies custom color and size', () => {
+ const color = 'red';
+ const size = 48;
+ const wrapper = shallowMount(PdapSpinner, {
+ props: {
+ show: true,
+ color,
+ size,
+ },
+ });
+ const svg = wrapper.find('svg');
+ expect(svg.attributes('width')).toBe(`${size}`);
+ expect(svg.attributes('height')).toBe(`${size}`);
+ expect(wrapper.find('path').attributes('stroke')).toBe(color);
+ expect(wrapper.find('path').attributes('fill')).toBe(color);
+
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});
diff --git a/src/components/Spinner/types.ts b/src/components/Spinner/types.ts
new file mode 100644
index 0000000..896fd23
--- /dev/null
+++ b/src/components/Spinner/types.ts
@@ -0,0 +1,6 @@
+export interface PdapSpinnerProps {
+ color?: string;
+ size?: number;
+ text?: string;
+ show: boolean;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 4d15c5f..14e16a2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,3 +9,4 @@ export { QuickSearchForm } from './QuickSearchForm';
export { TileIcon } from './TileIcon';
export { Dropdown } from './Dropdown';
export { Breadcrumbs } from './Breadcrumbs';
+export { Spinner } from './Spinner';
diff --git a/src/demo/pages/ComponentDemo.vue b/src/demo/pages/ComponentDemo.vue
index 3e4935d..e7deb6e 100644
--- a/src/demo/pages/ComponentDemo.vue
+++ b/src/demo/pages/ComponentDemo.vue
@@ -17,17 +17,61 @@
Breadcrumbs
Click to navigate:
- Home
- Foo
- FooBar
- FooBarBaz
+ Home
+ Foo
+ FooBar
+ FooBarBaz
+
Loading
+
+ The loading-shimmer class (which is just a wrapper around
+ the TailwindCSS animate-pulse class) can be applied to
+ anything.
+
+
+
Like this:
+
+
+
+
Or this:
+
+
+
+
+
+
Or this:
+
+
+
+
Or this:
+
+
+
+
Loading spinner:
+
+
+
+
+
+
+
+
+
+
+
Buttons
These are all contained within a grid container, defined by using the
@@ -37,25 +81,27 @@
Button primary
-
+
Button secondary
+ Secondary button
+
Button tertiary
+ Tertiary button
+
This is an unstyled button meant to take any styling (see the
clickable pills in current data sources search results)
@@ -76,8 +122,8 @@
}"
>
Press to toggle dropdown open/closed
+ >
+
+ >
+